I'm using Jekyll to generate some static html pages. However I'd like to also generate the same layouts but with different variables. I for the life of me can't seem to articulate what I mean, so here's a basic example:
_config.yml
title: Foos and Bars
Generated index.html
<!DOCTYPE html>
<html>
<body>
<h1>Foos and Bars</h1>
</body>
</html>
And then I'd like to use the same base template (index.html) to generate more pages:
Generated index_2.html
<!DOCTYPE html>
<html>
<body>
<h1>Bars and Foos</h1>
</body>
</html>
Generated index_3.html
<!DOCTYPE html>
<html>
<body>
<h1>And Foos Bars</h1>
</body>
</html>
Do I need to create another _config.yml file and run it each time? It just seems too inefficient. Can all of these variables be stored in the same _config.yml? Is there a program/method that's much more efficient?
Let me know what and if I can clarify. Thanks for taking a look and any input you might offer.
If I understand your problem, your solution would be to use a YAML front matter in each of your pages where the dedicated "_config.yml variables" are declared.
Given you have a layout file page.html in the _layouts directory of your jekyll project like this:
<!DOCTYPE html>
<html>
<body>
<h1>{{ page.title }}</h1>
<p>{{ page.content }}</p>
</body>
</html>
You can then create a page -- let's call it index.html -- using this layout as follows:
---
layout: page
title: Foos and Bars
---
This is the text of my page
This will generate the following index.html in your _site directory:
<!DOCTYPE html>
<html>
<body>
<h1>Foos and Bars</h1>
<p>This is the text of my page</p>
</body>
</html>
This other page -- let's call it index_2.html:
---
layout: page
title: Bars and Foos
---
This is the other text of my other page
will generate index_2.html in your _site directory:
<!DOCTYPE html>
<html>
<body>
<h1>Bars and Foos</h1>
<p>This is the other text of my other page</p>
</body>
</html>
See official documentation.
Related
about.html
about/about.html
`
<!DOCTYPE html>
<html>
<head>
<title>My About Page</title>
</head>
<body>
<h1>About me</h1>
<p>bla bla</p>
<p>Back to Home</p>
</body>
</html>
**dayseven.html**
<!DOCTYPE html>
<html>
<head>
<title>Day Seven</title>
</head>
<body>
<p>Visit me at my website</p>
</body>
</html>
`
when i click on back home link in about.html file. It does't return on home page(dayseven.html), it shows file not found message and
url of page not found page is
http://localhost/practice_project4/about/dayseven.html
If you want dayseven.html to be your home page, you have to rename it to index.html. index.html is the default homepage file name on most systems. Alternatively, you could change the link in about.html to point to ../dayseven.html instead, but this would leave you without a homepage.
Also, your link does not work. You cannot post links to services on your local machine without a special setup, and especially not with a localhost URL.
I've created a new Jekyll page, including the appropriate YAML Front Matter info at the top. My problem is that the page is being rendered without any styles. Upon inspection I see the head tag is empty so the CSS isn't linking. I'm sure I'm missing something painfully obvious but I'm stumped. I see that the style sheet is linked to the index page, just not my new page and I don't know what I'm missing to include the head data that links to my style sheet. Here's what I have in my new page.
---
layout: default
title: New Site
---
<div>
<div>
<h2>
Our Sweet Test Page
</h2>
<section>
<article class="dope-page">
<h1>Test Headline</h1>
</article>
</section>
</div>
</div>
This is exactly what happens when your template is not loaded. Is there a default.html file in your _layouts directory with a link to the stylesheet?
In my point of view, Jekyll render the page alongside index.html using layout parameter and find the layout in the _layouts folder. In your case, you use layout: default so you should check the _layouts/default.html file.
The default.html file generated by jekyll new your_awesome_site should look like below:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
And the css files are in _includes/head.html.
I have a large quantity of HTML files can i use these and turn them into blog posts??
I am trying to work out a way to turn these into blog posts, and i am not sure if Jekyll is the right option.
Given your original post post-title.html is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>Intro</h2>
<p>Text here</p>
</body>
</html>
You just keep the content part :
<h2>Intro</h2>
<p>Text here</p>
Add a front matter to it :
---
layout: post
---
<h2>Intro</h2>
<p>Text here</p>
Rename it to 2014-12-21-post-title.html. And you're good to go ! Jekyll post can be markdown, but html too !
Note : the title (page.title) is here derived from the file name. If you want to use an elaborated title, you can add it in the front matter :
---
...
title: I'm a blogger, sometimes !!
---
Useful informations can be found in Jekyll documentation.
Editing a README.md for a git repository. But I want to embed raw HTML into the the readme. I'm using Markdown, which is an excellent tool. Yet, the code just keeps showing up as rendered HTML.
How do I keep it Raw?
And formatted like code?
Here it is if you're curious:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
</head>
<body>
<h1>Django Site</h1>
<hr />
<p>Thanks for visiting.</p>
</body>
</html>
The heck? It works here.
I suppose you are on GitHub.
GitHub only allows certain HTML elements and attributes inside their markdown: all others are stripped to prevent XSS and defacing.
And of course, <body> is one of the forbidden tags as it would make the HTML invalid if present (a body inside a body)
This is documented at: https://help.github.com/articles/github-flavored-markdown/#html
Use "`" This Sign To Use Raw Code Snippets
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome</title>
</head>
<body>
<h1>Django Site</h1>
<hr />
<p>Thanks for visiting.</p>
</body>
</html>
It Will Allow A User To Copy Your Code Directly From Your README.md File In Github By Just Pressing A Button !!!
I am working with a very big HTML file, which has a lot of content in the body section.
Are there any "compilers" or merging applications for HTML that can merge multiple HTML files?
Example:
a.htm
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
INCLUDE "b.htm"
<div>
INCLUDE "c.htm"
</div>
</body>
</html>
b.htm
some text
Link
INCLUDE "c.htm"
c.htm
more <span>text</span>
would be merged to:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
some text
Link
more <span>text</span>
<div>
more <span>text</span>
</div>
</body>
</html>
There are indeed – depending on your needs these offer drastically different mechanisms and tools.
One particular quite simple HTML compiler that is fashionable at the moment is Jekyll. Jekyll powers the blogging engine on GitHub Pages and is both easy to use and extensible.
In your case, you’d for instance write
{% include c.htm %}
instead of
INCLUDE "c.htm"
I decided to write htmlcat for exactly this purpose.