I would like to make a single-large-page with a menu on the side that links directly to sections inside this single page. Similar to the bootstrap manual pages.
I would like to write the page content in markdown. How can I make jekyll automatically create the navigation menu from the headers in the markdown page? I.e. loop/iterate over the headers to insert menu items?
I believe this can only be done with an extra plugin. Because you are running on GitHub pages, you can't use plugins.
This method is not automatic, but you achieve the same result.
_config.yml
nav:
- page: Header One
permalink: #header-one
- page: Header Two
permalink: #header-two
default.html
{% for n in site.nav %}
<li>{{ n.page }}</li>
{% endfor %}
Related
I may be searching the wrong terms but I can't seem to find an obvious way to make easy links to page section ids.
Lets say I have a _widgets.md file with a section id=section-1 so I want to generate a link to: /widgets/#section-1
I found this for links:
Jekyll link within page
So an same page link is as simple as [Section 1](#section-1) but I can't seem to find how to add the anchor to links from another page like this [Widgets - Section 1]({% link _docs/widgets.md%}).
You can use the capture tag, see jekyll or shopify
In HTML
{% capture link_with_anchor %}{% link _pages/links.md %}#foobar{% endcapture %}
Links
In Markdown
{% capture link_with_anchor %}{% link _pages/links.md %}#foobar{% endcapture %}
[Links]({{ link_with_anchor }})
You can benefit from the link features (check if page exists) and can add the anchor, e.g. foobar.
One cool way to manage links is to have a central include file that defines the links by name, which is then referenced by each document.
For example you have a file in the _includes directory called "links.md" which defines all the cross-document links in your site:
[Section 1]: {% link widgets/page.md %}#section1
[Section 2]: {% link widgets/page2.md %}#section2
etc
Then in your markdown you can just say:
This is a link to [Section 1] isn't that nice.
... other content
{% include links.md %}
I'm making a site using this theme: Github repo; theme demo.
The theme is built with the blog feed on the homepage (index.html). What I would like to do instead is:
make a static homepage (i.e. no blog feed on the homepage), and
have the blog feed live on a separate page called "Blog", with the link "/blog" or "/blog.html".
The code for the blog feed lives in _includes/blog.html and is included in the home layout using {% include blog.html %}.
What I've tried
changed the layout of index.html to a static layout like page, and created a new page in the root called blog.html with the layout home - this succeeded in creating a static homepage, but the blog page yields a home-like header but no blog feed (essentially a page with no content).
created a new page in the root called blog.html with the layout default, and pasted the content of the home layout (including {% include blog.html %}) into that page - this yielded the same result as above.
created a new layout called blog, which is a copy of the current home layout. I deleted the line {% include blog.html %} from the home layout. Then I gave index.html the home layout and created a new page in the root called blog.html with the layout blog. This yielded the same result as above.
In short, it seems like the blog feed isn't able to generate in any file other than index.html, and I haven't been able to figure out why. Is it something I'm missing in the theme's configuration? Apologies if this turns out to be a dumb question - I'm rather new to this. Thank you for any help you can give me!
EDIT: Turns out it was an issue with the paginator, which by default paginates from home.
The index.html uses the home layout:
---
layout: home
---
This lives in _layouts/home.html and contains a header and includes blog.html. It looks like this:
---
layout: default
---
<div class="home">
<div id="main" class="call-out"
style="background-image: url('{{ site.header_feature_image | relative_url }}')">
<h1> {{ site.header_text | default: "Change <code>header_text</code> in <code>_config.yml</code>"}} </h1>
</div>
{% include blog.html %}
</div>
The blog.html file loops over all (blog) posts:
<div class="posts">
{% for post in paginator.posts %}
...
To solve your issue, you need to define your own home page as an include like this:
Create your-custom-homepage.html with html of your choice.
Include it in home.html as {% include your-custom-homepage.html %} instead of {% include blog.html %}. Just replace the line in _layouts/home.html.
Then it will contain the header and your content.
The Jekyll documentation, e.g. https://jekyllrb.com/docs/step-by-step/04-layouts/ and https://jekyllrb.com/docs/includes/ will hopefully explain the details.
First day with Jekyll, I basically have the minima theme from Jekyll that I'm modifying trying to create a new site.
I have a home.html within _layouts. My goal is to place paragraphs within 3 individual columns, side-by-side. My understanding is that _layouts and _includes are mainly for formatting, at least that's how I look at them. I aware one can put a bunch of static text to display within these files, but it seems cleaner (and easier to edit) if the text to display were in something like a _pages folder. But of course doing so creates a new link in the header. So I am trying to find a way insert a markdown file which is just paragraphs of text that I can cleanly insert into my main home page, and only there.
How and where does one place markdown (paragraph sizes) for the sole purpose of inserting into layouts or includes, but not writing them directly into the layout or include, nor making it a post or a page, or using variables within _data. I was hoping to make a markdown file for smaller purposes than posts, pages, etc...
My _layouts/home.html looks as follows, but the markdown isn't showing up. IIRC, this is because includes can only access _includes, and I was hoping not to have to write this data within _includes or html's.
---
layout: default
---
<div class="home">
<div class="home-col-wrapper">
<div class="home-col home-col-1">
{% include front-col-1.md %}
</div>
</div>
<div class="home-col home-col-2">
{% include front-col-2.md %}
column 2
</div>
<div class="home-col home-col-3">
{% include front-col-3.md %}
column 3
</div>
</div>
I also tried putting an *.md file in _pages and changing the layout to home, but to no avail. The text didn't show up in the home layout.
---
layout: home
---
A bunch of stuff should probably go here. So be sure to make sure it looks ok. ok? ok!
I just did something similar. If I understand your question correctly, all you need to do is to replace {% include front-col-1.md %} by
{% capture temp %}{% include front-col-1.md %}{% endcapture %}
{{ temp | markdownify }}
What happens is that Liquid captures the markdown file in the variable temp, and then markdownify converts it into HTML and adds it.
I don't think you can put the markdown files elsewhere, but they need to be in _includes.
Related: https://github.com/jekyll/jekyll-help/issues/51
I am working on a project using Jekyll. Looking online, it seems that it is possible to use liquid tags in a markdown file. For some reason, the liquid tags are not working in my markdown files. I want to use the liquid "capture" tag to store text in a variable and then output that variable in the layout.html file. I have listed the related code below.
page.md:
---
page: approach
layout: layout
---
{% capture Focus_content %}
Focus devices are awesome.
{% endcapture %}
Layout.html:
<!-- layout.html file -->
<div class="panel">
<div class="content-container panel-wrapper">
{{Focus_content}}
</div><!--end content container-->
</div><!--end panel-->
I know that Jekyll supports liquid templates. Does anyone know why when I define the variable in my markdown file, it does not output anything on the webpage when I include it in the html file?
No way to do this. Inside a layout, the only things you get from your pages, posts and collections are the content, site and page variables.
A capture made in a page, post or collection is not bubbling up to the layout.
Link to repo: https://github.com/AlvSovereign/AlvSovereign.github.io
I am coding my portfolio site, with a link to my blog. The fully processed portfolio site sits in _site/index.html which contains a link to the blog (fully processed link exists in _site/blog.html)
Blog.html at the root of the repo has in the front matter a layout of "bl", which is defined in my layouts folder under "bl.html".
"bl.html" is the layout I want for my blog page, which contains my includes etc. It also contains the {{ content }} liquid tag.
If I am thinking about this the right way, my posts are being parsed (I think this is the right terminology) into "post.html" - which has the front matter "layout: bl", which then parsed into "bl.html", and that this is so as they both have {{ content }} in each files.
Now all my posts are showing correctly (i think) within _site/(year)/(month) etc. However, they are not ending being parsed through my "blog.html" file, and then visible on my webpage. How I know this is that the fully processed "blog.html" file does not have any of the posts in them.
What will I need to do to solve this issue?
If it helps, I use Prepros for LiveReload, and using LANYON template, http://lanyon.getpoole.com/
{{ content }} refers to all the content that in the file that is being converted to HTML code.
For example, if you are passing a blog post on 'What is Jekyll' to any layout that has the {{ content }} tag, all text other than the YAML front matter will be put in that place. Basically the content of the post. You can also limit the scope by using {{ post.content }}, see Variables for more info here.
So the Liquid {{ content }} variable works as intended.
Looking at your website, I believe you're trying to display all the posts in your blog.html file, so what you're actually asking about is why aren't my posts being displayed (not parsed) in your blog.html file, hence not visible on your webpage.
The reason for that is because you shouldn't use {{ content }} tag for that, what you want instead is something like this snippet of code as mentioned in the Jekyll docs, that will grab all your posts, and display them by post title, as well as a link to that post. Here's the code to display a list of your posts. (taken from the website I linked you)
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>
So just swap out {{ content }} in your bl.html layout with that code snippet and you've got what you want.
Additionally, if you also want to display the content/excerpt in the list of posts, just add the liquid tag {{ post.content }} or {{post.excerpt}} like so:
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
{{ post.content }} /* or post.excerpt */
</li>
{% endfor %}
</ul>
Of course, edit the HTML accordingly for your preference. Read the documentation on how to set up post excerpts here, which uses the <!--more--> comment separator for excerpts.
I strongly recommend reading the JekyllRb documentation for more information, it's a lot to read and not always easily understandable, but keep referring to it and you'll understand more in no time.