kandi background
Explore Kits

jekyll | : globe_with_meridians : Jekyll is a blog-aware static site | Static Site Generator library

 by   jekyll Ruby Version: v3.9.2 License: MIT

 by   jekyll Ruby Version: v3.9.2 License: MIT

Download this library from

kandi X-RAY | jekyll Summary

jekyll is a Ruby library typically used in Web Site, Static Site Generator, Jekyll applications. jekyll has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.
Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • jekyll has a medium active ecosystem.
  • It has 44432 star(s) with 9763 fork(s). There are 1436 watchers for this library.
  • There were 2 major release(s) in the last 12 months.
  • There are 89 open issues and 4447 have been closed. On average issues are closed in 77 days. There are 86 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of jekyll is v3.9.2
jekyll Support
Best in #Static Site Generator
Average in #Static Site Generator
jekyll Support
Best in #Static Site Generator
Average in #Static Site Generator

quality kandi Quality

  • jekyll has 0 bugs and 0 code smells.
jekyll Quality
Best in #Static Site Generator
Average in #Static Site Generator
jekyll Quality
Best in #Static Site Generator
Average in #Static Site Generator

securitySecurity

  • jekyll has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • jekyll code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
jekyll Security
Best in #Static Site Generator
Average in #Static Site Generator
jekyll Security
Best in #Static Site Generator
Average in #Static Site Generator

license License

  • jekyll is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
jekyll License
Best in #Static Site Generator
Average in #Static Site Generator
jekyll License
Best in #Static Site Generator
Average in #Static Site Generator

buildReuse

  • jekyll releases are available to install and integrate.
  • Installation instructions are available. Examples and code snippets are not available.
  • jekyll saves you 9553 person hours of effort in developing the same functionality from scratch.
  • It has 19503 lines of code, 1046 functions and 270 files.
  • It has medium code complexity. Code complexity directly impacts maintainability of the code.
jekyll Reuse
Best in #Static Site Generator
Average in #Static Site Generator
jekyll Reuse
Best in #Static Site Generator
Average in #Static Site Generator
Top functions reviewed by kandi - BETA

kandi has reviewed jekyll and discovered the below as its top functions. This is intended to give you an instant insight into jekyll implemented functionality, and help decide if they suit your requirements.

  • Reset site data
    • Iterate through all files and directories
      • Read from a YAML file
        • Adds default configuration to the collection .
          • Find an array of properties matching a value .
            • Convert HTML to HTML

              Get all kandi verified functions for this library.

              Get all kandi verified functions for this library.

              jekyll Key Features

              :globe_with_meridians: Jekyll is a blog-aware static site generator in Ruby

              Load stylesheet with javascript and localStorage

              copy iconCopydownload iconDownload
              /* night.css 
              main {
                background: #000;
                color: #fff;
              }
              */
              
              /* default.css */
              :root {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                font: 1ch/1.5 'Segoe UI';
              }
              
              body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                font-size: 4ch;
              }
              
              main {
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #fff;
                color: #000;
              }
              
              form {
                width: 80vw;
                margin: 20px auto;
              }
              
              fieldset {
                width: max-content;
                min-height: 25px;
                margin-left: auto;
                padding: 0 1.5px 1.5px;
                border-radius: 8px;
                background: inherit;
                color: inherit;
              }
              
              button {
                display: block;
                width: 100%;
                height: 100%;
                border: 0;
                font-size: 4rem;
                text-align: center;
                background: transparent;
                cursor: pointer;
              }
              
              #theme::before {
                content: '☀️';
              }
              
              .night #theme::before {
                content: '🌙';
              }
              <!DOCTYPE html>
              <html>
              
              <head>
                <meta charset='utf-8'>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link href='lib/default.css' rel='stylesheet'>
                <link class='night' href='lib/night.css' rel='stylesheet' disabled>
                <style></style>
              </head>
              
              <body>
                <main>
                  <form id='UI'>
                    <fieldset name='box'>
                      <legend>Theme</legend>
                      <button id='theme' type='button'></button>
                    </fieldset>
                    <p>Click the "Theme" switch to toggle between `disabled` `true` and `false` on `night.css` and `light.css` `
                      <link>`s.</p>
                  </form>
                </main>
                <script>
                  const UI = document.forms.UI;
                  const M = document.querySelector('main');
                  const L = document.querySelector('.night')
              
                  const switchTheme = e => {
                    const clk = e.target;
                    if (clk.matches('button')) {
                      M.classList.toggle('night');
                      L.toggleAttribute('disabled');
                    }
                    let status = M.className === 'night' ? 'on' : 'off';
                    localStorage.setItem('theme', status);
                  };
              
                  const loadTheme = e => {
                    let cfg = localStorage.getItem('theme');
                    if (cfg === 'on') {
                      M.classList.add('night');
                      L.removeAttribute('disabled');
                    } else {
                      M.classList.remove('night');
                      L.setAttribute('disabled', true);
                    }
                  };
              
                  UI.addEventListener('click', switchTheme);
                  document.addEventListener('DOMContentLoaded', loadTheme);
                </script>
              </body>
              
              </html>
              /* night.css 
              main {
                background: #000;
                color: #fff;
              }
              */
              
              /* default.css */
              :root {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                font: 1ch/1.5 'Segoe UI';
              }
              
              body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                font-size: 4ch;
              }
              
              main {
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #fff;
                color: #000;
              }
              
              form {
                width: 80vw;
                margin: 20px auto;
              }
              
              fieldset {
                width: max-content;
                min-height: 25px;
                margin-left: auto;
                padding: 0 1.5px 1.5px;
                border-radius: 8px;
                background: inherit;
                color: inherit;
              }
              
              button {
                display: block;
                width: 100%;
                height: 100%;
                border: 0;
                font-size: 4rem;
                text-align: center;
                background: transparent;
                cursor: pointer;
              }
              
              #theme::before {
                content: '☀️';
              }
              
              .night #theme::before {
                content: '🌙';
              }
              <!DOCTYPE html>
              <html>
              
              <head>
                <meta charset='utf-8'>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link href='lib/default.css' rel='stylesheet'>
                <link class='night' href='lib/night.css' rel='stylesheet' disabled>
                <style></style>
              </head>
              
              <body>
                <main>
                  <form id='UI'>
                    <fieldset name='box'>
                      <legend>Theme</legend>
                      <button id='theme' type='button'></button>
                    </fieldset>
                    <p>Click the "Theme" switch to toggle between `disabled` `true` and `false` on `night.css` and `light.css` `
                      <link>`s.</p>
                  </form>
                </main>
                <script>
                  const UI = document.forms.UI;
                  const M = document.querySelector('main');
                  const L = document.querySelector('.night')
              
                  const switchTheme = e => {
                    const clk = e.target;
                    if (clk.matches('button')) {
                      M.classList.toggle('night');
                      L.toggleAttribute('disabled');
                    }
                    let status = M.className === 'night' ? 'on' : 'off';
                    localStorage.setItem('theme', status);
                  };
              
                  const loadTheme = e => {
                    let cfg = localStorage.getItem('theme');
                    if (cfg === 'on') {
                      M.classList.add('night');
                      L.removeAttribute('disabled');
                    } else {
                      M.classList.remove('night');
                      L.setAttribute('disabled', true);
                    }
                  };
              
                  UI.addEventListener('click', switchTheme);
                  document.addEventListener('DOMContentLoaded', loadTheme);
                </script>
              </body>
              
              </html>

              Jekyll + NetlifyCMS collection widget

              copy iconCopydownload iconDownload
              #admin/config.yml
              - name: "authors"
                create: true
                folder: "_authors/"
                fields: 
                - label: 'Title'
                  name: 'title'
                  widget: 'string'
                - label: 'Position'
                  name: 'position'
                  widget: 'string'
              - name: "pages"
                label: "Pages"
                files:
                  - label: 'Homepage'
                    name: 'homepage'
                    file: 'pages/homepage.md'
                    fields:
                      - label: "Choose author"
                        name: "author"
                        widget: "relation"
                        collection: "authors"
                        value_field: "{{slug}}"
                        search_fields: ["name", "short_name"]
                        display_fields: ["name"]
              
              #layouts/home.html 
              ---
              title: Home
              author: jill
              ---
              <div class="author">
              {%- capture author-id -%}_authors/{{page.author}}.md{%- endcapture -%}
              {% assign author = site.authors | where: 'path', author-id | first %}
              {{ author.name }}
              </div>
              
              
              #admin/config.yml
              - name: "authors"
                create: true
                folder: "_authors/"
                fields: 
                - label: 'Title'
                  name: 'title'
                  widget: 'string'
                - label: 'Position'
                  name: 'position'
                  widget: 'string'
              - name: "pages"
                label: "Pages"
                files:
                  - label: 'Homepage'
                    name: 'homepage'
                    file: 'pages/homepage.md'
                    fields:
                      - label: "Choose author"
                        name: "author"
                        widget: "relation"
                        collection: "authors"
                        value_field: "{{slug}}"
                        search_fields: ["name", "short_name"]
                        display_fields: ["name"]
              
              #layouts/home.html 
              ---
              title: Home
              author: jill
              ---
              <div class="author">
              {%- capture author-id -%}_authors/{{page.author}}.md{%- endcapture -%}
              {% assign author = site.authors | where: 'path', author-id | first %}
              {{ author.name }}
              </div>
              
              

              jekyll theme - how can i bypass this color setting

              copy iconCopydownload iconDownload
              body[data-theme="dark"] .bmc-btn-container > a.bmc-btn:hover {
                  color: black;
              }
              

              Jekyll blog posts not showing up on github pages

              copy iconCopydownload iconDownload
              $ bundle exec jekyll serve
              Configuration file: /Users/alexfreik/Documents/GitHub/ltc-webpage/_config.yml
                          Source: /Users/alexfreik/Documents/GitHub/ltc-webpage
                     Destination: /Users/alexfreik/Documents/GitHub/ltc-webpage/_site
               Incremental build: disabled. Enable with --incremental
                    Generating... 
                     Jekyll Feed: Generating feed for posts
                                  done in 0.94 seconds.
               Auto-regeneration: enabled for '/Users/alexfreik/Documents/GitHub/ltc-webpage'
                  Server address: http://127.0.0.1:4000/
                Server running... press ctrl-c to stop.
              

              Access specific data from CSV file in Jekyll

              copy iconCopydownload iconDownload
              {{ site.data.planets.Mercury.diameter }}
              
              Mercury:
                satellites: 0
                diameter: 0.38
              
              Mercuy:
                satellites: 0
                diameter: 0.38
              Venus:
                satellites: 0
                diameter: 0.95
              Earth:
                satellites: 1
                diameter: 1.00
              Mars:
                satellites: 2
                diameter: 0.53
              
              name, satellites, diameter
              Mercury, 0, 0.38 
              Venus, 0, 0.95 
              Earth, 1, 1.00 
              Mars, 2, 0.53
              
              {{ (site.data.planets | where:"name","Mercury")["diameter"] }}
              
              - name: Mercury
                satellites: 0
                diameter: 0.38
              
              {{ site.data.planets[0].diameter }}
              
              {{ site.data.planets.Mercury.diameter }}
              
              Mercury:
                satellites: 0
                diameter: 0.38
              
              Mercuy:
                satellites: 0
                diameter: 0.38
              Venus:
                satellites: 0
                diameter: 0.95
              Earth:
                satellites: 1
                diameter: 1.00
              Mars:
                satellites: 2
                diameter: 0.53
              
              name, satellites, diameter
              Mercury, 0, 0.38 
              Venus, 0, 0.95 
              Earth, 1, 1.00 
              Mars, 2, 0.53
              
              {{ (site.data.planets | where:"name","Mercury")["diameter"] }}
              
              - name: Mercury
                satellites: 0
                diameter: 0.38
              
              {{ site.data.planets[0].diameter }}
              
              {{ site.data.planets.Mercury.diameter }}
              
              Mercury:
                satellites: 0
                diameter: 0.38
              
              Mercuy:
                satellites: 0
                diameter: 0.38
              Venus:
                satellites: 0
                diameter: 0.95
              Earth:
                satellites: 1
                diameter: 1.00
              Mars:
                satellites: 2
                diameter: 0.53
              
              name, satellites, diameter
              Mercury, 0, 0.38 
              Venus, 0, 0.95 
              Earth, 1, 1.00 
              Mars, 2, 0.53
              
              {{ (site.data.planets | where:"name","Mercury")["diameter"] }}
              
              - name: Mercury
                satellites: 0
                diameter: 0.38
              
              {{ site.data.planets[0].diameter }}
              
              {{ site.data.planets.Mercury.diameter }}
              
              Mercury:
                satellites: 0
                diameter: 0.38
              
              Mercuy:
                satellites: 0
                diameter: 0.38
              Venus:
                satellites: 0
                diameter: 0.95
              Earth:
                satellites: 1
                diameter: 1.00
              Mars:
                satellites: 2
                diameter: 0.53
              
              name, satellites, diameter
              Mercury, 0, 0.38 
              Venus, 0, 0.95 
              Earth, 1, 1.00 
              Mars, 2, 0.53
              
              {{ (site.data.planets | where:"name","Mercury")["diameter"] }}
              
              - name: Mercury
                satellites: 0
                diameter: 0.38
              
              {{ site.data.planets[0].diameter }}
              
              {{ site.data.planets.Mercury.diameter }}
              
              Mercury:
                satellites: 0
                diameter: 0.38
              
              Mercuy:
                satellites: 0
                diameter: 0.38
              Venus:
                satellites: 0
                diameter: 0.95
              Earth:
                satellites: 1
                diameter: 1.00
              Mars:
                satellites: 2
                diameter: 0.53
              
              name, satellites, diameter
              Mercury, 0, 0.38 
              Venus, 0, 0.95 
              Earth, 1, 1.00 
              Mars, 2, 0.53
              
              {{ (site.data.planets | where:"name","Mercury")["diameter"] }}
              
              - name: Mercury
                satellites: 0
                diameter: 0.38
              
              {{ site.data.planets[0].diameter }}
              
              {{ site.data.planets.Mercury.diameter }}
              
              Mercury:
                satellites: 0
                diameter: 0.38
              
              Mercuy:
                satellites: 0
                diameter: 0.38
              Venus:
                satellites: 0
                diameter: 0.95
              Earth:
                satellites: 1
                diameter: 1.00
              Mars:
                satellites: 2
                diameter: 0.53
              
              name, satellites, diameter
              Mercury, 0, 0.38 
              Venus, 0, 0.95 
              Earth, 1, 1.00 
              Mars, 2, 0.53
              
              {{ (site.data.planets | where:"name","Mercury")["diameter"] }}
              
              - name: Mercury
                satellites: 0
                diameter: 0.38
              
              {{ site.data.planets[0].diameter }}
              
              {{ site.data.planets.Mercury.diameter }}
              
              Mercury:
                satellites: 0
                diameter: 0.38
              
              Mercuy:
                satellites: 0
                diameter: 0.38
              Venus:
                satellites: 0
                diameter: 0.95
              Earth:
                satellites: 1
                diameter: 1.00
              Mars:
                satellites: 2
                diameter: 0.53
              
              name, satellites, diameter
              Mercury, 0, 0.38 
              Venus, 0, 0.95 
              Earth, 1, 1.00 
              Mars, 2, 0.53
              
              {{ (site.data.planets | where:"name","Mercury")["diameter"] }}
              
              - name: Mercury
                satellites: 0
                diameter: 0.38
              
              {{ site.data.planets[0].diameter }}
              

              How can I pass a variable to a jekyll layout?

              copy iconCopydownload iconDownload
              ---
              layout: default
              ---
              <article id="postBody">
                  <h1>{{ page.title }}</h1>
                  <p>{{ page.date | date_to_string }}</p>
              
                  {{ content }}
              
                  {% if page.next_tutorial %}
                  <h2>{{ page.next_tutorial }}</h2>
                  {% endif %}
              </article>
              

              Put two Highcharts Charts Side by Side on a Jekyll Blog (beautiful-jekyll)

              copy iconCopydownload iconDownload
              <!DOCTYPE html>
              <html lang="en">
              <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
                <script src="https://code.highcharts.com/highcharts.js"></script>
                <title>Document</title>
              </head>
              
              <body>
                <!-- Remove the styles applied to the following <div> element to position the container at (0,0) in the application. -->
                <div class="row" style="padding: 50px; margin-top: 25px;">
                  <div class="col-md-6">
                    <div id="container" style="height: 500px"></div>
                  </div>
              
                  <div class="col-md-6">
                    <div id="container2" style="height: 500px"></div>
                  </div>
                </div>
              
                <script>
                  const chart = Highcharts.chart('container', {
                    //plot options code with type: 'datetime'
                    plotOptions: {
                      series: {
                        pointStart: Date.UTC(2020, 2, 4),
                        pointInterval: 24 * 3600 * 1000
                      }
                    },
                    type: 'line',
                    tooltip: {
                      shared: true,
                      split: false,
                      enabled: true,
                    },
                    xAxis: {
                      type: 'datetime'
                    },
              
                    series: [{
                        data: [1, 2, 3, 4, 5],
                      },
                      {
                        data: [5, 15, 20, 10, 1],
                      }
                    ]
                  });
                </script>
              
                <script>
                  const chart2 = Highcharts.chart('container2', {
                    //plot options code with type: 'datetime'
                    plotOptions: {
                      series: {
                        pointStart: Date.UTC(2020, 2, 4),
                        pointInterval: 24 * 3600 * 1000
                      }
                    },
                    type: 'line',
                    tooltip: {
                      shared: true,
                      split: false,
                      enabled: true,
                    },
                    xAxis: {
                      type: 'datetime'
                    },
                    series: [{
                        data: [5, 2, 1.5, 1, 0.9],
                      },
                      {
                        data: [13, 15, 20, 30, 11],
                      }
                    ]
                  });
                </script>
              </body>
              </html>
              

              Display START and END range of objects with Liquid in jekyll static site

              copy iconCopydownload iconDownload
              products-prints:
                - id: 'first-art'
                  type: variable
                  name: 'add name and other data of the product'
                  variants:
                    - id: 'first-art-small'
                      name: 'small'
                      position: 1
                      price: '10'
                    - id: 'first-art-medium'
                      name: 'medium'
                      position: 2
                      price: '20'
                    - id: 'first-art-large'
                      name: 'large'
                      position: 3
                      price: '30'
                - id: 'second-art'
                  type: variable
                  name: 'add name and other data of the product'
                  variants:
                    - id: 'second-art-small'
                      name: 'small'
                      position: 1
                      price: '10'
                    - id: 'second-art-medium'
                      name: 'medium'
                      position: 2
                      price: '20'
                    - id: 'second-art-large'
                      name: 'large'
                      position: 3
                      price: '30'
                    - id: 'second-art-x-large'
                      name: 'x-large'
                      position: 4
                      price: '40'
              
              {%- assign printartworks = site.data.products-prints -%}
              {%- for printart in printartworks -%}
                <h3>
                  {{ printart.id }}
                </h3>
                <div>
                  <p>
                    {{ printart.variants.first.name }} - {{ printart.variants.first.price }}
                  </p>
                  <p>
                    {{ printart.variants.last.name }} - {{ printart.variants.last.price }}
                  </p>
                </div>
              {%- endfor -%}
              
              products-prints:
                - id: 'first-art'
                  type: variable
                  name: 'add name and other data of the product'
                  variants:
                    - id: 'first-art-small'
                      name: 'small'
                      position: 1
                      price: '10'
                    - id: 'first-art-medium'
                      name: 'medium'
                      position: 2
                      price: '20'
                    - id: 'first-art-large'
                      name: 'large'
                      position: 3
                      price: '30'
                - id: 'second-art'
                  type: variable
                  name: 'add name and other data of the product'
                  variants:
                    - id: 'second-art-small'
                      name: 'small'
                      position: 1
                      price: '10'
                    - id: 'second-art-medium'
                      name: 'medium'
                      position: 2
                      price: '20'
                    - id: 'second-art-large'
                      name: 'large'
                      position: 3
                      price: '30'
                    - id: 'second-art-x-large'
                      name: 'x-large'
                      position: 4
                      price: '40'
              
              {%- assign printartworks = site.data.products-prints -%}
              {%- for printart in printartworks -%}
                <h3>
                  {{ printart.id }}
                </h3>
                <div>
                  <p>
                    {{ printart.variants.first.name }} - {{ printart.variants.first.price }}
                  </p>
                  <p>
                    {{ printart.variants.last.name }} - {{ printart.variants.last.price }}
                  </p>
                </div>
              {%- endfor -%}
              
              {%- assign printartworks = site.data.products-prints -%}
              {%- for printart in printartworks -%}
                {%- if printart.type == "variable" -%}
                  {% assign variants = '' | split: '' %}
                  {%- for variation in site.data.products-prints -%}
                    {%- if variation.parent == printart.id -%}
                      {% assign variants = variants | concat: variation %}
                    {%- endif -%}
                  {%- endfor -%}
                  {% assign variants = variants | sort: "position" %}
                
                  <h3>
                    {{ printart.id }}
                  </h3>
                  <ul>
                    <li>
                      € {{ variants.first.price }}
                    </li>
                    <li>
                      € {{ variants.last.price }}
                    </li>
                  </ul>
                {%- endif -%}
              {%- endfor -%}
              
              

              How can I add html in the description section on _config.yml for github page

              copy iconCopydownload iconDownload
              title: My Profile
              description: >
                  My description
                  <br><br>
                  <a href="your_website">website</a>
              theme: jekyll-theme-minimal
              

              Using Google Cloud Storage in The Google Cloud Build

              copy iconCopydownload iconDownload
              steps: 
                - name: 'gcr.io/cloud-builders/gsutil'
                  args: ['cp', 'gs://$MY_BUCKET/*.jpg', '.']
              
                - name: gcr.io/$PROJECT_ID/firebase
                  args: ['deploy', '--project=$PROJECT_ID', '--only=hosting']
              

              Community Discussions

              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)
              Trending Discussions on jekyll

              QUESTION

              Load stylesheet with javascript and localStorage

              Asked 2022-Mar-30 at 22:43

              I'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

              <head>
                ...
                <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
                ...
              </head>
              

              This 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

              <head>
                ...
                <script>
                  var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
                  theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
                </script>
              
                <link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
                ...
              </head>
              

              Using 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

              <head>
              ...
              <p id="theme" style="display:none;">dark</p>
              
              <link rel="stylesheet" href="/assets/css/{{document.getElementById('theme').innerHTML}}.css">
              ...
              </head>
              

              And nope, the path still appears as: /assets/css/.css

              ANSWER

              Answered 2022-Mar-30 at 22:43

              If 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:

              1. Click the green Preview button.
              2. Another frame should appear on the right. Within the frame is the webpage example click the ☀️ button.
              3. 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.
              4. The page should still be in dark mode. 👍

              /* night.css 
              main {
                background: #000;
                color: #fff;
              }
              */
              
              /* default.css */
              :root {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                font: 1ch/1.5 'Segoe UI';
              }
              
              body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
                font-size: 4ch;
              }
              
              main {
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #fff;
                color: #000;
              }
              
              form {
                width: 80vw;
                margin: 20px auto;
              }
              
              fieldset {
                width: max-content;
                min-height: 25px;
                margin-left: auto;
                padding: 0 1.5px 1.5px;
                border-radius: 8px;
                background: inherit;
                color: inherit;
              }
              
              button {
                display: block;
                width: 100%;
                height: 100%;
                border: 0;
                font-size: 4rem;
                text-align: center;
                background: transparent;
                cursor: pointer;
              }
              
              #theme::before {
                content: '☀️';
              }
              
              .night #theme::before {
                content: '🌙';
              }
              <!DOCTYPE html>
              <html>
              
              <head>
                <meta charset='utf-8'>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link href='lib/default.css' rel='stylesheet'>
                <link class='night' href='lib/night.css' rel='stylesheet' disabled>
                <style></style>
              </head>
              
              <body>
                <main>
                  <form id='UI'>
                    <fieldset name='box'>
                      <legend>Theme</legend>
                      <button id='theme' type='button'></button>
                    </fieldset>
                    <p>Click the "Theme" switch to toggle between `disabled` `true` and `false` on `night.css` and `light.css` `
                      <link>`s.</p>
                  </form>
                </main>
                <script>
                  const UI = document.forms.UI;
                  const M = document.querySelector('main');
                  const L = document.querySelector('.night')
              
                  const switchTheme = e => {
                    const clk = e.target;
                    if (clk.matches('button')) {
                      M.classList.toggle('night');
                      L.toggleAttribute('disabled');
                    }
                    let status = M.className === 'night' ? 'on' : 'off';
                    localStorage.setItem('theme', status);
                  };
              
                  const loadTheme = e => {
                    let cfg = localStorage.getItem('theme');
                    if (cfg === 'on') {
                      M.classList.add('night');
                      L.removeAttribute('disabled');
                    } else {
                      M.classList.remove('night');
                      L.setAttribute('disabled', true);
                    }
                  };
              
                  UI.addEventListener('click', switchTheme);
                  document.addEventListener('DOMContentLoaded', loadTheme);
                </script>
              </body>
              
              </html>

              Source https://stackoverflow.com/questions/71031101

              Community Discussions, Code Snippets contain sources that include Stack Exchange Network

              Vulnerabilities

              No vulnerabilities reported

              Install jekyll

              Install the gem
              Read up about its Usage and Configuration
              Take a gander at some existing Sites
              Fork and Contribute your own modifications
              Have questions? Check out our official forum community Jekyll Talk or #jekyll on irc.freenode.net

              Support

              For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

              DOWNLOAD this Library from

              Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
              over 430 million Knowledge Items
              Find more libraries
              Reuse Solution Kits and Libraries Curated by Popular Use Cases
              Explore Kits

              Save this library and start creating your kit

              Share this Page

              share link
              Consider Popular Static Site Generator Libraries
              Try Top Libraries by jekyll
              Compare Static Site Generator Libraries with Highest Support
              Compare Static Site Generator Libraries with Highest Quality
              Compare Static Site Generator Libraries with Highest Security
              Compare Static Site Generator Libraries with Permissive License
              Compare Static Site Generator Libraries with Highest Reuse
              Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
              over 430 million Knowledge Items
              Find more libraries
              Reuse Solution Kits and Libraries Curated by Popular Use Cases
              Explore Kits

              Save this library and start creating your kit

              • © 2022 Open Weaver Inc.