I'm trying to get Jekyll to reproduce this page and subpage structure:
_site
|---assets (global assets)
|---css
|---img
|---js
|---page-name
|---index.html
|---sub-page-name
|---index.html
|---assets (sub-page assets)
|---css
|---sub-page.css
|---img
|---js
dev structure looks like this:
assets
|---css
|---img
|---js
pages
|---page-name
|---index.html
|---sub-page-name
|---index.html
|---assets
|---css
|---sub-page.scss
|---img
|---js
but build turns out like this:
_site
|---assets
|---css
|---img
|---js
|---pages
|---sub-page-name
|---assets
|---css
|---sub-page.css
|---img
|---js
|---page-name
|---index.html
|---sub-page-name
|---index.html
In _config.yml I have:
sass:
sass_dir: assets/css
style: compressed
On each sub-page liquid header I have:
---
layout: default
group: page-name
subgroup: sub-page-name
title: Subpage Title
description: Description
permalink: page-name/sub-page-name/
class: body-class
assets:
css: assets/css/sub-page-name.css
---
Any help would be much appreciated.
Remove permalink and move page-name to the root level, like this:
.
├─── assets
| ├─── css
| ├─── img
| └─── js
└─── page-name
├─── index.html
└─── sub-page-name
├─── index.html
└─── assets
├─── css
| └─── sub-page.scss
├─── img
└─── js
Related
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}}
---
<!-- pages/orange.md -->
title: Orange Nutrition Info
permalink: /info/orange
---
{% assign fruit = site.data.info.orange %}
Carbs: {{fruit.carbs}}
Sugar: {{fruit.sugar}}
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}}
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 }}
_fruits/apple.md:
---
name: apple
carbs: ○○
sugar: □□
---
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.
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>
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>
How can I suppress the bullet points in front of the TOC items in the created HTML file? I want to see only the headline numbers...
Example Test.Rmd file:
---
title: "Untitled"
author: "Author"
date: "01/25/2015"
output:
html_document:
number_sections: true
toc: yes
toc_depth: 3
---
*Content*
# Headline 1
## Sub headline 1.1
## Sub headline 1.2
### Sub sub headline 1.2.1
# Headline 2
The TOC of the resulting HTML document will look like this (with the unwanted bullet points - here indicated via the * char):
Untitled
Author
01/25/2015
* 1 Headline 1
* 1.1 Sub headline 1.1
* 1.2 Sub headline 1.2
* 1.2.1 Sub sub headline 1.2.1
* 2 Headline 2
...
The reason for bullet points is the li tag that knitr uses with the default HTML template. The created HTML code looks like this:
<div id="TOC">
<ul>
<li><span class="toc-section-number">1</span> Headline 1<ul>
<li><span class="toc-section-number">1.1</span> Sub headline 1.1</li>
<li><span class="toc-section-number">1.2</span> Sub headline 1.2<ul>
<li><span class="toc-section-number">1.2.1</span> Sub sub headline 1.2.1</li>
</ul></li>
</ul></li>
<li><span class="toc-section-number">2</span> Headline 2</li>
</ul>
</div>
I read a little bit about CSS to suppress bullet points but I have no idea to solve this issue:
how to hide <li> bullets in navigation menu and footer links BUT show them for listing items
Put this in styles.css:
div#TOC li {
list-style:none;
background-image:none;
background-repeat:none;
background-position:0;
}
And then use this in the Rmd header YAML:
---
title: "Untitled"
author: "Author"
date: "01/25/2015"
output:
html_document:
css: styles.css
number_sections: true
toc: yes
toc_depth: 3
---
That will give you the #'s but no •'s. NOTE: styles.css and your Rmd file need to be in the same directory.
If you want to avoid having an additional (css) file besides the HTML file you can put the CSS code into your Rmd file directly:
---
title: "Untitled"
author: "Author"
date: "01/25/2015"
output:
html_document:
number_sections: yes
toc: yes
toc_depth: 3
---
<style type="text/css">
div#TOC li {
list-style:none;
background-image:none;
background-repeat:none;
background-position:0;
}
</style>
Your content starts here...