I've created a default web _layout for my jekyll site. Liquid tags get processed as expected in the default.html which is great. In the excerpt below, the loop and post.url & post.title expand as expected. But I want to load the content into the with id="page-content-wrapper". The content that load in the div comes from pages/blog.html. If I put Liquid directives in that file, jekyll is not processing them, so the content that renders just show the literal "{{ content }}".
How do I get jekyll to process the liquid tags in the pages/blog.html?
OK, get it !
Your pages are not generated by jekyll, they are just copied as static files.
In order to generate your pages, your need to add a front matter to them.
page/home.html
---
layout: null
---
<div class="row-fluid">
<div class="row">
<div class="col-md-8">
<h1>Home Page</h1>
{{ site.name }}
<p>Content will go here</p>
</div>
<div class="col-md-4">
<h3>Sidebar</h3>
<p>Sidebar content goes here.</p>
</div>
</div>
</div>
This will generate the html fragment needed by your ajax call. Do this on every file in pages folder.
A little problem come with your permalink setup permalink: pretty. With this setup, pages/home.html becomes pages/home/index.html and your ajax call returns a 404 error.
You can set permalink: :title and it will work fine.
Related
I'd like to think that this is a fairly simple idea, however I have been struggling with it for a while now. The idea is this: I have a bunch of single blog pages. On the right of the content in these pages, I want to have a list of the five latest blog posts as a partial view.
In my HUGO project, I have a file structure setup like the following:
content
| |_ posts
| |_ _index.md
| |_ firstPost.md
| |_ secondPost.md
| |_ thirdPost.md
| |_ fourthPost.md
|
layout
|_ partials
|_ footer.html
|_ head.html
|_ navbar.html
|_ sidePosts.html
posts
|_ list.html
|_ single.html
index.html
My layout/posts/single.html page looks like the following:
<!DOCTYPE html>
<html>
{{partial "head.html"}}
{{partial "navbar.html"}}
<body>
<div class="container-fluid p-5">
<< Back To Posts
<div class="row">
<div class="col-lg-9">
<h1>{{.Title}}</h1>
<p class="text-black-50"><i>{{ dateFormat "Monday, Jan 2, 2006" .Date }}</i></p>
<hr>
{{ .Content }}
</div>
<div class="col-lg-3">
{{partial "sidePosts.html"}}
</div>
</div>
</div>
</body>
{{partial "footer.html"}}
</html>
And my layout/partial/sidePosts.html looks like this:
<div class="container-fluid d-flex flex-column align-items-center my-5 text-center">
<div class="row w-100">
{{ range (where .Site.RegularPages "Section" "in" "posts") }}
{{ .Title }}
{{ end }}
</div>
</div>
However, when I run this, I get this error:
error calling where: can’t iterate over <nil> failed to render pages
I've tried switching the types around, which where I'm looking, and different directories besides posts, but to no avail. I keep getting the same <nil> issue. I have a feeling it has something to do with the scope in which I'm searching; maybe theirs some global parameter I'm missing to gain access to the content of the project? I'm still new to HUGO so perhaps the answer is obvious, but I'm going to continue looking for a solution.
EDIT (Dec 27th, 2022):
I managed to get it working, just not in a partial view. What I did was just write what I wanted to do in the single template itself, instead of in a partial view. The code for layout/posts/single.html has been updated to:
<!DOCTYPE html>
<html>
{{partial "head.html"}}
{{partial "navbar.html"}}
<body>
<div class="container-fluid p-5">
<< Back To Posts
<div class="row">
<div class="col-lg-9">
<h1>{{.Title}}</h1>
<p class="text-black-50"><i>{{ dateFormat "Monday, Jan 2, 2006" .Date }}</i></p>
<hr>
{{ .Content }}
</div>
{{/* START OF UPDATE: Dec 27th, 2022 */}}
<div class="col-lg-3">
<h3 class="text-center text-black-50">Latest Posts</h3>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 d-flex flex-column align-items-center justify-content-center">
{{ range first 5 (where .Site.RegularPages "Section" "in" "posts") }}
{{ .Title }}
<p>{{ .Summary }}</p>
<hr>
{{ end }}
</div>
</div>
</div>
</div>
{{/* END OF UPDATE: Dec 27th, 2022 */}}
</div>
</div>
</body>
{{partial "footer.html"}}
</html>
This works fine for my layout/posts/single.html pages, but what if I wanted to have something like this in a different directory: say the layout/contacts/single.html pages? Would I have to copy and paste the same code into that singles template? That's where my idea of having it as a partial view comes in. I would like to have this code, but in a partial view for more modularization and to keep it dry. And whenever I try and do that, I get a error calling where: can’t iterate over <nil> failed to render pages error.
You need to pass the context to your partial for your script to work. This is why you got it to work in the template, but not in the partial.
{{ partial "sidePosts.html" }}
should be:
{{ partial "sidePosts.html" . }}
The "." ("the dot") represents the context in Hugo. If you add it, your partial should be able to iterate over .Site.RegularPages
See Partials Documentation here: https://gohugo.io/templates/partials/
And this section about "the dot":
https://gohugo.io/templates/introduction/#the-dot
I'm trying to use Kramdown's auto "Table of Contents" generator on a page (not a post) on my Jekyll site.
_includes/toc.html
<nav>
<h4>Table of Contents</h4>
{:toc}
</nav>
my_cool_stuff/my_cool_page.md
---
layout: page
---
{% include toc.html %}
# The title of my page
## The Subtitle of my page
The HTML is generated literally and I'm not getting a list of headers.
<nav>
<h4 class="toc_title">On This Page</h4>
{:toc}
</nav>
What am I setting up wrong?
{:toc} is kramdown tag for automatic Table of content generation.
In your case, you need two more things to make it work :
Allow kramdown to parse inside html blocks : in _config.yml add :
kramdown:
parse_block_html: true
in _includes/toc.html, you need to provide a seed list :
<nav>
<h4>Table of Contents</h4>
* this unordered seed list will be replaced by toc as unordered list
{:toc}
</nav>
I wanted to do something similar but was trying to avoid having any kind of markup in my post page, similar to your {% include toc.html %}.
I found this great Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter.
I want to introduce hash links to the headings of a page into the menu of a web page. The web page is generated with Jekyll and it's default layout looks as follows:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="BigFatContainer">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>
It is in the header that the menu for navigating to the different pages is located. I've been able to add a table of contents to the {{ content }} with the help of the following Kramdown command:
* Point at which the TOC is attached
{:toc}
One could use some ugly JavaScript hack to move this table of contents from the {{ content }} and into header.html but that'd be a bad solution. It's not possible to place the {:toc} macro inside header.html since that's not parsed by Kramdown, and even if you make sure that it's parsed by Kramdown using for example this plugin it outputs the TOC of header.md instead of the TOC for the content.
#miroslav-nedyalkov was on the right track here. Following his suggestion of looking at the Bootstrap documentation, I found that it uses a Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter. I'm now successfully using:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
I would suggest you to use the approach Bootstrap website (scroll down and observe the right navigation area) is using - make your TOC as part of the content area, but style it to be placed on the side like main navigation. The main reason I'm suggesting you this approach is that you may (and most probably will) have more than one page. In this case you will need to display different page navigation for every page and display some navigation between the pages.
For more information you may refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/
Why moving the toc block ?
This is correct to say that this toc is part of the page content. Semantically speaking.
You problem here is not at the document structure level but at the presentational one.
In this case the use of CSS is recommended to solve your problem.
I am setting up a simple CMS and I am using a Textarea (Froala to be exact) to render the HTML content of each page that's generated via database. The textarea can display the html with no problems. However, the blade template isn't executing. It's just in plain text. How can I make sure blade executes correctly? I need it mainly for links.
For an example. I have a form element written in blade:
{{ Form::text('name')}}
It should display like so on my page:
<input name="name" type="text">
However, it's just displaying like this:
{{ Form::text('name')}}
EDIT: here is my pages.blade.php file if they may help with figuring it out.
#extends('layouts.main')
#section('main_content')
<section class="mainContent">
<div class="row">
<h1 title="{{ $pages->title }}">{{ $pages->title }}</h1>
{{ $pages->body }}
</div>
</section>
#stop
There is no out-of-the-box way to do that. Blade templates are compiled only from files.
But you can take look at
Flynsarmy/laravel-db-blade-compiler if you want to compile Blade from Eloquent model
or
TerrePorter/StringBladeCompiler if you want to compile Blade from strings.
I've seen some posts saying you can only pass literal strings to Jekyll's front matter include statement like so:
{% include mypage.ext %}
However, I have the following HTML layout for pretty much every page:
<section id="feature">
<div class="container_12">
<div class="grid_12 alpha omega">
{% include myfile.ext %}
</div>
</div>
</section>
<section id="main">
<div class="container_12">
<div class="grid_12 alpha omega">
{{ content }}
</div>
</div>
</section>
This would be painful to have to include in every single page in order to achieve the layout I'm looking for. The included file would be relevant to the current page, so I was hoping someone knew of some kind of way to do this. Of course it'd be something along the lines of:
{% include {{page.file}} %}
I've seen some other posts saying this just can't happen though.
So, I just want to be able to dynamically load includes in Jekyll.
Edit: https://github.com/mojombo/jekyll/issues/176
This will be perhaps possible when that issue will be fixed with the pull request #1495 which propose exactly what you are looking for : {% include {{page.file}} %}
This is currently intentionally not possible, as the maintainers of Jekyll don't want the project to get too dynamic. You can read this comment & thread for a bit of background. The suggestion that qrush (the maintainer) gives is to use rails or sinatra. Probably not the answer you're looking for, but that's the current status.
If you want to use a plugin, there's one that will let you do this here