mirror of
https://github.com/JimenezJC/mshj_blog.git
synced 2025-12-06 08:59:56 -05:00
104 lines
4.6 KiB
HTML
104 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-us"><head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="Table of Content
|
|
What it is?
|
|
TOC is the box you see at the very top of this post. It may be framed (or not).
|
|
How to enable TOC?
|
|
To enable it, all you need to do when creating a new post at the very top is to insert the code:
|
|
toc = true
|
|
tocBorder = true
|
|
You can of course find this post (../themes/nostyleplease/content/posts/test-toc-and-details.md) and open in editor to see how it’s working.">
|
|
|
|
<title>
|
|
|
|
Test TOC, deatails and styles
|
|
|
|
</title>
|
|
|
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="/" />
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/css/main.900100e9dbee2d56c58fac8bb717037cae7e26a9c36c29d2ff587bdd65f0cbbe510b41d81a3bb234919cdfdc7550d786b2fab70c8fc507772d732fe097106d12.css" integrity="sha512-kAEA6dvuLVbFj6yLtxcDfK5+JqnDbCnS/1h73WXwy75RC0HYGjuyNJGc39x1UNeGsvq3DI/FB3ctcy/glxBtEg==" />
|
|
|
|
</head>
|
|
<body a="auto">
|
|
<main class="page-content" aria-label="Content">
|
|
<div class="w">
|
|
<div class="post-meta">
|
|
<a href="/">..</a>
|
|
|
|
<p>
|
|
<time datetime="2024-08-18 13:34:54 +0200 +0200">
|
|
2024-08-18
|
|
</time>
|
|
</p>
|
|
</div>
|
|
|
|
<article>
|
|
<h1>Test TOC, deatails and styles</h1>
|
|
|
|
|
|
<aside class="toc" >
|
|
<nav id="TableOfContents">
|
|
<ul>
|
|
<li><a href="#table-of-content">Table of Content</a>
|
|
<ul>
|
|
<li><a href="#what-it-is">What it is?</a></li>
|
|
<li><a href="#how-to-enable-toc">How to enable TOC?</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#details">Details</a>
|
|
<ul>
|
|
<li><a href="#what-it-is-1">What it is?</a></li>
|
|
<li><a href="#how-to-use-details">How to use “Details”?</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#styles">Styles</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
|
|
<h2 id="table-of-content">Table of Content</h2>
|
|
<h3 id="what-it-is">What it is?</h3>
|
|
<p>TOC is the box you see at the very top of this post. It may be framed (or not).</p>
|
|
<h3 id="how-to-enable-toc">How to enable TOC?</h3>
|
|
<p>To enable it, all you need to do when creating a new post at the very top is to insert the code:</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;"><span><span style="color:#a6e22e">toc</span> = <span style="color:#66d9ef">true</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">tocBorder</span> = <span style="color:#66d9ef">true</span>
|
|
</span></span></code></pre></div><p>You can of course find this post (../themes/nostyleplease/content/posts/test-toc-and-details.md) and open in editor to see how it’s working.</p>
|
|
<h2 id="details">Details</h2>
|
|
<h3 id="what-it-is-1">What it is?</h3>
|
|
<p>It’s HTML standard sadly not supported native by markdown. But this theme support it anyway. So… sometimes you want to hide something.
|
|
<details >
|
|
<summary>
|
|
Click me
|
|
</summary>
|
|
A lot of text or something else.
|
|
</details>
|
|
</p>
|
|
<h3 id="how-to-use-details">How to use “Details”?</h3>
|
|
<p>Well you need to inspect this post and see by yourself. It’s very easy. Take look at ../themes/nostyleplease/content/posts/test-toc-and-details.md.</p>
|
|
<h2 id="styles">Styles</h2>
|
|
<p>Okey. So if you want to change color-theme you can:</p>
|
|
<ul>
|
|
<li>
|
|
<p>go to ../themes/nostyleplease/config.toml and find:</p>
|
|
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;"><span><span style="color:#a6e22e">appearance</span> = <span style="color:#e6db74">"auto"</span>
|
|
</span></span></code></pre></div><p>you can change it to 2 predefined styles: <strong>light</strong> and <strong>dark</strong>. It can be also set to <strong>auto</strong> and the color scheme will match the user’s system style.</p>
|
|
</li>
|
|
<li>
|
|
<p>you can add new style or modify <strong>auto</strong> option, just edit CSS in ../themes/nostyleplease/assets/main.scss :-). It’s easy, if you are able to operate Hugo - you can do it.</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</article>
|
|
|
|
</div>
|
|
</main>
|
|
</body></html>
|