Instantly share code, notes, and snippets.
Created
April 20, 2024 09:55
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save mikkipastel/3cfe4ce8e5894ab7a0eac327048579c0 to your computer and use it in GitHub Desktop.
add table of content to liebling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="{{@site.locale}}"> | |
| <head> | |
| {{!-- Document Settings --}} | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| {{!-- Base Meta --}} | |
| <title>{{meta_title}}</title> | |
| <meta name="HandheldFriendly" content="True" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| {{!-- Preload assets --}} | |
| <link rel="preload" href="{{asset "css/app.css"}}" as="style" /> | |
| <link rel="preload" href="{{asset "js/manifest.js"}}" as="script" /> | |
| <link rel="preload" href="{{asset "js/vendor.js"}}" as="script" /> | |
| <link rel="preload" href="{{asset "js/app.js"}}" as="script" /> | |
| {{!-- This #block helper will try to preload page-specific assets --}} | |
| {{{block "preload"}}} | |
| {{!-- Styles & Scripts --}} | |
| <style> | |
| /* These font-faces are here to make fonts work if the Ghost instance is installed in a subdirectory */ | |
| /* source-sans-pro-regular */ | |
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| font-style: normal; | |
| font-weight: 400; | |
| font-display: swap; | |
| src: local('SourceSansPro-Regular'), | |
| url("{{asset 'fonts/source-sans-pro/latin/source-sans-pro-regular.woff2'}}") format('woff2'), | |
| url("{{asset 'fonts/source-sans-pro/latin/source-sans-pro-regular.woff'}}") format('woff'); | |
| } | |
| /* source-sans-pro-600 */ | |
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| font-style: normal; | |
| font-weight: 600; | |
| font-display: swap; | |
| src: local('SourceSansPro-SemiBold'), | |
| url("{{asset 'fonts/source-sans-pro/latin/source-sans-pro-600.woff2'}}") format('woff2'), | |
| url("{{asset 'fonts/source-sans-pro/latin/source-sans-pro-600.woff'}}") format('woff'); | |
| } | |
| /* source-sans-pro-700 */ | |
| @font-face { | |
| font-family: 'Source Sans Pro'; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-display: swap; | |
| src: local('SourceSansPro-Bold'), | |
| url("{{asset 'fonts/source-sans-pro/latin/source-sans-pro-700.woff2'}}") format('woff2'), | |
| url("{{asset 'fonts/source-sans-pro/latin/source-sans-pro-700.woff'}}") format('woff'); | |
| } | |
| /* iconmoon */ | |
| @font-face { | |
| font-family: 'icomoon'; | |
| font-weight: normal; | |
| font-style: normal; | |
| font-display: swap; | |
| src: url("{{asset 'fonts/icomoon/icomoon.eot?101fc3'}}"); | |
| src: url("{{asset 'fonts/icomoon/icomoon.eot?101fc3#iefix'}}") format('embedded-opentype'), | |
| url("{{asset 'fonts/icomoon/icomoon.ttf?101fc3'}}") format('truetype'), | |
| url("{{asset 'fonts/icomoon/icomoon.woff?101fc3'}}") format('woff'), | |
| url("{{asset 'fonts/icomoon/icomoon.svg?101fc3#icomoon'}}") format('svg'); | |
| } | |
| </style> | |
| <link rel="stylesheet" type="text/css" href="{{asset "css/app.css"}}" media="screen" /> | |
| {{!-- TOC styles --}} | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.25.0/tocbot.css"> | |
| {{!-- This #block helper will inject a stylesheet for a specific page --}} | |
| {{{block "styles"}}} | |
| {{!-- This #block helper will pull data from the hero partial | |
| to inject styles of the hero image to make it responsive --}} | |
| {{{block "herobackground"}}} | |
| {{!-- This tag outputs SEO meta+structured data and other important settings --}} | |
| {{ghost_head}} | |
| {{!-- This style overrides the accent color to match the one from the Admin --}} | |
| <style> | |
| :root { | |
| --primary-subtle-color: var(--ghost-accent-color) !important; | |
| .gh-content { | |
| position: relative; | |
| } | |
| .gh-toc > .toc-list { | |
| position: relative; | |
| font-size: medium; | |
| } | |
| .toc-list { | |
| overflow: hidden; | |
| list-style: none; | |
| } | |
| @media (min-width: 1300px) { | |
| .gh-sidebar { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| margin-top: 4vmin; | |
| left: -500px; | |
| width: 400px; | |
| grid-column-start: auto; | |
| } | |
| .gh-toc { | |
| position: sticky; /* On larger screens, TOC will stay in the same spot on the page */ | |
| top: 4vmin; | |
| } | |
| } | |
| .gh-toc .is-active-link::before { | |
| background-color: var(--ghost-accent-color); /* Defines TOC accent color based on Accent color set in Ghost Admin */ | |
| } | |
| a.toc-link { | |
| text-decoration: none; | |
| font-size: medium; | |
| } | |
| </style> | |
| {{!-- These variables are used to make the search form work --}} | |
| <script> | |
| // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat | |
| const ghostHost = "{{@site.url}}" | |
| // @license-end | |
| </script> | |
| {{#if @custom.enable_native_search}} | |
| <script> | |
| const nativeSearchEnabled = true | |
| </script> | |
| {{/if}} | |
| {{#if @custom.search_api_key}} | |
| <script> | |
| const ghostSearchApiKey = "{{@custom.search_api_key}}" | |
| </script> | |
| {{/if}} | |
| {{!-- This variable disbale the fade animation when it's enabled --}} | |
| {{#if @custom.disable_fade_animation}} | |
| <style> | |
| :root { | |
| --show-fade-animation: 0; | |
| } | |
| </style> | |
| {{/if}} | |
| {{!-- This script sets the correct theme mode (light or dark) --}} | |
| <script> | |
| if (typeof Storage !== 'undefined') { | |
| const currentSavedTheme = localStorage.getItem('theme') | |
| if (currentSavedTheme && currentSavedTheme === 'dark') { | |
| document.documentElement.setAttribute('data-theme', 'dark') | |
| } else { | |
| document.documentElement.setAttribute('data-theme', 'light') | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="{{body_class}}"> | |
| {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}} | |
| {{{body}}} | |
| {{!-- Search form --}} | |
| {{^if @custom.enable_native_search}} | |
| {{> search}} | |
| {{/if}} | |
| {{!-- The footer --}} | |
| {{> footer}} | |
| {{!-- Common scripts shared between pages --}} | |
| <script defer src="{{asset "js/manifest.js"}}"></script> | |
| <script defer src="{{asset "js/vendor.js"}}"></script> | |
| <script defer src="{{asset "js/app.js"}}"></script> | |
| {{!-- Tocbot script --}} | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.25.0/tocbot.min.js"></script> | |
| {{! Initialize Tocbot after you load the script }} | |
| <script> | |
| tocbot.init({ | |
| // Where to render the table of contents. | |
| tocSelector: '.gh-toc', | |
| // Where to grab the headings to build the table of contents. | |
| contentSelector: '.gh-content', | |
| // Which headings to grab inside of the contentSelector element. | |
| headingSelector: 'h1, h2', | |
| // Ensure correct positioning | |
| hasInnerContainers: true, | |
| }); | |
| </script> | |
| {{!-- The #block helper will pull in data from the #contentFor other template files --}} | |
| {{{block "scripts"}}} | |
| {{!-- Ghost outputs important scripts and data with this tag --}} | |
| {{ghost_foot}} | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment