blog-hexo/public/2023/10/23/Cosy-Starter-Guide/index.html

252 lines
39 KiB
HTML
Raw Normal View History

2023-10-24 09:48:00 +08:00
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cosy Starter Guide</title><meta name="description" content=""><meta name="keywords" content=""><meta name="author" content="Mozzie"><link rel="canonical" href="https://mozzie.cn/2023/10/23/Cosy-Starter-Guide/"><link rel="icon" type="image/svg" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>'>
2023-10-19 22:44:47 +08:00
<link rel="stylesheet" href="/css/2f1ea598.css">
2023-10-24 09:48:00 +08:00
<meta name="generator" content="Hexo 6.3.0"></head><body id="app"><!-- 响应式布局按钮 --><a class="side-navigation btn-hover btn-hover-bg tip left" data-tip="Expand"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"></rect><path d="M9 4v16"></path></g></svg></a><aside><div>
2023-10-19 22:44:47 +08:00
<link rel="stylesheet" href="/css/e01add4b.css">
2023-10-24 09:48:00 +08:00
<div class="home-bar"><a href="/" class="tip" data-tip="Home"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill="currentColor"></path></svg><span>Mozzie</span></a><!-- 切换主题 --><a id="toggle-theme" class="tip left" data-tip="Switch Theme"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path><path d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path><path d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z" fill="currentColor"></path><path d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z" fill="currentColor"></path><path d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path><path d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path><path d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z" fill="currentColor"></path><path d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z" fill="currentColor"></path><path d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z" fill="currentColor"></path></svg></a></div>
2023-10-19 22:44:47 +08:00
<script src="/js/1247bc3e.js"></script>
2023-10-24 09:48:00 +08:00
<!-- search -->
2023-10-19 22:44:47 +08:00
<link rel="stylesheet" href="/css/4c3d0e88.css">
2023-10-24 09:48:00 +08:00
<form class="search-group"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="currentColor"><path d="M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill="currentColor"></path></g></svg><span id="search-input">Search...</span><div class="short-key"><kbd class="key-cap"><span>Ctrl K</span></kbd></div></form><script> window.algolia = { appId: "5DTW808BZ8", SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26" } </script>
2023-10-19 22:44:47 +08:00
<script src="/js/07f44e09.js"></script>
2023-10-24 09:48:00 +08:00
<!-- navigation -->
2023-10-19 22:44:47 +08:00
<link rel="stylesheet" href="/css/3efc6cb5.css">
2023-10-24 09:48:00 +08:00
<section class="category-nav scrollbar-obtrusive"><ul class="nav-items"><li data-path="archives"><a href="/archives"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"></path><path d="M9 18l3 3l3-3"></path><circle cx="12" cy="5" r="2"></circle></g></svg><div class="ellipsis">Timeline</div></a></li><li data-path="roadmap"><a href="/roadmap"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path><path d="M9 14v-2c0-.59.414-1 1-1h5"></path><path d="M13 9l2 2l-2 2"></path></g></svg><div class="ellipsis">Roadmap</div></a></li></ul><p>Category</p><ul><li class=""><a href="/categories/EQ/"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z"></path><circle cx="11.5" cy="7.5" r="1" fill="currentColor"></circle></g></svg><div class="ellipsis"><span>EQ</span></div></a></li><li class="active"><a href="/categories/Hexo/"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg><div class="ellipsis"><span>Hexo</span></div></a></li><li class=""><a href="/categories/Front-End/"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4l-2 14.5l-6 2l-6-2L4 4z"></path><path d="M7.5 8h3v8l-2-1"></path><path d="M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"></path></g></svg><div class="ellipsis"><span>Front-End</span></div></a></li></ul></section>
2023-10-19 22:44:47 +08:00
<script src="/js/f8b20eb9.js"></script>
2023-10-24 09:48:00 +08:00
<!-- icp --><div class="icp"><a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">苏ICP备19008833号-4</a></div></div></aside><main>
<link rel="stylesheet" href="/css/32ae9342.css">
<div class="post-container"><div class="content"><header>
2023-10-19 22:44:47 +08:00
<link rel="stylesheet" href="/css/de5de8fb.css">
2023-10-24 09:48:00 +08:00
<nav class="breadcrumb"><a href="/" class="home tip btn-hover right" data-tip="Home"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill="currentColor"></path></svg></a><em><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path></g></svg></em><a href="/categories/Hexo/">Hexo</a><em><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path></g></svg></em><span class="ellipsis">Cosy Starter Guide</span></nav>
2023-10-19 22:44:47 +08:00
<script src="/js/31d6cfe0.js"></script>
2023-10-24 09:48:00 +08:00
</header><main class="scrollbar-obtrusive"><div class="article-container"><!-- 文章tags --><!-- 渲染文章内容 --><article><p><a href="https://mozzie.cn/2023/10/20/Cosy%20%E5%85%A5%E9%97%A8/">🇨🇳 中文文档</a></p>
2023-10-21 17:55:14 +08:00
<h1 id="Hexo-Installation"><a href="#Hexo-Installation" class="headerlink" title="Hexo Installation"></a>Hexo Installation</h1><p>Installing a <code>Hexo</code> theme is straightforward. Simply copy the <code>Hexo-theme-cosy</code> directory to the <code>themes</code> directory, and then modify the theme configuration in <code>Hexo</code>s <code>_config.yml</code>.</p>
2023-10-20 13:58:15 +08:00
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token comment"># Locate the theme setting</span>
2023-10-21 17:55:14 +08:00
<span class="token key atrule">theme</span><span class="token punctuation">:</span> hexo<span class="token punctuation">-</span>theme<span class="token punctuation">-</span>cosy<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
2023-10-20 13:58:15 +08:00
2023-10-21 17:55:14 +08:00
<h2 id="Acquiring-Cosy"><a href="#Acquiring-Cosy" class="headerlink" title="Acquiring Cosy"></a>Acquiring Cosy</h2><ul>
<li>Visit <a target="_blank" rel="noopener" href="https://github.com/17px/hexo-theme-cosy/tree/main">Cosys code repository</a> to stay updated on the latest theme developments.</li>
<li>Download <code>hexo-theme-cosy.zip</code> from the <a target="_blank" rel="noopener" href="https://github.com/17px/hexo-theme-cosy/releases">releases page</a>.</li>
2023-10-20 13:58:15 +08:00
<li>Extract it into your sites <code>themes</code> directory.</li>
<li>Enable it in Hexos <code>_config.yml</code>.</li>
</ul>
<h1 id="Hexo-Configuration"><a href="#Hexo-Configuration" class="headerlink" title="Hexo Configuration"></a>Hexo Configuration</h1><p>Adjust settings in <code>Hexo</code>s <code>_config.yml</code>.</p>
<h2 id="Basic-Configuration"><a href="#Basic-Configuration" class="headerlink" title="Basic Configuration"></a>Basic Configuration</h2><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token comment"># Website title</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> 17px blog
<span class="token comment"># Sidebar header</span>
<span class="token key atrule">subtitle</span><span class="token punctuation">:</span> <span class="token string">"Mozzie"</span>
<span class="token comment"># HTML meta description for SEO</span>
<span class="token key atrule">description</span><span class="token punctuation">:</span> <span class="token string">""</span>
<span class="token comment"># HTML meta keywords for SEO</span>
<span class="token key atrule">keywords</span><span class="token punctuation">:</span>
<span class="token comment"># Copyright text displaying author's name</span>
<span class="token key atrule">author</span><span class="token punctuation">:</span> Mozzie
<span class="token comment"># Set your website URL here</span>
<span class="token key atrule">url</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//mozzie.cn<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="Language-Switch"><a href="#Language-Switch" class="headerlink" title="Language Switch"></a>Language Switch</h2><p>You can find different language files in <code>hex theme liner/languages</code>. If you want to switch languages, fill in the file name of <code>yml</code> in the <code>_config.yml</code> file</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">language</span><span class="token punctuation">:</span> en<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<h2 id="Code-Highlighting"><a href="#Code-Highlighting" class="headerlink" title="Code Highlighting"></a>Code Highlighting</h2><p>Disable Hexos default highlight.js syntax highlighting.</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">highlight</span><span class="token punctuation">:</span>
<span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token key atrule">line_number</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">auto_detect</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token key atrule">tab_replace</span><span class="token punctuation">:</span> <span class="token string">""</span>
<span class="token key atrule">wrap</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">hljs</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token key atrule">prismjs</span><span class="token punctuation">:</span>
<span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">preprocess</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">line_number</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">line_threshold</span><span class="token punctuation">:</span> <span class="token number">0</span>
<span class="token key atrule">tab_replace</span><span class="token punctuation">:</span> <span class="token string">""</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
2023-10-21 17:55:14 +08:00
<h1 id="Cosy-Theme-Configuration"><a href="#Cosy-Theme-Configuration" class="headerlink" title="Cosy Theme Configuration"></a>Cosy Theme Configuration</h1><p>💡 The following settings are based on the <code>_config.yml</code> under <code>hexo-theme-cosy</code>.</p>
2023-10-20 13:58:15 +08:00
<h2 id="Post-Category-Icons"><a href="#Post-Category-Icons" class="headerlink" title="Post Category Icons"></a>Post Category Icons</h2><p>In sequence, set the <code>svg</code> icons. You can get a wide variety of icons at <a target="_blank" rel="noopener" href="https://www.xicons.org/">xicon</a>.</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">postCategoryIcons</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> &lt;svg<span class="token punctuation">></span><span class="token punctuation">...</span>&lt;/svg<span class="token punctuation">></span>
<span class="token punctuation">-</span> &lt;svg<span class="token punctuation">></span><span class="token punctuation">...</span>&lt;/svg<span class="token punctuation">></span>
<span class="token punctuation">-</span> &lt;svg<span class="token punctuation">></span><span class="token punctuation">...</span>&lt;/svg<span class="token punctuation">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="Website-Favicon"><a href="#Website-Favicon" class="headerlink" title="Website Favicon"></a>Website Favicon</h2><ul>
<li>Supports <code>svg</code></li>
<li>Supports <code>image URL</code>, e.g., <code>/img/favicon.png</code></li>
</ul>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">favicon</span><span class="token punctuation">:</span> <span class="token string">''</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<h2 id="ICP-Number-🇨🇳"><a href="#ICP-Number-🇨🇳" class="headerlink" title="ICP Number 🇨🇳"></a>ICP Number 🇨🇳</h2><p>😁 If not required, can be directly deleted.</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">icp</span><span class="token punctuation">:</span> 苏ICP备xxxxxxx号<span class="token punctuation">-</span>x<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<h2 id="Footer-Text-on-Homepage-🇨🇳"><a href="#Footer-Text-on-Homepage-🇨🇳" class="headerlink" title="Footer Text on Homepage 🇨🇳"></a>Footer Text on Homepage 🇨🇳</h2><p>😁 If not required, can be directly deleted or set to <code>false</code>.</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">motto</span><span class="token punctuation">:</span> <span class="token boolean important">false</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<h2 id="Post-Copyright-Statement"><a href="#Post-Copyright-Statement" class="headerlink" title="Post Copyright Statement"></a>Post Copyright Statement</h2><p>Enabled by default. When <code>enable: false</code>, it is disabled by default.</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">postCopyright</span><span class="token punctuation">:</span>
<span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">license</span><span class="token punctuation">:</span> CC BY<span class="token punctuation">-</span>NC<span class="token punctuation">-</span>SA 4.0
<span class="token key atrule">license_url</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//creativecommons.org/licenses/by<span class="token punctuation">-</span>nc<span class="token punctuation">-</span>sa/4.0/<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="Katex-Mathematical-Formulas"><a href="#Katex-Mathematical-Formulas" class="headerlink" title="Katex Mathematical Formulas"></a>Katex Mathematical Formulas</h2><p>You can configure the CDN yourself.</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">katex</span><span class="token punctuation">:</span>
<span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">jsCdn</span><span class="token punctuation">:</span> //cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js
<span class="token key atrule">cssCdn</span><span class="token punctuation">:</span> //cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="Mermaid-Flowcharts"><a href="#Mermaid-Flowcharts" class="headerlink" title="Mermaid Flowcharts"></a>Mermaid Flowcharts</h2><p>To draft flowchart syntax, use <code>&#123;% mermaid %&#125;` and `&#123;% endmermaid %&#125;</code> as wrappers.</p>
<pre class="line-numbers language-markdown" data-language="markdown"><code class="language-markdown">&#123;% mermaid %&#125;
graph TD;
A --> B;
A --> C;
B --> D;
C --> D;
&#123;% endmermaid %&#125;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>Corresponding configurations are as follows:</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">mermaid</span><span class="token punctuation">:</span>
<span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">cdn</span><span class="token punctuation">:</span> //cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<h2 id="Valine-Comments"><a href="#Valine-Comments" class="headerlink" title="Valine Comments"></a>Valine Comments</h2><p>First, register as a <code>LeanCloud</code> international user and create a database.</p>
<p>Please proceed in accordance with relevant regional regulations.</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">valine</span><span class="token punctuation">:</span>
<span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token comment"># 替换</span>
<span class="token key atrule">appId</span><span class="token punctuation">:</span> appId
<span class="token comment"># 替换</span>
<span class="token key atrule">appKey</span><span class="token punctuation">:</span> appKey
<span class="token key atrule">avatar</span><span class="token punctuation">:</span> monsterid
<span class="token key atrule">cdn</span><span class="token punctuation">:</span> //unpkg.com/valine@latest/dist/Valine.min.js
<span class="token comment"># 替换</span>
<span class="token key atrule">serverURLs</span><span class="token punctuation">:</span> //xxxxxxxx.api.lncldglobal.com<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h1 id="Algolia-Search"><a href="#Algolia-Search" class="headerlink" title="Algolia Search"></a>Algolia Search</h1><p>The blog comes with built-in local search, based on frontend development, which may have some issues. Its recommended to switch to <code>Algolia</code>. The free account has a total of 10,000 records and 100,000 operations per month.</p>
<h2 id="Register-amp-Acquire-Key"><a href="#Register-amp-Acquire-Key" class="headerlink" title="Register &amp; Acquire Key"></a>Register &amp; Acquire Key</h2><ol>
<li><p>Create a new <code>Index</code>, for example, <code>hex-blog</code></p>
</li>
<li><p>Copy and save:</p>
</li>
</ol>
<ul>
<li>Application ID</li>
<li>Search-Only API Key</li>
<li>Admin API Key</li>
<li>Usage API Key</li>
</ul>
2023-10-22 21:07:22 +08:00
<p><img src="/img/algolia-api-keys.png" alt="API Keys"></p>
2023-10-20 13:58:15 +08:00
<ol start="3">
<li>Replace configurations</li>
</ol>
<p>Add the following to Hexos <code>_config.yml</code></p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">algolia</span><span class="token punctuation">:</span>
<span class="token comment"># Replace</span>
<span class="token key atrule">appId</span><span class="token punctuation">:</span> Application ID
<span class="token comment"># Replace</span>
<span class="token key atrule">apiKey</span><span class="token punctuation">:</span> Usage API Key
<span class="token comment"># Do not disclose, used for reporting, replace</span>
<span class="token key atrule">adminApiKey</span><span class="token punctuation">:</span> Admin API Key
<span class="token comment"># Replace</span>
<span class="token key atrule">SearchOnlyAPIKey</span><span class="token punctuation">:</span> Search<span class="token punctuation">-</span>Only API Key
<span class="token key atrule">chunkSize</span><span class="token punctuation">:</span> <span class="token number">5000</span>
<span class="token comment"># Replace</span>
<span class="token key atrule">indexName</span><span class="token punctuation">:</span> hex<span class="token punctuation">-</span>blog
<span class="token key atrule">fields</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> content<span class="token punctuation">:</span>strip
<span class="token punctuation">-</span> categories
<span class="token punctuation">-</span> date
<span class="token punctuation">-</span> permalink
<span class="token punctuation">-</span> slug
<span class="token punctuation">-</span> tags
<span class="token punctuation">-</span> title<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="Install-hexo-algoliasearch"><a href="#Install-hexo-algoliasearch" class="headerlink" title="Install hexo-algoliasearch"></a>Install hexo-algoliasearch</h2><p>This is a Hexo blog post index plugin that automates the submission of indexes to Algolia.</p>
<blockquote>
<p>If you encounter any problems, you can read the <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/hexo-algoliasearch">hexo-algoliasearch repository</a> for the latest instructions.</p>
</blockquote>
<p>Installation command:</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> hexo-algoliasearch <span class="token parameter variable">--save</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<h2 id="Using-Algolia"><a href="#Using-Algolia" class="headerlink" title="Using Algolia"></a>Using Algolia</h2><p>Before publishing each blog post, carry out index uploading operations. The usual commands are as follows:</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo clean
hexo generate
hexo algolia<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
2023-10-21 17:55:14 +08:00
<h1 id="QWeather-Widget-🇨🇳"><a href="#QWeather-Widget-🇨🇳" class="headerlink" title="QWeather Widget 🇨🇳"></a>QWeather Widget 🇨🇳</h1><p>Cosy mainly targets domestic users and integrates QWeather cards on the homepage. Register via <a target="_blank" rel="noopener" href="https://dev.qweather.com/docs/start/">QWeather Developer Service</a>.</p>
2023-10-20 13:58:15 +08:00
<p>After registering, fill in your <code>appKey</code> and <code>cityCode</code> in the configuration.</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">weather</span><span class="token punctuation">:</span>
<span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token comment"># Replace</span>
<span class="token key atrule">cityCode</span><span class="token punctuation">:</span> cityCode
<span class="token key atrule">appKey</span><span class="token punctuation">:</span> appKey<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>You can find your citys <code>cityCode</code> in the official region list repositorys <code>China-City-List-latest.csv</code>.</p>
2023-10-20 16:29:07 +08:00
<h1 id="Front-Matter"><a href="#Front-Matter" class="headerlink" title="Front Matter"></a>Front Matter</h1><p>In Hexos Markdown files, a typical YAML-formatted <code>Front Matter</code> might look like this:</p>
<pre class="line-numbers language-markdown" data-language="markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> My Article Title
<span class="token key atrule">categories</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> javascript
<span class="token key atrule">tags</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> Programming
<span class="token punctuation">-</span> JavaScript</span>
<span class="token punctuation">---</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="top"><a href="#top" class="headerlink" title="top"></a>top</h2><p>To pin an article to the top, assign a numerical value to the <code>top</code> metadata. Articles with a specified <code>top</code> value will be marked with a 📌 icon in the category list.</p>
<p>For example, if there are three articles:</p>
<ul>
<li>Article 1</li>
</ul>
<pre class="line-numbers language-markdown" data-language="markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> Article 1
<span class="token key atrule">top</span><span class="token punctuation">:</span> <span class="token number">0</span>
<span class="token key atrule">categories</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> javascript</span>
<span class="token punctuation">---</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<ul>
<li>Article 2</li>
</ul>
<pre class="line-numbers language-markdown" data-language="markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> Article 2
<span class="token key atrule">top</span><span class="token punctuation">:</span> <span class="token number">1</span>
<span class="token key atrule">categories</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> javascript</span>
<span class="token punctuation">---</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<ul>
<li>Article 3</li>
</ul>
<pre class="line-numbers language-markdown" data-language="markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> Article 3
<span class="token key atrule">categories</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> javascript</span>
<span class="token punctuation">---</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>Then, under the <code>javascript</code> category, the sort order will be: <code>Article 1 &gt; Article 2 &gt; Article 3</code>.</p>
2023-10-21 17:55:14 +08:00
<h2 id="status"><a href="#status" class="headerlink" title="status"></a>status</h2><p>This is used to differentiate the status of articles and can be quickly <code>filtered</code> using the category list. The Cosy theme comes with 4 built-in statuses:</p>
2023-10-20 16:29:07 +08:00
<ul>
<li>done: Completed</li>
<li>doing: In Progress</li>
<li>todo: To Do</li>
<li>other: Abandoned</li>
</ul>
<p>For example:</p>
<pre class="line-numbers language-markdown" data-language="markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token front-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> Article 1
<span class="token key atrule">categories</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> javascript
<span class="token key atrule">status</span><span class="token punctuation">:</span> done</span>
<span class="token punctuation">---</span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
2023-10-19 22:44:47 +08:00
</article>
<link rel="stylesheet" href="/css/ccbcde32.css">
2023-10-24 09:48:00 +08:00
<div class="copyright"><a target="_blank" href="https://mozzie.cn/2023/10/23/Cosy-Starter-Guide/"><span>Post Url</span><span>https://mozzie.cn/2023/10/23/Cosy-Starter-Guide/</span></a><ul><li><span>Author</span><p>Mozzie</p></li><li><span>Published on</span><p>2023-10-23</p></li><li><span>License</span><p><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></p></li></ul></div>
2023-10-19 22:44:47 +08:00
<script src="/js/31d6cfe0.js"></script>
2023-10-24 09:48:00 +08:00
<!-- 评论 --><div id="vcomments"></div></div></main></div><div class="meta-container"><div class="toc-wrapper content-dialog"><p class="catalog"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h12"></path></g></svg><span>Catalog</span></p><!-- 文章toc --><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Hexo-Installation"><span class="toc-number">1.</span> <span class="toc-text">Hexo Installation</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Acquiring-Cosy"><span class="toc-number">1.1.</span> <span class="toc-text">Acquiring Cosy</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Hexo-Configuration"><span class="toc-number">2.</span> <span class="toc-text">Hexo Configuration</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Basic-Configuration"><span class="toc-number">2.1.</span> <span class="toc-text">Basic Configuration</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Language-Switch"><span class="toc-number">2.2.</span> <span class="toc-text">Language Switch</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Code-Highlighting"><span class="toc-number">2.3.</span> <span class="toc-text">Code Highlighting</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Cosy-Theme-Configuration"><span class="toc-number">3.</span> <span class="toc-text">Cosy Theme Configuration</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Post-Category-Icons"><span class="toc-number">3.1.</span> <span class="toc-text">Post Category Icons</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Website-Favicon"><span class="toc-number">3.2.</span> <span class="toc-text">Website Favicon</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ICP-Number-%F0%9F%87%A8%F0%9F%87%B3"><span class="toc-number">3.3.</span> <span class="toc-text">ICP Number 🇨🇳</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Footer-Text-on-Homepage-%F0%9F%87%A8%F0%9F%87%B3"><span class="toc-number">3.4.</span> <span class="toc-text">Footer Text on Homepage 🇨🇳</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Post-Copyright-Statement"><span class="toc-number">3.5.</span> <span class="toc-text">Post Copyright Statement</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Katex-Mathematical-Formulas"><span class="toc-number">3.6.</span> <span class="toc-text">Katex Mathematical Formulas</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Mermaid-Flowcharts"><span class="toc-number">3.7.</span> <span class="toc-text">Mermaid Flowcharts</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Valine-Comments"><span class="toc-number">3.8.</span> <span class="toc-text">Valine Comments</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Algolia-Search"><span class="toc-number">4.</span> <span class="toc-text">Algolia Search</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Register-amp-Acquire-Key"><span class="toc-number">4.1.</span> <span class="toc-text">Register &amp; Acquire Key</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Install-hexo-algoliasearch"><span class="toc-number">4.2.</span> <span class="toc-text">Install hexo-algoliasearch</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Using-Algolia"><span class="toc-number">4.3.</span> <span class="toc-text">Using Algolia</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#QWeather-Widget-%F0%9F%87%A8%F0%9F%87%B3"><
2023-10-21 17:55:14 +08:00
<script src="/js/a02fa72b.js"></script>
2023-10-24 09:48:00 +08:00
</main></body><script> window.i18n = { "tip-collapse": "Collapse", "tip-expand": "Expand", "text-select": "select", "text-move": "movement", "text-esc": "close", "tip-status-done": "Done", "tip-status-doing": "In Progress", "tip-status-todo": "Todo", "tip-status-other": "Duplicate", "tip-status-default": "Default", "text-search": "Search..." } </script>
2023-10-19 22:44:47 +08:00
<script src="/js/85d1c72e.js"></script>
</html>