Popular New Releases in Jekyll
jekyll
v3.9.2
eleventy
Eleventy v1.0.1: It’s Elementary
umami
v1.30.0
minimal-mistakes
4.24.0
wowchemy-hugo-themes
v5.3.0
Popular Libraries in Jekyll
by jekyll 
ruby
44432 MIT
:globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby
by 11ty javascript
11833 MIT
A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.
by keen html
10885 MIT
Responsive dashboard templates 📊✨
by mikecao javascript
10334 MIT
Umami is a simple, fast, privacy-focused alternative to Google Analytics.
by imathis ruby
9392
Octopress is an obsessively designed framework for Jekyll blogging. It’s easy to configure and easy to deploy. Sweet huh?
by mmistakes html
8571 MIT
:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.
by barryclark css
7466 MIT
Build a Jekyll blog in minutes, without touching the command line.
by ubuwaits html
7082 MIT
In-depth guide to the best open-source typefaces: https://beautifulwebtype.com
by middleman ruby
6841 MIT
Hand-crafted frontend development
Trending New libraries in Jekyll
by mikecao javascript
10334 MIT
Umami is a simple, fast, privacy-focused alternative to Google Analytics.
by bridgetownrb ruby
655 MIT
A next-generation progressive site generator & fullstack framework, powered by Ruby
by CONNECT-platform typescript
351 MIT
Create beautiful modern documentation websites.
by Privoce javascript
331 NOASSERTION
Portal网页版（中文版）
by binx javascript
293 GPL-3.0
🎷🐋 Build your own ecommerce site! https://belugajs.com
by solidjs typescript
293 MIT
SolidStart is Solid's official starter
by ronv html
291 MIT
Sidey is a simple and minimalistic jekyll blogging theme.
by verless go
289 Apache-2.0
A simple and lightweight Static Site Generator
by krasimir javascript
277 MIT
A small library that offers GitHub issues as comments for your site/blog
Top Authors in Jekyll
1
32 Libraries
53452
2
28 Libraries
2469
3
25 Libraries
1914
4
24 Libraries
692
5
20 Libraries
1380
6
18 Libraries
2467
7
16 Libraries
1026
8
14 Libraries
1770
9
13 Libraries
79
10
12 Libraries
498
1
32 Libraries
53452
2
28 Libraries
2469
3
25 Libraries
1914
4
24 Libraries
692
5
20 Libraries
1380
6
18 Libraries
2467
7
16 Libraries
1026
8
14 Libraries
1770
9
13 Libraries
79
10
12 Libraries
498
Trending Kits in Jekyll
No Trending Kits are available at this moment for Jekyll
Trending Discussions on Jekyll
Load stylesheet with javascript and localStorage
Jekyll + NetlifyCMS collection widget
jekyll theme - how can i bypass this color setting
Jekyll Serve command not working - Errors include MissingDependencyException and MissingSpecError
Page on github wont publish (error 404 not found)
Jekyll blog posts not showing up on github pages
Access specific data from CSV file in Jekyll
Does minima dark skin work on github pages?
How can I pass a variable to a jekyll layout?
Put two Highcharts Charts Side by Side on a Jekyll Blog (beautiful-jekyll)
QUESTION
Load stylesheet with javascript and localStorage
Asked 2022-Mar-30 at 22:43I'm using a Jekyll website, doesn't really matter because this is a static page, I just write it as additional info.
Desired behavior:
I want to load my stylesheet via javascript, so it can depend of a local stored value, let's say dark and light.
I have done a little test of loading it by JS with the following code (which works).
GREEN
1<head>
2 ...
3 <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
4 ...
5</head>
6This loads the CSS file called "light" as expected.
But now I want to depend of the localStorage, with a variable theme that has light as value. I tried the following:
RED
1<head>
2 ...
3 <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
4 ...
5</head>
6<head>
7 ...
8 <script>
9 var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
10 theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
11 </script>
12
13 <link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
14 ...
15</head>
16Using global variables doesn't work, it gives me a 404 error as the stylesheet path is /assets/css/.css.
After that I thought that maybe creating an element would do the trick and I created one manually to test it:
RED
1<head>
2 ...
3 <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
4 ...
5</head>
6<head>
7 ...
8 <script>
9 var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
10 theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
11 </script>
12
13 <link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
14 ...
15</head>
16<head>
17...
18<p id="theme" style="display:none;">dark</p>
19
20<link rel="stylesheet" href="/assets/css/{{document.getElementById('theme').innerHTML}}.css">
21...
22</head>
23And nope, the path still appears as: /assets/css/.css
ANSWER
Answered 2022-Mar-30 at 22:43If you change styles on the <body> you get FOUC (Flash Of Unstyled Content). Try using a close equivalent like <main> and spread it 100% x 100% and <html> and <body> as well, but give them margin and padding of 0 in order to ensure <main> covers them completely.
The [disabled] attribute for the <link> is the best way of toggling them because they are still loaded but inert. Also, in the example there is a function called loadTheme(e) that is loaded on the 'DOMContentLoaded' event which insures that all of the DOM is loaded before hand. The example below will not work because localStorage is blocked on SO. There is a functioning example on Plunker. To test it:
- Click the green Preview button.
- Another frame should appear on the right. Within the frame is the webpage example click the ☀️ button.
- It should be in dark mode now. Next, click the refresh ⟳ button located in the mini-toolbar within the frame or press ctrl+enter for Windows OS or ⌥+return for Mac OS.
- The page should still be in dark mode. 👍
1<head>
2 ...
3 <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
4 ...
5</head>
6<head>
7 ...
8 <script>
9 var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
10 theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
11 </script>
12
13 <link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
14 ...
15</head>
16<head>
17...
18<p id="theme" style="display:none;">dark</p>
19
20<link rel="stylesheet" href="/assets/css/{{document.getElementById('theme').innerHTML}}.css">
21...
22</head>
23/* night.css
24main {
25 background: #000;
26 color: #fff;
27}
28*/
29
30/* default.css */
31:root {
32 height: 100%;
33 width: 100%;
34 margin: 0;
35 padding: 0;
36 font: 1ch/1.5 'Segoe UI';
37}
38
39body {
40 height: 100%;
41 width: 100%;
42 margin: 0;
43 padding: 0;
44 font-size: 4ch;
45}
46
47main {
48 height: 100%;
49 width: 100%;
50 display: flex;
51 align-items: center;
52 justify-content: center;
53 background: #fff;
54 color: #000;
55}
56
57form {
58 width: 80vw;
59 margin: 20px auto;
60}
61
62fieldset {
63 width: max-content;
64 min-height: 25px;
65 margin-left: auto;
66 padding: 0 1.5px 1.5px;
67 border-radius: 8px;
68 background: inherit;
69 color: inherit;
70}
71
72button {
73 display: block;
74 width: 100%;
75 height: 100%;
76 border: 0;
77 font-size: 4rem;
78 text-align: center;
79 background: transparent;
80 cursor: pointer;
81}
82
83#theme::before {
84 content: '☀️';
85}
86
87.night #theme::before {
88 content: '🌙';
89}1<head>
2 ...
3 <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
4 ...
5</head>
6<head>
7 ...
8 <script>
9 var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
10 theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
11 </script>
12
13 <link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
14 ...
15</head>
16<head>
17...
18<p id="theme" style="display:none;">dark</p>
19
20<link rel="stylesheet" href="/assets/css/{{document.getElementById('theme').innerHTML}}.css">
21...
22</head>
23/* night.css
24main {
25 background: #000;
26 color: #fff;
27}
28*/
29
30/* default.css */
31:root {
32 height: 100%;
33 width: 100%;
34 margin: 0;
35 padding: 0;
36 font: 1ch/1.5 'Segoe UI';
37}
38
39body {
40 height: 100%;
41 width: 100%;
42 margin: 0;
43 padding: 0;
44 font-size: 4ch;
45}
46
47main {
48 height: 100%;
49 width: 100%;
50 display: flex;
51 align-items: center;
52 justify-content: center;
53 background: #fff;
54 color: #000;
55}
56
57form {
58 width: 80vw;
59 margin: 20px auto;
60}
61
62fieldset {
63 width: max-content;
64 min-height: 25px;
65 margin-left: auto;
66 padding: 0 1.5px 1.5px;
67 border-radius: 8px;
68 background: inherit;
69 color: inherit;
70}
71
72button {
73 display: block;
74 width: 100%;
75 height: 100%;
76 border: 0;
77 font-size: 4rem;
78 text-align: center;
79 background: transparent;
80 cursor: pointer;
81}
82
83#theme::before {
84 content: '☀️';
85}
86
87.night #theme::before {
88 content: '🌙';
89}<!DOCTYPE html>
90<html>
91
92<head>
93 <meta charset='utf-8'>
94 <meta name="viewport" content="width=device-width, initial-scale=1">
95 <link href='lib/default.css' rel='stylesheet'>
96 <link class='night' href='lib/night.css' rel='stylesheet' disabled>
97 <style></style>
98</head>
99
100<body>
101 <main>
102 <form id='UI'>
103 <fieldset name='box'>
104 <legend>Theme</legend>
105 <button id='theme' type='button'></button>
106 </fieldset>
107 <p>Click the "Theme" switch to toggle between `disabled` `true` and `false` on `night.css` and `light.css` `
108 <link>`s.</p>
109 </form>
110 </main>
111 <script>
112 const UI = document.forms.UI;
113 const M = document.querySelector('main');
114 const L = document.querySelector('.night')
115
116 const switchTheme = e => {
117 const clk = e.target;
118 if (clk.matches('button')) {
119 M.classList.toggle('night');
120 L.toggleAttribute('disabled');
121 }
122 let status = M.className === 'night' ? 'on' : 'off';
123 localStorage.setItem('theme', status);
124 };
125
126 const loadTheme = e => {
127 let cfg = localStorage.getItem('theme');
128 if (cfg === 'on') {
129 M.classList.add('night');
130 L.removeAttribute('disabled');
131 } else {
132 M.classList.remove('night');
133 L.setAttribute('disabled', true);
134 }
135 };
136
137 UI.addEventListener('click', switchTheme);
138 document.addEventListener('DOMContentLoaded', loadTheme);
139 </script>
140</body>
141
142</html>QUESTION
Jekyll + NetlifyCMS collection widget
Asked 2022-Mar-30 at 19:36I have a problem with Jekyll + NetlifyCMS. I want to create relation widget. I cannot search my author in relation widget with code below. What am I doing wrong?
1#config.yml
2collections:
3 authors:
4 output: true
51#config.yml
2collections:
3 authors:
4 output: true
5#_authors/jill.md
6---
7short_name: jill
8name: Jill Smith
9position: Chief Editor
10---
11Lorem ipsum
121#config.yml
2collections:
3 authors:
4 output: true
5#_authors/jill.md
6---
7short_name: jill
8name: Jill Smith
9position: Chief Editor
10---
11Lorem ipsum
12#admin/config.yml
13- name: "pages"
14 label: "Pages"
15 files:
16 - label: 'Homepage'
17 name: 'homepage'
18 file: 'pages/homepage.md'
19 fields:
20 - label: "Choose author"
21 name: "author"
22 widget: "relation"
23 collection: "authors"
24 value_field: "short_name"
25 search_fields: ["name", "short_name"]
26
27ANSWER
Answered 2022-Mar-30 at 19:36I ran into the exact same issue, I'll need to figure more out about how this actually works and how to better reference Jekyll page variables within Netlify CMS, but I got a working solution for my use case that I'll adapt to yours.
First, add the display_fields object so that the user can see which author they are choosing. This might have been your issue as the docs outline it's a required property. I changed the value field to {{slug}} as we'll see it will be a foolproof method to reference the field later on. Also, I added authors to the CMS config as I had the collection I was referencing in the relation field. I'm not sure it that does the trick as well, but hey it can't hurt:
1#config.yml
2collections:
3 authors:
4 output: true
5#_authors/jill.md
6---
7short_name: jill
8name: Jill Smith
9position: Chief Editor
10---
11Lorem ipsum
12#admin/config.yml
13- name: "pages"
14 label: "Pages"
15 files:
16 - label: 'Homepage'
17 name: 'homepage'
18 file: 'pages/homepage.md'
19 fields:
20 - label: "Choose author"
21 name: "author"
22 widget: "relation"
23 collection: "authors"
24 value_field: "short_name"
25 search_fields: ["name", "short_name"]
26
27#admin/config.yml
28- name: "authors"
29 create: true
30 folder: "_authors/"
31 fields:
32 - label: 'Title'
33 name: 'title'
34 widget: 'string'
35 - label: 'Position'
36 name: 'position'
37 widget: 'string'
38- name: "pages"
39 label: "Pages"
40 files:
41 - label: 'Homepage'
42 name: 'homepage'
43 file: 'pages/homepage.md'
44 fields:
45 - label: "Choose author"
46 name: "author"
47 widget: "relation"
48 collection: "authors"
49 value_field: "{{slug}}"
50 search_fields: ["name", "short_name"]
51 display_fields: ["name"]
52You're fine to keep short_name as the value field that will commit to the homepage author property, but I'll show you an easier way for your content editors to add authors and apply them to the pages with the slug property. You can customize the slug or just let Jekyll create it by default. I haven't figured out how to access any of the page variables via Netlify without defining them first in the Netlify CMS, but slug works as the file name of the collection item when it is created and I can reference it natively through the CMS config.
1#config.yml
2collections:
3 authors:
4 output: true
5#_authors/jill.md
6---
7short_name: jill
8name: Jill Smith
9position: Chief Editor
10---
11Lorem ipsum
12#admin/config.yml
13- name: "pages"
14 label: "Pages"
15 files:
16 - label: 'Homepage'
17 name: 'homepage'
18 file: 'pages/homepage.md'
19 fields:
20 - label: "Choose author"
21 name: "author"
22 widget: "relation"
23 collection: "authors"
24 value_field: "short_name"
25 search_fields: ["name", "short_name"]
26
27#admin/config.yml
28- name: "authors"
29 create: true
30 folder: "_authors/"
31 fields:
32 - label: 'Title'
33 name: 'title'
34 widget: 'string'
35 - label: 'Position'
36 name: 'position'
37 widget: 'string'
38- name: "pages"
39 label: "Pages"
40 files:
41 - label: 'Homepage'
42 name: 'homepage'
43 file: 'pages/homepage.md'
44 fields:
45 - label: "Choose author"
46 name: "author"
47 widget: "relation"
48 collection: "authors"
49 value_field: "{{slug}}"
50 search_fields: ["name", "short_name"]
51 display_fields: ["name"]
52#layouts/home.html
53---
54title: Home
55author: jill
56---
57<div class="author">
58{%- capture author-id -%}_authors/{{page.author}}.md{%- endcapture -%}
59{% assign author = site.authors | where: 'path', author-id | first %}
60{{ author.name }}
61</div>
62
63Note: the wee minus symbols are to strip any whitespace as captures are wan to do if you make them multiline. I just added them for safety. If you want to see how I reference fields from collections within other pages, you can read my guide on it.
QUESTION
jekyll theme - how can i bypass this color setting
Asked 2022-Mar-07 at 20:56Im editing this jekyll theme with github pages and im trying to add buymeacoffee generated button in menu bar. It works but for some reason it gets the theme colors, i tried to debug it hours now but it didn't work.
The button should look like this:
https://i.imgur.com/RSYrOx6.png
But now:
https://i.imgur.com/KzwqCml.png
I added it in _includes/navbar.html in the end of the file. I tried to placed it in other files too, outside divs inside divs with custom css classes nothing worked.
Looks like it gets a "general" color, i tried to find this setting but i couldn't, can any of you help me to figure it out? thank you!
ANSWER
Answered 2022-Mar-07 at 20:56you can selector level of custom css in _dark.scss. Example, you can change with this.
1body[data-theme="dark"] .bmc-btn-container > a.bmc-btn:hover {
2 color: black;
3}
4QUESTION
Jekyll Serve command not working - Errors include MissingDependencyException and MissingSpecError
Asked 2022-Feb-10 at 04:04As the title above says, I'm trying to build a site on localhost with jekyll serve but I keep getting several errors.
I've done all the steps described here to build my site, but nothing seems to work. I've tried several troubleshooting sources I found online, as well.
Also, the directory I'm trying to build with is a local GitHub repository.
Any suggestions on what I should do?
ANSWER
Answered 2022-Feb-10 at 04:04Nvm, I fixed it.
I ended up deleting my local repository and cloning it remotely from GitHub. That didn't solve it immediately, but the Gemfile on my local repository was from before I started having issues.
After that, I then kept getting an error where the version of Jekyll was incompatible with building GitHub pages. This page had the answer I needed - which was just changing the version number for gem "jekyll" in the Gemfile for the directory.
Finally, I ran a bundle exec jekyll serve and I got my localhost to run!
QUESTION
Page on github wont publish (error 404 not found)
Asked 2022-Jan-24 at 07:41My page wont go live when i try to publish it on github: https://starzje.github.io/NFT-card/
in "pages build and deployment", im both getting errors on deploy and built parts on github.
My file is just normal index.html and style.css, nothing else in it (just a folder with few imgs).
I did install sass and used bootstrap on a project before this (but there is no scss in this project).
github errors:
1**DEPLOY ERROR**
2Error: Error: No uploaded artifact was found! Please check if there are any errors at build step.
3Error: Error: No uploaded artifact was found! Please check if there are any errors at build step.```
4
5
6**BUILD ERROR:**
7
8Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
9 No such file or directory @ dir_chdir - /github/workspace/docs
10ANSWER
Answered 2022-Jan-24 at 07:41As mentioned in 2019, try and add a .nojekyll file at the root of your NFT-card repository.
That should allow you to bypass Jekyll completely: it would not try to apply a jekyll/minima theme at all.
QUESTION
Jekyll blog posts not showing up on github pages
Asked 2022-Jan-23 at 16:57I've used Jekyll to build my website and it works as intended locally. However, when I deploy my website to github pages, the blog posts no longer show up.
I have consulted a previous question: Jekyll post not generated, but it did not solve my problems.
When I do bundle exec jekyll serve locally, i get the following message
1 Incremental build: disabled. Enable with --incremental
2 Generating...
3 Jekyll Feed: Generating feed for posts
4 AutoPages: Disabled/Not configured in site.config.
5 Pagination: Complete, processed 1 pagination page(s)
6 done in 6.303 seconds.
7which seem to indicate that everything is working ok. What is the problem?
ANSWER
Answered 2022-Jan-23 at 16:57If everything is right you will have a message with an information that your server is running afaik.
For example this is my message (note last line):
1 Incremental build: disabled. Enable with --incremental
2 Generating...
3 Jekyll Feed: Generating feed for posts
4 AutoPages: Disabled/Not configured in site.config.
5 Pagination: Complete, processed 1 pagination page(s)
6 done in 6.303 seconds.
7$ bundle exec jekyll serve
8Configuration file: /Users/alexfreik/Documents/GitHub/ltc-webpage/_config.yml
9 Source: /Users/alexfreik/Documents/GitHub/ltc-webpage
10 Destination: /Users/alexfreik/Documents/GitHub/ltc-webpage/_site
11 Incremental build: disabled. Enable with --incremental
12 Generating...
13 Jekyll Feed: Generating feed for posts
14 done in 0.94 seconds.
15 Auto-regeneration: enabled for '/Users/alexfreik/Documents/GitHub/ltc-webpage'
16 Server address: http://127.0.0.1:4000/
17 Server running... press ctrl-c to stop.
18Do you have this information?
EDIT: The problem was in the incorrectly set pagination.
QUESTION
Access specific data from CSV file in Jekyll
Asked 2022-Jan-20 at 17:31I wish to access/query specific data from a CSV file in Jekyll (liquid). My CSV file has the name planets.csv and it's like this:
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4Let's say I want to get the mean diameter of Mercury. I'm trying this examples:
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6Since my data is like a table, I'm not sure how to handle it. I even tried splitting the data planet by planet into YML files (i.e., Mercury.yml):
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8 satellites: 0
9 diameter: 0.38
10So this syntax should work...
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8 satellites: 0
9 diameter: 0.38
10{{ site.data.Mercury.diameter }}
11ANSWER
Answered 2022-Jan-20 at 17:311name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8 satellites: 0
9 diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Would work on a dictionary:
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8 satellites: 0
9 diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13 satellites: 0
14 diameter: 0.38
15And this is probably the best way to query the data as you need it.
So, you would have the YAML:
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8 satellites: 0
9 diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13 satellites: 0
14 diameter: 0.38
15Mercuy:
16 satellites: 0
17 diameter: 0.38
18Venus:
19 satellites: 0
20 diameter: 0.95
21Earth:
22 satellites: 1
23 diameter: 1.00
24Mars:
25 satellites: 2
26 diameter: 0.53
27And if you want to keep this in a CSV, what you could do is:
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8 satellites: 0
9 diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13 satellites: 0
14 diameter: 0.38
15Mercuy:
16 satellites: 0
17 diameter: 0.38
18Venus:
19 satellites: 0
20 diameter: 0.95
21Earth:
22 satellites: 1
23 diameter: 1.00
24Mars:
25 satellites: 2
26 diameter: 0.53
27name, satellites, diameter
28Mercury, 0, 0.38
29Venus, 0, 0.95
30Earth, 1, 1.00
31Mars, 2, 0.53
32And then, use a where filter:
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8 satellites: 0
9 diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13 satellites: 0
14 diameter: 0.38
15Mercuy:
16 satellites: 0
17 diameter: 0.38
18Venus:
19 satellites: 0
20 diameter: 0.95
21Earth:
22 satellites: 1
23 diameter: 1.00
24Mars:
25 satellites: 2
26 diameter: 0.53
27name, satellites, diameter
28Mercury, 0, 0.38
29Venus, 0, 0.95
30Earth, 1, 1.00
31Mars, 2, 0.53
32{{ (site.data.planets | where:"name","Mercury")["diameter"] }}
33Now, for the sake of completeness, if you want to access Mercury data on:
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8 satellites: 0
9 diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13 satellites: 0
14 diameter: 0.38
15Mercuy:
16 satellites: 0
17 diameter: 0.38
18Venus:
19 satellites: 0
20 diameter: 0.95
21Earth:
22 satellites: 1
23 diameter: 1.00
24Mars:
25 satellites: 2
26 diameter: 0.53
27name, satellites, diameter
28Mercury, 0, 0.38
29Venus, 0, 0.95
30Earth, 1, 1.00
31Mars, 2, 0.53
32{{ (site.data.planets | where:"name","Mercury")["diameter"] }}
33- name: Mercury
34 satellites: 0
35 diameter: 0.38
36You would need to access it via:
1name, Mercuy, Venus, Earth, Mars
2satellites, 0, 0, 1, 2
3diameter, 0.38, 0.95, 1.00, 0.53
4{{ site.data.planets.diameter[1] }}
5{{ site.data.planets.diameter['Mercury'] }}
6---
7- name: Mercury
8 satellites: 0
9 diameter: 0.38
10{{ site.data.Mercury.diameter }}
11{{ site.data.planets.Mercury.diameter }}
12Mercury:
13 satellites: 0
14 diameter: 0.38
15Mercuy:
16 satellites: 0
17 diameter: 0.38
18Venus:
19 satellites: 0
20 diameter: 0.95
21Earth:
22 satellites: 1
23 diameter: 1.00
24Mars:
25 satellites: 2
26 diameter: 0.53
27name, satellites, diameter
28Mercury, 0, 0.38
29Venus, 0, 0.95
30Earth, 1, 1.00
31Mars, 2, 0.53
32{{ (site.data.planets | where:"name","Mercury")["diameter"] }}
33- name: Mercury
34 satellites: 0
35 diameter: 0.38
36{{ site.data.planets[0].diameter }}
37QUESTION
Does minima dark skin work on github pages?
Asked 2022-Jan-15 at 12:56I'm trying to set up a blog via Jekyll and GitHub Pages. To deploy it was not such a big deal, however, in trying to follow the steps described here I only managed to make it display the dark skin locally. Is there a way to deploy it on GithubPages as well? I installed it via
1gem "minima", git: "https://github.com/jekyll/minima"
2then added the following two lines in _config.yml
1gem "minima", git: "https://github.com/jekyll/minima"
2minima:
3 skin: dark
4This is the repo holding the ruby code.
ANSWER
Answered 2021-Jul-28 at 13:07I was using Chrome, and apparently the Clear browsing data in the last hour with Cookies and other site data and Cached images and files checked made the local updates appear live.
QUESTION
How can I pass a variable to a jekyll layout?
Asked 2022-Jan-10 at 20:43I don't understand how to pass a variable to a Jekyll layout. I have a markdown file with this header:
1---
2layout: post
3next_tutorial: next_tutorial_name
4---
5And then, in the post layout, I have this:
1---
2layout: post
3next_tutorial: next_tutorial_name
4---
5---
6layout: default
7---
8<article id="postBody">
9 <h1>{{ page.title }}</h1>
10 <p>{{ page.date | date_to_string }}</p>
11
12 {{ content }}
13
14 {% if site.next_tutorial %}
15 <h2>{{ site.next_tutorial }}</h2>
16 {% endif %}
17</article>
18But the h2 element never appears. I tried removing the if, but the result is the same. What I'm doing wrong?
ANSWER
Answered 2022-Jan-10 at 20:43What you are calling the "header of a markdown file" actually have a name in Jekyll, and this is called the Front Matter.
And the elements of the front matter can be accessed via the page variable, as pointed here and there.
So, your layout should read:
1---
2layout: post
3next_tutorial: next_tutorial_name
4---
5---
6layout: default
7---
8<article id="postBody">
9 <h1>{{ page.title }}</h1>
10 <p>{{ page.date | date_to_string }}</p>
11
12 {{ content }}
13
14 {% if site.next_tutorial %}
15 <h2>{{ site.next_tutorial }}</h2>
16 {% endif %}
17</article>
18---
19layout: default
20---
21<article id="postBody">
22 <h1>{{ page.title }}</h1>
23 <p>{{ page.date | date_to_string }}</p>
24
25 {{ content }}
26
27 {% if page.next_tutorial %}
28 <h2>{{ page.next_tutorial }}</h2>
29 {% endif %}
30</article>
31QUESTION
Put two Highcharts Charts Side by Side on a Jekyll Blog (beautiful-jekyll)
Asked 2021-Dec-18 at 09:58I am currently working with highcharts in Jekyll and have seen documentation on how to put two 'divs' together, but I was unsure on how I could do this in Jekyll using CSS. My current jsfiddle is here where the two charts are stacked.
1<head>
2 <script src="https://code.highcharts.com/highcharts.js"></script>
3</head>
4<div id="container" style="height: 400px"></div>
5<div id="container2" style="height: 400px"></div>
6
7<script>
8 const chart = Highcharts.chart('container', {
9 //plot options code with type: 'datetime'
10 plotOptions: {
11 series: {
12 pointStart: Date.UTC(2020, 2, 4),
13 pointInterval: 24 * 3600 * 1000
14 }
15 },
16 type: 'line',
17 tooltip: {
18 shared: true,
19 split: false,
20 enabled: true,
21 },
22 xAxis: {
23 type: 'datetime'
24 },
25
26 series: [{
27 data: [1, 2, 3, 4, 5],
28
29 },
30
31
32
33 {
34 data: [5, 15, 20, 10, 1],
35
36 }
37 ]
38 });
39</script>
40
41<script>
42 const chart2 = Highcharts.chart('container2', {
43 //plot options code with type: 'datetime'
44 plotOptions: {
45 series: {
46 pointStart: Date.UTC(2020, 2, 4),
47 pointInterval: 24 * 3600 * 1000
48 }
49 },
50 type: 'line',
51 tooltip: {
52 shared: true,
53 split: false,
54 enabled: true,
55 },
56 xAxis: {
57 type: 'datetime'
58 },
59
60 series: [{
61 data: [5, 2, 1.5, 1, 0.9],
62
63 },
64
65
66
67 {
68 data: [13, 15, 20, 30, 11],
69
70 }
71 ]
72 });
73</script>I have seen documentation on how to do this but was unsure on how to implement this in beautiful-jekyll, a custom jekyll theme. I tried to edit/modify the heading titles for my jekyll website but was unsuccessful and therefore, was unsure on how to do this with css.
Was looking for any suggestions on how to do this by either modifying my source HTML file or my Jekyll CSS file!
ANSWER
Answered 2021-Dec-18 at 09:58I developed the following application by adding the Bootstrap library to the project. On a large enough screen, two graphs will appear side by side. Graphics will appear one after the other when the page gets too small due to responsive design rules. Click this link to test the application.
1<head>
2 <script src="https://code.highcharts.com/highcharts.js"></script>
3</head>
4<div id="container" style="height: 400px"></div>
5<div id="container2" style="height: 400px"></div>
6
7<script>
8 const chart = Highcharts.chart('container', {
9 //plot options code with type: 'datetime'
10 plotOptions: {
11 series: {
12 pointStart: Date.UTC(2020, 2, 4),
13 pointInterval: 24 * 3600 * 1000
14 }
15 },
16 type: 'line',
17 tooltip: {
18 shared: true,
19 split: false,
20 enabled: true,
21 },
22 xAxis: {
23 type: 'datetime'
24 },
25
26 series: [{
27 data: [1, 2, 3, 4, 5],
28
29 },
30
31
32
33 {
34 data: [5, 15, 20, 10, 1],
35
36 }
37 ]
38 });
39</script>
40
41<script>
42 const chart2 = Highcharts.chart('container2', {
43 //plot options code with type: 'datetime'
44 plotOptions: {
45 series: {
46 pointStart: Date.UTC(2020, 2, 4),
47 pointInterval: 24 * 3600 * 1000
48 }
49 },
50 type: 'line',
51 tooltip: {
52 shared: true,
53 split: false,
54 enabled: true,
55 },
56 xAxis: {
57 type: 'datetime'
58 },
59
60 series: [{
61 data: [5, 2, 1.5, 1, 0.9],
62
63 },
64
65
66
67 {
68 data: [13, 15, 20, 30, 11],
69
70 }
71 ]
72 });
73</script><!DOCTYPE html>
74<html lang="en">
75<head>
76 <meta charset="UTF-8">
77 <meta http-equiv="X-UA-Compatible" content="IE=edge">
78 <meta name="viewport" content="width=device-width, initial-scale=1.0">
79 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
80 <script src="https://code.highcharts.com/highcharts.js"></script>
81 <title>Document</title>
82</head>
83
84<body>
85 <!-- Remove the styles applied to the following <div> element to position the container at (0,0) in the application. -->
86 <div class="row" style="padding: 50px; margin-top: 25px;">
87 <div class="col-md-6">
88 <div id="container" style="height: 500px"></div>
89 </div>
90
91 <div class="col-md-6">
92 <div id="container2" style="height: 500px"></div>
93 </div>
94 </div>
95
96 <script>
97 const chart = Highcharts.chart('container', {
98 //plot options code with type: 'datetime'
99 plotOptions: {
100 series: {
101 pointStart: Date.UTC(2020, 2, 4),
102 pointInterval: 24 * 3600 * 1000
103 }
104 },
105 type: 'line',
106 tooltip: {
107 shared: true,
108 split: false,
109 enabled: true,
110 },
111 xAxis: {
112 type: 'datetime'
113 },
114
115 series: [{
116 data: [1, 2, 3, 4, 5],
117 },
118 {
119 data: [5, 15, 20, 10, 1],
120 }
121 ]
122 });
123 </script>
124
125 <script>
126 const chart2 = Highcharts.chart('container2', {
127 //plot options code with type: 'datetime'
128 plotOptions: {
129 series: {
130 pointStart: Date.UTC(2020, 2, 4),
131 pointInterval: 24 * 3600 * 1000
132 }
133 },
134 type: 'line',
135 tooltip: {
136 shared: true,
137 split: false,
138 enabled: true,
139 },
140 xAxis: {
141 type: 'datetime'
142 },
143 series: [{
144 data: [5, 2, 1.5, 1, 0.9],
145 },
146 {
147 data: [13, 15, 20, 30, 11],
148 }
149 ]
150 });
151 </script>
152</body>
153</html>
154Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Jekyll
Tutorials and Learning Resources are not available at this moment for Jekyll
Share this Page
Get latest updates on Jekyll