How to vary jekyll's `site.title` on different pages? - jekyll

I want to present a different site title in different parts of my site (identified by a path prefix). The ideal setup would look like:
_includes/header.html contains:
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
with the header being included in page and post templates, and
_config.yml contains:
defaults:
-
scope:
path: ""
values:
title: logophile
-
scope:
path: "blog"
values:
title: (b)logophile
This however writes an empty string into the generated html.
Alternatives I've tried:
In _config.yml use site.title: logophile / site.title: (b)logophile
In _config.yml define my_site_title: logophile etc and use {{ my_site_title }} in _includes/header.html

Your default title will only change page.title if it's not already set. So, this will not work.
You can set default like this :
defaults:
-
scope:
path: ""
values:
alternative_site_title: logophile
-
scope:
path: "blog"
values:
alternative_site_title: (b)logophile
And call this variable like this :
<a class="site-title" href="{{ site.baseurl }}/">
{{ page.alternative_site_title }}
</a>

Related

Can you create template pages in Jekyll?

I have the following 2 pages:
---
<!-- pages/apple.md -->
title: Apple Nutrition Info
permalink: /info/apple
---
{% assign fruit = site.data.info.apple %}
Carbs: {{fruit.carbs}}
Sugar: {{fruit.sugar}}
![Apple](/assets/images/apple.png)
---
<!-- pages/orange.md -->
title: Orange Nutrition Info
permalink: /info/orange
---
{% assign fruit = site.data.info.orange %}
Carbs: {{fruit.carbs}}
Sugar: {{fruit.sugar}}
![Orange](assets/images/orange.png)
Since the pages' content are almost identical, is it possible to template the entire page itself, and somehow pass data like "apple", "orange", "banana" to the page?
I would love to do something like this:
---
<!-- pages/info.md -->
title: {{args.fruit | capitalize}} Nutrition Info
permalink: /info/{{args.fruit}}
---
{% assign fruit = site.data.info.{{args.fruit}} %}
Carbs: {{fruit.carbs}}
Sugar: {{fruit.sugar}}
![{{args.fruit | capitalize}}](assets/images/{{args.fruit}}.png)
Is this possible?
A bypass is to use collections instead of pages+data. (The doc on collections offers an example about authors with names and positions, similar to your fruits with carbs and sugar.)
_config.yml:
# …… (title, domain, plugins, etc.)
collections:
fruits:
output: true
permalink: /fruits/:name/
defaults:
- scope:
path: ""
type: fruits
values:
layout: fruit
(Permalinks pattern for collections can be different from pages, see Permalinks | Jekyll Doc if necessary.)
_layouts/fruit.md:
---
layout: default
---
- Carbs: {{ page.carbs }}
- Sugar: {{ page.sugar }}
![{{ page.name | capitalize }}](assets/images/{{page.name}}.png)
_fruits/apple.md:
---
name: apple
carbs: ○○
sugar: □□
---

How to change Hugo-Coder avatar based on if dark mode is enabled?

Background of environment
I am currently building a site in Hugo using the theme Hugo-Coder
avatar.png is my current avatar specified in config.toml
Summary of issue
In config.toml you can enable dark mode by adding: colorscheme = "auto"
This enables dark mode, but my avatar does not show well because it is black
Solution needed
I need a way to change avatar.png to avatarDarkMode.png based on if the user's system is set to light or dark mode
Hopefully I added enough information!
Source code repo: GitHub Repo
You might consider a shortcode similar to the one used in onweru/newsroom:
Picture You want to use darkmode images when darkmode is enabled on a device and a regular image on lightmode? It takes 3 positional parameter
Store these images in the static/images directory.
...
{{< picture "lightModeImage.png" "darkModeImage.png" "Image alt text" >}}
...
It uses layouts/shortcodes/picture.html:
{{- $normal := .Get 0 }}
{{- $dark := .Get 1 }}
{{- $alt := .Get 2 }}
{{- $normalPath := absURL (printf "images/%s" $normal) }}
{{- $darkPath := absURL (printf "images/%s" $dark) }}
<picture class = 'nav_logo'>
<source srcset = '{{ $darkPath }}' media="(prefers-color-scheme: dark)">
<img srcset = '{{ $normalPath }}' alt = '{{ $alt }}'>
</picture>

Jekyll Collection Filter

I'm trying to grab a specific item from a collection called 'content' based on an id using where_exp, but for the life of me I can't get it to work. Here's the code:
filter:
{% assign var = site.content | where_exp:"content", "content.id == 'testId'" | first %}
frontmatter for post in collection:
---
layout: content
title: "This is the title"
image: "assets/photos/image.jpg"
id: "testId"
---
html:
<img class="full-width-poto" src="{{ var.image }}">
I can't figure out what I'm doing wrong.
Note, I've been referring to this post: Getting a specific item from a collection in Jekyll and https://riptutorial.com/jekyll/example/28446/accessing-a-specific-collection-item
Ok, I figured out my problem, just in case someone comes across this. For some reason I can't use the key 'id' for this...it must be hardcoded for something else.
I swapped in 'myid' and it works fine now...

Jekyll `site.posts` appearing empty after incorporating custom domain with Github page

I am building a simple static site as my personal website with Jekyll. I am using GitHub pages for hosting it (https://username.github.io). Recently I am trying to incorporate my custom domain with it and facing a problem.
For example, I have a page titled posts.html whose content is like this:
---
layout: page
title: Posts
permalink: posts
---
Some Text
<ul>
{% for post in site.posts %}
<li> List item </li>
{% endfor %}
</ul>
Previously everything was appearing as expected. But after incorporating custom domain no list item is appearing(even though everything is perfect when I run locally). I suppose site.posts is appearing empty. Any suggestion why is?
I have another page like following which loops through something other than site.posts. It is appearing perfect even after incorporating custom domain.
---
layout: page
title: Books I Have Read
permalink: read-books
---
Some text
<ul>
{% for book in site.data.read-books %}
<li>
<a href={{book.goodreads}}> {{book.title}} </a>;
{{book.author}} [{{book.date}}]
{% if book.comment %}
<br/>
(Opinion: {{book.comment}})
{% endif %}
</li>
{% endfor %}
</ul>
Format of my posts: YYYY-MM-DD-title.md
Name of posts directory: _posts
Local Jekyll version is: 3.7.0
_config.yml content:
Title: Md. Taufique Hussain
brieftitle: Taufique
baseUrl: ""
# Where things are
source: .
destination: ./_site
collections_dir: .
plugins_dir: _plugins
layouts_dir: _layouts
data_dir: _data
includes_dir: _includes
collections:
posts:
output: true
# Handling Reading
safe: false
include: [".htaccess"]
exclude: ["Gemfile", "Gemfile.lock", "node_modules", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"]
keep_files: [".git", ".svn"]
encoding: "utf-8"
markdown_ext: "markdown,mkdown,mkdn,mkd,md"
strict_front_matter: false
# Filtering Content
show_drafts: null
limit_posts: 0
future: false
unpublished: false
# Plugins
whitelist: []
plugins:
- jekyll-seo-tag
# Conversion
markdown: kramdown
highlighter: rouge
lsi: false
excerpt_separator: "\n\n"
incremental: false
# Serving
detach: false
port: 4000
host: 127.0.0.1
baseurl: "" # does not include hostname
show_dir_listing: false
# Outputting
permalink: date
paginate_path: /page:num
timezone: null
quiet: false
verbose: false
defaults: []
liquid:
error_mode: warn
# Markdown Processors
rdiscount:
extensions: []
redcarpet:
extensions: []
kramdown:
auto_ids: true
entity_output: as_char
toc_levels: 1..6
smart_quotes: lsquo,rsquo,ldquo,rdquo
input: GFM
hard_wrap: false
footnote_nr: 1
First is you want to locally test Jekyll in Github Pages configuration, your Gemfile must contain :
source "https://rubygems.org"
gem 'github-pages'
All plugins available on gh pages will be loaded, see complete list here.
This will allow you to reproduce gh pages error which comes from one of your config directive :
collections_dir: .
If you delete or comment this directive everything is back to normal.

Sorted Map Iteration in Go Templates?

I'm building a website in Go, using the Hugo static site generator. What I'm trying to do is build a dynamic navigation bar for my web pages.
Here's what I'm doing:
In my config.yml file, I've defined a Map of links that I'd like to appear in my navbar -- here's what this file looks like:
baseurl: "https://www.rdegges.com/"
languageCode: "en-us"
title: "Randall Degges"
params:
navLinks: {"Twitter": "https://twitter.com/rdegges", "Facebook": "https://www.facebook.com/rdegges", "Google+": "https://plus.google.com/109157194342162880262", "Github": "https://github.com/rdegges"}
So, I've also got an index.html template in Hugo that contains a navbar which looks like this:
<nav>
<ul>
{{ range sort $title, $link := .Site.Params.navLinks }}
<li>{{ $title }}</li>
{{ end }}
</ul>
</nav>
This above code works correctly, with one exception: I'd like to order the results of my links instead of having them randomly ordered each time.
I know that Maps are not inherently structured in Go -- but is there a way to retain the original ordering of my navigation elements in some way?
Thanks for the help!
Go templates sort maps by key. If you want to force a specific order, then use a slice:
Here's the YAML:
baseurl: "https://www.rdegges.com/"
languageCode: "en-us"
title: "Randall Degges"
params:
navLinks:
- title: Twitter
url: https://twitter.com/rdegges
- title: Facebook
url: https://www.facebook.com/rdegges
... and the template:
<nav>
<ul>
{{ range $link := .Site.Params.navLinks }}
<li>{{ $link.title }}</li>
{{ end }}
</ul>
</nav>