Using aside, I'm trying to show an edit icon to be clicked to call custom protocol with the title of the blog.
For example, when 2014-01-19-python-iteration-with-range.markdown is the markdown of the octopress blog, clicking the sidebar edit icon open://Users/doc/prg/source/_post/2014-01-19-python-iteration-with-range.markdown is invoked.
I modified _config.yml to have this line:
post_asides: [
asides/edit.html
]
I also put the edit.html as follows in the asides directory.
<section class="googleplus{% if site.googleplus_hidden %} googleplus-hidden{% endif %}">
<h1>
<a href="open:///Users/doc/prg/source/_posts/{{ ??? }}">
<img src="/images/self_edit.png" width="32" height="32">
Edit
</a>
</h1>
</section>
Following the hints in this site, I tried page.path, but nothing shows up.
What variable should be filled in ??? to get the file name of the post?
Or how can I know the markdown file name of the octopress post?
I thought about using {{ page.id }} and replacing / with - together with some string change can get the file path of markdown, but I don't know how to translate the name.
I got an answer from this site.
When page.path is not available, copy the following code into any rb file in plugin directory.
class PagePathGenerator < Generator
safe true
## See post.dir and post.base for directory information.
def generate(site)
site.posts.each do |post|
post.data['path'] = post.name
end
end
end
And I have the link correctly.
Related
I am building a hugo blog site and I have some front matter that I would like to get rendered in the layouts. When I view the results on my localhost:1313, I can see the front matter being populated, but when I host the site on Netlify, the front matter and partial files won't render.
I'm not sure what else to do. I've cleared the console of any errors, made sure my content files match the layout files etc.
Any help?
Here is the link to the live netlify site: https://stoic-meninsky-a5758a.netlify.app/
Here is my directory structure:
-content
-about
-_index.md
-blog
-_index.md
-post-1.md
-_index.md
-layouts
-_default
-baseOf.html
-about
-section.html
-blog
-section.html
-single.html
_index.html
This is a sample file that is pulled from one of my content markdown files:
---
title: "The Herman Show | Blog"
linktitle: "Blog"
draft: true
newsletter: "This is the newsletter"
---
This is how I call the front matter: <p>{{ .Params.newsletter }}</p>
This is how I loop over the section pages to get a navbar
{{ range .Site.Sections }}
<li>{{ .LinkTitle }}</li>
{{ end }}
Make sure your markdown files in the content directory are marked to: drafts:false
I wanna include some HTML file on post!
I wanna show a reference on the right side of my blog.
Reference is HTML file, and it looks like simple doc.
So I created the layout file jekyll.html and I wrote a tag <div>.
Then I added a header variable to my post and reference file is located on _layouts.
This is the code in jekyll.html:
<div class="right">
{% for ref in page.refs %}
{% include ref %}
{% endfor %}
</div>
And this code post's YAML header.
---
layout: jekyll
title: "02. "
date: 2018-12-30 14:38:42 +0900
category: Jekyll
refs: [ bundler.html, test.html ]
---
So, Liquid says:
Liquid Exception: Could not locate the included file 'ref' in any of ["E:/Projects/Jekyll/_includes"]. Ensure it exists in one of those directories and, if it is a symlink, does not point outside your site source. in /_layouts/jekyll.html
What's wrong? Did I do anything wrong?
Or is there another way?
If you want to use a liquid variable in an include tag, you must surround it with curly braces :
{% include {{ ref }} %}
This is my personal GH Pages site.
I have this set in my /_config.yml:
theme: jekyll-theme-cayman
title: iBug # GitHub
description: The small personal site for iBug
Now it shows a big title iBug # GitHub and a tagline on every page GH Pages generates. I want to set overrides for specific pages. I tried
---
title: Blog index
---
in /blog/index.html, but it doesn't work. It only changes the HTML title of the page (browser title bar), but not the "title" in the big block on the top of the page.
How do I set an override title for a single page?
Update: I have since submitted a pull request to change this in the theme, and the answer below is no longer necessary since it's already been applied when you use the theme as of now. All you need to do is to specify the title override in the front matter:
---
title: My custom title
---
To specify another title, you need to change the layout file.
Copy the default layout and place it in <GitHub repo>/_layouts/default.html, and change line 16 to this:
<h1 class="project-name">{{ page.title | default: site.title }}</h1>
Then Jekyll will respect the title set in the front matter, and place it there.
This is just the way this theme is implemented, if you check the default layout for Cayman theme on line 14 you can see what exact variable it is using.
<h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>
Hope that helps!
My approach is using javascript as follows.
<script>
document.getElementsByClassName("project-name").item(0).innerText = "{{ page.title }}";
</script>
You can write a html file in _includes dir and use {% include your_file.html %}.
I'm creating a website using Jekyll.
so far I have four pages which are created automatically from four md files which md files are in the root of the project.
index.md
about.md
login.md
register.md
Here is the content inside my login.md file
---
layout: layout-default
title: some login title
permalink: /login
theme: secondary-theme
nav:
menu-items:
- type: text
text: Don't have an account?
- type: link
text: SIGN UP
class: button
linkPath: /register
sections:
- type: 3
class: form-section
header-line-2: Login Section!
form:
api: http://127.0.0.1:8080/login
submit-text: LOG IN
form-controls:
- label-text: EMAIL ADDRESS
input-type: email
input-placeholder: Enter your email
input-name: email
- label-text: PASSWORD
label-link-text: Forgot password?
label-link-path: #
input-type: password
input-placeholder: Enter your password
input-name: password
---
What i do is iterating the sections and applying html attribute values depending on the variables inside each section. That way i can have as many sections rendered as i want on one page. And they can also be different depending on the classes and content i put in the md file.
The problem is that if the project gets too complicated with different styles for sections and so on. I would like to separate each section content. It would be nice if i could make a folder lets say login/sections folder
and then put md files inside and then inside login.md file include these section md files. This way the code would be much more organized.
Is there way to do that, and is my approach actually good.
Jekyll provides the ability to include files into another files. The magic directory for this is _includes. Example:
If you create a file named _includes/sections/s1.html, you can include that into any other file with the following tag:
{% include sections/s1.html %}
This approach works for:
including HTML file into HTML
including HTML file into Markdown (since Markdown can contain HTML code)
including Markdown into Markdown
If you want to include a Markdown file into a HTML, you have to use some trick:
{% capture m %}{% include sections/s1.md %}{% endcapture %}
{{ m | markdownify }}
I have built a website based on the Jekyll code for the website for Apache Buildr. The Buildr website automatically generates a table of contents for each page based on the headers in the textile format files.
For example, you write a page using textile marking out the headings like so . .
h2(#why). Why are we doing this?
BLah blah balh etc ..
h2(#something). Some other header
BLah blah balh etc ..
Then in the default HTML you have some code that pipes the content into something called toc and then you put the contents afterward. For example ...
<div id='content'>
<h1 id='{{ page.title | downcase | replace(' ', '_') }}'>{{ page.title }}</h1>
{{ content | toc }}
{{ content }}
</div>
On the Apache site they get the desired results (the toc is shown followed by the contents). However, on my site, the contents are rendered twice. No table of contents is generated.
Furthermore, if I clone the Apache Buildr project directly from github and run jekyll --server in the doc folder of that project, then no table of contents is generated either.
What am I missing?
I emailed the Buildr developer mailing list and someone told me to look here for inspiration. Turns out that the relevant code snippet is ...
module TocFilter
def toc(input)
output = "<ol class=\"toc\">"
input.scan(/<(h2)(?:>|\s+(.*?)>)([^<]*)<\/\1\s*>/mi).each do |entry|
id = (entry[1][/^id=(['"])(.*)\1$/, 2] rescue nil)
title = entry[2].gsub(/<(\w*).*?>(.*?)<\/\1\s*>/m, '\2').strip
if id
output << %{<li>#{title}</li>}
else
output << %{<li>#{title}</li>}
end
end
output << '</ol>'
output
end
end
Liquid::Template.register_filter(TocFilter)
Make a folder in the source folder of your site called _plugins and then paste this code into a file called TocFilter.rb within that folder.
It works!!
Where is toc defined? It isn't listed as one of the standard liquid filters or jekyll extensions, so likely you are missing a plugin.
I've used ghiculescu's JS TOC on my Jekyll powered Github blog. It works very well.
Example.
jekyll-toc plugin does this for you out of the box.
Add the following to your GemFile
gem 'jekyll-toc'
Add the following to your _config.yml
plugins:
- jekyll-toc
Add the following liquid tag where you want the TOC to be generated.
{{ content | toc_only }}
And finally set toc: true in your post's front-matter.
I added this value as a default in my _config.yml so that TOC is applied to all my posts by default.