-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.json
1 lines (1 loc) · 479 KB
/
search.json
1
[{"title":"JS相关函数汇总","url":"/JS%E7%9B%B8%E5%85%B3%E5%87%BD%E6%95%B0%E6%B1%87%E6%80%BB/","content":"<h1 id=\"JS笔记及函数汇总记忆\"><a href=\"#JS笔记及函数汇总记忆\" class=\"headerlink\" title=\"JS笔记及函数汇总记忆\"></a><a href=\"https%EF%BC%9A//www.w3cschool.cn/javascript/dict\">JS笔记及函数汇总记忆</a></h1><h2 id=\"1-Browswer\"><a href=\"#1-Browswer\" class=\"headerlink\" title=\"1.Browswer\"></a>1.Browswer</h2><h3 id=\"Window-Properties-（window属性）\"><a href=\"#Window-Properties-（window属性）\" class=\"headerlink\" title=\"Window Properties （window属性）\"></a>Window Properties （window属性）</h3><p>document (document对象)<br>history (history对象，包含了用户在浏览器窗口访问过的URL)<br>location (对象包含有关当前URL的信息)<br>navigator (对象包含浏览器有关信息，可不使用window前缀)<br>screen (对象包含客户端显示屏的信息)</p>\n<p>name (用于设置和存放窗口名称)<br>parent (返回当前窗口的父窗口的window对象)<br>opener (返回对创建该窗口的window对象的引用，用于window.open()方法创建的窗口)<br>self (返回对窗口自身的只读引用)</p>\n<p>innerHeight (窗口文档显示区域的高度)<br>innerWidth (窗口文档显示区域的宽度)<br>outerHeight (窗口外部高度，包括所有元素如滚动栏工具栏)<br>outerWidth (窗口内部高度，包括所有元素如滚动栏工具栏)<br>closed (监控窗口是否关闭)<br>pageXOffset (当前页相对窗口显示区左上角的X位置)<br>pageYOffset (当前页相对窗口显示区左上角的Y位置)<br>screenLeft (返回窗口相对于屏幕的X坐标)<br>screenTop (返回窗口相对于屏幕的Y坐标)（IE不支持）<br>screenX (返回窗口相对于屏幕的X坐标)<br>screenY (返回窗口相对于屏幕的Y坐标)（火狐不支持）</p>\n<h3 id=\"Window-Methods-（window方法）\"><a href=\"#Window-Methods-（window方法）\" class=\"headerlink\" title=\"Window Methods （window方法）\"></a>Window Methods （window方法）</h3><p>alert() ：显示一个指定消息和确认按钮的警告框<br>confirm() ：显示一个带有指定消息和确认和取消按钮的对话框<br>prompt() ：显示可以提示用户进行输入的对话框</p>\n<p>focus() ：设置焦点 （可以给DOM元素设置）<br>blur() ：把键盘焦点从顶层窗口移开 （可以清除DOM元素焦点）<br>close() ：关闭浏览器窗口<br>open() ：打开一个新的浏览器窗口或者查找一个已命名的窗口</p>\n<p>print() ：打印当前浏览器窗口</p>\n<p>setInterval() ：设置定时器<br>clearInterval() ：清除定时器<br>setTimeout() ：设置延时器<br>clearTimeout() ：清除延时器</p>\n<p>moveBy() ：相对窗口当前坐标移动窗口<br>moveTo() ：把窗口移动到相对左上角的指定坐标<br>resizeBy() ：<br>resizeTo() ：窗口大小重新设置</p>\n<p>scrollBy(x,y) ：可以把内容滚动到指定的像素数,x向右滚动像素，y向下滚动像素<br>scrollTo(x,y) ：可以把内动滚动到指定坐标</p>\n<h2 id=\"2-Basic-Objects\"><a href=\"#2-Basic-Objects\" class=\"headerlink\" title=\"2.Basic Objects\"></a>2.Basic Objects</h2><h3 id=\"Array-Methods-数组方法\"><a href=\"#Array-Methods-数组方法\" class=\"headerlink\" title=\"Array Methods (数组方法)\"></a>Array Methods <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvemgtQ04vZG9jcy9XZWIvSmF2YVNjcmlwdC9SZWZlcmVuY2UvR2xvYmFsX09iamVjdHMvQXJyYXkvZmlsdGVy\">(数组方法)<i class=\"fa fa-external-link-alt\"></i></span></h3><p>concat(array2,...) ：链接两个或者多个数组，返回被连接数组的一个副本<br>indexOf(item,start) ：查找数组中首个出现的匹配项，或者字符串中首个出现的值<br>lastIndexOf(item,start) ：找最后一个匹配项<br>join(separator) ：把数组元素链接成一个字符串，参数为链接符号，默认逗号<br>pop() ：移除数组最后一个元素，返回移除的元素<br>shift() ：移除数组第一个元素，返回移除的元素<br>push() ：向末尾添加一个或多个元素，并返回新数组长度<br>unshift() ：想数组开头添加一个或更多元素，并返回新数组长度<br>reverse() ：颠倒数组元素顺序<br>slice(start,end) ：提取数组中某一段的元素，并返回提取出的新数组<br>toString() ：把数组转化为字符串，并返回结果，用逗号连接<br>map() ：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成</p>\n<h3 id=\"Math-Properties-And-Methods（Math对象相关属性和方法）\"><a href=\"#Math-Properties-And-Methods（Math对象相关属性和方法）\" class=\"headerlink\" title=\"Math Properties And Methods（Math对象相关属性和方法）\"></a>Math Properties And Methods（Math对象相关属性和方法）</h3><p>Math.E ：自然对数底数<br>Math.PI ：圆周率</p>\n<p>Math.abs() ：返回一个数的绝对值<br>Math.sin() ：返回一个数的正弦（单位为弧度）<br>Math.asin() ：返回一个值的反正弦</p>\n<p>Math.sqrt() ：返回一个数的平方根<br>Math.cbrt() ：返回一个数的立方根<br>Math.ceil() ：返回大于给定值的最小整数<br>Math.floor() ：返回小于给定值的最大整数<br>Math.round() ：返回最接近的整数</p>\n<p>Math.max() ：返回输入参数的最大值<br>Math.min() ：返回输入参数的最小值</p>\n<p>Math.random() ：返回一个随机0-1中的浮点数（包括0,不包括1<br>Math.exp() ：返回 E 的 x 次幂的值, x为入参 </p>\n<h3 id=\"String-Methods-（String对象方法）\"><a href=\"#String-Methods-（String对象方法）\" class=\"headerlink\" title=\"String Methods （String对象方法）\"></a>String Methods （String对象方法）</h3><p>charAt() ：返回指定位置的字符<br>charCodeAt() ：返回指定位置字符的Unicode编码<br>fromCharCode() ：将指定Unicode编码转化为对应字符<br>match(reg) ：在字符串中找到指定的值，可以用正则匹配<br>replace(str1,str2) ：字符串全局替换，将st1替换为str2<br>search(reg) ：检索字符串中指定的子字符串，或者与正则表达式相匹配的子字符串，返回第一个所在位置<br>split(separator) ：将字符串分割，separator为分割标志，默认每个字符都被分割<br>substr(start,length) ：在字符串中抽取，从下标开始的指定数目的字符<br>substring(from,to) ：提取两个指定下标之间的字符，包括开始字符，但不包括结束字符<br>toLowerCase() ：将字符串转换为小写<br>toUpperCase() ：将字符串转换为大写</p>\n<h3 id=\"Global-Methods-全局方法\"><a href=\"#Global-Methods-全局方法\" class=\"headerlink\" title=\"Global Methods (全局方法)\"></a>Global Methods (全局方法)</h3><p>encodeURL(url) ：对url编码进行编码，url中的特殊字符不会被编码，如/?<br>decodeURL(url) ：对url编码进行解码</p>\n<p>encodeURLComponent() ：对字符串编码，全部编码为ASCLL码，除了 - _ . ! ~ * ' ( )<br>decodeURLComponent() ；对应解码</p>\n<p>escape() ：字符串编码，除了ASCLL和* @ - _ + . /<br>unescape() ：解码</p>\n<p>isNaN() ：是否不是数字<br>Number() ：将参数转化为数字，若不能则返回NaN<br>String() ：把对象转化为字符串</p>\n<p>parseFloat() ：字符串首个为数字时，返回从左到右检索出的浮点数。若第首个不是数字则返回NaN<br>parseInt(string, radix) ：可解析一个字符串，并返回一个整数。"0x"开头时，解析为16进制</p>\n<h2 id=\"DOM-Node\"><a href=\"#DOM-Node\" class=\"headerlink\" title=\"DOM Node\"></a>DOM Node</h2><h3 id=\"Node-Properties-节点属性\"><a href=\"#Node-Properties-节点属性\" class=\"headerlink\" title=\"Node Properties (节点属性)\"></a>Node Properties (节点属性)</h3><h3 id=\"Node-Methods-节点方法\"><a href=\"#Node-Methods-节点方法\" class=\"headerlink\" title=\"Node Methods (节点方法)\"></a>Node Methods (节点方法)</h3>"},{"title":"Welcome to StarsLeopard's World!","url":"/hexo-theme-next/","content":"<p> 欢迎来到以豹制豹的私人空间，这里用来分享和记录一些学习上的收获和笔记</p>\n"},{"title":"测试用新建博客","url":"/%E6%B5%8B%E8%AF%95%E7%94%A8%E6%96%B0%E5%BB%BA%E5%8D%9A%E5%AE%A2/","content":"<p>这是一片测试用的博客</p>\n","tags":["测试"]},{"title":"404","url":"//404.html","content":"<figure class=\"highlight plaintext\"><table><tr><td class=\"code\"><pre><span class=\"line\">██╗ ██╗ ██████╗ ██╗ ██╗ ███╗ ██╗ ██████╗ ████████╗</span><br><span class=\"line\">██║ ██║██╔═████╗██║ ██║ ████╗ ██║██╔═══██╗╚══██╔══╝</span><br><span class=\"line\">███████║██║██╔██║███████║ ██╔██╗ ██║██║ ██║ ██║</span><br><span class=\"line\">╚════██║████╔╝██║╚════██║ ██║╚██╗██║██║ ██║ ██║</span><br><span class=\"line\"> ██║╚██████╔╝ ██║ ██║ ╚████║╚██████╔╝ ██║</span><br><span class=\"line\"> ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═══╝ ╚═════╝ ╚═╝</span><br><span class=\"line\"></span><br><span class=\"line\"> ███████╗ ██████╗ ██╗ ██╗███╗ ██╗██████╗</span><br><span class=\"line\"> ██╔════╝██╔═══██╗██║ ██║████╗ ██║██╔══██╗</span><br><span class=\"line\"> █████╗ ██║ ██║██║ ██║██╔██╗ ██║██║ ██║</span><br><span class=\"line\"> ██╔══╝ ██║ ██║██║ ██║██║╚██╗██║██║ ██║</span><br><span class=\"line\"> ██║ ╚██████╔╝╚██████╔╝██║ ╚████║██████╔╝</span><br><span class=\"line\"> ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═══╝╚═════╝</span><br></pre></td></tr></table></figure>\n"},{"title":"Troubleshooting","url":"/docs/troubleshooting.html","content":"<h3 id=\"Quick-Debug-Instructions\"><a href=\"#Quick-Debug-Instructions\" class=\"headerlink\" title=\"Quick Debug Instructions\"></a>Quick Debug Instructions</h3><p><strong>Before submitting an Issue on GitHub, you can follow the steps below to debug:</strong></p>\n<p>If you get an error message from Hexo or your browser:</p>\n<ul>\n<li>If the error comes from a Hexo plugin, such as hexo-word-counter, please submit an Issue to its GitHub repository.</li>\n<li>If the error comes from a third-party service, such as the Gitalk comment system, please submit an Issue to its GitHub repository.</li>\n<li>Otherwise, please search in Google / Stackoverflow / GitHub Issues, or report it to us when submitting a new Issue.</li>\n</ul>\n<p>The following steps will help you determine the cause of the problem:</p>\n<ul>\n<li>Execute <code>hexo clean</code>, clear the browser cache and purge CDN cache (or disable all CDN services) - This may take some time to take effect.</li>\n<li>Disable browser plug-ins or use other devices and browsers to test, because bugs may only occur in specific browsers.</li>\n<li>Switch to another theme and check if the bug still exists (e.g. default theme landscape).</li>\n<li>Upgrade theme NexT to the latest version.</li>\n<li>Upgrade Hexo and all Hexo plugins to the latest version. You can use tools like <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cubnBtanMuY29tL3BhY2thZ2UvbnBtLWNoZWNr\">npm-check<i class=\"fa fa-external-link-alt\"></i></span>.</li>\n<li>Upgrade or downgrade Node.js to the latest LTS version.</li>\n<li>Uninstall all non-essential Hexo plugins, or delete <code>node_modules</code> and then reinstall all plugins using <code>npm install --force</code>.</li>\n</ul>\n<p>If you decide to submit an Issue, please answer the following questions based on the Issue template:</p>\n<ul>\n<li>Can you reproduce the problem? Can you reliably reproduce the issue? If not, provide details about how often the problem happens and under which conditions it normally happens.</li>\n<li>Did the problem start happening recently or was this always a problem?</li>\n<li>If the problem started happening recently, can you reproduce the problem in an older version of NexT? What's the most recent version in which the problem doesn't happen? You can download older versions of NexT from <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by10aGVtZS1uZXh0L3JlbGVhc2Vz\">the releases page<i class=\"fa fa-external-link-alt\"></i></span>.</li>\n<li>Which version of Node, Hexo and NexT are you using? You can get the exact version by running <code>node -v</code>, <code>hexo version</code> in your terminal.</li>\n<li>Which packages do you have installed? You can get that list by copying the output from <code>npm ls --depth 0</code> in Hexo root directory.</li>\n</ul>\n<h3 id=\"Keep-Up-Indentation\"><a href=\"#Keep-Up-Indentation\" class=\"headerlink\" title=\"Keep Up Indentation\"></a>Keep Up Indentation</h3><p>When you edit any YAML configs, always need to keep up indents.<br>Currently, in all Hexo and NexT configuration files parameters uses <strong>2 spaces indents</strong> from parent option.</p>\n<p>If you encounter other yaml errors, you can also check if there is a syntax problem in the configuration file or front-matter.</p>\n<h3 id=\"Set-skip-render\"><a href=\"#Set-skip-render\" class=\"headerlink\" title=\"Set skip_render\"></a>Set <code>skip_render</code></h3><p>If you want to skip rendering for some files, you can set <code>skip_render</code> in the <mark class=\"label info\">Hexo config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">skip_render:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">robots.txt</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">CNAME</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Dark-Mode-not-Working\"><a href=\"#Dark-Mode-not-Working\" class=\"headerlink\" title=\"Dark Mode not Working\"></a>Dark Mode not Working</h3><p>There are 3 prerequisites for Dark Mode to work:</p>\n<ol>\n<li>Enable <code>darkmode</code> in <mark class=\"label primary\">NexT config file</mark>.</li>\n<li>Your browser supports <code>prefers-color-scheme</code> media query. (Supported by most browsers released after 2020)</li>\n<li>Enable Dark Mode in your operating system settings.</li>\n</ol>\n<p>In some operating systems, such as macOS, you can configure to enable dark mode at night. In other operating systems, the default color scheme is light, so you need to turn on Dark Mode in the system settings manually.</p>\n<h3 id=\"TOC-Issues\"><a href=\"#TOC-Issues\" class=\"headerlink\" title=\"TOC Issues\"></a>TOC Issues</h3><p>Do not write a skip-level heading in the post. For example, a third-tier heading <code>###</code> followed by a <code>#####</code> is not recommended.<br>See: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L2lzc3Vlcy84ODI=\">https://github.com/theme-next/hexo-theme-next/issues/882<i class=\"fa fa-external-link-alt\"></i></span></p>\n<p>If you are using <code>hexo-renderer-markdown-it</code>, it's recommended to install <code>markdown-it-named-headings</code> to make the TOC work correctly.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">npm install markdown-it-named-headings</span><br></pre></td></tr></table></figure>\n\n<p>See: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L2lzc3Vlcy8xMTY4\">https://github.com/theme-next/hexo-theme-next/issues/1168<i class=\"fa fa-external-link-alt\"></i></span><br>Here is the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLXJlbmRlcmVyLW1hcmtkb3duLWl0L3B1bGwvOTA=\">Pull Request with bugfix for default config<i class=\"fa fa-external-link-alt\"></i></span> of <code>hexo-renderer-markdown-it</code> plugin.</p>\n<h3 id=\"Favicon-Set-but-Doesn-39-t-Work\"><a href=\"#Favicon-Set-but-Doesn-39-t-Work\" class=\"headerlink\" title=\"Favicon Set but Doesn't Work\"></a>Favicon Set but Doesn't Work</h3><p>Put your <code>favicon</code> under <mark class=\"label info\">site's</mark> <code>source</code> dir. If you find that your Favicon doesn't work, please clean your browser's cache first and then visit your Favicon's URL directly, which should be <code>http(s)://your-domain.com/favicon.ico</code>.</p>\n<div class=\"note warning\"><p>If your site is in a subdirectory please set it to <code>favicon: favicon.ico</code>.</p>\n</div>\n"},{"title":"Documentation","url":"/docs/index.html","content":"<h3 id=\"Elegant-and-Powerful-Theme-for-Hexo\"><a href=\"#Elegant-and-Powerful-Theme-for-Hexo\" class=\"headerlink\" title=\"Elegant and Powerful Theme for Hexo\"></a>Elegant and Powerful Theme for Hexo</h3><p>Theme NexT has the following features:</p>\n<ul>\n<li>Vanilla JavaScript.</li>\n<li>Support <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jYW5pdXNlLmNvbS9wcmVmZXJzLWNvbG9yLXNjaGVtZQ==\">native dark mode<i class=\"fa fa-external-link-alt\"></i></span>.</li>\n<li>Support <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL01vT3gvcGpheA==\">Pjax<i class=\"fa fa-external-link-alt\"></i></span> to deliver a fast browsing experience.</li>\n<li>Integrated <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cubWF0aGpheC5vcmcv\">MathJax<i class=\"fa fa-external-link-alt\"></i></span> and <span class=\"exturl\" data-url=\"aHR0cHM6Ly9rYXRleC5vcmcv\">KaTeX<i class=\"fa fa-external-link-alt\"></i></span> mathematical formula rendering.</li>\n<li>Integrated <span class=\"exturl\" data-url=\"aHR0cHM6Ly9tb3ppbGxhLmdpdGh1Yi5pby9wZGYuanMv\">PDF.js<i class=\"fa fa-external-link-alt\"></i></span> and <span class=\"exturl\" data-url=\"aHR0cHM6Ly9tZXJtYWlkLWpzLmdpdGh1Yi5pby9tZXJtYWlkLw==\">mermaid diagram<i class=\"fa fa-external-link-alt\"></i></span>.</li>\n<li>Support <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kaXNxdXMuY29tLw==\">Disqus<i class=\"fa fa-external-link-alt\"></i></span>, <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jaGFuZ3lhbi5rdWFpemhhbi5jb20v\">Changyan<i class=\"fa fa-external-link-alt\"></i></span>, <span class=\"exturl\" data-url=\"aHR0cHM6Ly9saXZlcmUuY29tLw==\">LiveRe<i class=\"fa fa-external-link-alt\"></i></span>, <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRhbGsuZ2l0aHViLmlvLw==\">Gitalk<i class=\"fa fa-external-link-alt\"></i></span>, <span class=\"exturl\" data-url=\"aHR0cHM6Ly91dHRlcmFuYy5lcy8=\">Utterances<i class=\"fa fa-external-link-alt\"></i></span> and <span class=\"exturl\" data-url=\"aHR0cHM6Ly9pc3NvLWNvbW1lbnRzLmRlLw==\">Isso<i class=\"fa fa-external-link-alt\"></i></span> comment systems.</li>\n<li>Support a large number of third-party statistics services.</li>\n<li>Easy to switch CDN provider.</li>\n<li>Easy to customize content or modify style.</li>\n</ul>\n<h3 id=\"Four-Schemes-in-One\"><a href=\"#Four-Schemes-in-One\" class=\"headerlink\" title=\"Four Schemes in One\"></a>Four Schemes in One</h3><p>By using different Schemes in NexT, you can simply change the style of your blog, and nearly all options can be used in all schemes.</p>\n<style>\n.image-comparison-container {\n position: relative;\n}\n\n.image-comparison {\n opacity: 1 !important;\n}\n\n@keyframes next-clip-path {\n from {\n clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);\n }\n to {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n }\n}\n\n.image-comparison:last-of-type {\n animation: next-clip-path 8s alternate ease-in-out infinite;\n position: absolute;\n top: 0;\n}\n</style>\n<div class=\"image-comparison-container\">\n <img class=\"image-comparison\" src=\"/images/next-schemes.png\" alt=\"NexT Schemes\">\n <img class=\"image-comparison\" src=\"/images/next-schemes-dark.png\" alt=\"NexT Schemes\">\n</div>\n\n<h3 id=\"Multilingual-Support\"><a href=\"#Multilingual-Support\" class=\"headerlink\" title=\"Multilingual Support\"></a>Multilingual Support</h3><p>Thanks to the contribution of our users and developers, <a href=\"/docs/theme-settings/internationalization.html#Choosing-Language\">NexT now supports over 20 languages</a>.</p>\n<div class=\"group-picture\"><div class=\"group-picture-row\"><div class=\"group-picture-column\"><img src=\"/images/en.png\" alt=\"English translation\" loading=\"lazy\"></div></div><div class=\"group-picture-row\"><div class=\"group-picture-column\"><img src=\"/images/cn.png\" alt=\"Chinese translation\" loading=\"lazy\"></div><div class=\"group-picture-column\"><img src=\"/images/ru.png\" alt=\"Russian translation\" loading=\"lazy\"></div></div></div>\n\n<h3 id=\"Code-Highlighting-Themes\"><a href=\"#Code-Highlighting-Themes\" class=\"headerlink\" title=\"Code Highlighting Themes\"></a>Code Highlighting Themes</h3><p>NexT uses code highlighting themes from the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oaWdobGlnaHRqcy5vcmcv\">Highlight.js<i class=\"fa fa-external-link-alt\"></i></span> and <span class=\"exturl\" data-url=\"aHR0cHM6Ly9wcmlzbWpzLmNvbS8=\">Prism<i class=\"fa fa-external-link-alt\"></i></span> package, and makes <a href=\"/docs/theme-settings/miscellaneous.html#Codeblock-Style\">more than 300 themes</a> available to you.</p>\n<!-- Inspired by https://github.com/sindresorhus/css-in-readme-like-wat -->\n<table>\n<thead>\n<tr>\n<th align=\"center\">Tomorrow</th>\n<th align=\"center\">Tomorrow Night</th>\n<th align=\"center\">Tomorrow Night Eighties</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align=\"center\"><img src=\"/images/tomorrow.svg\" alt=\"Tomorrow\" loading=\"lazy\"></td>\n<td align=\"center\"><img src=\"/images/tomorrow-night.svg\" alt=\"Tomorrow Night\" loading=\"lazy\"></td>\n<td align=\"center\"><img src=\"/images/tomorrow-night-eighties.svg\" alt=\"Tomorrow Night Eighties\" loading=\"lazy\"></td>\n</tr>\n</tbody></table>\n<table>\n<thead>\n<tr>\n<th align=\"center\">Tomorrow Night Blue</th>\n<th align=\"center\">Tomorrow Night Bright</th>\n<th align=\"center\">Default</th>\n</tr>\n</thead>\n<tbody><tr>\n<td align=\"center\"><img src=\"/images/tomorrow-night-blue.svg\" alt=\"Tomorrow Night Blue\" loading=\"lazy\"></td>\n<td align=\"center\"><img src=\"/images/tomorrow-night-bright.svg\" alt=\"Tomorrow Night Bright\" loading=\"lazy\"></td>\n<td align=\"center\"><img src=\"/images/default.svg\" alt=\"Default\" loading=\"lazy\"></td>\n</tr>\n</tbody></table>\n<h3 id=\"Supported-Browsers\"><a href=\"#Supported-Browsers\" class=\"headerlink\" title=\"Supported Browsers\"></a>Supported Browsers</h3><p>We design NexT to support the latest web browsers. We support the current versions of Chrome, Firefox, Safari, and Microsoft Edge. Many CSS3 and ES6 features are used in theme NexT, including CSS Variables, Destructuring assignment, Arrow functions and Spread operator.</p>\n<table>\n<thead>\n<tr>\n<th>Browser</th>\n<th>Supported versions</th>\n<th>Release date</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><i class=\"fab fa-internet-explorer fa-2x\"></i> IE</td>\n<td>N/A</td>\n<td>Oct 17, 2013</td>\n</tr>\n<tr>\n<td><i class=\"fab fa-chrome fa-2x\"></i> Chrome</td>\n<td>60+</td>\n<td>Jul 25, 2017</td>\n</tr>\n<tr>\n<td><i class=\"fab fa-firefox-browser fa-2x\"></i> Firefox</td>\n<td>55+</td>\n<td>Aug 8, 2017</td>\n</tr>\n<tr>\n<td><i class=\"fab fa-opera fa-2x\"></i> Opera</td>\n<td>47+</td>\n<td>Aug 9, 2017</td>\n</tr>\n<tr>\n<td><i class=\"fab fa-safari fa-2x\"></i> Safari</td>\n<td>11+</td>\n<td>Sep 19, 2017</td>\n</tr>\n<tr>\n<td><i class=\"fab fa-edge fa-2x\"></i> Edge</td>\n<td>80+</td>\n<td>Feb 7, 2020</td>\n</tr>\n</tbody></table>\n<p>Some other new Web APIs, such as <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jYW5pdXNlLmNvbS9pbnRlcnNlY3Rpb25vYnNlcnZlcg==\">IntersectionObserver<i class=\"fa fa-external-link-alt\"></i></span> and <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jYW5pdXNlLmNvbS9mZXRjaA==\">Fetch API<i class=\"fa fa-external-link-alt\"></i></span>, are used by NexT plugins. They are not core functions of NexT, so we have no plans to make them compatible with legacy browsers.</p>\n<p>In addition, <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jYW5pdXNlLmNvbS9jc3Mtc3RpY2t5\">CSS position: sticky<i class=\"fa fa-external-link-alt\"></i></span> is used for sidebar positioning. On browsers that do not support this property, its fallback style <code>position: static</code> will be used.</p>\n<h3 id=\"Customize-Your-NexT\"><a href=\"#Customize-Your-NexT\" class=\"headerlink\" title=\"Customize Your NexT\"></a>Customize Your NexT</h3><p>NexT have flexible but simple options, and you can make your own blog with built-in third-party support. Now let's <a href=\"/docs/getting-started/\">get started</a>.</p>\n"},{"title":"Plugins","url":"/plugins/index.html","content":"<h3 id=\"Hexo-Plugins\"><a href=\"#Hexo-Plugins\" class=\"headerlink\" title=\"Hexo Plugins\"></a>Hexo Plugins</h3><ul>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by1nZW5lcmF0b3Itc2VhcmNoZGI=\">hexo-generator-searchdb<i class=\"fa fa-external-link-alt\"></i></span></li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by1wYW5ndQ==\">hexo-pangu<i class=\"fa fa-external-link-alt\"></i></span></li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by1maWx0ZXItbWF0aGpheA==\">hexo-filter-mathjax<i class=\"fa fa-external-link-alt\"></i></span></li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by13b3JkLWNvdW50ZXI=\">hexo-word-counter<i class=\"fa fa-external-link-alt\"></i></span></li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by1vcHRpbWl6ZQ==\">hexo-optimize<i class=\"fa fa-external-link-alt\"></i></span></li>\n</ul>\n<h3 id=\"NexT-Plugins\"><a href=\"#NexT-Plugins\" class=\"headerlink\" title=\"NexT Plugins\"></a>NexT Plugins</h3><ul>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by1uZXh0LXRocmVl\">hexo-next-three<i class=\"fa fa-external-link-alt\"></i></span></li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by1uZXh0LWZpcmV3b3Jrcw==\">hexo-next-fireworks<i class=\"fa fa-external-link-alt\"></i></span></li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by1uZXh0LWV4aWY=\">hexo-next-exif<i class=\"fa fa-external-link-alt\"></i></span></li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by1uZXh0LXZhbGluZQ==\">hexo-next-valine<i class=\"fa fa-external-link-alt\"></i></span></li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by1uZXh0LWdpc2N1cw==\">hexo-next-giscus<i class=\"fa fa-external-link-alt\"></i></span></li>\n</ul>\n<hr>\n<ul>\n<li>Visit the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvYXdlc29tZS1uZXh0\">Awesome NexT<i class=\"fa fa-external-link-alt\"></i></span> list for more plugins.</li>\n</ul>\n"},{"title":"Custom Files","url":"/docs/advanced-settings/custom-files.html","content":"<h3 id=\"Custom-File-Support\"><a href=\"#Custom-File-Support\" class=\"headerlink\" title=\"Custom File Support\"></a>Custom File Support</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L3B1bGwvODY4\">Pull Request #868<i class=\"fa fa-external-link-alt\"></i></span> has adjusted the way of customizing the layout or style, canceling the custom files (such as <code>_custom/custom.styl</code>) in the original theme directory, and only retaining the way of specifying the custom file in the <mark class=\"label primary\">NexT config file</mark>.</p>\n<p>It is a good practice to separate the custom files from the theme files, so that you can add custom content without modifying the original source code of the theme, and avoid conflicts due to <code>git merge</code>.</p>\n<p>As with <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvZGF0YS1maWxlcw==\">Data Files<i class=\"fa fa-external-link-alt\"></i></span>, you can place all custom layouts or styles in a specific location (for example: <code>hexo/source/_data</code>). Add the custom file to <code>hexo/source/_data</code> and uncomment the content under the <code>custom_file_path</code> section in the <mark class=\"label primary\">NexT config file</mark>.</p>\n<div class=\"note warning\"><p>The file name and path must be the same in <code>custom_file_path</code>.</p>\n</div>\n\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">custom_file_path:</span></span><br><span class=\"line\"> <span class=\"comment\">#head: source/_data/head.njk</span></span><br><span class=\"line\"> <span class=\"comment\">#header: source/_data/header.njk</span></span><br><span class=\"line\"> <span class=\"comment\">#sidebar: source/_data/sidebar.njk</span></span><br><span class=\"line\"> <span class=\"comment\">#postMeta: source/_data/post-meta.njk</span></span><br><span class=\"line\"> <span class=\"comment\">#postBodyStart: source/_data/post-body-start.njk</span></span><br><span class=\"line\"> <span class=\"comment\">#postBodyEnd: source/_data/post-body-end.njk</span></span><br><span class=\"line\"> <span class=\"comment\">#footer: source/_data/footer.njk</span></span><br><span class=\"line\"> <span class=\"comment\">#bodyEnd: source/_data/body-end.njk</span></span><br><span class=\"line\"> <span class=\"comment\">#variable: source/_data/variables.styl</span></span><br><span class=\"line\"> <span class=\"comment\">#mixin: source/_data/mixins.styl</span></span><br><span class=\"line\"> <span class=\"comment\">#style: source/_data/styles.styl</span></span><br></pre></td></tr></table></figure>\n\n<p>In addition to <code>custom_file_path</code>, we also provide a more flexible way to customize, you can read the <a href=\"/docs/advanced-settings/injects.html\">Theme Inject</a> in documentation.</p>\n<h3 id=\"Examples-of-Modifying-Layout\"><a href=\"#Examples-of-Modifying-Layout\" class=\"headerlink\" title=\"Examples of Modifying Layout\"></a>Examples of Modifying Layout</h3><h4 id=\"Live2d-Widget\"><a href=\"#Live2d-Widget\" class=\"headerlink\" title=\"Live2d Widget\"></a>Live2d Widget</h4><p>Create and edit <code>source/_data/head.njk</code> in <mark class=\"label info\">site root directory</mark> and add the following content:</p>\n<figure class=\"highlight html\"><figcaption><span>hexo/source/_data/head.njk</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">"https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>Then uncomment <code>head</code> under the <code>custom_file_path</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">custom_file_path:</span></span><br><span class=\"line\"> <span class=\"attr\">head:</span> <span class=\"string\">source/_data/head.njk</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Netlify-Logo-in-Sidebar\"><a href=\"#Netlify-Logo-in-Sidebar\" class=\"headerlink\" title=\"Netlify Logo in Sidebar\"></a>Netlify Logo in Sidebar</h4><p>Create and edit <code>source/_data/sidebar.njk</code> in <mark class=\"label info\">site root directory</mark> and add the following content:</p>\n<figure class=\"highlight html\"><figcaption><span>hexo/source/_data/sidebar.njk</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"cc-license animated"</span> <span class=\"attr\">itemprop</span>=<span class=\"string\">"sponsor"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">href</span>=<span class=\"string\">"https://www.netlify.com"</span> <span class=\"attr\">class</span>=<span class=\"string\">"cc-opacity"</span> <span class=\"attr\">title</span>=<span class=\"string\">"Deploy with Netlify → https://www.netlify.com"</span> <span class=\"attr\">target</span>=<span class=\"string\">"_blank"</span>></span><span class=\"tag\"><<span class=\"name\">img</span> <span class=\"attr\">width</span>=<span class=\"string\">"80"</span> <span class=\"attr\">src</span>=<span class=\"string\">"https://www.netlify.com/img/global/badges/netlify-dark.svg"</span> <span class=\"attr\">alt</span>=<span class=\"string\">"Netlify"</span>></span><span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>Then uncomment <code>sidebar</code> under the <code>custom_file_path</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">custom_file_path:</span></span><br><span class=\"line\"> <span class=\"attr\">sidebar:</span> <span class=\"string\">source/_data/sidebar.njk</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Examples-of-Modifying-Style\"><a href=\"#Examples-of-Modifying-Style\" class=\"headerlink\" title=\"Examples of Modifying Style\"></a>Examples of Modifying Style</h3><h4 id=\"Tagcloud-Color\"><a href=\"#Tagcloud-Color\" class=\"headerlink\" title=\"Tagcloud Color\"></a>Tagcloud Color</h4><p>Create and edit <code>source/_data/variables.styl</code> in <mark class=\"label info\">site root directory</mark> and add variables:</p>\n<figure class=\"highlight css\"><figcaption><span>hexo/source/_data/variables.styl</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\">$tag-cloud-start = <span class=\"selector-id\">#aaa</span>;</span><br><span class=\"line\">$tag-cloud-end = <span class=\"selector-id\">#111</span>;</span><br><span class=\"line\">$tag-cloud-start-dark = <span class=\"selector-id\">#555</span>;</span><br><span class=\"line\">$tag-cloud-end-dark = <span class=\"selector-id\">#eee</span>;</span><br></pre></td></tr></table></figure>\n\n<p>Then uncomment <code>variable</code> under the <code>custom_file_path</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">custom_file_path:</span></span><br><span class=\"line\"> <span class=\"attr\">variable:</span> <span class=\"string\">source/_data/variables.styl</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"How-to-Change-Content-Width\"><a href=\"#How-to-Change-Content-Width\" class=\"headerlink\" title=\"How to Change Content Width\"></a>How to Change Content Width</h4><p>By default, the content width of NexT is controlled by the following variables:</p>\n<ul>\n<li><code>$content-desktop</code> → when screen width < 1200px.</li>\n<li><code>$content-desktop-large</code> → when screen width >= 1200px.</li>\n<li><code>$content-desktop-largest</code> → when screen width >= 1600px.</li>\n<li>In mobile / tablet devices it will use responsive width.</li>\n</ul>\n<p>You can override the default content width by editing <code>source/_data/variables.styl</code> in <mark class=\"label info\">site root directory</mark>.</p>\n<div class=\"tabs\" id=\"change-content-width\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#change-content-width-1\">Muse / Mist schemes</a></li><li class=\"tab\"><a href=\"#change-content-width-2\">Pisces / Gemini schemes</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"change-content-width-1\"><p>Default variables for both Muse and Mist schemes are defined as:</p>\n<figure class=\"highlight styl\"><figcaption><span>next/source/css/_variables/base.styl</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"variable\">$content</span>-desktop = <span class=\"number\">700px</span></span><br><span class=\"line\"><span class=\"variable\">$content</span>-desktop-large = <span class=\"number\">800px</span></span><br><span class=\"line\"><span class=\"variable\">$content</span>-desktop-largest = <span class=\"number\">900px</span></span><br></pre></td></tr></table></figure>\n\n<p>For example, you may override these variables with percentage value to increase content width. Create and edit <code>source/_data/variables.styl</code> in <mark class=\"label info\">site root directory</mark> and add variables:</p>\n<figure class=\"highlight styl\"><figcaption><span>hexo/source/_data/variables.styl</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"variable\">$content</span>-desktop = <span class=\"number\">90%</span></span><br><span class=\"line\"><span class=\"variable\">$content</span>-desktop-large = <span class=\"number\">90%</span></span><br><span class=\"line\"><span class=\"variable\">$content</span>-desktop-largest = <span class=\"number\">90%</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note warning\"><p>If values will in percents, during opening sidebar will dynamically decrease content width to defined by you percent.<br>But in standard behaviour, sidebar must displace content from yourself.<br>To around it, you can specify content width in <code>em</code>:</p>\n<figure class=\"highlight styl\"><figcaption><span>hexo/source/_data/variables.styl</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"variable\">$content</span>-desktop = <span class=\"number\">50em</span></span><br><span class=\"line\"><span class=\"variable\">$content</span>-desktop-large = <span class=\"number\">55em</span></span><br><span class=\"line\"><span class=\"variable\">$content</span>-desktop-largest = <span class=\"number\">60em</span></span><br></pre></td></tr></table></figure>\n</div></div><div class=\"tab-pane\" id=\"change-content-width-2\"><p>Default variables for Pisces (and Gemini) scheme are defined as:</p>\n<figure class=\"highlight styl\"><figcaption><span>next/source/css/_variables/Pisces.styl</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"variable\">$content</span>-desktop = <span class=\"string\">'calc(100% - %s)'</span> % <span class=\"built_in\">unit</span>(<span class=\"variable\">$content</span>-desktop-<span class=\"attribute\">padding</span> / <span class=\"number\">2</span>, <span class=\"string\">'px'</span>)</span><br><span class=\"line\"><span class=\"variable\">$content</span>-desktop-large = <span class=\"number\">1160px</span></span><br><span class=\"line\"><span class=\"variable\">$content</span>-desktop-largest = <span class=\"number\">73%</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note warning\"><p><code>$content-desktop</code> value in this schemes is auto-responsive by default. It can be changed to any value too, but for better content visibility recommended to stay it as is.</p>\n</div>\n\n<p>In this schemes content width was defined on maximum and already balanced: if desktop width will be wider – content width will more narrowed for easier reading. But if you want to make more narrow content width in wider desktops, here is example. Create and edit <code>source/_data/variables.styl</code> in <mark class=\"label info\">site root directory</mark> and add variables:</p>\n<figure class=\"highlight styl\"><figcaption><span>hexo/source/_data/variables.styl</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"variable\">$content</span>-desktop-large = <span class=\"number\">65em</span></span><br><span class=\"line\"><span class=\"variable\">$content</span>-desktop-largest = <span class=\"number\">65%</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note info\"><p>In fact, Gemini scheme is just fork of Pisces scheme with some style improvements.<br>Therefore, almost all part of variables from Pisces scheme are imported to Gemini scheme too.<br>So, the changes of these variables or styles will be applied to both Pisces and Gemini schemes.</p>\n</div></div></div></div>\n\n<p>Then uncomment <code>variable</code> under the <code>custom_file_path</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">custom_file_path:</span></span><br><span class=\"line\"> <span class=\"attr\">variable:</span> <span class=\"string\">source/_data/variables.styl</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Hide-Sidebar-on-Mobile\"><a href=\"#Hide-Sidebar-on-Mobile\" class=\"headerlink\" title=\"Hide Sidebar on Mobile\"></a>Hide Sidebar on Mobile</h4><p>Create and edit <code>source/_data/styles.styl</code> in <mark class=\"label info\">site root directory</mark> and add styles:</p>\n<figure class=\"highlight css\"><figcaption><span>hexo/source/_data/styles.styl</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\">+tablet-mobile() {</span><br><span class=\"line\"> <span class=\"selector-class\">.sidebar-toggle</span>, <span class=\"selector-class\">.sidebar</span> {</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: none;</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>Then uncomment <code>style</code> under the <code>custom_file_path</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">custom_file_path:</span></span><br><span class=\"line\"> <span class=\"attr\">style:</span> <span class=\"string\">source/_data/styles.styl</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Hide-quot-Keep-on-posting-quot-in-Archive-Page\"><a href=\"#Hide-quot-Keep-on-posting-quot-in-Archive-Page\" class=\"headerlink\" title=\"Hide "Keep on posting" in Archive Page\"></a>Hide "Keep on posting" in Archive Page</h4><p>Create and edit <code>source/_data/styles.styl</code> in <mark class=\"label info\">site root directory</mark> and add styles:</p>\n<figure class=\"highlight css\"><figcaption><span>hexo/source/_data/styles.styl</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.archive</span> <span class=\"selector-class\">.collection-title</span> {</span><br><span class=\"line\"> <span class=\"attribute\">display</span>: none <span class=\"meta\">!important</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>Then uncomment <code>style</code> under the <code>custom_file_path</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">custom_file_path:</span></span><br><span class=\"line\"> <span class=\"attr\">style:</span> <span class=\"string\">source/_data/styles.styl</span></span><br></pre></td></tr></table></figure>\n"},{"title":"Front Matter","url":"/docs/advanced-settings/front-matter.html","content":"<blockquote>\n<p>Front-matter is a block of YAML or JSON at the beginning of the file that is used to configure settings for your writings. Front-matter is terminated by three dashes when written in YAML or three semicolons when written in JSON.<br>— from <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvZnJvbnQtbWF0dGVy\">Hexo site<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n</blockquote>\n<p><strong>YAML</strong></p>\n<figure class=\"highlight yml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\">---</span></span><br><span class=\"line\"><span class=\"attr\">title:</span> <span class=\"string\">Hello</span> <span class=\"string\">World</span></span><br><span class=\"line\"><span class=\"attr\">date:</span> <span class=\"number\">2013</span><span class=\"string\">/7/13</span> <span class=\"number\">20</span><span class=\"string\">:46:25</span></span><br><span class=\"line\"><span class=\"meta\">---</span></span><br></pre></td></tr></table></figure>\n\n<p><strong>JSON</strong></p>\n<figure class=\"highlight json\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">"title"</span><span class=\"punctuation\">:</span> <span class=\"string\">"Hello World"</span><span class=\"punctuation\">,</span></span><br><span class=\"line\"><span class=\"attr\">"date"</span><span class=\"punctuation\">:</span> <span class=\"string\">"2013/7/13 20:46:25"</span></span><br><span class=\"line\">;;;</span><br></pre></td></tr></table></figure>\n\n<p>Next extends and provide more variables. It allows users to configure a single page.</p>\n<h3 id=\"Settings-amp-Their-Default-Values\"><a href=\"#Settings-amp-Their-Default-Values\" class=\"headerlink\" title=\"Settings & Their Default Values\"></a>Settings & Their Default Values</h3><table>\n<thead>\n<tr>\n<th>Setting</th>\n<th>Type</th>\n<th>Description</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>author</code></td>\n<td><code>string</code></td>\n<td>Author name for post copyright</td>\n<td><code>author</code> in Hexo <code>_config.yml</code></td>\n</tr>\n<tr>\n<td><code>post_link</code></td>\n<td><code>string</code></td>\n<td>Post link</td>\n<td>None</td>\n</tr>\n<tr>\n<td><code>description</code></td>\n<td><code>string</code></td>\n<td>Docs <a href=\"/docs/theme-settings/posts.html#Preamble-Text\">here</a></td>\n<td>None</td>\n</tr>\n<tr>\n<td><code>direction</code></td>\n<td><code>string</code></td>\n<td>Available value: <code>rtl</code></td>\n<td>None</td>\n</tr>\n<tr>\n<td><code>header</code></td>\n<td><code>boolean</code></td>\n<td>Whether to display the post header in index page</td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td><code>mathjax</code></td>\n<td><code>boolean</code></td>\n<td>MathJax support</td>\n<td><code>math.every_page</code> in <code>_config.yml</code></td>\n</tr>\n<tr>\n<td><code>sidebar</code></td>\n<td><code>boolean</code></td>\n<td>Whether the sidebar will be shown</td>\n<td>Depends on <code>sidebar.display</code> in <code>_config.yml</code></td>\n</tr>\n<tr>\n<td><code>copyright</code></td>\n<td><code>boolean</code></td>\n<td>Whether to display copyright notices below the post with <code>theme.creative_commons.license</code> and <code>theme.creative_commons.post</code> enabled</td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td><code>sticky</code></td>\n<td><code>number</code></td>\n<td>Pin the post to the top of the index page. <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLWdlbmVyYXRvci1pbmRleA==\">hexo-generator-index<i class=\"fa fa-external-link-alt\"></i></span> plugin required</td>\n<td>0</td>\n</tr>\n<tr>\n<td><code>quicklink</code></td>\n<td><code>object</code> (1)</td>\n<td>Quicklink support</td>\n<td>From <code>_config.yml</code></td>\n</tr>\n<tr>\n<td><code>reward_settings</code></td>\n<td><code>object</code> (1)</td>\n<td>Reward settings</td>\n<td>From <code>_config.yml</code></td>\n</tr>\n<tr>\n<td><code>toc</code></td>\n<td><code>object</code> (1)</td>\n<td>Table of Contents in the sidebar</td>\n<td>From <code>_config.yml</code></td>\n</tr>\n</tbody></table>\n<p>(1): They have the same structure as the options in <mark class=\"label primary\">NexT config file</mark>.</p>\n<p><strong>Example</strong></p>\n<figure class=\"highlight yml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">toc:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">number:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">max_depth:</span> <span class=\"number\">3</span></span><br><span class=\"line\"><span class=\"attr\">reward_settings:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">comment:</span> <span class=\"string\">Buy</span> <span class=\"string\">me</span> <span class=\"string\">a</span> <span class=\"string\">coffee</span></span><br><span class=\"line\"><span class=\"attr\">quicklink:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">delay:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">timeout:</span> <span class=\"number\">3000</span></span><br><span class=\"line\"> <span class=\"attr\">priority:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Undocumented-Front-matter-Variables\"><a href=\"#Undocumented-Front-matter-Variables\" class=\"headerlink\" title=\"Undocumented Front-matter Variables\"></a>Undocumented Front-matter Variables</h3><p>The following variables are not mentioned in the Hexo documentation, but are required by <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLXRoZW1lLXVuaXQtdGVzdA==\">hexo-theme-unit-test<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<table>\n<thead>\n<tr>\n<th>Setting</th>\n<th>Type</th>\n<th>Example</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>link</code></td>\n<td><code>string</code></td>\n<td><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLXRoZW1lLXVuaXQtdGVzdC9ibG9iL21hc3Rlci9zb3VyY2UvX3Bvc3RzL2xpbmstcG9zdC5tZA==\">link-post<i class=\"fa fa-external-link-alt\"></i></span></td>\n</tr>\n<tr>\n<td><code>photos</code></td>\n<td><code>array</code></td>\n<td><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLXRoZW1lLXVuaXQtdGVzdC9ibG9iL21hc3Rlci9zb3VyY2UvX3Bvc3RzL2dhbGxlcnktcG9zdC5tZA==\">gallery-post<i class=\"fa fa-external-link-alt\"></i></span></td>\n</tr>\n</tbody></table>\n"},{"title":"Advanced Settings","url":"/docs/advanced-settings/index.html","content":"<p>Besides common <a href=\"/docs/theme-settings/\">Theme Settings</a> and <a href=\"/docs/third-party-services/\">Third-party Plugins</a>, NexT supports some advanced settings which makes NexT customizable.<br>Please note that those settings may lead to abnormal behavior if they are wrong. Change them only when you know for what they are.</p>\n<ul>\n<li><a href=\"/docs/advanced-settings/vendors.html\">Vendors</a></li>\n<li><a href=\"/docs/advanced-settings/custom-files.html\">Custom Files</a></li>\n<li><a href=\"/docs/advanced-settings/injects.html\">Injects</a></li>\n<li><a href=\"/docs/advanced-settings/front-matter.html\">Front-matter</a></li>\n</ul>\n"},{"title":"Injects","url":"/docs/advanced-settings/injects.html","content":"<h3 id=\"Injects\"><a href=\"#Injects\" class=\"headerlink\" title=\"Injects\"></a>Injects</h3><p>We extended the Hexo filter and added <code>theme_inject</code>, so user can add the desired custom content to any injection point.</p>\n<h4 id=\"Synopsis\"><a href=\"#Synopsis\" class=\"headerlink\" title=\"Synopsis\"></a>Synopsis</h4><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">hexo.<span class=\"property\">extend</span>.<span class=\"property\">filter</span>.<span class=\"title function_\">register</span>(<span class=\"string\">'theme_inject'</span>, <span class=\"keyword\">function</span>(<span class=\"params\">injects</span>) {</span><br><span class=\"line\"> <span class=\"comment\">// ...</span></span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n\n<p>A injects argument will get passed into the function, so we can use it add custom code in <code>injectPoint</code> as following.</p>\n<p>For inject view:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// The name of same `injectPoint` suggest be unique. If same, it will override low priority configurations.</span></span><br><span class=\"line\"><span class=\"comment\">// `locals` and `options` is the same as partial https://hexo.io/docs/helpers#partial.</span></span><br><span class=\"line\"><span class=\"comment\">// `order` defines the order of injection, which by default depends on the priority of injection.</span></span><br><span class=\"line\">hexo.<span class=\"property\">extend</span>.<span class=\"property\">filter</span>.<span class=\"title function_\">register</span>(<span class=\"string\">'theme_inject'</span>, <span class=\"keyword\">function</span>(<span class=\"params\">injects</span>) {</span><br><span class=\"line\"> <span class=\"comment\">// it will put code from this filePath into injectPoint.</span></span><br><span class=\"line\"> injects.[injectPoint].<span class=\"title function_\">file</span>(name, filePath, [locals, options, order]);</span><br><span class=\"line\"> <span class=\"comment\">// it will put raw string as code into injectPoint.</span></span><br><span class=\"line\"> injects.[injectPoint].<span class=\"title function_\">raw</span>(name, raw, [locals, options, order]);</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n\n<div class=\"note warning\"><p>You have to note <code>filePath</code>, it must be absolute path or relative to <code>hexo_dir</code>.</p>\n</div>\n\n<p>For inject style:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">hexo.<span class=\"property\">extend</span>.<span class=\"property\">filter</span>.<span class=\"title function_\">register</span>(<span class=\"string\">'theme_inject'</span>, <span class=\"keyword\">function</span>(<span class=\"params\">injects</span>) {</span><br><span class=\"line\"> <span class=\"comment\">// it will put styleFile into injectPoint.</span></span><br><span class=\"line\"> injects.[injectPoint].<span class=\"title function_\">push</span>(styleFile);</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n\n<p>These are many <code>injectPoint</code>, defined in <a href=\"https://github.com/next-theme/hexo-theme-next/blob/master/scripts/events/lib/utils.js#L60\"><code>utils.js</code></a></p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"variable language_\">module</span>.<span class=\"property\">exports</span> = {</span><br><span class=\"line\"> <span class=\"attr\">views</span>: [<span class=\"string\">'head'</span>, <span class=\"string\">'header'</span>, <span class=\"string\">'sidebar'</span>, <span class=\"string\">'postMeta'</span>, <span class=\"string\">'postBodyStart'</span>, <span class=\"string\">'postBodyEnd'</span>, <span class=\"string\">'footer'</span>, <span class=\"string\">'bodyEnd'</span>, <span class=\"string\">'comment'</span>],</span><br><span class=\"line\"> <span class=\"attr\">styles</span>: [<span class=\"string\">'variable'</span>, <span class=\"string\">'mixin'</span>, <span class=\"string\">'style'</span>]</span><br><span class=\"line\">};</span><br></pre></td></tr></table></figure>\n\n<p><code>custom_file_path</code> also uses this API, see <a href=\"https://github.com/next-theme/hexo-theme-next/blob/master/scripts/filters/default-injects.js\"><code>default-injects.js</code></a>. It will consume <code>custom</code> name in view inject points. So if you use <code>custom_file_path</code>, please not use <code>custom</code>.</p>\n<h4 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h4><p><strong>One:</strong> load a custom script. We can add it in <code>bodyEnd</code>.</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">hexo.<span class=\"property\">extend</span>.<span class=\"property\">filter</span>.<span class=\"title function_\">register</span>(<span class=\"string\">'theme_inject'</span>, <span class=\"keyword\">function</span>(<span class=\"params\">injects</span>) {</span><br><span class=\"line\"> injects.<span class=\"property\">bodyEnd</span>.<span class=\"title function_\">raw</span>(<span class=\"string\">'load-custom-js'</span>, <span class=\"string\">'<script src="js-path-or-cdn.js"></script>'</span>, {}, {<span class=\"attr\">cache</span>: <span class=\"literal\">true</span>});</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n\n<p><strong>Two:</strong> add a custom <code>my-favourite-food.njk</code> to sidebar.</p>\n<p>Step1: you should create <code>my-favourite-food.njk</code> in any path(e.g. <code>source/_data/</code>) as below. You can get variable from <code>hexo</code> or <code>local</code> defined in filter.</p>\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\"><span class=\"name\">for</span></span> food <span class=\"keyword\">in</span> foods %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><span class=\"template-variable\">{{ food }}</span><span class=\"language-xml\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\"><span class=\"name\">endfor</span></span> %}</span></span><br></pre></td></tr></table></figure>\n\n<p>Step2: add filter to load it.</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">hexo.<span class=\"property\">extend</span>.<span class=\"property\">filter</span>.<span class=\"title function_\">register</span>(<span class=\"string\">'theme_inject'</span>, <span class=\"keyword\">function</span>(<span class=\"params\">injects</span>) {</span><br><span class=\"line\"> injects.<span class=\"property\">sidebar</span>.<span class=\"title function_\">file</span>(<span class=\"string\">'my-favourite-food'</span>, <span class=\"string\">'source/_data/my-favourite-food.njk'</span>, {</span><br><span class=\"line\"> <span class=\"attr\">foods</span>: [<span class=\"string\">'apple'</span>, <span class=\"string\">'orange'</span>]</span><br><span class=\"line\"> });</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n\n<p><strong>Three:</strong> want to have big header, put <code>big-header.styl</code> to NexT.</p>\n<p>Of course, you need to create this file first(e.g. <code>source/_data/big-header.styl</code>).</p>\n<figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">h1</span> {</span><br><span class=\"line\"> <span class=\"attribute\">font-size</span>: <span class=\"number\">2rem</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>And then add it in filter.</p>\n<figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">hexo.<span class=\"property\">extend</span>.<span class=\"property\">filter</span>.<span class=\"title function_\">register</span>(<span class=\"string\">'theme_inject'</span>, <span class=\"keyword\">function</span>(<span class=\"params\">injects</span>) {</span><br><span class=\"line\"> injects.<span class=\"property\">style</span>.<span class=\"title function_\">push</span>(<span class=\"string\">'source/_data/big-header.styl'</span>);</span><br><span class=\"line\">});</span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Plugin\"><a href=\"#Plugin\" class=\"headerlink\" title=\"Plugin\"></a>Plugin</h4><p>We also support hexo's plugin system, which makes it easy to extend functions without modifying the source code of the core module. You can see <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvcGx1Z2lucy5odG1sI1BsdWdpbg==\">https://hexo.io/docs/plugins.html#Plugin<i class=\"fa fa-external-link-alt\"></i></span> to learn how to create a plugin.</p>\n"},{"title":"Configuration","url":"/docs/getting-started/configuration.html","content":"<p>How to configure NexT theme? The traditional approach is to edit <mark class=\"label primary\">NexT config file</mark> (<code>thems/next/_config.yml</code> or <code>node_modules/hexo-theme-next/_config.yml</code>) directly. However, the config file will be overwritten when upgrade NexT theme via git or npm, which brings inconvenience to the configuration of the theme.</p>\n<p>At present, NexT encourages users to use the Alternate Theme Config. It's a feature of Hexo and the documentation is here: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvY29uZmlndXJhdGlvbi5odG1sI1VzaW5nLWFuLUFsdGVybmF0ZS1Db25maWc=\">Hexo Configuration<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<p>This tutorial shows you how to configure NexT using Alternate Theme Config. Please choose only one of the following solutions and resume next steps.</p>\n<h3 id=\"config-name-yml\"><a href=\"#config-name-yml\" class=\"headerlink\" title=\"_config.[name].yml\"></a><code>_config.[name].yml</code></h3><p>With this way, all your theme configurations locate in config file <code>/_config.[name].yml</code>. Replace <code>[name]</code> with the value of <code>theme</code> option in <mark class=\"label info\">Hexo config file</mark>. For NexT theme, the file name is <code>_config.next.yml</code> by default.</p>\n<h4 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h4><ol>\n<li><p>Please ensure you are using Hexo 5.0 or later.</p>\n</li>\n<li><p>Create a config file in site's root directory, e.g. <code>_config.next.yml</code>.</p>\n</li>\n<li><p>Copy needed NexT theme options from <mark class=\"label primary\">NexT config file</mark> into this config file. If it is the first time to install NexT, then copy the whole <mark class=\"label primary\">NexT config file</mark> by the following command:</p>\n <figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Installed through npm</span></span><br><span class=\"line\"><span class=\"built_in\">cp</span> node_modules/hexo-theme-next/_config.yml _config.next.yml</span><br><span class=\"line\"><span class=\"comment\"># Installed through Git</span></span><br><span class=\"line\"><span class=\"built_in\">cp</span> themes/next/_config.yml _config.next.yml</span><br></pre></td></tr></table></figure></li>\n</ol>\n<h3 id=\"theme-config\"><a href=\"#theme-config\" class=\"headerlink\" title=\"theme_config\"></a><code>theme_config</code></h3><p>With this way, all your Hexo and NexT configurations locate in main <mark class=\"label info\">Hexo config file</mark>. You don't need to edit <mark class=\"label primary\">NexT config file</mark> or create any new files. But you need to <strong><a href=\"/docs/troubleshooting.html#Keep-Up-Indentation\">keep up indentation</a></strong> within <code>theme_config</code> option.</p>\n<h4 id=\"Usage-1\"><a href=\"#Usage-1\" class=\"headerlink\" title=\"Usage\"></a>Usage</h4><p>Copy needed NexT theme options from <mark class=\"label primary\">NexT config file</mark> into <mark class=\"label info\">Hexo config file</mark>, then</p>\n<ol>\n<li>Move all these settings to the right with two spaces indentation (in Visual Studio Code: select all strings, <kbd>CTRL</kbd> + <kbd>]</kbd>).</li>\n<li>Add <code>theme_config:</code> parameter above all this settings.</li>\n</ol>\n<h3 id=\"next-yml-Deprecated\"><a href=\"#next-yml-Deprecated\" class=\"headerlink\" title=\"next.yml (Deprecated)\"></a><code>next.yml</code> (Deprecated)</h3><p>Older versions of NexT theme also provide another configuration method, which is to place the theme configuration in the <code>/source/_data/next.yml</code> file. This method is deprecated, please use <code>_config.next.yml</code> instead. If the <code>/source/_data/next.yml</code> file exists, move it to the Hexo root directory and rename it to <code>_config.next.yml</code>.</p>\n"},{"title":"Vendors","url":"/docs/advanced-settings/vendors.html","content":"<h3 id=\"CDN-Settings\"><a href=\"#CDN-Settings\" class=\"headerlink\" title=\"CDN Settings\"></a>CDN Settings</h3><p>You can specify a proper CDN provider in the <code>vendors</code> section in <mark class=\"label primary\">NexT config file</mark>, which can make the static assets of plugins load faster.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">vendors:</span></span><br><span class=\"line\"> <span class=\"comment\"># The CDN provider of NexT internal scripts.</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: local | jsdelivr | unpkg | cdnjs | custom</span></span><br><span class=\"line\"> <span class=\"comment\"># Warning: If you are using the latest master branch of NexT, please set `internal: local`</span></span><br><span class=\"line\"> <span class=\"attr\">internal:</span> <span class=\"string\">local</span></span><br><span class=\"line\"> <span class=\"comment\"># The default CDN provider of third-party plugins.</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: local | jsdelivr | unpkg | cdnjs | custom</span></span><br><span class=\"line\"> <span class=\"comment\"># Dependencies for `plugins: local`: https://github.com/next-theme/plugins</span></span><br><span class=\"line\"> <span class=\"attr\">plugins:</span> <span class=\"string\">cdnjs</span></span><br><span class=\"line\"> <span class=\"comment\"># Custom CDN URL</span></span><br><span class=\"line\"> <span class=\"comment\"># For example:</span></span><br><span class=\"line\"> <span class=\"comment\"># custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}</span></span><br><span class=\"line\"> <span class=\"comment\"># custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}</span></span><br><span class=\"line\"> <span class=\"attr\">custom_cdn_url:</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Internal-Scripts\"><a href=\"#Internal-Scripts\" class=\"headerlink\" title=\"Internal Scripts\"></a>Internal Scripts</h4><p><code>internal: local</code> is used to set how to load the internal scripts, e.g. <code>source/js/utils.js</code>. These libraries are loaded from your site by default, they are required by the basic functions of NexT. Set <code>internal</code> to <code>jsdelivr</code>, <code>unpkg</code> or <code>cdnjs</code> to load them from the corresponding CDN.</p>\n<div class=\"note info\"><p>If your site is deployed to any free hosting service (Github, Gitlab, etc.), CDN links are recommended for internal scripts. CDN usually has faster speeds and no traffic restrictions.</p>\n</div>\n\n<div class=\"note danger\"><p>If you are using the latest master branch of NexT, please set <code>internal: local</code>.</p>\n</div>\n\n<h4 id=\"Third-party-Plugins\"><a href=\"#Third-party-Plugins\" class=\"headerlink\" title=\"Third-party Plugins\"></a>Third-party Plugins</h4><p><code>plugins: cdnjs</code> is used to set how to load the third-party plugins, e.g. <code>anime.js</code>. Third-party plugins are loaded from <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jZG5qcy5jb20v\">CDNJS<i class=\"fa fa-external-link-alt\"></i></span> CDN by default.</p>\n<p>And we also provide other optional CDNs, including the famous <span class=\"exturl\" data-url=\"aHR0cHM6Ly91bnBrZy5jb20v\">UNPKG<i class=\"fa fa-external-link-alt\"></i></span> and <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cuanNkZWxpdnIuY29tLw==\">jsDelivr<i class=\"fa fa-external-link-alt\"></i></span>. These CDN providers are chosen to deliver our third-party plugins because they are fast and reliable. Set <code>plugins</code> to <code>unpkg</code> or <code>cdnjs</code> to load them from different CDN provider.</p>\n<div class=\"note warning\"><p>Particularly, if you are a Chinese blogger or most of your visits come from China, please note that <strong>the CDNJS is blocked in some parts of China</strong>, don't use it as your CDN provider.</p>\n</div>\n\n<div class=\"note info\"><p>If your would like to load all third-party plugins from your site, please set <code>plugins</code> to <code>local</code> and install the <code>@next-theme/plugins</code> package: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvcGx1Z2lucw==\">https://github.com/next-theme/plugins<i class=\"fa fa-external-link-alt\"></i></span><br>If your website is deployed in the local area network, then this will have a faster loading speed than CDN services.</p>\n</div>\n\n<h4 id=\"Custom-CDN-URLs\"><a href=\"#Custom-CDN-URLs\" class=\"headerlink\" title=\"Custom CDN URLs\"></a>Custom CDN URLs</h4><p>Sometimes you may need to use CDNs other than <code>jsdelivr</code>, <code>unpkg</code> or <code>cdnjs</code>. For example, users can get faster loading speed in certain areas using the mirror site of jsDelivr.</p>\n<p>To enable custom CDN URL, you need to set <code>internal: custom</code> and / or <code>plugins: custom</code> in the <code>vendors</code> section, and then specify a CDN URL with the <code>custom_cdn_url</code> option.</p>\n<p>Remember to use the HTTPS protocol of CDN links when you enable HTTPS on your site.</p>\n<h5 id=\"jsDelivr-Mirrors\"><a href=\"#jsDelivr-Mirrors\" class=\"headerlink\" title=\"jsDelivr Mirrors\"></a>jsDelivr Mirrors</h5><p>jsDelivr could automatically minify the JS and CSS files, even if the package owner doesn't publish the minified version on npm. You just need to access <code>*.min.js</code> and <code>*.min.css</code>, instead of <code>*.js</code> and <code>*.css</code>. For more information: <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cuanNkZWxpdnIuY29tL2ZlYXR1cmVz\">https://www.jsdelivr.com/features<i class=\"fa fa-external-link-alt\"></i></span></p>\n<p>In theme NexT, you can simply use the variable <code>${minified}</code> in <code>custom_cdn_url</code> to serve the minified version if you are using a mirror site of jsDelivr. NexT will automatically replace the variable <code>${minified}</code> with the path of each JS file to load from CDN.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">vendors:</span></span><br><span class=\"line\"> <span class=\"attr\">custom_cdn_url:</span> <span class=\"string\">https://fastly.jsdelivr.net/npm/${npm_name}@${version}/${minified}</span></span><br></pre></td></tr></table></figure>\n\n<h5 id=\"CDNJS-Mirrors\"><a href=\"#CDNJS-Mirrors\" class=\"headerlink\" title=\"CDNJS Mirrors\"></a>CDNJS Mirrors</h5><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">vendors:</span></span><br><span class=\"line\"> <span class=\"attr\">custom_cdn_url:</span> <span class=\"string\">https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"CDN-URLs-For-Each-Library\"><a href=\"#CDN-URLs-For-Each-Library\" class=\"headerlink\" title=\"CDN URLs For Each Library\"></a>CDN URLs For Each Library</h4><p>Furthermore, you can configure the CDN URL of each library individually in the <code>vendors</code> section.</p>\n<p>The config is in format of <code>libname: CDN URL</code>. The <code>libname</code> is the same as in the <code>_vendors.yml</code> file. The <code>CDN URL</code> will override the default one.</p>\n<p>For example, if you want to set the CDN URL for <code>anime</code>, go to <mark class=\"label primary\">NexT config file</mark> and add a key named <code>anime</code> in the <code>vendors</code> section, and set its value to the CDN URL of anime.js:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">vendors:</span></span><br><span class=\"line\"> <span class=\"comment\"># ...</span></span><br><span class=\"line\"> <span class=\"comment\"># Some contents...</span></span><br><span class=\"line\"> <span class=\"comment\"># ...</span></span><br><span class=\"line\"> <span class=\"attr\">anime:</span> <span class=\"string\">//fastly.jsdelivr.net/gh/juliangarnier/anime@latest/lib/anime.min.js</span></span><br></pre></td></tr></table></figure>\n\n<p>It's recommended to use the same version of the library as in <code>_vendors.yml</code> to avoid potential problems.</p>\n"},{"title":"Getting Started","url":"/docs/getting-started/index.html","content":"<h3 id=\"Hexo-Installation\"><a href=\"#Hexo-Installation\" class=\"headerlink\" title=\"Hexo Installation\"></a>Hexo Installation</h3><p>If this is your first time using Hexo, you can take some time to review the Hexo Docs to see <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3Mv\">how to install Hexo<i class=\"fa fa-external-link-alt\"></i></span> and <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3Mvc2V0dXA=\">initialize a site<i class=\"fa fa-external-link-alt\"></i></span>. After the installation is successful, you should be able to execute <code>hexo</code> (or <code>npx hexo</code>) on the command line, and there must be <code>package.json</code>, <code>source</code>, <code>themes</code> and other directories in your <mark class=\"label info\">site root directory</mark>:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ <span class=\"built_in\">ls</span></span><br><span class=\"line\">_config.yml node_modules package-lock.json package.json scaffolds <span class=\"built_in\">source</span> themes</span><br></pre></td></tr></table></figure>\n\n<div class=\"note info\"><p>If you are new to Node.js or Hexo, you can also modify the source code of an existing Hexo website instead of creating a new one, to help you understand how Hexo works. In fact, the document you are reading is generated by Hexo with NexT, and you can install it with the following command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git <span class=\"built_in\">clone</span> https://github.com/next-theme/theme-next-docs</span><br><span class=\"line\">$ <span class=\"built_in\">cd</span> theme-next-docs</span><br><span class=\"line\">$ npm install</span><br></pre></td></tr></table></figure>\n</div>\n\n<p>Make sure that you have installed Hexo and created a site with it successfully, because the following documents require you to operate in the <mark class=\"label info\">site root directory</mark>.</p>\n<h3 id=\"NexT-Installation\"><a href=\"#NexT-Installation\" class=\"headerlink\" title=\"NexT Installation\"></a>NexT Installation</h3><p>The detailed steps to install or upgrade the theme are as follows.</p>\n<h4 id=\"Downloading-NexT\"><a href=\"#Downloading-NexT\" class=\"headerlink\" title=\"Downloading NexT\"></a>Downloading NexT</h4><p>It's easy to install Hexo theme: you can choose to install the theme through npm, or download the source code of the theme in the <code>themes</code> directory under <mark class=\"label info\">site root directory</mark>.</p>\n<div class=\"tabs\" id=\"downloading-next\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#downloading-next-1\">Using <code>npm</code></a></li><li class=\"tab\"><a href=\"#downloading-next-2\">Using <code>git</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"downloading-next-1\"><p>If you're using Hexo 5.0 or later, the simplest way to install is through npm.</p>\n<p>Open your Terminal, change to Hexo <mark class=\"label info\">site root directory</mark> and install NexT theme:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ npm install hexo-theme-next</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"downloading-next-2\"><p>If you know about <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXQtc2NtLmNvbS8=\">Git<i class=\"fa fa-external-link-alt\"></i></span>, you can clone the whole repository and update it in any time with <code>git pull</code> command instead of downloading archive manually.</p>\n<p>Open your terminal, change to Hexo <mark class=\"label info\">site root directory</mark> and clone the latest master branch of NexT theme:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ git <span class=\"built_in\">clone</span> https://github.com/next-theme/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure></div></div></div>\n\n<div class=\"note primary\"><p>You can also read <a href=\"/docs/getting-started/installation.html\">detailed installation instructions</a> if you want any other installation variant.</p>\n</div>\n\n<h4 id=\"Upgrading-NexT\"><a href=\"#Upgrading-NexT\" class=\"headerlink\" title=\"Upgrading NexT\"></a>Upgrading NexT</h4><p>A new version of NexT will be released every month. Please read the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by10aGVtZS1uZXh0L3JlbGVhc2Vz\">release notes<i class=\"fa fa-external-link-alt\"></i></span> before updating the theme. You can update NexT by the following command.</p>\n<div class=\"tabs\" id=\"upgrading-next\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#upgrading-next-1\">Using <code>npm</code></a></li><li class=\"tab\"><a href=\"#upgrading-next-2\">Using <code>git</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"upgrading-next-1\"><p>Install the latest version through npm:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ npm install hexo-theme-next@latest</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"upgrading-next-2\"><p>Or update to the latest master branch:</p>\n<figure class=\"highlight sh\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ <span class=\"built_in\">cd</span> themes/next</span><br><span class=\"line\">$ git pull origin master</span><br></pre></td></tr></table></figure>\n\n<p>When running <code>git pull</code>, you can bypass merge conflicts (error message like <strong>«Commit your changes or stash them before you can merge»</strong>) by using the <code>Commit</code>, <code>Stash</code> or <code>Reset</code> commands for local changes. See <span class=\"exturl\" data-url=\"aHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9hLzE1NzQ1NDI0LzU4NjE0OTU=\">here<i class=\"fa fa-external-link-alt\"></i></span> how to do it.</p></div></div></div>\n\n<div class=\"note warning\"><p>If you are still using NexT version 5 or 7, you can read <a href=\"/docs/getting-started/upgrade.html\">instructions for upgrading from legacy version</a>.</p>\n</div>\n\n<h3 id=\"Configuration-Files\"><a href=\"#Configuration-Files\" class=\"headerlink\" title=\"Configuration Files\"></a>Configuration Files</h3><p>After the installation of Hexo and NexT, you may found that there are two configuration files using by Hexo and both called <code>_config.yml</code>:</p>\n<ol>\n<li>The first one is under <mark class=\"label info\">site root directory</mark>, which contains Hexo's config.</li>\n<li>The second one is under <mark class=\"label primary\">theme root directory</mark> (e.g. <code>themes/next/_config.yml</code> or <code>node_modules/hexo-theme-next/_config.yml</code>), which is provided by NexT and contains theme's config.</li>\n</ol>\n<p>Let's call the first one – <mark class=\"label info\">Hexo config file</mark>, and the second one – <mark class=\"label primary\">NexT config file</mark>.</p>\n<div class=\"note warning\"><p>However, we do not recommend directly modifying the <mark class=\"label primary\">NexT config file</mark>. It is quite often running into conflict status when updating NexT theme via <code>git pull</code>, or need to merge configurations manually when upgrading to new releases. For the theme installed through npm, it is also difficult to modify the <mark class=\"label primary\">NexT config file</mark> in <code>node_modules</code>.</p>\n<p>In order to resolve this issue, we recommend using the <a href=\"/docs/getting-started/configuration.html\">Alternate Theme Config</a> feature to configure theme NexT.</p>\n</div>\n\n<h3 id=\"Hexo-Configuration\"><a href=\"#Hexo-Configuration\" class=\"headerlink\" title=\"Hexo Configuration\"></a>Hexo Configuration</h3><p>The following settings in <mark class=\"label info\">Hexo config file</mark> are very helpful for optimizing your website.</p>\n<h4 id=\"Configuring-Author\"><a href=\"#Configuring-Author\" class=\"headerlink\" title=\"Configuring Author\"></a>Configuring Author</h4><p>Edit <mark class=\"label info\">Hexo config file</mark> and set the value of <code>author</code> to your nickname.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Site</span></span><br><span class=\"line\"><span class=\"attr\">author:</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Configuring-Description\"><a href=\"#Configuring-Description\" class=\"headerlink\" title=\"Configuring Description\"></a>Configuring Description</h4><p>Edit <mark class=\"label info\">Hexo config file</mark> and set the value of <code>description</code> to your description, which can be a sentence you like.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Site</span></span><br><span class=\"line\"><span class=\"attr\">description:</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Enabling-NexT\"><a href=\"#Enabling-NexT\" class=\"headerlink\" title=\"Enabling NexT\"></a>Enabling NexT</h4><p>Like all Hexo themes, after you download it, open <mark class=\"label info\">Hexo config file</mark>, find <code>theme</code> option, and change its value to <code>next</code> (or another theme directory name).</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">theme:</span> <span class=\"string\">next</span></span><br></pre></td></tr></table></figure>\n\n<p>Now you have installed NexT theme and enabled it. The following steps will help you verify whether NexT is enabled correctly.</p>\n<h3 id=\"Checking-NexT\"><a href=\"#Checking-NexT\" class=\"headerlink\" title=\"Checking NexT\"></a>Checking NexT</h3><p>It's recommended to use <code>hexo clean</code> to clean Hexo's cache first.<br>Then start Hexo local server with debug parameter (by adding <code>--debug</code>), the whole command is <code>hexo s --debug</code>. You can see the output while running, and if you find problem, you can use the output to help others locate error better. When it prints:</p>\n<figure class=\"highlight plaintext\"><table><tr><td class=\"code\"><pre><span class=\"line\">INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.</span><br></pre></td></tr></table></figure>\n\n<p>Now you can open <code>http://localhost:4000</code> in your browser, and check whether the site works correctly.</p>\n<div class=\"note success\"><p>If you find your site looks like this picture, you have installed it correctly. That's default NexT scheme – Muse.<br><img src=\"/images/next-default-scheme.png\" alt=\"Default Scheme – Muse\" loading=\"lazy\"></p>\n</div>\n\n<p>After that we can <a href=\"/docs/getting-started/deployment.html\">configure deployment</a>.</p>\n<p>If everything is OK, in next steps we will change some settings including <a href=\"/docs/theme-settings/\">personalization</a> and <a href=\"/docs/third-party-services/\">third-party services integration</a>.</p>\n"},{"title":"Deployment","url":"/docs/getting-started/deployment.html","content":"<h3 id=\"Local-Deployment\"><a href=\"#Local-Deployment\" class=\"headerlink\" title=\"Local Deployment\"></a>Local Deployment</h3><ol>\n<li>Modify files locally.</li>\n<li>Localization testing: <code>hexo clean && hexo s</code>.</li>\n<li>Deployment: <code>hexo g -d</code>.</li>\n</ol>\n<h3 id=\"Continuous-Integration\"><a href=\"#Continuous-Integration\" class=\"headerlink\" title=\"Continuous Integration\"></a>Continuous Integration</h3><ul>\n<li>Edit the file directly online, effective immediately</li>\n<li>Automatic deployment, simultaneous deployment to multiple locations</li>\n</ul>\n<h4 id=\"Cloudflare-Pages\"><a href=\"#Cloudflare-Pages\" class=\"headerlink\" title=\"Cloudflare Pages\"></a>Cloudflare Pages</h4><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9wYWdlcy5jbG91ZGZsYXJlLmNvbS8=\">Cloudflare Pages<i class=\"fa fa-external-link-alt\"></i></span> is a JAMstack platform for frontend developers to collaborate and deploy websites. You can connect your GitHub or GitLab account with Cloudflare Pages. After that, you just need to push your blog source code to the repository, and create a new project in Cloudflare Pages. In the project's settings, you can configure the build settings as shown below.</p>\n<p><img src=\"/images/cloudflare-pages.png\" alt=\"Cloudflare Pages\" loading=\"lazy\"></p>\n<p>Cloudflare Pages will automatically build and deploy your site.</p>\n<h4 id=\"Netlify\"><a href=\"#Netlify\" class=\"headerlink\" title=\"Netlify\"></a>Netlify</h4><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cubmV0bGlmeS5jb20v\">Netlify<i class=\"fa fa-external-link-alt\"></i></span> is an all-in-one platform for automating modern web projects. Replace your hosting infrastructure, continuous integration, and deployment pipeline with a single workflow. Integrate dynamic functionality like serverless functions, user authentication, and form handling as your projects grow.</p>\n<p>Perhaps you have already found that this website is deployed on Netlify. Checkout <code>deploy.sh</code> and <code>netlify.toml</code> in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvdGhlbWUtbmV4dC1kb2Nz\">theme-next-docs<i class=\"fa fa-external-link-alt\"></i></span> repository for more information.</p>\n<h4 id=\"Github-Pages\"><a href=\"#Github-Pages\" class=\"headerlink\" title=\"Github Pages\"></a>Github Pages</h4><p>This Github Action automating Hexo deployment workflow, to allow you to publish your Hexo site on Github Pages: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3NtYTExYmxhY2svaGV4by1hY3Rpb24=\">hexo-action<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<h4 id=\"Gitlab-CI\"><a href=\"#Gitlab-CI\" class=\"headerlink\" title=\"Gitlab CI\"></a>Gitlab CI</h4><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9kb2NzLmdpdGxhYi5jb20vZWUvY2kv\">GitLab<i class=\"fa fa-external-link-alt\"></i></span> offers a continuous integration service and pages service. If you add a <code>.gitlab-ci.yml</code> file to the root directory of your repository, and configure your GitLab project to use a Runner, then each commit or push, triggers your CI pipeline. The <code>.gitlab-ci.yml</code> file tells the GitLab runner what to do. By default it runs a pipeline with three stages: build, test, and deploy. You don't need to use all three stages; stages with no jobs are simply ignored. And at the end, your websites will be published on GitLab Host automatically.</p>\n<ol>\n<li><p>Add <code>.gitlab-ci.yml</code> to the root directory of your repository, and configure it.</p>\n <figure class=\"highlight yml\"><figcaption><span>hexo/.gitlab-ci.yml</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">image:</span> <span class=\"string\">node:lts</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">before_script:</span></span><br><span class=\"line\"> <span class=\"comment\"># Set TimeZone, eg: Asia/Shanghai</span></span><br><span class=\"line\"> <span class=\"comment\"># - export TZ='Asia/Shanghai'</span></span><br><span class=\"line\"> <span class=\"comment\"># Restore last modified time</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">"git ls-files -z | while read -d '' path; do touch -d \\"$(git log -1 --format=\\"@%ct\\" \\"$path\\")\\" \\"$path\\"; done"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">pages:</span></span><br><span class=\"line\"> <span class=\"attr\">stage:</span> <span class=\"string\">build</span></span><br><span class=\"line\"> <span class=\"attr\">cache:</span></span><br><span class=\"line\"> <span class=\"attr\">paths:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">node_modules/</span></span><br><span class=\"line\"> <span class=\"attr\">script:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">npm</span> <span class=\"string\">install</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">npx</span> <span class=\"string\">hexo</span> <span class=\"string\">deploy</span></span><br><span class=\"line\"> <span class=\"attr\">artifacts:</span></span><br><span class=\"line\"> <span class=\"attr\">paths:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">public</span></span><br><span class=\"line\"> <span class=\"attr\">only:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">master</span></span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Upload <code>scaffolds</code>, <code>source</code>, <code>themes</code>, <code>.gitignore</code>, <code>.gitlab-ci.yml</code>, <code>_config.yml</code>, and <code>package.json</code> to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRsYWIuY29tLw==\">your Gitlab repository<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n <figure class=\"highlight plaintext\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git init</span><br><span class=\"line\">$ ssh -T [email protected]</span><br><span class=\"line\">$ git remote add origin YOUR-GITLAB-REPO-SSH-LINK</span><br><span class=\"line\">$ git add .</span><br><span class=\"line\">$ git commit -m "COMMIT MESSAGE"</span><br><span class=\"line\">$ git push -u origin master</span><br></pre></td></tr></table></figure></li>\n</ol>\n<p>Now, your static website is available at <code>https://yourname.gitlab.io/project</code> that is similar to GitHub. <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRsYWIuY29tL2hlbHAvdXNlci9wcm9qZWN0L3BhZ2VzL2luZGV4Lm1k\">More GitLab Pages config in here<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<p>Of course, you can also publish static website on GitHub Pages or others pages service. There are two ways to configure <code>.gitlab-ci.yml</code>:</p>\n<div class=\"tabs\" id=\"gitlab-ci\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#gitlab-ci-1\"><code>HTTPS</code></a></li><li class=\"tab\"><a href=\"#gitlab-ci-2\"><code>SSH</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"gitlab-ci-1\"><ul>\n<li><p>Get the Access Token: <code>Settings</code> → <code>Developer settings</code> → <code>Personal access token</code> → <code>Generate new token</code>. Set access rights according to the actual situation. It should be noted that the access token is only displayed once on this page, and it should be copied, otherwise it can only be regenerated.</p>\n</li>\n<li><p>Click <code>SETTINGS-CI/CD → Variables</code> in Gitlab, and defined access token as custom variable <code>GITHUB_ACCESS_TOKEN</code>. Or set <code>USERNAME</code> <code>PASSWORD</code> variable for coding repo.</p>\n</li>\n<li><p>Configure <code>.gitlab-ci.yml</code>: <strong>only add deploy stage at the end of this file</strong></p>\n <figure class=\"highlight yml\"><figcaption><span>hexo/.gitlab-ci.yml</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">github:</span></span><br><span class=\"line\"> <span class=\"attr\">stage:</span> <span class=\"string\">deploy</span></span><br><span class=\"line\"> <span class=\"attr\">script:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">cd</span> <span class=\"string\">./public</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">git</span> <span class=\"string\">init</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">git</span> <span class=\"string\">config</span> <span class=\"string\">--global</span> <span class=\"string\">user.name</span> <span class=\"string\">"YOUR-USER-NAME"</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">git</span> <span class=\"string\">config</span> <span class=\"string\">--global</span> <span class=\"string\">user.email</span> <span class=\"string\">"YOUR-EMAIL"</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">git</span> <span class=\"string\">add</span> <span class=\"string\">.</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">git</span> <span class=\"string\">commit</span> <span class=\"string\">-m</span> <span class=\"string\">"gitlab-auto-deploy"</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">git</span> <span class=\"string\">push</span> <span class=\"string\">--force</span> <span class=\"string\">--quiet</span> <span class=\"string\">--set-upstream</span> <span class=\"string\">https://[email protected]/username/username.github.io.git</span> <span class=\"string\">master</span> <span class=\"comment\"># replace github_access_token</span></span><br><span class=\"line\"> <span class=\"comment\"># - git config http.postBuffer 524288000</span></span><br><span class=\"line\"> <span class=\"comment\"># - git push --force --quiet --set-upstream https://$USERNAME:[email protected]/username/reponame.git master # replace username & password, please escape the password</span></span><br><span class=\"line\"> <span class=\"attr\">only:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">master</span></span><br></pre></td></tr></table></figure></li>\n</ul></div><div class=\"tab-pane\" id=\"gitlab-ci-2\"><p>Deploy key is a SSH key set in your repo to grant client read-only (as well as r/w, if you want) access to your repo. This method is suitable for most public blog repositories and there are no private sub-modules in the repositories.</p>\n<ul>\n<li><p>Generate a deploy key</p>\n <figure class=\"highlight plaintext\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ ssh-keygen -t rsa -b 4096 -C "{email}" -f ~/.ssh/deploy_key</span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Click <code>SETTINGS-CI/CD → Variables</code> in Gitlab, copy the content of private key and defined it as custom variable <code>DEPLOY_PRIVATE_KEY</code>.</p>\n</li>\n<li><p>Configure <code>.gitlab-ci.yml</code>: <strong>only update script in <code>before_script</code></strong></p>\n <figure class=\"highlight yml\"><figcaption><span>hexo/.gitlab-ci.yml</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">before_script:</span></span><br><span class=\"line\"> <span class=\"comment\"># Set TimeZone, eg: Asia/Shanghai</span></span><br><span class=\"line\"> <span class=\"comment\"># - export TZ='Asia/Shanghai'</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">git</span> <span class=\"string\">config</span> <span class=\"string\">--global</span> <span class=\"string\">user.name</span> <span class=\"string\">"YOUR-USER-NAME"</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">git</span> <span class=\"string\">config</span> <span class=\"string\">--global</span> <span class=\"string\">user.email</span> <span class=\"string\">"YOUR-EMAIL"</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\"># Restore last modified time</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">"git ls-files -z | while read -d '' path; do touch -d \\"$(git log -1 --format=\\"@%ct\\" \\"$path\\")\\" \\"$path\\"; done"</span></span><br><span class=\"line\"> <span class=\"comment\"># Install ssh-agent if not already installed, it is required by Docker.</span></span><br><span class=\"line\"> <span class=\"comment\"># (change apt-get to yum if you use a CentOS-based image)</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'</span></span><br><span class=\"line\"> <span class=\"comment\"># Run ssh-agent (inside the build environment)</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">eval</span> <span class=\"string\">$(ssh-agent</span> <span class=\"string\">-s)</span></span><br><span class=\"line\"> <span class=\"comment\"># Add the SSH key stored in SSH_PRIVATE_KEY variable to the agent store</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">ssh-add</span> <span class=\"string\"><(echo</span> <span class=\"string\">"$DEPLOY_PRIVATE_KEY"</span><span class=\"string\">)</span></span><br><span class=\"line\"> <span class=\"comment\"># For Docker builds disable host key checking. Be aware that by adding that</span></span><br><span class=\"line\"> <span class=\"comment\"># you are susceptible to man-in-the-middle attacks.</span></span><br><span class=\"line\"> <span class=\"comment\"># WARNING: Use this only with the Docker executor, if you use it with shell</span></span><br><span class=\"line\"> <span class=\"comment\"># you will overwrite your user's SSH config.</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">mkdir</span> <span class=\"string\">-p</span> <span class=\"string\">~/.ssh</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">'[[ -f /.dockerenv ]] && echo -e "Host *\\n\\tStrictHostKeyChecking no\\n\\n" > ~/.ssh/config'</span></span><br><span class=\"line\"> <span class=\"comment\"># In order to properly check the server's host key, assuming you created the</span></span><br><span class=\"line\"> <span class=\"comment\"># SSH_SERVER_HOSTKEYS variable previously, uncomment the following two lines</span></span><br><span class=\"line\"> <span class=\"comment\"># instead.</span></span><br><span class=\"line\"> <span class=\"comment\"># - mkdir -p ~/.ssh</span></span><br><span class=\"line\"> <span class=\"comment\"># - '[[ -f /.dockerenv ]] && echo "$SSH_SERVER_HOSTKEYS" > ~/.ssh/known_hosts'</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\"># Install pandoc, eg: v1.19.2.1</span></span><br><span class=\"line\"> <span class=\"comment\"># - wget https://github.com/jgm/pandoc/releases/download/1.19.2.1/pandoc-1.19.2.1-1-amd64.deb</span></span><br><span class=\"line\"> <span class=\"comment\"># - dpkg -i ./pandoc-1.19.2.1-1-amd64.deb</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">image:</span> <span class=\"string\">node:lts</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">pages:</span></span><br><span class=\"line\"> <span class=\"attr\">cache:</span></span><br><span class=\"line\"> <span class=\"attr\">paths:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">node_modules/</span></span><br><span class=\"line\"> <span class=\"attr\">script:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">npm</span> <span class=\"string\">install</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">npx</span> <span class=\"string\">hexo</span> <span class=\"string\">deploy</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"attr\">artifacts:</span></span><br><span class=\"line\"> <span class=\"attr\">paths:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">public</span></span><br><span class=\"line\"> <span class=\"attr\">only:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">master</span></span><br></pre></td></tr></table></figure></li>\n</ul></div></div></div>\n\n<div class=\"note danger\"><p>Variables are not masked, and their values can be shown in the job logs if explicitly asked to do so. So make sure gitlab pipelines can only be viewed by yourself.</p>\n</div>\n"},{"title":"Installation","url":"/docs/getting-started/installation.html","content":"<h3 id=\"Select-Version\"><a href=\"#Select-Version\" class=\"headerlink\" title=\"Select Version\"></a>Select Version</h3><p>A new version of NexT will be released every month. You can choose to install the latest version or choose a stable old version.</p>\n<div class=\"tabs\" id=\"download-next\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#download-next-1\"><mark class=\"label success\">Latest Master Branch</mark></a></li><li class=\"tab\"><a href=\"#download-next-2\">Latest Release Version</a></li><li class=\"tab\"><a href=\"#download-next-3\">Specific Release Version</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"download-next-1\"><p><strong>Option 1: Download the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by10aGVtZS1uZXh0L2FyY2hpdmUvbWFzdGVyLnppcA==\">Latest Master Branch<i class=\"fa fa-external-link-alt\"></i></span></strong></p>\n<p>May be <strong>unstable</strong>, but includes <strong>latest features</strong>. At most cases useful and recommended for advanced users and for developers.</p></div><div class=\"tab-pane\" id=\"download-next-2\"><p><strong>Option 2: Download the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by10aGVtZS1uZXh0L3JlbGVhc2VzL2xhdGVzdA==\">Latest Release Version<i class=\"fa fa-external-link-alt\"></i></span></strong></p>\n<p>At most cases <strong>stable</strong>. Recommended for beginners.</p></div><div class=\"tab-pane\" id=\"download-next-3\"><p><strong>Option 3: Download the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by10aGVtZS1uZXh0L3JlbGVhc2Vz\">Specific Release Version<i class=\"fa fa-external-link-alt\"></i></span></strong></p>\n<p>In rare cases useful, but not recommended.<br>You must define version. Let's take <code>v8.0.0</code> as an example. Replace it with any version from <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by10aGVtZS1uZXh0L3RhZ3M=\">tags list<i class=\"fa fa-external-link-alt\"></i></span>.</p></div></div></div>\n\n<h3 id=\"Get-NexT\"><a href=\"#Get-NexT\" class=\"headerlink\" title=\"Get NexT\"></a>Get NexT</h3><p>There are <strong>2 recommended ways</strong> to download NexT: <code>npm</code> and <code>git</code>. You need to <strong>choose only one</strong> of them. Other installation methods, such as downloading and decompressing the theme source code in zip format from GitHub, are no longer recommended, because the installed theme is difficult to manage and upgrade.</p>\n<p>Change dir to <mark class=\"label info\">site root directory</mark> in the command line first, and then continue with the following steps.</p>\n<h4 id=\"Using-npm\"><a href=\"#Using-npm\" class=\"headerlink\" title=\"Using npm\"></a>Using <code>npm</code></h4><p>If you're using Hexo 5.0 or later, you can install <code>hexo-theme-next</code> through npm.</p>\n<div class=\"tabs\" id=\"using-npm\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#using-npm-1\">Latest Release Version</a></li><li class=\"tab\"><a href=\"#using-npm-2\">Specific Release Version</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"using-npm-1\"><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install hexo-theme-next@latest</span><br></pre></td></tr></table></figure>\n\n<p>This variant will install the <strong>latest release version</strong>.</p></div><div class=\"tab-pane\" id=\"using-npm-2\"><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install [email protected]</span><br></pre></td></tr></table></figure>\n\n<p>This variant will install the <strong>specific release version</strong>.</p></div></div></div>\n\n<h4 id=\"Using-git\"><a href=\"#Using-git\" class=\"headerlink\" title=\"Using git\"></a>Using <code>git</code></h4><div class=\"tabs\" id=\"using-git\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#using-git-1\">Latest Master Branch</a></li><li class=\"tab\"><a href=\"#using-git-2\">Specific Release Version</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"using-git-1\"><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git <span class=\"built_in\">clone</span> https://github.com/next-theme/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure>\n\n<p>Or download via mirror on GitLab:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git <span class=\"built_in\">clone</span> https://gitlab.com/hexo-theme-next/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure>\n\n<p>This variant will install the <strong>whole repository</strong> (with <code>.git</code> directory inside).<br>And in any time you can update current version with git (instructions below) and switch to any tagged release or on latest master or any other branch.</p>\n<p>Get tags list:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> themes/next</span><br><span class=\"line\">$ git tag -l</span><br><span class=\"line\">...</span><br><span class=\"line\">v8.0.0-rc.1</span><br><span class=\"line\">v8.0.0-rc.2</span><br><span class=\"line\">v8.0.0-rc.3</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>For example, you want to switch on <code>v8.0.0</code> tagged release version. Input the following command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git checkout tags/v8.0.0</span><br><span class=\"line\">Note: switching to <span class=\"string\">'tags/v8.0.0'</span>.</span><br><span class=\"line\">...</span><br><span class=\"line\">HEAD is now at f27e45b Release v8.0.0</span><br></pre></td></tr></table></figure>\n\n<p>If you want to switch on latest release version without defining tag (optional)</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git checkout $(git describe --tags $(git rev-list --tags --max-count=1))</span><br></pre></td></tr></table></figure>\n\n<p>And if you want to switch back on master branch, input this command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git checkout master</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"using-git-2\"><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git <span class=\"built_in\">clone</span> --branch v8.0.0 https://github.com/next-theme/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure>\n\n<p>Or download via mirror on GitLab:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ git <span class=\"built_in\">clone</span> --branch v8.0.0 https://gitlab.com/hexo-theme-next/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure>\n\n<p>This variant will install the <strong>specific release version</strong> (with <code>.git</code> directory inside).<br>And in any time you can switch to any tagged release, but with limit to specific version.</p></div></div></div>\n\n<p>And if you see any error message during update (something like <strong>«Commit your changes or stash them before you can merge»</strong>), recommended to learn <a href=\"/docs/getting-started/configuration.html\">Alternate Theme Config</a> feature. Howbeit, you can bypass update errors by <code>Commit</code>, <code>Stash</code> or <code>Discard</code> local changes. See <span class=\"exturl\" data-url=\"aHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9hLzE1NzQ1NDI0LzU4NjE0OTU=\">here<i class=\"fa fa-external-link-alt\"></i></span> how to do it.</p>\n<h3 id=\"Set-It-Up\"><a href=\"#Set-It-Up\" class=\"headerlink\" title=\"Set It Up\"></a>Set It Up</h3><p>When NexT download will complete, we must go back to previous guide and follow <a href=\"/docs/getting-started/#Enabling-NexT\">Enabling NexT</a> instructions.</p>\n"},{"title":"Upgrade","url":"/docs/getting-started/upgrade.html","content":"<h3 id=\"NexT-Compatibility-with-Hexo-Version\"><a href=\"#NexT-Compatibility-with-Hexo-Version\" class=\"headerlink\" title=\"NexT Compatibility with Hexo Version\"></a>NexT Compatibility with Hexo Version</h3><table>\n<thead>\n<tr>\n<th>Version</th>\n<th>Hexo 3.0.0-beta.4 or earlier</th>\n<th>Hexo 3.0.0-rc.1 ~ 3.9</th>\n<th>Hexo 4.0 ~ 4.2.1</th>\n<th>Hexo 5.0 or later</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>NexT v0.4.5.1 or earlier</td>\n<td>✅</td>\n<td>✅</td>\n<td>❌ Icon (2)</td>\n<td>❌ Icon (2)</td>\n</tr>\n<tr>\n<td>NexT v0.4.5.2 ~ v7.4.1</td>\n<td>⚠️ Data Files (1)</td>\n<td>✅</td>\n<td>❌ Icon (2)</td>\n<td>❌ Icon (2)</td>\n</tr>\n<tr>\n<td>NexT v7.4.2 ~ v8.1.0</td>\n<td>⚠️ Data Files (1)</td>\n<td>✅</td>\n<td>✅</td>\n<td>✅</td>\n</tr>\n<tr>\n<td>NexT v8.2.0 or later</td>\n<td>⚠️ Nunjucks (3)</td>\n<td>⚠️ Nunjucks (3)</td>\n<td>⚠️ Nunjucks (3)</td>\n<td>✅</td>\n</tr>\n</tbody></table>\n<p>(1): Hexo 3.0.0-beta.4 or earlier does not support Data Files.<br>(2): Icons may not be displayed normally.<br>(3): Nunjucks renderer plugin required.</p>\n<h3 id=\"NexT-Repositories\"><a href=\"#NexT-Repositories\" class=\"headerlink\" title=\"NexT Repositories\"></a>NexT Repositories</h3><p>Due to historical reasons, NexT has three different repositories.</p>\n<table>\n<thead>\n<tr>\n<th>Years</th>\n<th>Version</th>\n<th>Repository</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>2014 ~ 2017</td>\n<td>v5</td>\n<td><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2lpc3NuYW4vaGV4by10aGVtZS1uZXh0\">https://github.com/iissnan/hexo-theme-next<i class=\"fa fa-external-link-alt\"></i></span></td>\n</tr>\n<tr>\n<td>2018 ~ 2019</td>\n<td>v6 ~ v7</td>\n<td><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0\">https://github.com/theme-next/hexo-theme-next<i class=\"fa fa-external-link-alt\"></i></span></td>\n</tr>\n<tr>\n<td>2020</td>\n<td>v8</td>\n<td><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by10aGVtZS1uZXh0\">https://github.com/next-theme/hexo-theme-next<i class=\"fa fa-external-link-alt\"></i></span></td>\n</tr>\n</tbody></table>\n<h3 id=\"Upgrade-from-Legacy-Version\"><a href=\"#Upgrade-from-Legacy-Version\" class=\"headerlink\" title=\"Upgrade from Legacy Version\"></a>Upgrade from Legacy Version</h3><p>It's recommended to upgrade NexT to version 8 to get the latest features and supports in the new <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by10aGVtZS1uZXh0\">Theme-Next<i class=\"fa fa-external-link-alt\"></i></span> repository.</p>\n<h4 id=\"Breaking-Changes\"><a href=\"#Breaking-Changes\" class=\"headerlink\" title=\"Breaking Changes\"></a>Breaking Changes</h4><p>There are some breaking changes that need attention when upgrading across versions.</p>\n<ol>\n<li><p>Update language configuration (for Simplified Chinese)<br> Since v6.0.3, <code>zh-Hans</code> has been renamed to <code>zh-CN</code>: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L3JlbGVhc2VzL3RhZy92Ni4wLjM=\">https://github.com/theme-next/hexo-theme-next/releases/tag/v6.0.3<i class=\"fa fa-external-link-alt\"></i></span></p>\n<p> Users upgrading to v6.0.3 and later need to explicitly modify the <code>language</code> configuration in <mark class=\"label info\">Hexo config file</mark>, otherwise the language display is incorrect.</p>\n</li>\n<li><p>Since v8.0.0, all libraries under the <code>next/source/lib</code> directory was moved out to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvcGx1Z2lucw==\">@next-theme/plugins<i class=\"fa fa-external-link-alt\"></i></span>. Please see this article for the new 3rd-party libraries installation method: <a href=\"/docs/third-party-services/#Adding-Plugins\">Adding Plugins</a>.</p>\n</li>\n</ol>\n<h4 id=\"Upgrade\"><a href=\"#Upgrade\" class=\"headerlink\" title=\"Upgrade\"></a>Upgrade</h4><p>So, NexT suggest to upgrade from version 5 or 7 to version 8 in this way:</p>\n<ol>\n<li>You need to do some copies of old NexT files:<br> 1.1. <code>_config.yml</code> or <code>next.yml</code> (if you used <a href=\"/docs/getting-started/configuration.html\">Alternate Theme Config</a>).<br> 1.2. Custom CSS files placed in <code>next/source/css/_custom/*</code> and <code>next/source/css/_variables/*</code> directories.<br> 1.3. Custom layout files placed in <code>next/layout/_custom/*</code>.<br> 1.4. Any another possible custom additions which can be found by compare tools between repositories.</li>\n<li>Then rename the old NexT folder, for example, rename <code>next</code> to <code>next-old</code>.</li>\n<li>Install the new version according to the method provided in this article: <a href=\"/docs/getting-started/installation.html\">installation instructions</a>. Run <code>hexo clean</code> and <code>hexo s</code> to check whether the site works correctly.</li>\n<li>Update Hexo and Hexo plugin<br> If after completing the above steps, an error occurs when executing <code>hexo s</code> or <code>hexo g</code>, it means that there may be a conflict between the old version of Hexo / Hexo plugin and the new version of the theme NexT. We recommend upgrading Hexo and Hexo plugins to the latest version. You can run <code>npm outdated</code> to see all the upgradeable plugins.</li>\n<li>If you see any bugs or you simply does not like this version, you can switch back to the old version at any time.</li>\n</ol>\n"},{"title":"Button","url":"/docs/tag-plugins/button.html","content":"<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">button</span> url, text, icon [class], [title] %}</span></span><br></pre></td></tr></table></figure>\n\n<p>or</p>\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">btn</span> url, text, icon [class], [title] %}</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>url</code> : Absolute or relative path to URL.</li>\n<li><code>text</code> : Button text. Required if no icon specified.</li>\n<li><code>icon</code> : Font Awesome icon name. Required if no text specified.</li>\n<li><code>[class]</code> : <em>Optional parameter.</em> Font Awesome class(es): <code>fa-fw</code> | <code>fa-lg</code> | <code>fa-2x</code> | <code>fa-3x</code> | <code>fa-4x</code> | <code>fa-5x</code></li>\n<li><code>[title]</code> : <em>Optional parameter.</em> Tooltip at mouseover.</li>\n</ul>\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">button</span> #, Text %}</span></span><br></pre></td></tr></table></figure>\n\n<a class=\"btn\" href=\"#\">Text</a>\n\n<h4 id=\"Button-with-text-amp-title\"><a href=\"#Button-with-text-amp-title\" class=\"headerlink\" title=\"Button with text & title\"></a>Button with text & title</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text %}</span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text & Title,, Title %}</span></span><br></pre></td></tr></table></figure>\n\n<a class=\"btn\" href=\"#\">Text</a><a class=\"btn\" href=\"#\" title=\"Title\">Text & Title</a>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text %}</span><span class=\"language-xml\"> </span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text & Title,, Title %}</span></span><br></pre></td></tr></table></figure>\n\n<a class=\"btn\" href=\"#\">Text</a> <a class=\"btn\" href=\"#\" title=\"Title\">Text & Title</a>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text & Title,, Title %}</span></span><br></pre></td></tr></table></figure>\n\n<a class=\"btn\" href=\"#\">Text</a>\n<a class=\"btn\" href=\"#\" title=\"Title\">Text & Title</a>\n\n<h4 id=\"Button-with-icon\"><a href=\"#Button-with-icon\" class=\"headerlink\" title=\"Button with icon\"></a>Button with icon</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, home fa-5x %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, home fa-4x %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, home fa-3x %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, home fa-2x %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, home fa-lg %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, home %}</span></span><br></pre></td></tr></table></figure>\n\n<a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-5x\"></i></a>\n<a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-4x\"></i></a>\n<a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-3x\"></i></a>\n<a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-2x\"></i></a>\n<a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-lg\"></i></a>\n<a class=\"btn\" href=\"#\"><i class=\"fa fa-home\"></i></a>\n\n<h4 id=\"Button-with-text-amp-icon\"><a href=\"#Button-with-text-amp-icon\" class=\"headerlink\" title=\"Button with text & icon\"></a>Button with text & icon</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text & Icon (buggy), home %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text & Icon (fixed width), home fa-fw %}</span></span><br></pre></td></tr></table></figure>\n\n<a class=\"btn\" href=\"#\"><i class=\"fa fa-home\"></i>Text & Icon (buggy)</a>\n<a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-fw\"></i>Text & Icon (fixed width)</a>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text & Large Icon, home fa-fw fa-lg %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text & Large Icon & Title, home fa-fw fa-lg, Title %}</span></span><br></pre></td></tr></table></figure>\n\n<a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-fw fa-lg\"></i>Text & Large Icon</a>\n<a class=\"btn\" href=\"#\" title=\"Title\"><i class=\"fa fa-home fa-fw fa-lg\"></i>Text & Large Icon & Title</a>\n\n<h4 id=\"Button-inside-text\"><a href=\"#Button-inside-text\" class=\"headerlink\" title=\"Button inside text\"></a>Button inside text</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"language-xml\">Lorem </span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Lorem, home fa-fw fa-lg %}</span><span class=\"language-xml\"> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident </span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Ipsum, home fa-fw fa-lg %}</span><span class=\"language-xml\">, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></span><br></pre></td></tr></table></figure>\n\n<p>Lorem <a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-fw fa-lg\"></i>ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-fw fa-lg\"></i>dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-fw fa-lg\"></i>proident</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n<h4 id=\"Button-inside-other-tag\"><a href=\"#Button-inside-other-tag\" class=\"headerlink\" title=\"Button inside other tag\"></a>Button inside other tag</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> info %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text & Icon, home fa-fw %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, home, Title %}</span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Text %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">[Link](#)</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note info\"><p><a class=\"btn\" href=\"#\"><i class=\"fa fa-home fa-fw fa-lg\"></i>Text & Icon</a></p>\n<p><a class=\"btn\" href=\"#\" title=\"Title\"><i class=\"fa fa-home fa-lg\"></i></a><a class=\"btn\" href=\"#\">Text</a></p>\n<p><a href=\"#\">Link</a></p>\n</div>\n\n<h4 id=\"Button-margin\"><a href=\"#Button-margin\" class=\"headerlink\" title=\"Button margin\"></a>Button margin</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"text-center"</span>></span><span class=\"tag\"><<span class=\"name\">div</span>></span></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, heading %}</span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, fab fa-edge %}</span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, times %}</span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, circle-notch %}</span><span class=\"language-xml\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\"><<span class=\"name\">div</span>></span></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, italic %}</span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, fab fa-scribd %}</span><span class=\"language-xml\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\"><<span class=\"name\">div</span>></span></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, fab fa-google %}</span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, fab fa-chrome %}</span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, fab fa-opera %}</span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #,, gem fa-rotate-270 %}</span><span class=\"language-xml\"><span class=\"tag\"></<span class=\"name\">div</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br></pre></td></tr></table></figure>\n\n<div class=\"text-center\"><div><a class=\"btn\" href=\"#\"><i class=\"fa fa-heading\"></i></a><a class=\"btn\" href=\"#\"><i class=\"fab fa-edge\"></i></a><a class=\"btn\" href=\"#\"><i class=\"fa fa-times\"></i></a><a class=\"btn\" href=\"#\"><i class=\"fa fa-circle-notch\"></i></a></div>\n<div><a class=\"btn\" href=\"#\"><i class=\"fa fa-italic\"></i></a><a class=\"btn\" href=\"#\"><i class=\"fab fa-scribd\"></i></a></div>\n<div><a class=\"btn\" href=\"#\"><i class=\"fab fa-google\"></i></a><a class=\"btn\" href=\"#\"><i class=\"fab fa-chrome\"></i></a><a class=\"btn\" href=\"#\"><i class=\"fab fa-opera\"></i></a><a class=\"btn\" href=\"#\"><i class=\"fa fa-gem fa-rotate-270\"></i></a></div></div>\n\n<h4 id=\"Button-with-relative-URL\"><a href=\"#Button-with-relative-URL\" class=\"headerlink\" title=\"Button with relative URL\"></a>Button with relative URL</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"text-center"</span>></span></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Previous Chapter, arrow-left fa-fw fa-lg, Previous Chapter (Full Image) %}</span><span class=\"language-xml\"> </span><span class=\"template-tag\">{% <span class=\"name\">btn</span> #, Next Chapter, arrow-right fa-fw fa-lg, Next Chapter (Label) %}</span><span class=\"language-xml\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br></pre></td></tr></table></figure>\n\n<div class=\"text-center\"><a class=\"btn\" href=\"/docs/tag-plugins/full-image\" title=\"Previous Chapter (Full Image)\"><i class=\"fa fa-arrow-left fa-fw fa-lg\"></i>Previous Chapter</a> <a class=\"btn\" href=\"/docs/tag-plugins/label\" title=\"Next Chapter (Label)\"><i class=\"fa fa-arrow-right fa-fw fa-lg\"></i>Next Chapter</a></div>\n\n<h4 id=\"Button-with-absolute-URL\"><a href=\"#Button-with-absolute-URL\" class=\"headerlink\" title=\"Button with absolute URL\"></a>Button with absolute URL</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">"text-center"</span>></span></span><span class=\"template-tag\">{% <span class=\"name\">btn</span> https://github.com, GitHub, fab fa-github fa-fw fa-lg, GitHub %}</span><span class=\"language-xml\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br></pre></td></tr></table></figure>\n\n<div class=\"text-center\"><a class=\"btn\" href=\"https://github.com\" title=\"GitHub\"><i class=\"fab fa-github fa-fw fa-lg\"></i>GitHub</a></div>\n"},{"title":"Caniuse","url":"/docs/tag-plugins/caniuse.html","content":"<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">caniuse</span> feature @ [periods] %}</span></span><br></pre></td></tr></table></figure>\n\n<p>or</p>\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">can</span> feature @ [periods] %}</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>feature</code> : Search for the feature you want on <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jYW5pdXNlLmNvbS8=\">https://caniuse.com<i class=\"fa fa-external-link-alt\"></i></span>, then click on the hash sign to the left of the search result heading and you will get the unique name of this feature.</li>\n<li><code>[periods]</code> : <em>Optional parameter.</em> Select the browser versions to display. Supported values: <code>past_1</code>, <code>past_2</code>, <code>past_3</code>, <code>past_4</code>, <code>past_5</code>, <code>current</code>, <code>future_3</code>, <code>future_2</code>, <code>future_1</code>. If this value is empty, the default value <code>current</code> will be used.</li>\n</ul>\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><h4 id=\"Caniuse-without-periods\"><a href=\"#Caniuse-without-periods\" class=\"headerlink\" title=\"Caniuse without periods\"></a>Caniuse without periods</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">caniuse</span> fetch %}</span></span><br></pre></td></tr></table></figure>\n\n<iframe data-feature=\"fetch\" src=\"https://caniuse.bitsofco.de/embed/index.html?feat=fetch&periods=current&accessible-colours=false\" frameborder=\"0\" width=\"100%\" height=\"400px\"></iframe>\n\n<h4 id=\"Caniuse-with-current-period\"><a href=\"#Caniuse-with-current-period\" class=\"headerlink\" title=\"Caniuse with current period\"></a>Caniuse with current period</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">caniuse</span> sharedarraybuffer @ current %}</span></span><br></pre></td></tr></table></figure>\n\n<iframe data-feature=\"sharedarraybuffer\" src=\"https://caniuse.bitsofco.de/embed/index.html?feat=sharedarraybuffer&periods=current&accessible-colours=false\" frameborder=\"0\" width=\"100%\" height=\"400px\"></iframe>\n\n<h4 id=\"Caniuse-with-future-periods\"><a href=\"#Caniuse-with-future-periods\" class=\"headerlink\" title=\"Caniuse with future periods\"></a>Caniuse with future periods</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">caniuse</span> loading-lazy-attr @ future_3,future_2,future_1 %}</span></span><br></pre></td></tr></table></figure>\n\n<iframe data-feature=\"loading-lazy-attr\" src=\"https://caniuse.bitsofco.de/embed/index.html?feat=loading-lazy-attr&periods=future_3,future_2,future_1&accessible-colours=false\" frameborder=\"0\" width=\"100%\" height=\"400px\"></iframe>\n\n<h4 id=\"Caniuse-with-past-periods\"><a href=\"#Caniuse-with-past-periods\" class=\"headerlink\" title=\"Caniuse with past periods\"></a>Caniuse with past periods</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">caniuse</span> link-rel-modulepreload @ past_1,past_2,past_3,past_4,past_5 %}</span></span><br></pre></td></tr></table></figure>\n\n<iframe data-feature=\"link-rel-modulepreload\" src=\"https://caniuse.bitsofco.de/embed/index.html?feat=link-rel-modulepreload&periods=past_1,past_2,past_3,past_4,past_5&accessible-colours=false\" frameborder=\"0\" width=\"100%\" height=\"400px\"></iframe>\n"},{"title":"Group Pictures","url":"/docs/tag-plugins/group-pictures.html","content":"<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">grouppicture</span> [number]-[layout] %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endgrouppicture</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<p>or</p>\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">gp</span> [number]-[layout] %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endgp</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><p><code>[number]</code> : <em>Optional parameter.</em> Total number of pictures to add in the group pictures.</p>\n</li>\n<li><p><code>[layout]</code> : <em>Optional parameter.</em> The index of the layout, which can be obtained according to the figure below. For example, if you want to apply the second layout to 4 pictures, then use</p>\n <figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">grouppicture</span> 4-2 %}</span><span class=\"template-tag\">{% <span class=\"name\">endgrouppicture</span> %}</span></span><br></pre></td></tr></table></figure></li>\n</ul>\n<p><img src=\"/images/group-picture-1.png\" alt=\"Group Picture Layout\" loading=\"lazy\"><br><img src=\"/images/group-picture-2.png\" alt=\"Group Picture Layout\" loading=\"lazy\"></p>\n<div class=\"note info\"><p>It's recommended to use Group Pictures with <a href=\"/docs/third-party-services/external-libraries.html#Fancybox\">Fancybox</a> enabled.</p>\n</div>\n\n<div class=\"note warning\"><p>Please use absolute paths for <code><img></code> inside group pictures. See <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL25leHQtdGhlbWUvaGV4by10aGVtZS1uZXh0L2lzc3Vlcy82MzkjaXNzdWVjb21tZW50LTE1MTQzOTA0MzM=\">this issue<i class=\"fa fa-external-link-alt\"></i></span> for details.</p>\n</div>\n\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">grouppicture</span> 3-3 %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endgrouppicture</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"group-picture\"><div class=\"group-picture-row\"><div class=\"group-picture-column\"><img src=\"/images/next.svg\" loading=\"lazy\"></div><div class=\"group-picture-column\"><img src=\"/images/next.svg\" loading=\"lazy\"></div><div class=\"group-picture-column\"><img src=\"/images/next.svg\" loading=\"lazy\"></div></div></div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">gp</span> 5-2 %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endgp</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"group-picture\"><div class=\"group-picture-row\"><div class=\"group-picture-column\"><img src=\"/images/next.svg\" loading=\"lazy\"></div><div class=\"group-picture-column\"><img src=\"/images/next.svg\" loading=\"lazy\"></div></div><div class=\"group-picture-row\"><div class=\"group-picture-column\"><img src=\"/images/next.svg\" loading=\"lazy\"></div></div><div class=\"group-picture-row\"><div class=\"group-picture-column\"><img src=\"/images/next.svg\" loading=\"lazy\"></div><div class=\"group-picture-column\"><img src=\"/images/next.svg\" loading=\"lazy\"></div></div></div>\n"},{"title":"Tag Plugins","url":"/docs/tag-plugins/index.html","content":"<p>Tag Plugin is a way to make special style contents supported by Hexo. For example, we cannot show a image with custom size in standard Markdown. And then we can use tag plugins to solve it. <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvdGFnLXBsdWdpbnM=\">Hexo has a lot of tags<i class=\"fa fa-external-link-alt\"></i></span> which can help user. And Hexo also have interfaces to themes which make themes able to create their own tags. Following tags are provided by NexT:</p>\n<ul>\n<li><a href=\"/docs/tag-plugins/button.html\">Button</a></li>\n<li><a href=\"/docs/tag-plugins/caniuse.html\">Caniuse</a></li>\n<li><a href=\"#Centered-Quote\">Centered Quote</a></li>\n<li><a href=\"/docs/tag-plugins/group-pictures.html\">Group Pictures</a></li>\n<li><a href=\"/docs/tag-plugins/label.html\">Label</a></li>\n<li><a href=\"/docs/tag-plugins/link-grid.html\">Link Grid</a></li>\n<li><a href=\"/docs/tag-plugins/mermaid.html\">Mermaid</a></li>\n<li><a href=\"/doc/tag-plugins/wavedrom.html\">WaveDrom</a></li>\n<li><a href=\"/docs/tag-plugins/note.html\">Note</a></li>\n<li><a href=\"/docs/tag-plugins/pdf.html\">PDF</a></li>\n<li><a href=\"/docs/tag-plugins/tabs.html\">Tabs</a></li>\n<li><a href=\"#Video\">Video</a></li>\n</ul>\n<p>These tag plugins are only available in the theme NexT. If you switch to other Hexo themes, they may cause rendering errors.</p>\n<h3 id=\"Centered-Quote\"><a href=\"#Centered-Quote\" class=\"headerlink\" title=\"Centered Quote\"></a>Centered Quote</h3><p>This tag will make a quote with two lines before and after it, and text quoted will be centered. When using centered quote, if we have multi-line text, and each line has a different length, the quote won't be symmetrical, so it's recommended to use when only have single line text. For example before article all after article to make a summary.</p>\n<h4 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">centerquote</span> %}</span><span class=\"language-xml\">Something</span><span class=\"template-tag\">{% <span class=\"name\">endcenterquote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<p>or</p>\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">cq</span> %}</span><span class=\"language-xml\">Something</span><span class=\"template-tag\">{% <span class=\"name\">endcq</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">cq</span> %}</span><span class=\"language-xml\">Elegant in code, simple in core</span><span class=\"template-tag\">{% <span class=\"name\">endcq</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<blockquote class=\"blockquote-center\">\n<p>Elegant in code, simple in core</p>\n\n</blockquote>\n\n<h3 id=\"Video\"><a href=\"#Video\" class=\"headerlink\" title=\"Video\"></a>Video</h3><h4 id=\"Usage-1\"><a href=\"#Usage-1\" class=\"headerlink\" title=\"Usage\"></a>Usage</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">video</span> url %}</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Examples-1\"><a href=\"#Examples-1\" class=\"headerlink\" title=\"Examples\"></a>Examples</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">video</span> https://example.com/sample.mp4 %}</span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">video</span> /path/to/your/video.mp4 %}</span></span><br></pre></td></tr></table></figure>\n"},{"title":"Label","url":"/docs/tag-plugins/label.html","content":"<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">label</span> [class]@text %}</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>[class]</code> : <em>Optional parameter.</em> Supported values: <code>default</code> | <code>primary</code> | <code>success</code> | <code>info</code> | <code>warning</code> | <code>danger</code>.<br>If not specified, the default style of the browser will be used, which may be different in different browsers.</li>\n<li><code>text</code> : <code>@text</code> can be specified with or without space<br>E.g. <code>success @text</code> is the same as <code>success@text</code>.</li>\n</ul>\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"language-xml\">Lorem </span><span class=\"template-tag\">{% <span class=\"name\">label</span> @ipsum %}</span><span class=\"language-xml\"> </span><span class=\"template-tag\">{% <span class=\"name\">label</span> primary@dolor sit %}</span><span class=\"language-xml\"> amet, consectetur </span><span class=\"template-tag\">{% <span class=\"name\">label</span> success@adipiscing elit, %}</span><span class=\"language-xml\"> sed </span><span class=\"template-tag\">{% <span class=\"name\">label</span> info@do eiusmod %}</span><span class=\"language-xml\"> tempor incididunt ut labore et dolore magna aliqua.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Ut enim *</span><span class=\"template-tag\">{% <span class=\"name\">label</span> warning @ad %}</span><span class=\"language-xml\">* minim veniam, quis **</span><span class=\"template-tag\">{% <span class=\"name\">label</span> danger@nostrud %}</span><span class=\"language-xml\">** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Duis aute irure dolor in reprehenderit in voluptate ~~</span><span class=\"template-tag\">{% <span class=\"name\">label</span> default @velit %}</span><span class=\"language-xml\">~~ <span class=\"tag\"><<span class=\"name\">mark</span>></span>esse<span class=\"tag\"></<span class=\"name\">mark</span>></span> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></span><br></pre></td></tr></table></figure>\n\n<p>Lorem <mark class=\"label \">ipsum</mark> <mark class=\"label primary\">dolor sit</mark> amet, consectetur <mark class=\"label success\">adipiscing elit,</mark> sed <mark class=\"label info\">do eiusmod</mark> tempor incididunt ut labore et dolore magna aliqua.</p>\n<p>Ut enim <em><mark class=\"label warning\">ad</mark></em> minim veniam, quis <strong><mark class=\"label danger\">nostrud</mark></strong> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n<p>Duis aute irure dolor in reprehenderit in voluptate <del><mark class=\"label default\">velit</mark></del> <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n"},{"title":"Link Grid","url":"/docs/tag-plugins/link-grid.html","content":"<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">linkgrid</span> [image] [delimiter] [comment] %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endlinkgrid</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<p>or</p>\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">lg</span> [image] [delimiter] [comment] %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endlg</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>[image]</code> : <em>Optional parameter.</em> Default image URL.</li>\n<li><code>[delimiter]</code> : <em>Optional parameter.</em> If the optional delimiter parameter is given, it is interpreted as the delimiter of items in each line.</li>\n<li><code>[comment]</code> : <em>Optional parameter.</em> If the optional comment parameter is given, it is interpreted as the symbol to comment out a line.</li>\n</ul>\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">linkgrid</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png</span></span><br><span class=\"line\"><span class=\"language-xml\">Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png</span></span><br><span class=\"line\"><span class=\"language-xml\">Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png</span></span><br><span class=\"line\"><span class=\"language-xml\">Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png</span></span><br><span class=\"line\"><span class=\"language-xml\">% Theme NexT | https://theme-next.js.org/ | Stay Simple. Stay NexT. | /images/apple-touch-icon-next.png</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endlinkgrid</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"link-grid\"><div class=\"link-grid-container\">\n<object class=\"link-grid-image\" data=\"/images/apple-touch-icon-next.png\"></object>\n<p>Theme NexT</p><p>Stay Simple. Stay NexT.</p>\n<a href=\"https://theme-next.js.org/\"></a>\n</div><div class=\"link-grid-container\">\n<object class=\"link-grid-image\" data=\"/images/apple-touch-icon-next.png\"></object>\n<p>Theme NexT</p><p>Stay Simple. Stay NexT.</p>\n<a href=\"https://theme-next.js.org/\"></a>\n</div><div class=\"link-grid-container\">\n<object class=\"link-grid-image\" data=\"/images/apple-touch-icon-next.png\"></object>\n<p>Theme NexT</p><p>Stay Simple. Stay NexT.</p>\n<a href=\"https://theme-next.js.org/\"></a>\n</div><div class=\"link-grid-container\">\n<object class=\"link-grid-image\" data=\"/images/apple-touch-icon-next.png\"></object>\n<p>Theme NexT</p><p>Stay Simple. Stay NexT.</p>\n<a href=\"https://theme-next.js.org/\"></a>\n</div></div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">lg</span> /images/apple-touch-icon-next.png , %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Theme NexT , https://theme-next.js.org/ , Stay Simple. Stay NexT. , /images/apple-touch-icon-next.png</span></span><br><span class=\"line\"><span class=\"language-xml\">Theme NexT , https://theme-next.js.org/ , Stay Simple. Stay NexT. , /images/apple-touch-icon-next.png</span></span><br><span class=\"line\"><span class=\"language-xml\">Theme NexT , https://theme-next.js.org/ , Stay Simple. Stay NexT. , /images/apple-touch-icon-next.png</span></span><br><span class=\"line\"><span class=\"language-xml\">% Theme NexT , https://theme-next.js.org/ , Stay Simple. Stay NexT. , /images/apple-touch-icon-next.png</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endlg</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"link-grid\"><div class=\"link-grid-container\">\n<object class=\"link-grid-image\" data=\"/images/apple-touch-icon-next.png\"></object>\n<p>Theme NexT</p><p>Stay Simple. Stay NexT.</p>\n<a href=\"https://theme-next.js.org/\"></a>\n</div><div class=\"link-grid-container\">\n<object class=\"link-grid-image\" data=\"/images/apple-touch-icon-next.png\"></object>\n<p>Theme NexT</p><p>Stay Simple. Stay NexT.</p>\n<a href=\"https://theme-next.js.org/\"></a>\n</div><div class=\"link-grid-container\">\n<object class=\"link-grid-image\" data=\"/images/apple-touch-icon-next.png\"></object>\n<p>Theme NexT</p><p>Stay Simple. Stay NexT.</p>\n<a href=\"https://theme-next.js.org/\"></a>\n</div></div>\n"},{"title":"Mermaid","url":"/docs/tag-plugins/mermaid.html","content":"<h3 id=\"Settings\"><a href=\"#Settings\" class=\"headerlink\" title=\"Settings\"></a>Settings</h3><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Mermaid tag</span></span><br><span class=\"line\"><span class=\"attr\">mermaid:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"comment\"># Available themes: default | dark | forest | neutral</span></span><br><span class=\"line\"> <span class=\"attr\">theme:</span></span><br><span class=\"line\"> <span class=\"attr\">light:</span> <span class=\"string\">default</span></span><br><span class=\"line\"> <span class=\"attr\">dark:</span> <span class=\"string\">dark</span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">highlight:</span></span><br><span class=\"line\"> <span class=\"attr\">exclude_languages:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">mermaid</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">mermaid</span> type %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endmermaid</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<p>or</p>\n<figure class=\"highlight markdown\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"code\">```mermaid</span></span><br><span class=\"line\"><span class=\"code\">type</span></span><br><span class=\"line\"><span class=\"code\"></span></span><br><span class=\"line\"><span class=\"code\">```</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>type</code> : type of the mermaid chart, visit <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL21lcm1haWQtanMvbWVybWFpZA==\">https://github.com/mermaid-js/mermaid<i class=\"fa fa-external-link-alt\"></i></span> for more information.</li>\n</ul>\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">mermaid</span> graph TD %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">A[Hard] -->|Text| B(Round)</span></span><br><span class=\"line\"><span class=\"language-xml\">B --> C{Decision}</span></span><br><span class=\"line\"><span class=\"language-xml\">C -->|One| D[Result 1]</span></span><br><span class=\"line\"><span class=\"language-xml\">C -->|Two| E[Result 2]</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endmermaid</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<p>or</p>\n<figure class=\"highlight markdown\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"code\">```mermaid</span></span><br><span class=\"line\"><span class=\"code\">graph TD</span></span><br><span class=\"line\"><span class=\"code\">A[Hard] -->|Text| B(Round)</span></span><br><span class=\"line\"><span class=\"code\">B --> C{Decision}</span></span><br><span class=\"line\"><span class=\"code\">C -->|One| D[Result 1]</span></span><br><span class=\"line\"><span class=\"code\">C -->|Two| E[Result 2]</span></span><br><span class=\"line\"><span class=\"code\">```</span></span><br></pre></td></tr></table></figure>\n\n<pre class=\"mermaid\">\ngraph TD\nA[Hard] -->|Text| B(Round)\nB --> C{Decision}\nC -->|One| D[Result 1]\nC -->|Two| E[Result 2]\n</pre>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">mermaid</span> sequenceDiagram %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Alice->>John: Hello John, how are you?</span></span><br><span class=\"line\"><span class=\"language-xml\">loop Healthcheck</span></span><br><span class=\"line\"><span class=\"language-xml\"> John->>John: Fight against hypochondria</span></span><br><span class=\"line\"><span class=\"language-xml\">end</span></span><br><span class=\"line\"><span class=\"language-xml\">Note right of John: Rational thoughts!</span></span><br><span class=\"line\"><span class=\"language-xml\">John-->>Alice: Great!</span></span><br><span class=\"line\"><span class=\"language-xml\">John->>Bob: How about you?</span></span><br><span class=\"line\"><span class=\"language-xml\">Bob-->>John: Jolly good!</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endmermaid</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<pre class=\"mermaid\">\nsequenceDiagram\nAlice->>John: Hello John, how are you?\nloop Healthcheck\n John->>John: Fight against hypochondria\nend\nNote right of John: Rational thoughts!\nJohn-->>Alice: Great!\nJohn->>Bob: How about you?\nBob-->>John: Jolly good!\n</pre>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">mermaid</span> gantt %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">dateFormat YYYY-MM-DD</span></span><br><span class=\"line\"><span class=\"language-xml\">section Section</span></span><br><span class=\"line\"><span class=\"language-xml\">Completed :done, des1, 2014-01-06,2014-01-08</span></span><br><span class=\"line\"><span class=\"language-xml\">Active :active, des2, 2014-01-07, 3d</span></span><br><span class=\"line\"><span class=\"language-xml\">Parallel 1 : des3, after des1, 1d</span></span><br><span class=\"line\"><span class=\"language-xml\">Parallel 2 : des4, after des1, 1d</span></span><br><span class=\"line\"><span class=\"language-xml\">Parallel 3 : des5, after des3, 1d</span></span><br><span class=\"line\"><span class=\"language-xml\">Parallel 4 : des6, after des4, 1d</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endmermaid</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<pre class=\"mermaid\">\ngantt\ndateFormat YYYY-MM-DD\nsection Section\nCompleted :done, des1, 2014-01-06,2014-01-08\nActive :active, des2, 2014-01-07, 3d\nParallel 1 : des3, after des1, 1d\nParallel 2 : des4, after des1, 1d\nParallel 3 : des5, after des3, 1d\nParallel 4 : des6, after des4, 1d\n</pre>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">mermaid</span> classDiagram %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Class01 <|-- AveryLongClass : Cool</span></span><br><span class=\"line\"><span class=\"language-xml\"><<span class=\"tag\"><<span class=\"name\">interface</span>></span>> Class01</span></span><br><span class=\"line\"><span class=\"language-xml\">Class09 --> C2 : Where am i?</span></span><br><span class=\"line\"><span class=\"language-xml\">Class09 --* C3</span></span><br><span class=\"line\"><span class=\"language-xml\">Class09 --|> Class07</span></span><br><span class=\"line\"><span class=\"language-xml\">Class07 : equals()</span></span><br><span class=\"line\"><span class=\"language-xml\">Class07 : Object[] elementData</span></span><br><span class=\"line\"><span class=\"language-xml\">Class01 : size()</span></span><br><span class=\"line\"><span class=\"language-xml\">Class01 : int chimp</span></span><br><span class=\"line\"><span class=\"language-xml\">Class01 : int gorilla</span></span><br><span class=\"line\"><span class=\"language-xml\">class Class10 {</span></span><br><span class=\"line\"><span class=\"language-xml\"> <<span class=\"tag\"><<span class=\"name\">service</span>></span>></span></span><br><span class=\"line\"><span class=\"language-xml\"> int id</span></span><br><span class=\"line\"><span class=\"language-xml\"> size()</span></span><br><span class=\"line\"><span class=\"language-xml\">}</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endmermaid</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<pre class=\"mermaid\">\nclassDiagram\nClass01 <|-- AveryLongClass : Cool\n<<interface>> Class01\nClass09 --> C2 : Where am i?\nClass09 --* C3\nClass09 --|> Class07\nClass07 : equals()\nClass07 : Object[] elementData\nClass01 : size()\nClass01 : int chimp\nClass01 : int gorilla\nclass Class10 {\n <<service>>\n int id\n size()\n}\n</pre>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">mermaid</span> stateDiagram %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">[*] --> Still</span></span><br><span class=\"line\"><span class=\"language-xml\">Still --> [*]</span></span><br><span class=\"line\"><span class=\"language-xml\">Still --> Moving</span></span><br><span class=\"line\"><span class=\"language-xml\">Moving --> Still</span></span><br><span class=\"line\"><span class=\"language-xml\">Moving --> Crash</span></span><br><span class=\"line\"><span class=\"language-xml\">Crash --> [*]</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endmermaid</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<pre class=\"mermaid\">\nstateDiagram\n[*] --> Still\nStill --> [*]\nStill --> Moving\nMoving --> Still\nMoving --> Crash\nCrash --> [*]\n</pre>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">mermaid</span> pie %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">"Dogs" : 386</span></span><br><span class=\"line\"><span class=\"language-xml\">"Cats" : 85</span></span><br><span class=\"line\"><span class=\"language-xml\">"Rats" : 15</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endmermaid</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<pre class=\"mermaid\">\npie\n"Dogs" : 386\n"Cats" : 85\n"Rats" : 15\n</pre>\n"},{"title":"Note (Bootstrap Callout)","url":"/docs/tag-plugins/note.html","content":"<h3 id=\"Settings\"><a href=\"#Settings\" class=\"headerlink\" title=\"Settings\"></a>Settings</h3><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">note:</span></span><br><span class=\"line\"> <span class=\"comment\"># Note tag style values:</span></span><br><span class=\"line\"> <span class=\"comment\"># - simple bs-callout old alert style. Default.</span></span><br><span class=\"line\"> <span class=\"comment\"># - modern bs-callout new (v2-v3) alert style.</span></span><br><span class=\"line\"> <span class=\"comment\"># - flat flat callout style with background, like on Mozilla or StackOverflow.</span></span><br><span class=\"line\"> <span class=\"comment\"># - disabled disable all CSS styles import of note tag.</span></span><br><span class=\"line\"> <span class=\"attr\">style:</span> <span class=\"string\">simple</span></span><br><span class=\"line\"> <span class=\"attr\">icons:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"comment\"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class=\"line\"> <span class=\"comment\"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class=\"line\"> <span class=\"attr\">light_bg_offset:</span> <span class=\"number\">0</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> [class] [no-icon] [summary] %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Any content (support inline tags too).</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>[class]</code> : <em>Optional parameter.</em> Supported values: default | primary | success | info | warning | danger.</li>\n<li><code>[no-icon]</code> : <em>Optional parameter.</em> Disable icon in note.</li>\n<li><code>[summary]</code> : <em>Optional parameter.</em> Optional summary of the note.</li>\n</ul>\n<p>All parameters are optional.</p>\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Header</span></span><br><span class=\"line\"><span class=\"language-xml\">(without define class style)</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note \"><h4 id=\"Header\"><a href=\"#Header\" class=\"headerlink\" title=\"Header\"></a>Header</h4><p>(without define class style)</p>\n</div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> default %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Default Header</span></span><br><span class=\"line\"><span class=\"language-xml\">Welcome to [Hexo!](https://hexo.io)</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note default\"><h4 id=\"Default-Header\"><a href=\"#Default-Header\" class=\"headerlink\" title=\"Default Header\"></a>Default Header</h4><p>Welcome to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvLw==\">Hexo!<i class=\"fa fa-external-link-alt\"></i></span></p>\n</div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> primary %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Primary Header</span></span><br><span class=\"line\"><span class=\"language-xml\">**Welcome** to [Hexo!](https://hexo.io)</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note primary\"><h4 id=\"Primary-Header\"><a href=\"#Primary-Header\" class=\"headerlink\" title=\"Primary Header\"></a>Primary Header</h4><p><strong>Welcome</strong> to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvLw==\">Hexo!<i class=\"fa fa-external-link-alt\"></i></span></p>\n</div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> info %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Info Header</span></span><br><span class=\"line\"><span class=\"language-xml\">**Welcome** to [Hexo!](https://hexo.io)</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note info\"><h4 id=\"Info-Header\"><a href=\"#Info-Header\" class=\"headerlink\" title=\"Info Header\"></a>Info Header</h4><p><strong>Welcome</strong> to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvLw==\">Hexo!<i class=\"fa fa-external-link-alt\"></i></span></p>\n</div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> success %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Success Header</span></span><br><span class=\"line\"><span class=\"language-xml\">**Welcome** to [Hexo!](https://hexo.io)</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note success\"><h4 id=\"Success-Header\"><a href=\"#Success-Header\" class=\"headerlink\" title=\"Success Header\"></a>Success Header</h4><p><strong>Welcome</strong> to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvLw==\">Hexo!<i class=\"fa fa-external-link-alt\"></i></span></p>\n</div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> warning %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Warning Header</span></span><br><span class=\"line\"><span class=\"language-xml\">**Welcome** to [Hexo!](https://hexo.io)</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note warning\"><h4 id=\"Warning-Header\"><a href=\"#Warning-Header\" class=\"headerlink\" title=\"Warning Header\"></a>Warning Header</h4><p><strong>Welcome</strong> to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvLw==\">Hexo!<i class=\"fa fa-external-link-alt\"></i></span></p>\n</div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> danger %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Danger Header</span></span><br><span class=\"line\"><span class=\"language-xml\">**Welcome** to [Hexo!](https://hexo.io)</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note danger\"><h4 id=\"Danger-Header\"><a href=\"#Danger-Header\" class=\"headerlink\" title=\"Danger Header\"></a>Danger Header</h4><p><strong>Welcome</strong> to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvLw==\">Hexo!<i class=\"fa fa-external-link-alt\"></i></span></p>\n</div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> info no-icon %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### No icon note</span></span><br><span class=\"line\"><span class=\"language-xml\">Note **without** icon: `note info no-icon`</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note info no-icon\"><h4 id=\"No-icon-note\"><a href=\"#No-icon-note\" class=\"headerlink\" title=\"No icon note\"></a>No icon note</h4><p>Note <strong>without</strong> icon: <code>note info no-icon</code></p>\n</div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> primary This is a summary %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Details and summary</span></span><br><span class=\"line\"><span class=\"language-xml\">Note with summary: `note primary This is a summary`</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<details class=\"note primary\"><summary><p>This is a summary</p>\n</summary>\n<h4 id=\"Details-and-summary\"><a href=\"#Details-and-summary\" class=\"headerlink\" title=\"Details and summary\"></a>Details and summary</h4><p>Note with summary: <code>note primary This is a summary</code></p>\n\n</details>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> info no-icon This is a summary %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Details and summary (No icon)</span></span><br><span class=\"line\"><span class=\"language-xml\">Note with summary: `note info no-icon This is a summary`</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<details class=\"note info no-icon\"><summary><p>This is a summary</p>\n</summary>\n<h4 id=\"Details-and-summary-No-icon\"><a href=\"#Details-and-summary-No-icon\" class=\"headerlink\" title=\"Details and summary (No icon)\"></a>Details and summary (No icon)</h4><p>Note with summary: <code>note info no-icon This is a summary</code></p>\n\n</details>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> success %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Codeblock in note</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">```</span></span><br><span class=\"line\"><span class=\"language-xml\">code block in note tag</span></span><br><span class=\"line\"><span class=\"language-xml\">code block in note tag</span></span><br><span class=\"line\"><span class=\"language-xml\">code block in note tag</span></span><br><span class=\"line\"><span class=\"language-xml\">```</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note success\"><h4 id=\"Codeblock-in-note\"><a href=\"#Codeblock-in-note\" class=\"headerlink\" title=\"Codeblock in note\"></a>Codeblock in note</h4><figure class=\"highlight plaintext\"><table><tr><td class=\"code\"><pre><span class=\"line\">code block in note tag</span><br><span class=\"line\">code block in note tag</span><br><span class=\"line\">code block in note tag</span><br></pre></td></tr></table></figure></div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">note</span> default %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">#### Lists in note</span></span><br><span class=\"line\"><span class=\"language-xml\">* ul</span></span><br><span class=\"line\"><span class=\"language-xml\">* ul</span></span><br><span class=\"line\"><span class=\"language-xml\"> * ul</span></span><br><span class=\"line\"><span class=\"language-xml\"> * ul</span></span><br><span class=\"line\"><span class=\"language-xml\">* ul</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">1. ol</span></span><br><span class=\"line\"><span class=\"language-xml\">2. ol</span></span><br><span class=\"line\"><span class=\"language-xml\"> 1. ol</span></span><br><span class=\"line\"><span class=\"language-xml\"> 2. ol</span></span><br><span class=\"line\"><span class=\"language-xml\">3. ol</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note default\"><h4 id=\"Lists-in-note\"><a href=\"#Lists-in-note\" class=\"headerlink\" title=\"Lists in note\"></a>Lists in note</h4><ul>\n<li>ul</li>\n<li>ul<ul>\n<li>ul</li>\n<li>ul</li>\n</ul>\n</li>\n<li>ul</li>\n</ul>\n<ol>\n<li>ol</li>\n<li>ol<ol>\n<li>ol</li>\n<li>ol</li>\n</ol>\n</li>\n<li>ol</li>\n</ol>\n</div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"language-xml\">#### Table in Note</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> default %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">| 1 | 2 |</span></span><br><span class=\"line\"><span class=\"language-xml\">| - | - |</span></span><br><span class=\"line\"><span class=\"language-xml\">| 3 | 4 |</span></span><br><span class=\"line\"><span class=\"language-xml\">| 5 | 6 |</span></span><br><span class=\"line\"><span class=\"language-xml\">| 7 | 8 |</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note default\"><h4 id=\"Table-in-note\"><a href=\"#Table-in-note\" class=\"headerlink\" title=\"Table in note\"></a>Table in note</h4><table>\n<thead>\n<tr>\n<th>1</th>\n<th>2</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>3</td>\n<td>4</td>\n</tr>\n<tr>\n<td>5</td>\n<td>6</td>\n</tr>\n<tr>\n<td>7</td>\n<td>8</td>\n</tr>\n</tbody></table>\n</div>\n"},{"title":"PDF","url":"/docs/tag-plugins/pdf.html","content":"<h3 id=\"Settings\"><a href=\"#Settings\" class=\"headerlink\" title=\"Settings\"></a>Settings</h3><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">pdf:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"comment\"># Default height</span></span><br><span class=\"line\"> <span class=\"attr\">height:</span> <span class=\"string\">500px</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">pdf</span> url [height] %}</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>url</code> : The URL (Absolute path) of the PDF file.</li>\n<li><code>[height]</code> : <em>Optional parameter.</em> Height of the PDF display element, e.g. 800px.</li>\n</ul>\n<div class=\"note warning\"><p>The loading of pdf.js or pdf file might be blocked by CORS policy. If you want to load resources from another website, make sure the Access-Control-Allow-Origin header is set correctly. See also <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvSFRUUC9IZWFkZXJzL0FjY2Vzcy1Db250cm9sLUFsbG93LU9yaWdpbg==\">Access-Control-Allow-Origin - HTTP | MDN<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n</div>\n\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">pdf</span> https://example.com/sample.pdf %}</span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">pdf</span> /path/to/your/file.pdf 600px %}</span></span><br></pre></td></tr></table></figure>\n"},{"title":"Tabs","url":"/docs/tag-plugins/tabs.html","content":"<h3 id=\"Settings\"><a href=\"#Settings\" class=\"headerlink\" title=\"Settings\"></a>Settings</h3><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">tabs:</span></span><br><span class=\"line\"> <span class=\"comment\"># Make the nav bar of tabs with long content stick to the top.</span></span><br><span class=\"line\"> <span class=\"attr\">sticky:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">transition:</span></span><br><span class=\"line\"> <span class=\"attr\">tabs:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">labels:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">tabs</span> Unique name, [index] %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab [Tab caption] [@icon] --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">Any content (support inline tags too).</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li><code>Unique name</code> : Unique name of tabs block tag without comma.<br>Will be used in #id's as prefix for each tab with their index numbers.<br>If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.<br>Only for current url of post/page must be unique!</li>\n<li><code>[index]</code> : Index number of active tab.<br>If not specified, first tab (1) will be selected.<br>If index is -1, no tab will be selected. It's will be something like spoiler.<br>Optional parameter.</li>\n<li><code>[Tab caption]</code> : Caption of current tab.<br>If not caption specified, unique name with tab index suffix will be used as caption of tab.<br>If not caption specified, but specified icon, caption will empty.<br>Optional parameter.</li>\n<li><code>[@icon]</code> : Font Awesome icon name.<br>Can be specified with or without space; e.g. 'Tab caption @icon' is the same as 'Tab caption@icon'.<br>Optional parameter.</li>\n</ul>\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">tabs</span> First unique name %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"tabs\" id=\"first-unique-name\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#first-unique-name-1\">First unique name 1</a></li><li class=\"tab\"><a href=\"#first-unique-name-2\">First unique name 2</a></li><li class=\"tab\"><a href=\"#first-unique-name-3\">First unique name 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"first-unique-name-1\"><p><strong>This is Tab 1.</strong></p></div><div class=\"tab-pane\" id=\"first-unique-name-2\"><p><strong>This is Tab 2.</strong></p></div><div class=\"tab-pane\" id=\"first-unique-name-3\"><p><strong>This is Tab 3.</strong></p></div></div></div>\n\n<h4 id=\"Tabs-with-3rd-tab-selected\"><a href=\"#Tabs-with-3rd-tab-selected\" class=\"headerlink\" title=\"Tabs with 3rd tab selected\"></a>Tabs with 3rd tab selected</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">tabs</span> Second unique name, 3 %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"tabs\" id=\"second-unique-name\"><ul class=\"nav-tabs\"><li class=\"tab\"><a href=\"#second-unique-name-1\">Second unique name 1</a></li><li class=\"tab\"><a href=\"#second-unique-name-2\">Second unique name 2</a></li><li class=\"tab active\"><a href=\"#second-unique-name-3\">Second unique name 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane\" id=\"second-unique-name-1\"><p><strong>This is Tab 1.</strong></p></div><div class=\"tab-pane\" id=\"second-unique-name-2\"><p><strong>This is Tab 2.</strong></p></div><div class=\"tab-pane active\" id=\"second-unique-name-3\"><p><strong>This is Tab 3.</strong></p></div></div></div>\n\n<h4 id=\"Tabs-with-no-tab-selected\"><a href=\"#Tabs-with-no-tab-selected\" class=\"headerlink\" title=\"Tabs with no tab selected\"></a>Tabs with no tab selected</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">tabs</span> Third unique name, -1 %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"tabs\" id=\"third-unique-name\"><ul class=\"nav-tabs\"><li class=\"tab\"><a href=\"#third-unique-name-1\">Third unique name 1</a></li><li class=\"tab\"><a href=\"#third-unique-name-2\">Third unique name 2</a></li><li class=\"tab\"><a href=\"#third-unique-name-3\">Third unique name 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane\" id=\"third-unique-name-1\"><p><strong>This is Tab 1.</strong></p></div><div class=\"tab-pane\" id=\"third-unique-name-2\"><p><strong>This is Tab 2.</strong></p></div><div class=\"tab-pane\" id=\"third-unique-name-3\"><p><strong>This is Tab 3.</strong></p></div></div></div>\n\n<h4 id=\"Tabs-with-custom-labels\"><a href=\"#Tabs-with-custom-labels\" class=\"headerlink\" title=\"Tabs with custom labels\"></a>Tabs with custom labels</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">tabs</span> Fourth unique name %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab Solution 1 --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab Solution 2 --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab Solution 3 --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"tabs\" id=\"fourth-unique-name\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#fourth-unique-name-1\">Solution 1</a></li><li class=\"tab\"><a href=\"#fourth-unique-name-2\">Solution 2</a></li><li class=\"tab\"><a href=\"#fourth-unique-name-3\">Solution 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"fourth-unique-name-1\"><p><strong>This is Tab 1.</strong></p></div><div class=\"tab-pane\" id=\"fourth-unique-name-2\"><p><strong>This is Tab 2.</strong></p></div><div class=\"tab-pane\" id=\"fourth-unique-name-3\"><p><strong>This is Tab 3.</strong></p></div></div></div>\n\n<h4 id=\"Tabs-with-icons-only\"><a href=\"#Tabs-with-icons-only\" class=\"headerlink\" title=\"Tabs with icons only\"></a>Tabs with icons only</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">tabs</span> Fifth unique name %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab @text-width --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab @font --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab @bold --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"tabs\" id=\"fifth-unique-name\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#fifth-unique-name-1\"><i class=\"fa fa-text-width\"></i></a></li><li class=\"tab\"><a href=\"#fifth-unique-name-2\"><i class=\"fa fa-font\"></i></a></li><li class=\"tab\"><a href=\"#fifth-unique-name-3\"><i class=\"fa fa-bold\"></i></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"fifth-unique-name-1\"><p><strong>This is Tab 1.</strong></p></div><div class=\"tab-pane\" id=\"fifth-unique-name-2\"><p><strong>This is Tab 2.</strong></p></div><div class=\"tab-pane\" id=\"fifth-unique-name-3\"><p><strong>This is Tab 3.</strong></p></div></div></div>\n\n<h4 id=\"Tabs-with-icons-and-labels\"><a href=\"#Tabs-with-icons-and-labels\" class=\"headerlink\" title=\"Tabs with icons and labels\"></a>Tabs with icons and labels</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">tabs</span> Sixth unique name %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab Solution 1@text-width --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab Solution 2@font --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab Solution 3@bold --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"tabs\" id=\"sixth-unique-name\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#sixth-unique-name-1\"><i class=\"fa fa-text-width\"></i>Solution 1</a></li><li class=\"tab\"><a href=\"#sixth-unique-name-2\"><i class=\"fa fa-font\"></i>Solution 2</a></li><li class=\"tab\"><a href=\"#sixth-unique-name-3\"><i class=\"fa fa-bold\"></i>Solution 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"sixth-unique-name-1\"><p><strong>This is Tab 1.</strong></p></div><div class=\"tab-pane\" id=\"sixth-unique-name-2\"><p><strong>This is Tab 2.</strong></p></div><div class=\"tab-pane\" id=\"sixth-unique-name-3\"><p><strong>This is Tab 3.</strong></p></div></div></div>\n\n<h4 id=\"Tabs-permalinks-test\"><a href=\"#Tabs-permalinks-test\" class=\"headerlink\" title=\"Tabs permalinks test\"></a>Tabs permalinks test</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"language-xml\">Permalink for > [Tab one](#tab-one).</span></span><br><span class=\"line\"><span class=\"language-xml\">Permalink for > [Tab one 1](#tab-one-1).</span></span><br><span class=\"line\"><span class=\"language-xml\">Permalink for > [Tab one 2](#tab-one-2).</span></span><br><span class=\"line\"><span class=\"language-xml\">Permalink for > [Tab one 3](#tab-one-3).</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Permalink for > [Tab two](#tab-two).</span></span><br><span class=\"line\"><span class=\"language-xml\">Permalink for > [Tab two 1](#tab-two-1).</span></span><br><span class=\"line\"><span class=\"language-xml\">Permalink for > [Tab two 2](#tab-two-2).</span></span><br><span class=\"line\"><span class=\"language-xml\">Permalink for > [Tab two 3](#tab-two-3).</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">tabs</span> Tab one %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">tabs</span> Tab two %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<p>Permalink for > <a href=\"#tab-one\">Tab one</a>.<br>Permalink for > <a href=\"#tab-one-1\">Tab one 1</a>.<br>Permalink for > <a href=\"#tab-one-2\">Tab one 2</a>.<br>Permalink for > <a href=\"#tab-one-3\">Tab one 3</a>.</p>\n<p>Permalink for > <a href=\"#tab-two\">Tab two</a>.<br>Permalink for > <a href=\"#tab-two-1\">Tab two 1</a>.<br>Permalink for > <a href=\"#tab-two-2\">Tab two 2</a>.<br>Permalink for > <a href=\"#tab-two-3\">Tab two 3</a>.</p>\n<div class=\"tabs\" id=\"tab-one\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#tab-one-1\">Tab one 1</a></li><li class=\"tab\"><a href=\"#tab-one-2\">Tab one 2</a></li><li class=\"tab\"><a href=\"#tab-one-3\">Tab one 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"tab-one-1\"><p><strong>This is Tab 1.</strong></p></div><div class=\"tab-pane\" id=\"tab-one-2\"><p><strong>This is Tab 2.</strong></p></div><div class=\"tab-pane\" id=\"tab-one-3\"><p><strong>This is Tab 3.</strong></p></div></div></div>\n\n<div class=\"tabs\" id=\"tab-two\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#tab-two-1\">Tab two 1</a></li><li class=\"tab\"><a href=\"#tab-two-2\">Tab two 2</a></li><li class=\"tab\"><a href=\"#tab-two-3\">Tab two 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"tab-two-1\"><p><strong>This is Tab 1.</strong></p></div><div class=\"tab-pane\" id=\"tab-two-2\"><p><strong>This is Tab 2.</strong></p></div><div class=\"tab-pane\" id=\"tab-two-3\"><p><strong>This is Tab 3.</strong></p></div></div></div>\n\n<h4 id=\"Tabs-with-other-tags\"><a href=\"#Tabs-with-other-tags\" class=\"headerlink\" title=\"Tabs with other tags\"></a>Tabs with other tags</h4><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">tabs</span> Tags %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">1. One</span></span><br><span class=\"line\"><span class=\"language-xml\">2. Two</span></span><br><span class=\"line\"><span class=\"language-xml\">3. Three</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Indented code block:</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"> nano /etc</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Tagged code block:</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">code</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">code tag</span></span><br><span class=\"line\"><span class=\"language-xml\">code tag</span></span><br><span class=\"line\"><span class=\"language-xml\">code tag</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endcode</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> default %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Note default tag.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">* Five</span></span><br><span class=\"line\"><span class=\"language-xml\">* Six</span></span><br><span class=\"line\"><span class=\"language-xml\">* Seven</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> primary %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">youtube</span> Kt7u5kr_P5o %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">subtabs</span> Sub Tabs %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Sub Tab 1.**</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> success %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> warning %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Sub Tab 2.**</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> success %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> danger %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Sub Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">subtabs</span> Sub-Sub Tabs %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Sub-Sub Tab 1 of Sub Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> success %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Sub-Sub Tab 2 of Sub Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> success %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> warning %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- tab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\">**This is Sub-Sub Tab 3 of Sub Tab 3.**</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> success %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> warning %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">note</span> danger %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endnote</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endsubtabs</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endsubtabs</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"comment\"><!-- endtab --></span></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endtabs</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"tabs\" id=\"tags\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#tags-1\">Tags 1</a></li><li class=\"tab\"><a href=\"#tags-2\">Tags 2</a></li><li class=\"tab\"><a href=\"#tags-3\">Tags 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"tags-1\"><p><strong>This is Tab 1.</strong></p>\n<ol>\n<li>One</li>\n<li>Two</li>\n<li>Three</li>\n</ol>\n<p>Indented code block:</p>\n<pre><code>nano /etc\n</code></pre>\n<p>Tagged code block:</p>\n<figure class=\"highlight plaintext\"><table><tr><td class=\"code\"><pre><span class=\"line\">code tag</span><br><span class=\"line\">code tag</span><br><span class=\"line\">code tag</span><br></pre></td></tr></table></figure>\n\n<div class=\"note default\"><p>Note default tag.</p>\n</div></div><div class=\"tab-pane\" id=\"tags-2\"><p><strong>This is Tab 2.</strong></p>\n<ul>\n<li>Five</li>\n<li>Six</li>\n<li>Seven</li>\n</ul>\n<div class=\"note primary\"><div class=\"video-container\"><iframe src=\"https://www.youtube.com/embed/Kt7u5kr_P5o\" frameborder=\"0\" loading=\"lazy\" allowfullscreen></iframe></div></div></div><div class=\"tab-pane\" id=\"tags-3\"><p><strong>This is Tab 3.</strong></p>\n<div class=\"tabs\" id=\"sub-tabs\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#sub-tabs-1\">Sub Tabs 1</a></li><li class=\"tab\"><a href=\"#sub-tabs-2\">Sub Tabs 2</a></li><li class=\"tab\"><a href=\"#sub-tabs-3\">Sub Tabs 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"sub-tabs-1\"><p><strong>This is Sub Tab 1.</strong></p>\n<div class=\"note success\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>\n<div class=\"note warning\"><p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>\n</div>\n\n<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>\n</div></div><div class=\"tab-pane\" id=\"sub-tabs-2\"><p><strong>This is Sub Tab 2.</strong></p>\n<div class=\"note success\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>\n<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>\n<div class=\"note danger\"><p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>\n</div></div></div><div class=\"tab-pane\" id=\"sub-tabs-3\"><p><strong>This is Sub Tab 3.</strong></p>\n<div class=\"tabs\" id=\"sub-sub-tabs\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#sub-sub-tabs-1\">Sub-Sub Tabs 1</a></li><li class=\"tab\"><a href=\"#sub-sub-tabs-2\">Sub-Sub Tabs 2</a></li><li class=\"tab\"><a href=\"#sub-sub-tabs-3\">Sub-Sub Tabs 3</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"sub-sub-tabs-1\"><p><strong>This is Sub-Sub Tab 1 of Sub Tab 3.</strong></p>\n<div class=\"note success\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>\n<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>\n<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>\n</div></div><div class=\"tab-pane\" id=\"sub-sub-tabs-2\"><p><strong>This is Sub-Sub Tab 2 of Sub Tab 3.</strong></p>\n<div class=\"note success\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>\n<div class=\"note warning\"><p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>\n<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>\n</div>\n</div></div><div class=\"tab-pane\" id=\"sub-sub-tabs-3\"><p><strong>This is Sub-Sub Tab 3 of Sub Tab 3.</strong></p>\n<div class=\"note success\"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>\n<div class=\"note warning\"><p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>\n<div class=\"note danger\"><p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>\n</div>\n</div>\n</div></div></div></div></div></div></div></div></div></div>\n"},{"title":"WaveDrom","url":"/docs/tag-plugins/wavedrom.html","content":"<h3 id=\"Settings\"><a href=\"#Settings\" class=\"headerlink\" title=\"Settings\"></a>Settings</h3><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># WaveDrom tag</span></span><br><span class=\"line\"><span class=\"attr\">wavedrom:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Usage\"><a href=\"#Usage\" class=\"headerlink\" title=\"Usage\"></a>Usage</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">wavedrom</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endwavedrom</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">wavedrom</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">{ signal : [</span></span><br><span class=\"line\"><span class=\"language-xml\"> { name: "clk", wave: "p......" },</span></span><br><span class=\"line\"><span class=\"language-xml\"> { name: "bus", wave: "x.34.5x", data: "head body tail" },</span></span><br><span class=\"line\"><span class=\"language-xml\"> { name: "wire", wave: "0.1..0." },</span></span><br><span class=\"line\"><span class=\"language-xml\">]}</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endwavedrom</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"wavedrom\"><script type=\"WaveDrom\">\n{ signal : [\n { name: \"clk\", wave: \"p......\" },\n { name: \"bus\", wave: \"x.34.5x\", data: \"head body tail\" },\n { name: \"wire\", wave: \"0.1..0.\" },\n]}\n</script></div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">wavedrom</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">{ signal: [</span></span><br><span class=\"line\"><span class=\"language-xml\"> { name: 'A', wave: '01........0....', node: '.a........j' },</span></span><br><span class=\"line\"><span class=\"language-xml\"> { name: 'B', wave: '0.1.......0.1..', node: '..b.......i' },</span></span><br><span class=\"line\"><span class=\"language-xml\"> { name: 'C', wave: '0..1....0...1..', node: '...c....h..' },</span></span><br><span class=\"line\"><span class=\"language-xml\"> { name: 'D', wave: '0...1..0.....1.', node: '....d..g...' },</span></span><br><span class=\"line\"><span class=\"language-xml\"> { name: 'E', wave: '0....10.......1', node: '.....ef....' }</span></span><br><span class=\"line\"><span class=\"language-xml\"> ],</span></span><br><span class=\"line\"><span class=\"language-xml\"> edge: [</span></span><br><span class=\"line\"><span class=\"language-xml\"> 'a~b t1', 'c-~a t2', 'c-~>d time 3', 'd~-e',</span></span><br><span class=\"line\"><span class=\"language-xml\"> 'e~>f', 'f->g', 'g-~>h', 'h~>i some text', 'h~->j'</span></span><br><span class=\"line\"><span class=\"language-xml\"> ],</span></span><br><span class=\"line\"><span class=\"language-xml\"> config:{skin:'lowkey'}</span></span><br><span class=\"line\"><span class=\"language-xml\">}</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endwavedrom</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"wavedrom\"><script type=\"WaveDrom\">\n{ signal: [\n { name: 'A', wave: '01........0....', node: '.a........j' },\n { name: 'B', wave: '0.1.......0.1..', node: '..b.......i' },\n { name: 'C', wave: '0..1....0...1..', node: '...c....h..' },\n { name: 'D', wave: '0...1..0.....1.', node: '....d..g...' },\n { name: 'E', wave: '0....10.......1', node: '.....ef....' }\n ],\n edge: [\n 'a~b t1', 'c-~a t2', 'c-~>d time 3', 'd~-e',\n 'e~>f', 'f->g', 'g-~>h', 'h~>i some text', 'h~->j'\n ],\n config:{skin:'lowkey'}\n}\n</script></div>\n\n<figure class=\"highlight jinja\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"template-tag\">{% <span class=\"name\">wavedrom</span> %}</span><span class=\"language-xml\"></span></span><br><span class=\"line\"><span class=\"language-xml\">{reg:[</span></span><br><span class=\"line\"><span class=\"language-xml\"> {bits: 7, name: 0x07, attr: [</span></span><br><span class=\"line\"><span class=\"language-xml\"> 'VLxU,VLE zero-extended',</span></span><br><span class=\"line\"><span class=\"language-xml\"> 'VLxU,VLE zero-extended, fault-only-first',</span></span><br><span class=\"line\"><span class=\"language-xml\"> 'VLxU sign-extended',</span></span><br><span class=\"line\"><span class=\"language-xml\"> 'VLxU sign-extended, fault-only-first',</span></span><br><span class=\"line\"><span class=\"language-xml\"> ]},</span></span><br><span class=\"line\"><span class=\"language-xml\"> {bits: 5, name: 'vd', attr: 'destination of load', type: 2},</span></span><br><span class=\"line\"><span class=\"language-xml\"> {bits: 3, name: 'width'},</span></span><br><span class=\"line\"><span class=\"language-xml\"> {bits: 5, name: 'rs1', attr: 'base address', type: 4},</span></span><br><span class=\"line\"><span class=\"language-xml\"> {bits: 5, name: 'lumop', attr: [0, 16, 0, 16]},</span></span><br><span class=\"line\"><span class=\"language-xml\"> {bits: 1, name: 'vm'},</span></span><br><span class=\"line\"><span class=\"language-xml\"> {bits: 3, name: 'mop', attr: [0, 0, 4, 4]},</span></span><br><span class=\"line\"><span class=\"language-xml\"> {bits: 3, name: 'nf'},</span></span><br><span class=\"line\"><span class=\"language-xml\">]}</span></span><br><span class=\"line\"><span class=\"language-xml\"></span><span class=\"template-tag\">{% <span class=\"name\">endwavedrom</span> %}</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"wavedrom\"><script type=\"WaveDrom\">\n{reg:[\n {bits: 7, name: 0x07, attr: [\n 'VLxU,VLE zero-extended',\n 'VLxU,VLE zero-extended, fault-only-first',\n 'VLxU sign-extended',\n 'VLxU sign-extended, fault-only-first',\n ]},\n {bits: 5, name: 'vd', attr: 'destination of load', type: 2},\n {bits: 3, name: 'width'},\n {bits: 5, name: 'rs1', attr: 'base address', type: 4},\n {bits: 5, name: 'lumop', attr: [0, 16, 0, 16]},\n {bits: 1, name: 'vm'},\n {bits: 3, name: 'mop', attr: [0, 0, 4, 4]},\n {bits: 3, name: 'nf'},\n]}\n</script></div>\n"},{"title":"Custom Pages","url":"/docs/theme-settings/custom-pages.html","content":"<h3 id=\"Custom-Page-Support\"><a href=\"#Custom-Page-Support\" class=\"headerlink\" title=\"Custom Page Support\"></a>Custom Page Support</h3><p>Next allows users to add custom pages in menu.</p>\n<div class=\"tabs\" id=\"adding-custom-page\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#adding-custom-page-1\">Adding New Page →</a></li><li class=\"tab\"><a href=\"#adding-custom-page-2\">Setting Front-matter Values →</a></li><li class=\"tab\"><a href=\"#adding-custom-page-3\">Editting Menu</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"adding-custom-page-1\"><p>Change to <mark class=\"label info\">site root directory</mark> in your terminal. Use <code>hexo new page custom-name</code> to create a new <code>custom-name</code> page:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ hexo new page custom-name</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"adding-custom-page-2\"><p>Front-matter is a block of YAML or JSON at the beginning of the file that is used to configure settings for your writings. Settings front-matter values and more detailed can be found in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvZnJvbnQtbWF0dGVy\">front-matter<i class=\"fa fa-external-link-alt\"></i></span>. You can also add contents in <code>custom-name/index.md</code> if you like.</p>\n<figure class=\"highlight md\"><table><tr><td class=\"code\"><pre><span class=\"line\">title: custom-name</span><br><span class=\"line\"><span class=\"section\">date: 2014-12-22 12:39:04</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"adding-custom-page-3\"><p>Add <code>custom-name</code> to <code>menu</code> by editing <mark class=\"label primary\">NexT config file</mark>, like adding <code>about</code> page:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">menu:</span></span><br><span class=\"line\"> <span class=\"attr\">home:</span> <span class=\"string\">/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-home</span></span><br><span class=\"line\"> <span class=\"attr\">archives:</span> <span class=\"string\">/archives/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-archive</span></span><br><span class=\"line\"> <span class=\"attr\">about:</span> <span class=\"string\">/about/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-user</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<p>If you want to add Tags or Categories page, please continue reading.<br>Please read <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvZnJvbnQtbWF0dGVyI0NhdGVnb3JpZXMtYW1wLVRhZ3M=\">Hexo's Docs of Categories & Tags<i class=\"fa fa-external-link-alt\"></i></span> to know how to add tags or categories for articles.<br>Following code shows you a example of article with tags:</p>\n<div class=\"tabs\" id=\"tags-variants\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#tags-variants-1\">Variant 1</a></li><li class=\"tab\"><a href=\"#tags-variants-2\">Variant 2</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"tags-variants-1\"><figure class=\"highlight md\"><table><tr><td class=\"code\"><pre><span class=\"line\">title: Tags Testing Article</span><br><span class=\"line\"><span class=\"section\">tags: [Testing, Another Tag]</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"tags-variants-2\"><figure class=\"highlight md\"><table><tr><td class=\"code\"><pre><span class=\"line\">title: Tags Testing Article</span><br><span class=\"line\">tags:</span><br><span class=\"line\"><span class=\"bullet\"> -</span> Testing</span><br><span class=\"line\"><span class=\"section\"> - Another Tag</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Use-Archive-Page-as-Home-Page\"><a href=\"#Use-Archive-Page-as-Home-Page\" class=\"headerlink\" title=\"Use Archive Page as Home Page\"></a>Use Archive Page as Home Page</h3><p>You can configure the path of archive and index generator in <mark class=\"label info\">Hexo config file</mark>, e.g.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">archive_dir:</span> <span class=\"string\">/</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">index_generator:</span></span><br><span class=\"line\"> <span class=\"attr\">path:</span> <span class=\"string\">archives</span></span><br><span class=\"line\"> <span class=\"attr\">per_page:</span> <span class=\"number\">10</span></span><br><span class=\"line\"> <span class=\"attr\">order_by:</span> <span class=\"string\">-date</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Adding-«Tags»-Page\"><a href=\"#Adding-«Tags»-Page\" class=\"headerlink\" title=\"Adding «Tags» Page\"></a>Adding «Tags» Page</h3><p>Adding «Tags» page and show «Tags» link in menu. «Tags» page will show all tags of site. If no article has tags, this page will leave blank.</p>\n<div class=\"tabs\" id=\"adding-tags-page\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#adding-tags-page-1\">Adding New Page →</a></li><li class=\"tab\"><a href=\"#adding-tags-page-2\">Setting Page Type →</a></li><li class=\"tab\"><a href=\"#adding-tags-page-3\">Editting Menu</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"adding-tags-page-1\"><p>Change to <mark class=\"label info\">site root directory</mark> in your terminal. Use <code>hexo new page tags</code> to create a new <code>tags</code> page:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ hexo new page tags</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"adding-tags-page-2\"><p>Edit the new page and change the type to <code>tags</code>, theme will show tags cloud automatically in this page. Page content looks like following:</p>\n<figure class=\"highlight md\"><table><tr><td class=\"code\"><pre><span class=\"line\">title: Tags</span><br><span class=\"line\">date: 2014-12-22 12:39:04</span><br><span class=\"line\"><span class=\"section\">type: tags</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"adding-tags-page-3\"><p>Add <code>tags</code> to <code>menu</code> by editing <mark class=\"label primary\">NexT config file</mark>, like following:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">menu:</span></span><br><span class=\"line\"> <span class=\"attr\">home:</span> <span class=\"string\">/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-home</span></span><br><span class=\"line\"> <span class=\"attr\">archives:</span> <span class=\"string\">/archives/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-archive</span></span><br><span class=\"line\"> <span class=\"attr\">tags:</span> <span class=\"string\">/tags/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-tags</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<div class=\"note warning\"><p>If you enable any comment system for your site, comments will be shown for all posts and pages.<br>See <a href=\"/docs/third-party-services/comments.html#How-to-Disable-Comments-on-Page\">«How to Disable Comments on Page»</a> if you want to do it for pages like <code>tags</code> or <code>categories</code>.</p>\n</div>\n\n<div class=\"note warning\"><p>The default Hexo plugin <code>hexo-generator-tag</code> provides an option called <code>enable_index_page</code>, which will conflict with the «Tags» page created above. Make sure you have the option disabled.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">tag_generator:</span></span><br><span class=\"line\"> <span class=\"attr\">enable_index_page:</span> <span class=\"literal\">false</span></span><br></pre></td></tr></table></figure></div>\n\n<h4 id=\"Tagcloud\"><a href=\"#Tagcloud\" class=\"headerlink\" title=\"Tagcloud\"></a>Tagcloud</h4><p>By default, NexT has setted font color and size for tagcloud in tags page.<br>From NexT v7.0.2 you can customize them, just set related values in <mark class=\"label primary\">NexT config file</mark>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># TagCloud settings for tags page.</span></span><br><span class=\"line\"><span class=\"attr\">tagcloud:</span></span><br><span class=\"line\"> <span class=\"attr\">min:</span> <span class=\"number\">12</span> <span class=\"comment\"># Minimum font size in px</span></span><br><span class=\"line\"> <span class=\"attr\">max:</span> <span class=\"number\">30</span> <span class=\"comment\"># Maximum font size in px</span></span><br><span class=\"line\"> <span class=\"attr\">amount:</span> <span class=\"number\">200</span> <span class=\"comment\"># Total amount of tags</span></span><br><span class=\"line\"> <span class=\"attr\">orderby:</span> <span class=\"string\">name</span> <span class=\"comment\"># Order of tags</span></span><br><span class=\"line\"> <span class=\"attr\">order:</span> <span class=\"number\">1</span> <span class=\"comment\"># Sort order</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Adding-«Categories»-Page\"><a href=\"#Adding-«Categories»-Page\" class=\"headerlink\" title=\"Adding «Categories» Page\"></a>Adding «Categories» Page</h3><div class=\"note default\"><p>«Categories» page can be added in similar way as <a href=\"#Adding-%C2%ABTags%C2%BB-Page\">«Tags» page</a>, only name there is difference: just need to replace <code>tags</code> with <code>categories</code>.</p>\n</div>\n\n<h3 id=\"Adding-Google-Calendar-Page\"><a href=\"#Adding-Google-Calendar-Page\" class=\"headerlink\" title=\"Adding Google Calendar Page\"></a>Adding Google Calendar Page</h3><p>Mind that you need to make sure first you are adding a calendar that is set to public. If you are unsure, please <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kb2NzLnNpbXBsZWNhbGVuZGFyLmlvL21ha2UtZ29vZ2xlLWNhbGVuZGFyLXB1YmxpYy8=\">follow these instructions first to set a Google calendar public<i class=\"fa fa-external-link-alt\"></i></span> before adding it.</p>\n<p>More detailed documentation on creating & managing a public Google calendar: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9zdXBwb3J0Lmdvb2dsZS5jb20vY2FsZW5kYXIvYW5zd2VyLzM3MDgz\">https://support.google.com/calendar/answer/37083<i class=\"fa fa-external-link-alt\"></i></span></p>\n<div class=\"tabs\" id=\"calendar\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#calendar-1\">Setting Google Calendar →</a></li><li class=\"tab\"><a href=\"#calendar-2\">Adding Schedule Page →</a></li><li class=\"tab\"><a href=\"#calendar-3\">Setting Page Type →</a></li><li class=\"tab\"><a href=\"#calendar-4\">Editting Menu</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"calendar-1\"><div class=\"tabs\" id=\"calendar1\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#calendar1-1\">Get Calendar ID and API KEY →</a></li><li class=\"tab\"><a href=\"#calendar1-2\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"calendar1-1\"><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9kb2NzLnNpbXBsZWNhbGVuZGFyLmlvL2ZpbmQtZ29vZ2xlLWNhbGVuZGFyLWlkLw==\">Follow these instructions<i class=\"fa fa-external-link-alt\"></i></span> to find your Google Calendar ID.</p>\n<p>Login to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jb25zb2xlLmNsb3VkLmdvb2dsZS5jb20vZmxvd3MvZW5hYmxlYXBpP2FwaWlkPWNhbGVuZGFy\">Google developers<i class=\"fa fa-external-link-alt\"></i></span> and add Google Calendar API, you will get your API KEY on the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jb25zb2xlLmNsb3VkLmdvb2dsZS5jb20vYXBpcy9jcmVkZW50aWFscw==\">credentials page<i class=\"fa fa-external-link-alt\"></i></span>.</p></div><div class=\"tab-pane\" id=\"calendar1-2\"><p>You can enable it by setting values in <code>calendar</code> part. Copy the value of Calendar ID and API KEY in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">calendar:</span></span><br><span class=\"line\"> <span class=\"attr\">calendar_id:</span> <span class=\"string\"><required></span></span><br><span class=\"line\"> <span class=\"attr\">api_key:</span> <span class=\"string\"><required></span></span><br><span class=\"line\"> <span class=\"attr\">orderBy:</span> <span class=\"string\">startTime</span></span><br><span class=\"line\"> <span class=\"attr\">showLocation:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">offsetMax:</span> <span class=\"number\">72</span></span><br><span class=\"line\"> <span class=\"attr\">offsetMin:</span> <span class=\"number\">4</span></span><br><span class=\"line\"> <span class=\"attr\">showDeleted:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">singleEvents:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">maxResults:</span> <span class=\"number\">250</span></span><br></pre></td></tr></table></figure></div></div></div></div><div class=\"tab-pane\" id=\"calendar-2\"><p>Change to <mark class=\"label info\">site root directory</mark> in your terminal. Use <code>hexo new page schedule</code> to create a new <code>schedule</code> page:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ hexo new page schedule</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"calendar-3\"><p>Edit the new page and change the type to <code>schedule</code>, theme will show schedule automatically in this page. Page content looks like following:</p>\n<figure class=\"highlight md\"><table><tr><td class=\"code\"><pre><span class=\"line\">title: Schedule</span><br><span class=\"line\">date: 2014-12-22 12:39:04</span><br><span class=\"line\"><span class=\"section\">type: schedule</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"calendar-4\"><p>Add <code>schedule</code> to <code>menu</code> by editing <mark class=\"label primary\">NexT config file</mark>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">menu:</span></span><br><span class=\"line\"> <span class=\"attr\">home:</span> <span class=\"string\">/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-home</span></span><br><span class=\"line\"> <span class=\"attr\">archives:</span> <span class=\"string\">/archives/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-archive</span></span><br><span class=\"line\"> <span class=\"attr\">schedule:</span> <span class=\"string\">/schedule/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-calendar</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Custom-404-Page\"><a href=\"#Custom-404-Page\" class=\"headerlink\" title=\"Custom 404 Page\"></a>Custom 404 Page</h3><p>In your terminal, change to the <code>source</code> folder of <mark class=\"label info\">site root directory</mark>. Create a new folder called <code>404</code>, then create a new page in it:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ hexo new page 404</span><br></pre></td></tr></table></figure>\n\n<p>Make sure <code>relative_link</code> is disabled in <mark class=\"label info\">Hexo config file</mark>:</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">relative_link:</span> <span class=\"literal\">false</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note warning\"><p>Whether users can be redirected to the 404 page depends on the settings of the website hosting service or web server, not Hexo. For example, if you use Nginx as the server, you also need to configure the 404 page in <code>nginx.conf</code> file.</p>\n</div>\n\n<h4 id=\"Commonweal-404\"><a href=\"#Commonweal-404\" class=\"headerlink\" title=\"Commonweal 404\"></a>Commonweal 404</h4><p>If you would like to enable <code>commonweal 404</code> (A service provided by Tencent in China), Edit <code>404/index.md</code> like this:</p>\n<figure class=\"highlight md\"><table><tr><td class=\"code\"><pre><span class=\"line\">---</span><br><span class=\"line\">title: '404'</span><br><span class=\"line\">date: 2014-12-22 12:39:04</span><br><span class=\"line\"><span class=\"section\">comments: false</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">"//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"</span></span></span></span><br><span class=\"line\"><span class=\"tag\"><span class=\"language-xml\"> <span class=\"attr\">charset</span>=<span class=\"string\">"utf-8"</span> <span class=\"attr\">homePageUrl</span>=<span class=\"string\">"/"</span> <span class=\"attr\">homePageName</span>=<span class=\"string\">"Back to home"</span>></span></span></span><br><span class=\"line\"><span class=\"language-xml\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span></span><br></pre></td></tr></table></figure>\n\n<p>You can also add any content you want to it.</p>\n<p>Add <code>404</code> to <code>menu</code> by editing <mark class=\"label primary\">NexT config file</mark>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">menu:</span></span><br><span class=\"line\"> <span class=\"attr\">home:</span> <span class=\"string\">/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-home</span></span><br><span class=\"line\"> <span class=\"attr\">archives:</span> <span class=\"string\">/archives/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-archive</span></span><br><span class=\"line\"> <span class=\"attr\">commonweal:</span> <span class=\"string\">/404/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-heartbeat</span></span><br></pre></td></tr></table></figure>\n"},{"title":"Footer","url":"/docs/theme-settings/footer.html","content":"<h3 id=\"Site-Copyright-Setting\"><a href=\"#Site-Copyright-Setting\" class=\"headerlink\" title=\"Site Copyright Setting\"></a>Site Copyright Setting</h3><h4 id=\"Site-Start-Time\"><a href=\"#Site-Start-Time\" class=\"headerlink\" title=\"Site Start Time\"></a>Site Start Time</h4><p>By default NexT shows current year in the footer like <code>© 2020</code>. You can configure it to show the time gap like <code>© 2015 - 2020</code> by editing value <code>since</code> in <code>footer</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">footer:</span></span><br><span class=\"line\"> <span class=\"attr\">since:</span> <span class=\"number\">2020</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Site-Footer-Icon\"><a href=\"#Site-Footer-Icon\" class=\"headerlink\" title=\"Site Footer Icon\"></a>Site Footer Icon</h4><p>By default NexT shows red <code>heart</code> icon <a class=\"btn\" href=\"#\"><i class=\"fa fa-heart\"></i></a> with animation between year and copyright information in the footer. You can configure it by editing value <code>icon</code> in <code>footer</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<div class=\"tabs\" id=\"icon\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#icon-1\"><code>name</code></a></li><li class=\"tab\"><a href=\"#icon-2\"><code>animated</code></a></li><li class=\"tab\"><a href=\"#icon-3\"><code>color</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"icon-1\"><p>The name of footer icon can be founded in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9mb250YXdlc29tZS5jb20v\">Font Awesome<i class=\"fa fa-external-link-alt\"></i></span> site. <code>heart</code> is recommended.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">footer:</span></span><br><span class=\"line\"> <span class=\"attr\">icon:</span></span><br><span class=\"line\"> <span class=\"attr\">name:</span> <span class=\"string\">fa</span> <span class=\"string\">fa-user</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"icon-2\"><p>Set up animated of footer icon by changing the value of <code>icon.animated</code>:</p>\n<ul>\n<li><strong><code>true</code></strong> → Icon will be animated.</li>\n<li><code>false</code> → Icon will not be animated.</li>\n</ul>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">footer:</span></span><br><span class=\"line\"> <span class=\"attr\">icon:</span></span><br><span class=\"line\"> <span class=\"attr\">animated:</span> <span class=\"literal\">false</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"icon-3\"><p>Set up color of footer icon by changing the value of <code>icon.color</code>. Please use Hex Code, and red (#ff0000) is recommended for <code>heart</code> icon.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">footer:</span></span><br><span class=\"line\"> <span class=\"attr\">icon:</span></span><br><span class=\"line\"> <span class=\"attr\">color:</span> <span class=\"string\">"#808080"</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h4 id=\"Site-Copyright-Name\"><a href=\"#Site-Copyright-Name\" class=\"headerlink\" title=\"Site Copyright Name\"></a>Site Copyright Name</h4><p>By default NexT shows the name of <code>author</code> from <mark class=\"label info\">Hexo config file</mark>. You can configure it by editing value <code>copyright</code> in <code>footer</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">footer:</span></span><br><span class=\"line\"> <span class=\"attr\">copyright:</span></span><br></pre></td></tr></table></figure>\n\n<p>Set <code>copyright</code> to <code>false</code> will disable the copyright statement completely.</p>\n<div class=\"note warning\"><p>This option will only customize the author name in the footer. The name in the Creative Commons License section at the end of each post is not affected.</p>\n</div>\n\n<h3 id=\"Site-Platform-Information\"><a href=\"#Site-Platform-Information\" class=\"headerlink\" title=\"Site Platform Information\"></a>Site Platform Information</h3><p>By default NexT shows Hexo and Theme & scheme information like <code>Powered by Hexo & NexT.Muse</code>. You can configure it by editing value <code>powered</code> in <code>footer</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">footer:</span></span><br><span class=\"line\"> <span class=\"attr\">powered:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Site-Beian-Information\"><a href=\"#Site-Beian-Information\" class=\"headerlink\" title=\"Site Beian Information\"></a>Site Beian Information</h3><p>Beian information is for Chinese users. By default NexT will not show the information of beian. You can configure it by editing values in <code>footer.beian</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">footer:</span></span><br><span class=\"line\"> <span class=\"attr\">beian:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">icp:</span> <span class=\"string\">京ICP备</span> <span class=\"number\">1234567890</span><span class=\"string\">号-1</span></span><br><span class=\"line\"> <span class=\"attr\">gongan_id:</span> <span class=\"number\">1234567890</span></span><br><span class=\"line\"> <span class=\"attr\">gongan_num:</span> <span class=\"string\">京公网安备</span> <span class=\"number\">1234567890</span><span class=\"string\">号</span></span><br><span class=\"line\"> <span class=\"attr\">gongan_icon_url:</span> <span class=\"string\">/uploads/beian.png</span></span><br></pre></td></tr></table></figure>\n"},{"title":"Theme Settings","url":"/docs/theme-settings/index.html","content":"<p>One of the guiding principles of NexT is to hide complex details and give you a simple but flexible config, so you can use it easily.</p>\n<div class=\"note info\"><p>The values given in the document are often typical allowable values rather than default values. They may be different from those in <mark class=\"label primary\">NexT config file</mark>.</p>\n</div>\n\n<h3 id=\"NexT-Quick-Start\"><a href=\"#NexT-Quick-Start\" class=\"headerlink\" title=\"NexT Quick Start\"></a>NexT Quick Start</h3><h4 id=\"Cache-Support\"><a href=\"#Cache-Support\" class=\"headerlink\" title=\"Cache Support\"></a>Cache Support</h4><p>NexT v6+ allows to cache content generation. Set the value <code>enable</code> to <code>true</code> in <code>cache</code> section in <mark class=\"label primary\">NexT config file</mark> as following:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Allow to cache content generation.</span></span><br><span class=\"line\"><span class=\"attr\">cache:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Minify-Support\"><a href=\"#Minify-Support\" class=\"headerlink\" title=\"Minify Support\"></a>Minify Support</h4><p>NexT allows to minify Hexo generation. Set the value <code>minify</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark> as following:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Remove unnecessary files after hexo generate.</span></span><br><span class=\"line\"><span class=\"attr\">minify:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Choosing-Scheme\"><a href=\"#Choosing-Scheme\" class=\"headerlink\" title=\"Choosing Scheme\"></a>Choosing Scheme</h4><p>Scheme is a feature supported by NexT, by using Scheme NexT gives you different views. And nearly all config can be used by those Schemes. Till now NexT supports 4 schemes, and they are:</p>\n<ul>\n<li><strong><code>Muse</code></strong> → Default Scheme, this is the initial version of NexT. Uses black-white tone and mainly looks cleanly.</li>\n<li><code>Mist</code> → A tighter version of Muse with a tidy single-column view.</li>\n<li><code>Pisces</code> → Double-column Scheme, fresh like your neighbor's daughter.</li>\n<li><code>Gemini</code> → Looks like Pisces, but have distinct column blocks with shadow to appear more sensitive to view.</li>\n</ul>\n<p>You can change Scheme by editing <mark class=\"label primary\">NexT config file</mark>, searching <code>scheme</code> keyword. You'll see 4 lines of scheme settings and can enable one of them by removing it's <code>#</code> and added <code>#</code> to previous.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">#scheme: Muse</span></span><br><span class=\"line\"><span class=\"comment\">#scheme: Mist</span></span><br><span class=\"line\"><span class=\"comment\">#scheme: Pisces</span></span><br><span class=\"line\"><span class=\"attr\">scheme:</span> <span class=\"string\">Gemini</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Dark-Mode\"><a href=\"#Dark-Mode\" class=\"headerlink\" title=\"Dark Mode\"></a>Dark Mode</h4><style>\n.image-comparison-container {\n position: relative;\n}\n\n.image-comparison {\n opacity: 1 !important;\n}\n\n@keyframes next-clip-path {\n from {\n clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);\n }\n to {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n }\n}\n\n.image-comparison:last-of-type {\n animation: next-clip-path 8s alternate ease-in-out infinite;\n position: absolute;\n top: 0;\n}\n</style>\n<div class=\"image-comparison-container\">\n <img class=\"image-comparison\" src=\"/images/next-schemes.png\" alt=\"NexT Schemes\">\n <img class=\"image-comparison\" src=\"/images/next-schemes-dark.png\" alt=\"NexT Schemes\">\n</div>\n\n<p>You can enable Dark Mode by setting <code>darkmode</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">darkmode:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<p>The <code>prefers-color-scheme</code> CSS media feature is used to bring Dark Mode to all 4 schemes above, make sure your browser supports it.</p>\n<iframe data-feature=\"prefers-color-scheme\" src=\"https://caniuse.bitsofco.de/embed/index.html?feat=prefers-color-scheme&periods=current,past_1,past_2,past_3,past_4,past_5&accessible-colours=false\" frameborder=\"0\" width=\"100%\" height=\"400px\"></iframe>\n\n<p>Theme NexT automatically shows Dark Mode if the OS prefered theme is dark. It's supported by macOS Mojave, iOS 13 and Android 10 or later. Relevant docs:<br><span class=\"exturl\" data-url=\"aHR0cHM6Ly9zdXBwb3J0LmFwcGxlLmNvbS9lbi11cy9IVDIwODk3Ng==\">How to use Dark Mode on your Mac<i class=\"fa fa-external-link-alt\"></i></span><br><span class=\"exturl\" data-url=\"aHR0cHM6Ly9zdXBwb3J0LmFwcGxlLmNvbS9lbi11cy9IVDIxMDMzMg==\">Use Dark Mode on your iPhone, iPad, or iPod touch<i class=\"fa fa-external-link-alt\"></i></span><br><span class=\"exturl\" data-url=\"aHR0cHM6Ly9kZXZlbG9wZXIuYW5kcm9pZC5jb20vZ3VpZGUvdG9waWNzL3VpL2xvb2stYW5kLWZlZWwvZGFya3RoZW1l\">Dark theme | Android Developers<i class=\"fa fa-external-link-alt\"></i></span></p>\n<h4 id=\"Configuring-Favicon\"><a href=\"#Configuring-Favicon\" class=\"headerlink\" title=\"Configuring Favicon\"></a>Configuring Favicon</h4><p>By default the Hexo site use NexT favicons in <code>hexo-site/themes/next/source/images/</code> directory with different size for different device. You can replace them with your own favicons.</p>\n<p>For example, you can put your favicons in <code>hexo-site/source/images/</code> directory. Then you need to rename them and change the settings in <code>favicon</code> section in <mark class=\"label primary\">NexT config file</mark>, otherwise icons from Next will rewrite your custom icons in Hexo.</p>\n<p>You can also put custom favicons into <code>hexo-site/source/</code> directory. In this way, you <strong>must remove</strong> <code>/images</code> prefix from paths.</p>\n<p>To generate custom favicons, you can visit <span class=\"exturl\" data-url=\"aHR0cHM6Ly9yZWFsZmF2aWNvbmdlbmVyYXRvci5uZXQv\">Favicon Generator<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">favicon:</span></span><br><span class=\"line\"> <span class=\"attr\">small:</span> <span class=\"string\">/images/favicon-16x16-next.png</span></span><br><span class=\"line\"> <span class=\"attr\">medium:</span> <span class=\"string\">/images/favicon-32x32-next.png</span></span><br><span class=\"line\"> <span class=\"attr\">apple_touch_icon:</span> <span class=\"string\">/images/apple-touch-icon-next.png</span></span><br><span class=\"line\"> <span class=\"attr\">safari_pinned_tab:</span> <span class=\"string\">/images/logo.svg</span></span><br><span class=\"line\"> <span class=\"attr\">android_manifest:</span> <span class=\"string\">/images/manifest.json</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Custom-Logo-Support\"><a href=\"#Custom-Logo-Support\" class=\"headerlink\" title=\"Custom Logo Support\"></a>Custom Logo Support</h4><p>NexT supports the site logo personalization.</p>\n<p>You can enable it by adding images's url to <code>custom_logo</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">custom_logo:</span> <span class=\"string\">/uploads/custom-logo.jpg</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note danger\"><p>Scheme Mist does not support custom logo setting.</p>\n</div>\n\n<h4 id=\"Creative-Commons\"><a href=\"#Creative-Commons\" class=\"headerlink\" title=\"Creative Commons\"></a>Creative Commons</h4><p>NexT supports the display of <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnLw==\">Creative Commons 4.0 International License<i class=\"fa fa-external-link-alt\"></i></span> in sidebar and post including <code>by</code>, <code>by-nc</code>, <code>by-nc-nd</code>, <code>by-nc-sa</code>, <code>by-nd</code>, <code>by-sa</code> and <code>cc-zero</code>. These licenses allow creators to communicate which rights they reserve, and which rights they waive for the benefit of recipients or other creators.</p>\n<p>You can configure it by editing values in <code>creative_commons</code> section in <mark class=\"label primary\">NexT config file</mark>, for example:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">creative_commons:</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero</span></span><br><span class=\"line\"> <span class=\"attr\">license:</span> <span class=\"string\">by-nc-sa</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: big | small</span></span><br><span class=\"line\"> <span class=\"attr\">size:</span> <span class=\"string\">small</span></span><br><span class=\"line\"> <span class=\"attr\">sidebar:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">post:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">language:</span> <span class=\"string\">deed.zh</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note info\"><p>You can set a language value if you prefer a translated version of CC license, e.g. deed.zh<br>CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnLw==\">https://creativecommons.org<i class=\"fa fa-external-link-alt\"></i></span></p>\n</div>\n\n<h4 id=\"Open-Graph\"><a href=\"#Open-Graph\" class=\"headerlink\" title=\"Open Graph\"></a>Open Graph</h4><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">open_graph:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"comment\"># Add pairs each line to customize</span></span><br><span class=\"line\"> <span class=\"attr\">options:</span></span><br><span class=\"line\"> <span class=\"attr\">type:</span> <span class=\"string\">blog</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Configuring-Menu-Items\"><a href=\"#Configuring-Menu-Items\" class=\"headerlink\" title=\"Configuring Menu Items\"></a>Configuring Menu Items</h4><p>Menu settings items have format <code>Key: /link/ || icon</code> which contains 3 values:</p>\n<div class=\"tabs\" id=\"menu-items\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#menu-items-1\"><code>Key</code></a></li><li class=\"tab\"><a href=\"#menu-items-2\"><code>link</code></a></li><li class=\"tab\"><a href=\"#menu-items-3\"><code>icon</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"menu-items-1\"><p><code>Key</code> → is the name of menu item (<code>home</code>, <code>archives</code>, etc.).<br>If translate for this menu will be found in languages, this translate will be loaded; if not, <code>Key</code> name will be used.</p>\n<div class=\"note danger\"><p><code>Key</code> value is case sensitive (e.g. <code>home</code> is not same as <code>Home</code>).</p>\n</div></div><div class=\"tab-pane\" id=\"menu-items-2\"><p>Value before <code>||</code> delimiter (<code>/link/</code>) → is the target link to relative url inside your site.</p></div><div class=\"tab-pane\" id=\"menu-items-3\"><p>Value after <code>||</code> delimiter (<code>icon</code>) → is the name of Font Awesome icon.<br>Names of that icons can be found in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9mb250YXdlc29tZS5jb20v\">Font Awesome<i class=\"fa fa-external-link-alt\"></i></span> site.</p></div></div></div>\n\n<p>By default, all menu items are commented out to ensure that you can override them in the <a href=\"/docs/getting-started/configuration.html\">Alternate Theme Config</a>.<br>To customize menu items, edit the following content in <mark class=\"label primary\">NexT config file</mark>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">menu:</span></span><br><span class=\"line\"> <span class=\"attr\">home:</span> <span class=\"string\">/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-home</span></span><br><span class=\"line\"> <span class=\"comment\">#about: /about/ || fa fa-user</span></span><br><span class=\"line\"> <span class=\"comment\">#tags: /tags/ || fa fa-tags</span></span><br><span class=\"line\"> <span class=\"comment\">#categories: /categories/ || fa fa-th</span></span><br><span class=\"line\"> <span class=\"attr\">archives:</span> <span class=\"string\">/archives/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-archive</span></span><br><span class=\"line\"> <span class=\"comment\">#schedule: /schedule/ || fa fa-calendar</span></span><br><span class=\"line\"> <span class=\"comment\">#sitemap: /sitemap.xml || fa fa-sitemap</span></span><br><span class=\"line\"> <span class=\"comment\">#commonweal: /404/ || fa fa-heartbeat</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note danger\"><p>Except <code>home</code> and <code>archives</code>, all custom pages under <code>menu</code> section need to be created manually. See <a href=\"/docs/theme-settings/custom-pages.html\">«Custom Page Support»</a>.</p>\n<p>Besides, <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLWdlbmVyYXRvci1zaXRlbWFw\">hexo-generator-sitemap<i class=\"fa fa-external-link-alt\"></i></span> plugin is required for <code>sitemap</code> support.</p>\n</div>\n\n<p>Dynamic sub-menu within hierarchy structure is also supported. Add your sub-menu items in <code>menu</code> section in <mark class=\"label primary\">NexT config file</mark> as following:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">menu:</span></span><br><span class=\"line\"> <span class=\"attr\">home:</span> <span class=\"string\">/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-home</span></span><br><span class=\"line\"> <span class=\"attr\">archives:</span> <span class=\"string\">/archives/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-archive</span></span><br><span class=\"line\"> <span class=\"attr\">Docs:</span></span><br><span class=\"line\"> <span class=\"attr\">default:</span> <span class=\"string\">/docs/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-book</span></span><br><span class=\"line\"> <span class=\"attr\">Getting Started:</span></span><br><span class=\"line\"> <span class=\"attr\">default:</span> <span class=\"string\">/getting-started/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-flag</span></span><br><span class=\"line\"> <span class=\"attr\">Installation:</span> <span class=\"string\">/installation.html</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-download</span></span><br><span class=\"line\"> <span class=\"attr\">Configuration:</span> <span class=\"string\">/configuration.html</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-wrench</span></span><br><span class=\"line\"> <span class=\"attr\">Third Party Plugins:</span></span><br><span class=\"line\"> <span class=\"attr\">default:</span> <span class=\"string\">/third-party-services/</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-puzzle-piece</span></span><br><span class=\"line\"> <span class=\"attr\">Math Equations:</span> <span class=\"string\">/math-equations.html</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-square-root-alt</span></span><br><span class=\"line\"> <span class=\"attr\">Comment Systems:</span> <span class=\"string\">/comments.html</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-comment-alt</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note danger\"><p>A <code>default</code> page is required for each sub-menu item.</p>\n</div>\n\n<p>By default NexT shows the icons of menu items without badges.</p>\n<div class=\"tabs\" id=\"menu_settings\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#menu_settings-1\"><code>icons</code></a></li><li class=\"tab\"><a href=\"#menu_settings-2\"><code>badges</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"menu_settings-1\"><p>You can configure it by editing value <code>icons</code> in <code>menu_settings</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">menu_settings:</span></span><br><span class=\"line\"> <span class=\"attr\">icons:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"menu_settings-2\"><p>Set the value <code>badges</code> to <code>true</code> to display the count of Posts / Categories / Tags within menu items in <code>menu_settings</code> section in <mark class=\"label primary\">NexT config file</mark> as following:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">menu_settings:</span></span><br><span class=\"line\"> <span class=\"attr\">badges:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div></div></div>\n"},{"title":"Internationalization","url":"/docs/theme-settings/internationalization.html","content":"<h3 id=\"Choosing-Language\"><a href=\"#Choosing-Language\" class=\"headerlink\" title=\"Choosing Language\"></a>Choosing Language</h3><p>Edit <mark class=\"label info\">Hexo config file</mark>, set the value of <code>language</code> to the language you need. For example, English looks like this:</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">language:</span> <span class=\"string\">en</span></span><br></pre></td></tr></table></figure>\n\n<p>NexT now supports following languages:</p>\n<table>\n<thead>\n<tr>\n<th>Language</th>\n<th>Example</th>\n<th>Code</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Arabic</td>\n<td>عربي</td>\n<td><code>ar</code></td>\n</tr>\n<tr>\n<td>Bengali</td>\n<td>বাংলা</td>\n<td><code>bn</code></td>\n</tr>\n<tr>\n<td>Chinese (Simplified)</td>\n<td>简体中文</td>\n<td><code>zh-CN</code></td>\n</tr>\n<tr>\n<td>Chinese (Traditional)</td>\n<td>繁體中文</td>\n<td><code>zh-TW</code></td>\n</tr>\n<tr>\n<td>Chinese (Hong Kong)</td>\n<td>繁體中文-香港</td>\n<td><code>zh-HK</code></td>\n</tr>\n<tr>\n<td>Dutch</td>\n<td>Niederländisch</td>\n<td><code>nl</code></td>\n</tr>\n<tr>\n<td>English</td>\n<td>English</td>\n<td><code>en</code></td>\n</tr>\n<tr>\n<td>French</td>\n<td>Français</td>\n<td><code>fr</code></td>\n</tr>\n<tr>\n<td>German</td>\n<td>Deutsch</td>\n<td><code>de</code></td>\n</tr>\n<tr>\n<td>Indonesian</td>\n<td>Indonesia</td>\n<td><code>id</code></td>\n</tr>\n<tr>\n<td>Italian</td>\n<td>Italiano</td>\n<td><code>it</code></td>\n</tr>\n<tr>\n<td>Japanese</td>\n<td>日本語</td>\n<td><code>ja</code></td>\n</tr>\n<tr>\n<td>Korean</td>\n<td>한국어</td>\n<td><code>ko</code></td>\n</tr>\n<tr>\n<td>Persian</td>\n<td>فارسی</td>\n<td><code>fa</code></td>\n</tr>\n<tr>\n<td>Portuguese</td>\n<td>Português</td>\n<td><code>pt</code></td>\n</tr>\n<tr>\n<td>Portuguese (Brazilian)</td>\n<td>Português (Brazilian)</td>\n<td><code>pt-BR</code></td>\n</tr>\n<tr>\n<td>Russian</td>\n<td>Русский</td>\n<td><code>ru</code></td>\n</tr>\n<tr>\n<td>Sinhala</td>\n<td>සිංහල</td>\n<td><code>si</code></td>\n</tr>\n<tr>\n<td>Spanish</td>\n<td>Español</td>\n<td><code>es</code></td>\n</tr>\n<tr>\n<td>Turkish</td>\n<td>Türk</td>\n<td><code>tr</code></td>\n</tr>\n<tr>\n<td>Turkmen</td>\n<td>Türkmençe</td>\n<td><code>tk</code></td>\n</tr>\n<tr>\n<td>Ukrainian</td>\n<td>Український</td>\n<td><code>uk</code></td>\n</tr>\n<tr>\n<td>Vietnamese</td>\n<td>Tiếng Việt</td>\n<td><code>vi</code></td>\n</tr>\n</tbody></table>\n<div class=\"note primary\"><p>The files in the <code>language</code> directory are automatically generated, you do not need to modify them directly. Please submit translations via <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jcm93ZGluLmNvbS9wcm9qZWN0L2hleG8tdGhlbWUtbmV4dA==\">Crowdin<i class=\"fa fa-external-link-alt\"></i></span> if you would like to add or improve translation for NexT theme.</p>\n</div>\n\n<h3 id=\"Multilingual-Switcher\"><a href=\"#Multilingual-Switcher\" class=\"headerlink\" title=\"Multilingual Switcher\"></a>Multilingual Switcher</h3><p>Set multiple languages in <mark class=\"label info\">Hexo config file</mark>, e.g.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">language:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">zh-CN</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">en</span></span><br></pre></td></tr></table></figure>\n\n<p>Then turn on <code>language_switcher</code> in <mark class=\"label primary\">NexT config file</mark>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Show multilingual switcher in footer.</span></span><br><span class=\"line\"><span class=\"attr\">language_switcher:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Override-Default-Translations\"><a href=\"#Override-Default-Translations\" class=\"headerlink\" title=\"Override Default Translations\"></a>Override Default Translations</h3><p>If you would like to customize the default translation, you do not need to modify the translation files in the <code>languages</code> directory. You can override all translations using <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvZGF0YS1maWxlcw==\">Data Files<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<ol>\n<li><p>Create a <code>languages.yml</code> in <code>source/_data</code>.</p>\n</li>\n<li><p>Insert following codes: (be careful about the two-space indent)</p>\n <figure class=\"highlight yml\"><figcaption><span>languages.yml</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># language</span></span><br><span class=\"line\"><span class=\"attr\">zh-CN:</span></span><br><span class=\"line\"> <span class=\"comment\"># items</span></span><br><span class=\"line\"> <span class=\"attr\">post:</span></span><br><span class=\"line\"> <span class=\"attr\">copyright:</span></span><br><span class=\"line\"> <span class=\"comment\"># the translation you prefer</span></span><br><span class=\"line\"> <span class=\"attr\">author:</span> <span class=\"string\">本文博主</span></span><br><span class=\"line\"><span class=\"attr\">en:</span></span><br><span class=\"line\"> <span class=\"attr\">menu:</span></span><br><span class=\"line\"> <span class=\"attr\">schedule:</span> <span class=\"string\">Calendar</span></span><br></pre></td></tr></table></figure></li>\n</ol>\n<p>This situation is also available for off-list items. For example, Next uses <a href=\"/docs/advanced-settings/injects.html\">Theme Inject</a> to introduce the comments systems. You can rename the returned value in chinese as followed:</p>\n<figure class=\"highlight yml\"><figcaption><span>languages.yml</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># language</span></span><br><span class=\"line\"><span class=\"attr\">zh-CN:</span></span><br><span class=\"line\"> <span class=\"comment\"># items</span></span><br><span class=\"line\"> <span class=\"attr\">post:</span></span><br><span class=\"line\"> <span class=\"attr\">comments:</span></span><br><span class=\"line\"> <span class=\"attr\">disqus:</span> <span class=\"string\">评论</span></span><br></pre></td></tr></table></figure>\n"},{"title":"Misc Theme Settings","url":"/docs/theme-settings/miscellaneous.html","content":"<h3 id=\"Preconnect\"><a href=\"#Preconnect\" class=\"headerlink\" title=\"Preconnect\"></a>Preconnect</h3><p>NexT supports adding preconnect resource hints to establish early connections to fonts and plugins origins.</p>\n<p>You can enable it by setting <code>preconnect: true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Preconnect CDN for fonts and plugins.</span></span><br><span class=\"line\"><span class=\"comment\"># For more information: https://www.w3.org/TR/resource-hints/#preconnect</span></span><br><span class=\"line\"><span class=\"attr\">preconnect:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Text-Align\"><a href=\"#Text-Align\" class=\"headerlink\" title=\"Text Align\"></a>Text Align</h3><p>NexT allows to customize the text alignment in posts / pages. The <code>text-align</code> CSS property sets the horizontal alignment of a block element or table-cell box.</p>\n<table>\n<thead>\n<tr>\n<th>Values</th>\n<th>Effect</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>start</code></td>\n<td>The same as <code>left</code> if direction is left-to-right and <code>right</code> if direction is right-to-left.</td>\n</tr>\n<tr>\n<td><code>end</code></td>\n<td>The same as <code>right</code> if direction is left-to-right and <code>left</code> if direction is right-to-left.</td>\n</tr>\n<tr>\n<td><code>left</code></td>\n<td>The inline contents are aligned to the left edge of the line box.</td>\n</tr>\n<tr>\n<td><code>right</code></td>\n<td>The inline contents are aligned to the right edge of the line box.</td>\n</tr>\n<tr>\n<td><code>center</code></td>\n<td>The inline contents are centered within the line box.</td>\n</tr>\n<tr>\n<td><code>justify</code></td>\n<td>The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</td>\n</tr>\n<tr>\n<td><code>justify-all</code></td>\n<td>Same as <code>justify</code>, but also forces the last line to be justified.</td>\n</tr>\n<tr>\n<td><code>match-parent</code></td>\n<td>Similar to <code>inherit</code>, but the values <code>start</code> and <code>end</code> are calculated according to the parent's direction and are replaced by the appropriate <code>left</code> or <code>right</code> value.</td>\n</tr>\n</tbody></table>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Set the text alignment in the posts.</span></span><br><span class=\"line\"><span class=\"attr\">text_align:</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: start | end | left | right | center | justify | justify-all | match-parent</span></span><br><span class=\"line\"> <span class=\"attr\">desktop:</span> <span class=\"string\">justify</span></span><br><span class=\"line\"> <span class=\"attr\">mobile:</span> <span class=\"string\">justify</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Mobile-Devices-Adaptation\"><a href=\"#Mobile-Devices-Adaptation\" class=\"headerlink\" title=\"Mobile Devices Adaptation\"></a>Mobile Devices Adaptation</h3><p>If you want to reduce padding/margin indents on devices with narrow width, you can enable it by setting value <code>mobile_layout_economy</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">mobile_layout_economy:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Theme-Color\"><a href=\"#Theme-Color\" class=\"headerlink\" title=\"Theme Color\"></a>Theme Color</h3><p>By default NexT uses black-deep (<code>#222</code>) as the color of browser header panel (it's supported by Safari 15 and Android Chrome). You can configure it by editing values with Hex color in <code>theme_color</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">theme_color:</span></span><br><span class=\"line\"> <span class=\"attr\">light:</span> <span class=\"string\">"#222"</span></span><br><span class=\"line\"> <span class=\"attr\">dark:</span> <span class=\"string\">"#222"</span></span><br></pre></td></tr></table></figure>\n<h3 id=\"Body-Scrollbar\"><a href=\"#Body-Scrollbar\" class=\"headerlink\" title=\"Body Scrollbar\"></a>Body Scrollbar</h3><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Override browsers' default behavior.</span></span><br><span class=\"line\"><span class=\"attr\">body_scrollbar:</span></span><br><span class=\"line\"> <span class=\"comment\"># Place the scrollbar over the content.</span></span><br><span class=\"line\"> <span class=\"attr\">overlay:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"comment\"># Present the scrollbar even if the content is not overflowing.</span></span><br><span class=\"line\"> <span class=\"attr\">stable:</span> <span class=\"literal\">false</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Codeblock-Style\"><a href=\"#Codeblock-Style\" class=\"headerlink\" title=\"Codeblock Style\"></a>Codeblock Style</h3><div class=\"tabs\" id=\"codeblock\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#codeblock-1\"><code>theme</code></a></li><li class=\"tab\"><a href=\"#codeblock-2\"><code>copy_button</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"codeblock-1\"><p>NexT uses the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oaWdobGlnaHRqcy5vcmcv\">Highlight.js<i class=\"fa fa-external-link-alt\"></i></span> and <span class=\"exturl\" data-url=\"aHR0cHM6Ly9wcmlzbWpzLmNvbS8=\">Prism<i class=\"fa fa-external-link-alt\"></i></span> package to support code highlight.</p>\n<div class=\"note warning\"><p>Please read Hexo's documentation on <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3Mvc3ludGF4LWhpZ2hsaWdodA==\">Syntax Highlighting<i class=\"fa fa-external-link-alt\"></i></span> first, and set it up in <mark class=\"label info\">Hexo config file</mark>.</p>\n</div>\n\n<p>You can preview all available Code Highlight themes here: <a href=\"https://theme-next.js.org/highlight/\">NexT Highlight Theme Preview</a>. Change the value of <code>theme</code> and <code>prism</code> to choose the highlight style you like.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">codeblock:</span></span><br><span class=\"line\"> <span class=\"comment\"># Code Highlight theme</span></span><br><span class=\"line\"> <span class=\"comment\"># All available themes: https://theme-next.js.org/highlight/</span></span><br><span class=\"line\"> <span class=\"attr\">theme:</span></span><br><span class=\"line\"> <span class=\"attr\">light:</span> <span class=\"string\">default</span></span><br><span class=\"line\"> <span class=\"attr\">dark:</span> <span class=\"string\">stackoverflow-dark</span></span><br><span class=\"line\"> <span class=\"attr\">prism:</span></span><br><span class=\"line\"> <span class=\"attr\">light:</span> <span class=\"string\">prism</span></span><br><span class=\"line\"> <span class=\"attr\">dark:</span> <span class=\"string\">prism-dark</span></span><br></pre></td></tr></table></figure>\n\n<p>If Dark Mode is enabled, dark code highlighting themes will be available.</p></div><div class=\"tab-pane\" id=\"codeblock-2\"><p>NexT supports the copy-and-paste functionality of codeblock.</p>\n<div class=\"tabs\" id=\"codeblock1\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#codeblock1-1\"><code>enable</code></a></li><li class=\"tab\"><a href=\"#codeblock1-2\"><code>style</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"codeblock1-1\"><p>You can enable it by setting value <code>copy_button.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>. By default NexT shows copy result of the copy-and-paste functionality.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">codeblock:</span></span><br><span class=\"line\"> <span class=\"attr\">copy_button:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"codeblock1-2\"><p>With <code>style</code> option, you can change your copy button style.<br>There are three style available currently: <code>default</code> (Just leave it empty), <code>flat</code> and <code>mac</code>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">codeblock:</span></span><br><span class=\"line\"> <span class=\"attr\">copy_button:</span></span><br><span class=\"line\"> <span class=\"attr\">style:</span> <span class=\"string\">flat</span></span><br></pre></td></tr></table></figure></div></div></div></div></div></div>\n\n<h3 id=\"Back-To-Top\"><a href=\"#Back-To-Top\" class=\"headerlink\" title=\"Back To Top\"></a>Back To Top</h3><div class=\"tabs\" id=\"b2t\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#b2t-1\"><code>enable</code></a></li><li class=\"tab\"><a href=\"#b2t-2\"><code>sidebar</code></a></li><li class=\"tab\"><a href=\"#b2t-3\"><code>scrollpercent</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"b2t-1\"><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">back2top:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<p>Set the value <code>back2top.enable</code> to <code>true</code> to display <code>Back to top</code> button.</p></div><div class=\"tab-pane\" id=\"b2t-2\"><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">back2top:</span></span><br><span class=\"line\"> <span class=\"comment\"># Back to top in sidebar.</span></span><br><span class=\"line\"> <span class=\"attr\">sidebar:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<p>Set the value <code>back2top.sidebar</code> to <code>true</code> to put the button in sidebar.</p></div><div class=\"tab-pane\" id=\"b2t-3\"><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">back2top:</span></span><br><span class=\"line\"> <span class=\"comment\"># Scroll percent label in b2t button.</span></span><br><span class=\"line\"> <span class=\"attr\">scrollpercent:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<p>Set the value <code>back2top.scrollpercent</code> to <code>true</code> to display scroll percent label in <code>Back to top</code> button.</p></div></div></div>\n\n<h3 id=\"Reading-Progress\"><a href=\"#Reading-Progress\" class=\"headerlink\" title=\"Reading Progress\"></a>Reading Progress</h3><p>NexT supports the page scroll reading progress indicator.</p>\n<p>You can enable it by setting value <code>reading_progress.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">reading_progress:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: left | right</span></span><br><span class=\"line\"> <span class=\"attr\">start_at:</span> <span class=\"string\">left</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: top | bottom</span></span><br><span class=\"line\"> <span class=\"attr\">position:</span> <span class=\"string\">top</span></span><br><span class=\"line\"> <span class=\"attr\">reversed:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">color:</span> <span class=\"string\">"#37c6c0"</span></span><br><span class=\"line\"> <span class=\"attr\">height:</span> <span class=\"string\">2px</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Bookmark\"><a href=\"#Bookmark\" class=\"headerlink\" title=\"Bookmark\"></a>Bookmark</h3><p>Bookmark is a plugin that allow the users save their reading progress. Users could just click the bookmark icon (like 🔖) in left-top of the page to save the scroll position. And when they visit your blog in the next time, they can resume the last scroll position of each page automatically.</p>\n<p>You can enable it by setting value <code>bookmark.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">bookmark:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"comment\"># Customize the color of the bookmark.</span></span><br><span class=\"line\"> <span class=\"attr\">color:</span> <span class=\"string\">"#222"</span></span><br><span class=\"line\"> <span class=\"comment\"># If auto, save the reading progress when closing the page or clicking the bookmark-icon.</span></span><br><span class=\"line\"> <span class=\"comment\"># If manual, only save it by clicking the bookmark-icon.</span></span><br><span class=\"line\"> <span class=\"attr\">save:</span> <span class=\"string\">auto</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"GitHub-Banner\"><a href=\"#GitHub-Banner\" class=\"headerlink\" title=\"GitHub Banner\"></a>GitHub Banner</h3><p>NexT provides <code>Follow me on GitHub</code> banner in right-top corner.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Follow me on GitHub banner in right-top corner.</span></span><br><span class=\"line\"><span class=\"attr\">github_banner:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">permalink:</span> <span class=\"string\">https://github.com/yourname</span></span><br></pre></td></tr></table></figure>\n\n<p>You can set <code>enable</code> to <code>true</code> and add your own GitHub link.</p>\n<h3 id=\"Fonts-Customization\"><a href=\"#Fonts-Customization\" class=\"headerlink\" title=\"Fonts Customization\"></a>Fonts Customization</h3><p>NexT gives you 5 specific font settings, they are:</p>\n<ul>\n<li>Global Font: Font used in the whole site.</li>\n<li>Title Font: Font used by site title.</li>\n<li>Headlines Font: Font used by headings in articles (h1, h2, h3, h4, h5, h6).</li>\n<li>Article Font: Font used by articles.</li>\n<li>Code Font: Font used by code blocks in articles.</li>\n</ul>\n<p>Each font will be used as the first font of this class, NexT will fallback to internal font settings if they are unavailable.</p>\n<ul>\n<li>Non-code Font: Fallback to <code>"PingFang SC", "Microsoft YaHei", sans-serif</code></li>\n<li>Code Font: Fallback to <code>consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace</code></li>\n</ul>\n<p>Plus each section has a <code>external</code> attribute, this controls whether to use the font library CDN.<br>Use this can help you to use fonts installed in system and reduce unnecessary requests.</p>\n<div class=\"note info\"><p>To solve the unstable of <span class=\"exturl\" data-url=\"aHR0cHM6Ly9mb250cy5nb29nbGUuY29tLw==\">Google Fonts API<i class=\"fa fa-external-link-alt\"></i></span> in some countries, NexT supports custom URL of fonts library by setting <code>font.host</code>.<br>In addition, we noticed that for requests from certain websites, Google Fonts will return 403. At this time, it is necessary to use <code>font.host</code> to set up a mirror site.<br>Relevant issues: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L2lzc3Vlcy82MTM=\">#613<i class=\"fa fa-external-link-alt\"></i></span>, <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L2lzc3Vlcy8xMzMz\">#1333<i class=\"fa fa-external-link-alt\"></i></span></p>\n</div>\n\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">font:</span></span><br><span class=\"line\"> <span class=\"comment\"># Use custom fonts families or not.</span></span><br><span class=\"line\"> <span class=\"comment\"># Depended options: `external` and `family`.</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\"># Uri of fonts host, e.g. https://fonts.googleapis.com (Default).</span></span><br><span class=\"line\"> <span class=\"attr\">host:</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\"># Font options:</span></span><br><span class=\"line\"> <span class=\"comment\"># `external: true` will load this font family from `host` above.</span></span><br><span class=\"line\"> <span class=\"comment\"># `family: Times New Roman`. Without any quotes.</span></span><br><span class=\"line\"> <span class=\"comment\"># `size: x.x`. Use `em` as unit. Default: 1 (16px)</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\"># Global font settings used for all elements inside <body>.</span></span><br><span class=\"line\"> <span class=\"attr\">global:</span></span><br><span class=\"line\"> <span class=\"attr\">external:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">family:</span> <span class=\"string\">Monda</span></span><br><span class=\"line\"> <span class=\"attr\">size:</span> <span class=\"number\">1.125</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\"># Font settings for site title (.site-title).</span></span><br><span class=\"line\"> <span class=\"attr\">title:</span></span><br><span class=\"line\"> <span class=\"attr\">external:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">family:</span> <span class=\"string\">Lobster</span> <span class=\"string\">Two</span></span><br><span class=\"line\"> <span class=\"attr\">size:</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\"># Font settings for headlines (<h1> to <h6>).</span></span><br><span class=\"line\"> <span class=\"attr\">headings:</span></span><br><span class=\"line\"> <span class=\"attr\">external:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">family:</span> <span class=\"string\">Amita</span></span><br><span class=\"line\"> <span class=\"attr\">size:</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\"># Font settings for posts (.post-body).</span></span><br><span class=\"line\"> <span class=\"attr\">posts:</span></span><br><span class=\"line\"> <span class=\"attr\">external:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">family:</span> <span class=\"string\">Montserrat</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"comment\"># Font settings for <code> and code blocks.</span></span><br><span class=\"line\"> <span class=\"attr\">codes:</span></span><br><span class=\"line\"> <span class=\"attr\">external:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">family:</span> <span class=\"string\">PT</span> <span class=\"string\">Mono</span></span><br></pre></td></tr></table></figure>\n\n<p>And you can apply multiple font families for each option. This is especially useful for those who often writes both Chinese and English.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">font:</span></span><br><span class=\"line\"> <span class=\"string\">...</span></span><br><span class=\"line\"> <span class=\"attr\">title:</span></span><br><span class=\"line\"> <span class=\"attr\">external:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">family:</span> <span class=\"string\">Roboto</span> <span class=\"string\">Slab,</span> <span class=\"string\">Noto</span> <span class=\"string\">Serif</span> <span class=\"string\">SC</span></span><br><span class=\"line\"> <span class=\"attr\">size:</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note info\"><p>According to the <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cudzMub3JnL1RSLzIwMTgvUkVDLWNzcy1mb250cy0zLTIwMTgwOTIwLyNwcm9wZGVmLWZvbnQtZmFtaWx5\">CSS Fonts Module Level 3<i class=\"fa fa-external-link-alt\"></i></span> spec:</p>\n<blockquote>\n<p>Font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers.</p>\n</blockquote>\n<p>To avoid escaping mistakes, quote font family names if necessary.</p>\n</div>\n\n<p>If you still need more customization, following change will cover Fonts Customization function. Edit <code>source/_data/variables.styl</code> in <mark class=\"label info\">site root directory</mark> and add two variables:</p>\n<figure class=\"highlight styl\"><figcaption><span>hexo/source/_data/variables.styl</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// Title Font, set it to font family you want.</span></span><br><span class=\"line\"><span class=\"variable\">$font</span>-family-headings = Georgia, sans</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Set it to font family you want.</span></span><br><span class=\"line\"><span class=\"variable\">$font</span>-family-base = <span class=\"string\">"Microsoft YaHei"</span>, Verdana, sans-serif</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Code Font.</span></span><br><span class=\"line\"><span class=\"variable\">$code</span>-<span class=\"attribute\">font-family</span> = <span class=\"string\">"Input Mono"</span>, <span class=\"string\">"PT Mono"</span>, Consolas, Monaco, Menlo, monospace</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Font size of articles.</span></span><br><span class=\"line\"><span class=\"variable\">$font</span>-size-base = <span class=\"number\">16px</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// Font size of table and code.</span></span><br><span class=\"line\"><span class=\"variable\">$table</span>-<span class=\"attribute\">font-size</span> = <span class=\"number\">13px</span></span><br></pre></td></tr></table></figure>\n\n<p>Then uncomment <code>variable</code> under the <code>custom_file_path</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n"},{"title":"Post Settings","url":"/docs/theme-settings/posts.html","content":"<h3 id=\"Preamble-Text\"><a href=\"#Preamble-Text\" class=\"headerlink\" title=\"Preamble Text\"></a>Preamble Text</h3><p>It's a common need to show some part of article in home page and then give a link to full article. NexT gives two ways to control how article is shown in home page. In other words, you can use following ways to show summary of articles and a <strong>Read More</strong> button.</p>\n<div class=\"tabs\" id=\"preamble\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#preamble-1\"><mark class=\"label success\">Tag more</mark></a></li><li class=\"tab\"><a href=\"#preamble-2\"><code>excerpt_description</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"preamble-1\"><p>Use <code><!-- more --></code> in your article to break your article manually, which is recommended by Hexo.</p></div><div class=\"tab-pane\" id=\"preamble-2\"><p>If you have added <code>description</code> and set its value to your article summary in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvZnJvbnQtbWF0dGVy\">front-matter<i class=\"fa fa-external-link-alt\"></i></span>, NexT excerpts <code>description</code> as preamble text in homepage by default. Without <code>description</code>, the full contents would be the preamble text in homepage.</p>\n<p>You can disable it by setting value <code>excerpt_description</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">excerpt_description:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<div class=\"note info\"><p>It is recommended to use <code><!-- more --></code> (the first way) which can not only control what you want to show better, but also let Hexo's plugins use it easily.</p>\n</div>\n\n<h3 id=\"Post-Meta-Display\"><a href=\"#Post-Meta-Display\" class=\"headerlink\" title=\"Post Meta Display\"></a>Post Meta Display</h3><p>NexT supports post created date, post updated date and post categories display.</p>\n<div class=\"tabs\" id=\"postmeta\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#postmeta-1\"><code>item_text</code></a></li><li class=\"tab\"><a href=\"#postmeta-2\"><code>created_at</code></a></li><li class=\"tab\"><a href=\"#postmeta-3\"><code>updated_at</code></a></li><li class=\"tab\"><a href=\"#postmeta-4\"><code>categories</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"postmeta-1\"><p>By default NexT shows the description text of post meta. You can disable it by setting value <code>post_meta.item_text</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">post_meta:</span></span><br><span class=\"line\"> <span class=\"attr\">item_text:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"postmeta-2\"><p>By default NexT shows the post created date in post meta section and created time in popup. You can disable it by setting value <code>post_meta.created_at</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">post_meta:</span></span><br><span class=\"line\"> <span class=\"attr\">created_at:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"postmeta-3\"><div class=\"note warning\"><p>Make sure you set <code>use_date_for_updated</code> and <code>updated_option</code> in <mark class=\"label info\">Hexo config file</mark> correctly, otherwise this option will not take effect. See also <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvY29uZmlndXJhdGlvbiNEYXRlLVRpbWUtZm9ybWF0\">Date / Time format<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n</div>\n\n<div class=\"tabs\" id=\"postmeta1\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#postmeta1-1\"><code>enable</code></a></li><li class=\"tab\"><a href=\"#postmeta1-2\"><code>another_day</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"postmeta1-1\"><p>By default NexT shows the post updated date in post meta section and updated time in popup. You can disable it by setting value <code>post_meta.updated_at.enable</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">post_meta:</span></span><br><span class=\"line\"> <span class=\"attr\">updated_at:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"postmeta1-2\"><p>By default, if updated/edited date is the same as created date, edited time would be displayed in popup message. You can disable it by setting value <code>post_meta.updated_at.another_day</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.<br>In other words:</p>\n<ul>\n<li>If true, show updated date label only if <code>updated date</code> is different from <code>created date</code> (post edited in another day than was created).</li>\n<li>And if post was edited in same day as created, edited time will show in popup title under created time label.</li>\n<li>If false show anyway, but if post edited in same day, show only edited time.</li>\n</ul>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">post_meta:</span></span><br><span class=\"line\"> <span class=\"attr\">updated_at:</span></span><br><span class=\"line\"> <span class=\"attr\">another_day:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div></div></div></div><div class=\"tab-pane\" id=\"postmeta-4\"><p>By default NexT shows the post categories in post meta section. You can disable it by setting value <code>post_meta.categories</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">post_meta:</span></span><br><span class=\"line\"> <span class=\"attr\">categories:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Post-Wordcount\"><a href=\"#Post-Wordcount\" class=\"headerlink\" title=\"Post Wordcount\"></a>Post Wordcount</h3><div class=\"tabs\" id=\"wordcount\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#wordcount-1\">Installation →</a></li><li class=\"tab\"><a href=\"#wordcount-2\">Hexo Config →</a></li><li class=\"tab\"><a href=\"#wordcount-3\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"wordcount-1\"><p>Install <code>hexo-word-counter</code> by executing the following command in <mark class=\"label info\">site root dir</mark>:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install hexo-word-counter</span><br><span class=\"line\">$ hexo clean</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"wordcount-2\"><p>Activate this plugin in <mark class=\"label info\">Hexo config file</mark> by enabled any option:</p>\n<div class=\"tabs\" id=\"wordcount1\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#wordcount1-1\"><code>symbols</code></a></li><li class=\"tab\"><a href=\"#wordcount1-2\"><code>time</code></a></li><li class=\"tab\"><a href=\"#wordcount1-3\"><code>total_symbols</code></a></li><li class=\"tab\"><a href=\"#wordcount1-4\"><code>total_time</code></a></li><li class=\"tab\"><a href=\"#wordcount1-5\"><code>awl</code></a></li><li class=\"tab\"><a href=\"#wordcount1-6\"><code>wpm</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"wordcount1-1\"><p>By default NexT shows the number of post words in post meta section. You can disable it by setting value <code>symbols_count_time.symbols</code> to <code>false</code> in <mark class=\"label info\">Hexo config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">symbols_count_time:</span></span><br><span class=\"line\"> <span class=\"attr\">symbols:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"wordcount1-2\"><p>By default NexT shows the estimated reading time of post in post meta section. You can disable it by setting value <code>symbols_count_time.time</code> to <code>false</code> in <mark class=\"label info\">Hexo config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">symbols_count_time:</span></span><br><span class=\"line\"> <span class=\"attr\">time:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"wordcount1-3\"><p>By default NexT shows the number of all posts words in footer section. You can disable it by setting value <code>symbols_count_time.total_symbols</code> to <code>false</code> in <mark class=\"label info\">Hexo config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">symbols_count_time:</span></span><br><span class=\"line\"> <span class=\"attr\">total_symbols:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"wordcount1-4\"><p>By default NexT shows the estimated reading time of all posts in footer section. You can disable it by setting value <code>symbols_count_time.total_time</code> to <code>false</code> in <mark class=\"label info\">Hexo config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">symbols_count_time:</span></span><br><span class=\"line\"> <span class=\"attr\">total_time:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"wordcount1-5\"><p><code>awl</code> means the average Word Length (chars count in word). You can check this <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jaGFyYWN0ZXJjb3VudHRvb2wuY29tLw==\">here<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">symbols_count_time:</span></span><br><span class=\"line\"> <span class=\"attr\">awl:</span> <span class=\"number\">4</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"wordcount1-6\"><p><code>wpm</code> means the average words per minute. You can check this <span class=\"exturl\" data-url=\"aHR0cHM6Ly93b3JkY291bnRlci5uZXQv\">here<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">symbols_count_time:</span></span><br><span class=\"line\"> <span class=\"attr\">wpm:</span> <span class=\"number\">275</span></span><br></pre></td></tr></table></figure></div></div></div></div><div class=\"tab-pane\" id=\"wordcount-3\"><p>After the plugin enabled, you may adjust options in <code>symbols_count_time</code> section in <mark class=\"label primary\">NexT config file</mark>:</p>\n<div class=\"tabs\" id=\"wordcount2\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#wordcount2-1\"><code>separated_meta</code></a></li><li class=\"tab\"><a href=\"#wordcount2-2\"><code>item_text_total</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"wordcount2-1\"><p>By default NexT shows the words counts and estimated reading time in a separated line. You can add them into one line by setting value <code>symbols_count_time.separated_meta</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">symbols_count_time:</span></span><br><span class=\"line\"> <span class=\"attr\">separated_meta:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"wordcount2-2\"><p>By default NexT doesn't shows the text description of the words counts and estimated reading time in footer section. You can enable it by setting value <code>symbols_count_time.item_text_total</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">symbols_count_time:</span></span><br><span class=\"line\"> <span class=\"attr\">item_text_total:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div></div></div></div></div></div>\n\n<h3 id=\"Tag-Icon\"><a href=\"#Tag-Icon\" class=\"headerlink\" title=\"Tag Icon\"></a>Tag Icon</h3><p>By default, tags at the bottom of posts have a symbol # at there left side.</p>\n<p>If you prefer icon instead of symbol, edit <mark class=\"label primary\">NexT config file</mark> like following:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">tag_icon:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Donate-Settings\"><a href=\"#Donate-Settings\" class=\"headerlink\" title=\"Donate Settings\"></a>Donate Settings</h3><p>More and more online blogging platforms (e.g. WeChat public accounts, Jianshu, Zhihu) support donate (sponsor). To catch paid reading trends, we added donate feature, supports WeChat, Alipay and Bitcoin. What you need is:</p>\n<ol>\n<li><p>Get your WeChat / Alipay / Bitcoin receive money QRcode image(s) and put into <code>source/images</code> under <mark class=\"label primary\">theme directory</mark> or upload it(them) to an image cloud to get the absolute HTTP address(es).</p>\n</li>\n<li><p>Set needed values in <mark class=\"label primary\">NexT config file</mark>:</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Donate (Sponsor) settings</span></span><br><span class=\"line\"><span class=\"comment\"># Front-matter variable (nonsupport animation).</span></span><br><span class=\"line\"><span class=\"attr\">reward_settings:</span></span><br><span class=\"line\"> <span class=\"comment\"># If true, a donate button will be displayed in every article by default.</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">animation:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"attr\">reward:</span></span><br><span class=\"line\"> <span class=\"attr\">wechatpay:</span> <span class=\"string\">/images/wechatpay.png</span></span><br><span class=\"line\"> <span class=\"attr\">alipay:</span> <span class=\"string\">/images/alipay.png</span></span><br><span class=\"line\"> <span class=\"attr\">bitcoin:</span> <span class=\"string\">/images/bitcoin.png</span></span><br></pre></td></tr></table></figure></li>\n</ol>\n<p>You can also add QRcode of other platforms, e.g.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">paypal:</span> <span class=\"string\">/images/paypal.png</span></span><br><span class=\"line\"><span class=\"attr\">monero:</span> <span class=\"string\">/images/monero.png</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Follow-Me\"><a href=\"#Follow-Me\" class=\"headerlink\" title=\"Follow Me\"></a>Follow Me</h3><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Subscribe through Telegram Channel, Twitter, etc.</span></span><br><span class=\"line\"><span class=\"comment\"># Usage: `Key: permalink || icon` (Font Awesome)</span></span><br><span class=\"line\"><span class=\"attr\">follow_me:</span></span><br><span class=\"line\"> <span class=\"comment\">#Twitter: https://twitter.com/username || fab fa-twitter</span></span><br><span class=\"line\"> <span class=\"comment\">#Telegram: https://t.me/channel_name || fab fa-telegram</span></span><br><span class=\"line\"> <span class=\"comment\">#WeChat: /images/wechat_channel.jpg || fab fa-weixin</span></span><br><span class=\"line\"> <span class=\"comment\">#RSS: /atom.xml || fa fa-rss</span></span><br></pre></td></tr></table></figure>\n\n<p>You can add links of other platforms not listed here, for example:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">follow_me:</span></span><br><span class=\"line\"> <span class=\"attr\">Zhihu:</span> <span class=\"string\">https://www.zhihu.com/people/username</span> <span class=\"string\">||</span> <span class=\"string\">fab</span> <span class=\"string\">fa-zhihu</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Related-Popular-Posts\"><a href=\"#Related-Popular-Posts\" class=\"headerlink\" title=\"Related Popular Posts\"></a>Related Popular Posts</h3><p>NexT supports the related posts functionality according to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3NlcmdleXp3ZXpkaW4vaGV4by1yZWxhdGVkLXBvc3Rz\">hexo-related-posts<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<div class=\"tabs\" id=\"related_posts\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#related_posts-1\">Installation →</a></li><li class=\"tab\"><a href=\"#related_posts-2\"><code>enable</code></a></li><li class=\"tab\"><a href=\"#related_posts-3\"><code>icon</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"related_posts-1\"><p>Install <code>hexo-related-posts</code> by executing the following command in <mark class=\"label info\">site root dir</mark>:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install hexo-related-posts</span><br><span class=\"line\">$ hexo clean</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"related_posts-2\"><p>You can enable it by setting value <code>related_posts.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">related_posts:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"related_posts-3\"><p>By default NexT shows the <code>signs-post</code> icon <a class=\"btn\" href=\"#\"><i class=\"fa fa-signs-post\"></i></a> before <code>title</code>. The name of icon can be found in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9mb250YXdlc29tZS5jb20v\">Font Awesome<i class=\"fa fa-external-link-alt\"></i></span> site. You can configure it by editing value <code>icon</code> in <code>related_posts</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">related_posts:</span></span><br><span class=\"line\"> <span class=\"attr\">icon:</span> <span class=\"string\">fa</span> <span class=\"string\">fa-signs-post</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Post-Edit\"><a href=\"#Post-Edit\" class=\"headerlink\" title=\"Post Edit\"></a>Post Edit</h3><p>NexT supports the edit functionality of your posts. By enabling this feature, users can quickly browse and modify the blog's source code on GitHub.</p>\n<div class=\"tabs\" id=\"post_edit\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#post_edit-1\"><code>enable</code></a></li><li class=\"tab\"><a href=\"#post_edit-2\"><code>url</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"post_edit-1\"><p>You can enable it by setting value <code>post_edit.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">post_edit:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"post_edit-2\"><p>You should create a source repository of your post files. The <code>url</code> setting depends on the source project in github.</p>\n<ul>\n<li>For site repository<ul>\n<li>Link for view source: <code>url: https://github.com/.../tree/master/source/_posts/</code></li>\n<li>Link for fork & edit: <code>url: https://github.com/.../edit/master/source/_posts/</code></li>\n</ul>\n</li>\n<li>For post repository<ul>\n<li>Link for view source: <code>url: https://github.com/.../_posts/tree/master/</code></li>\n<li>Link for fork & edit: <code>url: https://github.com/.../_posts/edit/master/</code></li>\n</ul>\n</li>\n</ul>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">post_edit:</span></span><br><span class=\"line\"> <span class=\"attr\">url:</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Post-Navigation\"><a href=\"#Post-Navigation\" class=\"headerlink\" title=\"Post Navigation\"></a>Post Navigation</h3><p>Show previous post and next post in post footer if exists.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">post_navigation:</span> <span class=\"string\">left</span></span><br></pre></td></tr></table></figure>\n"},{"title":"Sidebar Setting","url":"/docs/theme-settings/sidebar.html","content":"<h3 id=\"Sidebar-Style\"><a href=\"#Sidebar-Style\" class=\"headerlink\" title=\"Sidebar Style\"></a>Sidebar Style</h3><p>By default sidebar only shows in posts (have a table of content), and is placed in left side. You can change it by editing values under <code>sidebar</code> setting in <mark class=\"label primary\">NexT config file</mark>.</p>\n<p>Sidebar has several options, including <code>position</code>, <code>width</code>, <code>display</code>, <code>padding</code> and <code>offset</code>.</p>\n<div class=\"tabs\" id=\"setting-sidebar\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#setting-sidebar-1\"><code>position</code></a></li><li class=\"tab\"><a href=\"#setting-sidebar-2\"><code>width</code></a></li><li class=\"tab\"><a href=\"#setting-sidebar-3\"><code>display</code></a></li><li class=\"tab\"><a href=\"#setting-sidebar-4\"><code>padding</code></a></li><li class=\"tab\"><a href=\"#setting-sidebar-5\"><code>offset</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"setting-sidebar-1\"><p>Set up sidebar position by changing the value of <code>sidebar.position</code>, which can be one of following:</p>\n<ul>\n<li><strong><code>left</code></strong> → Place at the left of the screen.</li>\n<li><code>right</code> → Place at the right of the screen.</li>\n</ul>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">sidebar:</span></span><br><span class=\"line\"> <span class=\"attr\">position:</span> <span class=\"string\">left</span></span><br><span class=\"line\"> <span class=\"comment\">#position: right</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"setting-sidebar-2\"><p>You can change sidebar width by specify <code>sidebar.width</code> setting in pixels, for example:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">sidebar:</span></span><br><span class=\"line\"> <span class=\"attr\">width:</span> <span class=\"number\">300</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note info\"><p>This option is commented out by default and values are:</p>\n<ul>\n<li>For Muse | Mist schemes: <code>320</code></li>\n<li>For Pisces | Gemini schemes: <code>240</code></li>\n</ul>\n</div></div><div class=\"tab-pane\" id=\"setting-sidebar-3\"><p>Set up conditions under which sidebar will show by editing <code>sidebar.display</code> value, which can be one of following:</p>\n<ul>\n<li><strong><code>post</code></strong> → Show sidebar only in posts which have index.</li>\n<li><code>always</code> → Show sidebar in all pages.</li>\n<li><code>hide</code> → Hide it in all pages (but can be opened by user manually).</li>\n<li><code>remove</code> → Remove sidebar totally.</li>\n</ul>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">sidebar:</span></span><br><span class=\"line\"> <span class=\"attr\">display:</span> <span class=\"string\">post</span></span><br><span class=\"line\"> <span class=\"comment\">#display: always</span></span><br><span class=\"line\"> <span class=\"comment\">#display: hide</span></span><br><span class=\"line\"> <span class=\"comment\">#display: remove</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"setting-sidebar-4\"><p>Set up sidebar padding in pixels by changing the value of <code>sidebar.padding</code>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">sidebar:</span></span><br><span class=\"line\"> <span class=\"attr\">padding:</span> <span class=\"number\">18</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"setting-sidebar-5\"><p>Set up sidebar offset from top menubar in pixels by changing the value of <code>sidebar.offset</code>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">sidebar:</span></span><br><span class=\"line\"> <span class=\"attr\">offset:</span> <span class=\"number\">12</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note danger\"><p>For now only Pisces / Gemini Schemes supports <code>offset</code> setting under <strong>6.0.x</strong> version or later.</p>\n</div></div></div></div>\n\n<h3 id=\"Configuring-Avatar\"><a href=\"#Configuring-Avatar\" class=\"headerlink\" title=\"Configuring Avatar\"></a>Configuring Avatar</h3><p>By default NexT doesn't show avatar in sidebar. You can configure it by editing values under <code>avatar</code> setting in <mark class=\"label primary\">NexT config file</mark>.</p>\n<div class=\"tabs\" id=\"avatar\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#avatar-1\"><code>url</code></a></li><li class=\"tab\"><a href=\"#avatar-2\"><code>rounded</code></a></li><li class=\"tab\"><a href=\"#avatar-3\"><code>rotated</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"avatar-1\"><p>For first test you can uncomment <code>/images/avatar.gif</code> value near the <code>avatar.url</code> setting to see default avatar:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">avatar:</span></span><br><span class=\"line\"> <span class=\"attr\">url:</span> <span class=\"string\">/images/avatar.gif</span></span><br></pre></td></tr></table></figure>\n\n<p>Then you need to specify your own avatar. It can be done one of the ways below:</p>\n<div class=\"tabs\" id=\"avatar1\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#avatar1-1\"><mark class=\"label success\">Hexo directory</mark></a></li><li class=\"tab\"><a href=\"#avatar1-2\">NexT directory</a></li><li class=\"tab\"><a href=\"#avatar1-3\">Absolute URL from Internet</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"avatar1-1\"><p>Put your avatar under <mark class=\"label info\">site directory</mark> <code>source/uploads/</code> (create directory if it doesn't exists).<br>And then change option to <code>url: /uploads/avatar.png</code>.</p></div><div class=\"tab-pane\" id=\"avatar1-2\"><p>Put your avatar under <mark class=\"label primary\">theme directory</mark> <code>source/images/</code>.<br>And then change option to <code>url: /images/avatar.png</code>.</p>\n<div class=\"note info\"><p>Current site uses avatar under <mark class=\"label primary\">theme directory</mark> from file located in <code>next/source/images/apple-touch-icon-next.png</code> with following config:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">avatar:</span></span><br><span class=\"line\"> <span class=\"attr\">url:</span> <span class=\"string\">/images/apple-touch-icon-next.png</span></span><br></pre></td></tr></table></figure>\n</div></div><div class=\"tab-pane\" id=\"avatar1-3\"><p>You can also specify any external URL with absolute path to image: <code>http(s)://example.com/avatar.png</code></p></div></div></div></div><div class=\"tab-pane\" id=\"avatar-2\"><p>Set up rounded of avatar by changing the value of <code>avatar.rounded</code>:</p>\n<ul>\n<li><code>true</code> → Avatar will be rounded.</li>\n<li><strong><code>false</code></strong> → Avatar will be squared.</li>\n</ul>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">avatar:</span></span><br><span class=\"line\"> <span class=\"attr\">rounded:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"avatar-3\"><p>Set up rotated of avatar by changing the value of <code>avatar.rotated</code>:</p>\n<ul>\n<li><code>true</code> → Avatar will be rotate under the mouse hovering.</li>\n<li><strong><code>false</code></strong> → Avatar will not rotate under the mouse hovering.</li>\n</ul>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">avatar:</span></span><br><span class=\"line\"> <span class=\"attr\">rotated:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Sidebar-Site-State\"><a href=\"#Sidebar-Site-State\" class=\"headerlink\" title=\"Sidebar Site State\"></a>Sidebar Site State</h3><p>By default NexT shows the categories and counts of Posts / Categories / Tags in sidebar. You can configure it by editing value <code>site_state</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">site_state:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Sidebar-Social-Links\"><a href=\"#Sidebar-Social-Links\" class=\"headerlink\" title=\"Sidebar Social Links\"></a>Sidebar Social Links</h3><div class=\"note default\"><p>Social Links have similar structure as <a href=\"/docs/theme-settings/#Configuring-Menu-Items\">Menu Items</a>, only target link there is difference: specified link must have full url path (permalink).</p>\n</div>\n\n<p>Edit the <code>social</code> section in <mark class=\"label primary\">NexT config file</mark> as following:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">social:</span></span><br><span class=\"line\"> <span class=\"attr\">GitHub:</span> <span class=\"string\">https://github.com/yourname</span> <span class=\"string\">||</span> <span class=\"string\">fab</span> <span class=\"string\">fa-github</span></span><br><span class=\"line\"> <span class=\"attr\">E-Mail:</span> <span class=\"string\">mailto:[email protected]</span> <span class=\"string\">||</span> <span class=\"string\">fa</span> <span class=\"string\">fa-envelope</span></span><br><span class=\"line\"> <span class=\"attr\">Weibo:</span> <span class=\"string\">https://weibo.com/yourname</span> <span class=\"string\">||</span> <span class=\"string\">fab</span> <span class=\"string\">fa-weibo</span></span><br><span class=\"line\"> <span class=\"attr\">Twitter:</span> <span class=\"string\">https://twitter.com/yourname</span> <span class=\"string\">||</span> <span class=\"string\">fab</span> <span class=\"string\">fa-twitter</span></span><br><span class=\"line\"> <span class=\"attr\">FB Page:</span> <span class=\"string\">https://www.facebook.com/yourname</span> <span class=\"string\">||</span> <span class=\"string\">fab</span> <span class=\"string\">fa-facebook</span></span><br><span class=\"line\"> <span class=\"attr\">StackOverflow:</span> <span class=\"string\">https://stackoverflow.com/yourname</span> <span class=\"string\">||</span> <span class=\"string\">fab</span> <span class=\"string\">fa-stack-overflow</span></span><br><span class=\"line\"> <span class=\"attr\">YouTube:</span> <span class=\"string\">https://youtube.com/yourname</span> <span class=\"string\">||</span> <span class=\"string\">fab</span> <span class=\"string\">fa-youtube</span></span><br><span class=\"line\"> <span class=\"attr\">Instagram:</span> <span class=\"string\">https://instagram.com/yourname</span> <span class=\"string\">||</span> <span class=\"string\">fab</span> <span class=\"string\">fa-instagram</span></span><br><span class=\"line\"> <span class=\"attr\">Skype:</span> <span class=\"string\">skype:yourname?call|chat</span> <span class=\"string\">||</span> <span class=\"string\">fab</span> <span class=\"string\">fa-skype</span></span><br></pre></td></tr></table></figure>\n\n<p>By default NexT shows the icons of social links in sidebar.</p>\n<div class=\"tabs\" id=\"social_icons\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#social_icons-1\"><code>enable</code></a></li><li class=\"tab\"><a href=\"#social_icons-2\"><code>icons_only</code></a></li><li class=\"tab\"><a href=\"#social_icons-3\"><code>transition</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"social_icons-1\"><p>You can configure it by editing value <code>enable</code> in <code>social_icons</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">social_icons:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"social_icons-2\"><p>Set the value <code>icons_only</code> to <code>true</code> to display social icons without description in <code>social_icons</code> section in <mark class=\"label primary\">NexT config file</mark> as following:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">social_icons:</span></span><br><span class=\"line\"> <span class=\"attr\">icons_only:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"social_icons-3\"><p>Set the value <code>transition</code> to <code>true</code> to display social icons with transition effects in <code>social_icons</code> section in <mark class=\"label primary\">NexT config file</mark> as following:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">social_icons:</span></span><br><span class=\"line\"> <span class=\"attr\">transition:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Sidebar-Blogrolls\"><a href=\"#Sidebar-Blogrolls\" class=\"headerlink\" title=\"Sidebar Blogrolls\"></a>Sidebar Blogrolls</h3><p>You can add blog rolls within sidebar in NexT.</p>\n<div class=\"tabs\" id=\"blogrolls\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#blogrolls-1\"><code>links_settings</code></a></li><li class=\"tab\"><a href=\"#blogrolls-2\"><code>links</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"blogrolls-1\"><p>By default NexT shows the <code>globe</code> icon <a class=\"btn\" href=\"#\"><i class=\"fa fa-globe\"></i></a> before <code>title</code>. The name of icon can be found in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9mb250YXdlc29tZS5jb20v\">Font Awesome<i class=\"fa fa-external-link-alt\"></i></span> site. You can configure it by editing value <code>icon</code> in <code>links_settings</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">links_settings:</span></span><br><span class=\"line\"> <span class=\"attr\">icon:</span> <span class=\"string\">fa</span> <span class=\"string\">fa-globe</span></span><br></pre></td></tr></table></figure>\n\n<p>By default all blogrolls are displayed in block. You can configure it to <code>inline</code> by editing value <code>layout</code> in <code>links_settings</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">links_settings:</span></span><br><span class=\"line\"> <span class=\"attr\">layout:</span> <span class=\"string\">block</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"blogrolls-2\"><p>Edit the <code>links</code> section in <mark class=\"label primary\">NexT config file</mark> and add your favorite links:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">links:</span></span><br><span class=\"line\"> <span class=\"attr\">Title1:</span> <span class=\"string\">https://example1.com/</span></span><br><span class=\"line\"> <span class=\"attr\">Title2:</span> <span class=\"string\">https://example2.com/</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Sidebar-TOC\"><a href=\"#Sidebar-TOC\" class=\"headerlink\" title=\"Sidebar TOC\"></a>Sidebar TOC</h3><div class=\"tabs\" id=\"toc\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#toc-1\"><code>enable</code></a></li><li class=\"tab\"><a href=\"#toc-2\"><code>number</code></a></li><li class=\"tab\"><a href=\"#toc-3\"><code>wrap</code></a></li><li class=\"tab\"><a href=\"#toc-4\"><code>expand_all</code></a></li><li class=\"tab\"><a href=\"#toc-5\"><code>max_depth</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"toc-1\"><p>By default NexT shows <code>Table Of Contents (TOC)</code> in the sidebar. You can disable it by setting <code>toc.enable</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">toc:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"toc-2\"><p>By default NexT adds list number to TOC automatically. You can disable it by setting <code>toc.number</code> to <code>false</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">toc:</span></span><br><span class=\"line\"> <span class=\"attr\">number:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"toc-3\"><p>If the post header width longer than sidebar width, you can wrap the header words in next lines by setting <code>toc.wrap</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">toc:</span></span><br><span class=\"line\"> <span class=\"attr\">wrap:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"toc-4\"><p>If you want all level of TOC in a post to be displayed, rather than the activated part of it, you can set <code>toc.expand_all</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">toc:</span></span><br><span class=\"line\"> <span class=\"attr\">expand_all:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"toc-5\"><p>By default maximum heading depth of generated toc is 6. You can set it by setting <code>toc.max_depth</code> to <code>another number</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">toc:</span></span><br><span class=\"line\"> <span class=\"attr\">max_depth:</span> <span class=\"number\">3</span></span><br></pre></td></tr></table></figure></div></div></div>\n"},{"title":"SEO","url":"/docs/theme-settings/seo.html","content":"<h3 id=\"SEO-Setting\"><a href=\"#SEO-Setting\" class=\"headerlink\" title=\"SEO Setting\"></a>SEO Setting</h3><p>Next provides useful options for better Search Engine Optimization (SEO).</p>\n<div class=\"note info\"><p>By default a canonical link tag is created in Hexo after you have set up your URL <code>url: http://example.com</code> in <mark class=\"label info\">Hexo config file</mark>. More detailed information can be found in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9zdXBwb3J0Lmdvb2dsZS5jb20vd2VibWFzdGVycy9hbnN3ZXIvMTM5MDY2\">Consolidate duplicate URLs<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n</div>\n\n<p>Set the value of <code>index_with_subtitle</code> in <mark class=\"label primary\">NexT config file</mark> to <code>true</code> to add <code>subtitle</code> information to index page.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">index_with_subtitle:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<p>You can set <code>subtitle</code> in <mark class=\"label info\">Hexo config file</mark>.</p>\n<h3 id=\"Webmaster-Tools\"><a href=\"#Webmaster-Tools\" class=\"headerlink\" title=\"Webmaster Tools\"></a>Webmaster Tools</h3><h4 id=\"Google-Webmaster-Tools\"><a href=\"#Google-Webmaster-Tools\" class=\"headerlink\" title=\"Google Webmaster Tools\"></a>Google Webmaster Tools</h4><p>Set the verification string of <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kZXZlbG9wZXJzLmdvb2dsZS5jb20vc2VhcmNo\">Google Webmaster Tools<i class=\"fa fa-external-link-alt\"></i></span> which is used in submitting sitemap.</p>\n<div class=\"tabs\" id=\"google-webmaster-tools\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#google-webmaster-tools-1\">Get Verification Code →</a></li><li class=\"tab\"><a href=\"#google-webmaster-tools-2\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"google-webmaster-tools-1\"><p>Login to Google Webmaster Tools and go to verification methods and choose <code>HTML Tag</code>, you will get some code:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">meta</span> <span class=\"attr\">name</span>=<span class=\"string\">"google-site-verification"</span> <span class=\"attr\">content</span>=<span class=\"string\">"XXXXXXXXXXXXXXXXXXXXXXX"</span>></span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"google-webmaster-tools-2\"><p>Copy <code>XXXXXXXXXXXXXXXXXXXXXXX</code> value of <code>content</code> key.<br>Edit <mark class=\"label primary\">NexT config file</mark> and add or change the value of <code>google_site_verification</code>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">google_site_verification:</span> <span class=\"string\">XXXXXXXXXXXXXXXXXXXXXXX</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h4 id=\"Bing-Webmaster-Tools\"><a href=\"#Bing-Webmaster-Tools\" class=\"headerlink\" title=\"Bing Webmaster Tools\"></a>Bing Webmaster Tools</h4><p>Set the verification string of <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cuYmluZy5jb20vd2VibWFzdGVycw==\">Bing Webmaster Tools<i class=\"fa fa-external-link-alt\"></i></span> which is used in submitting sitemap.</p>\n<div class=\"tabs\" id=\"bing-webmaster-tools\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#bing-webmaster-tools-1\">Get Verification Code →</a></li><li class=\"tab\"><a href=\"#bing-webmaster-tools-2\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"bing-webmaster-tools-1\"><p>Login to Bing Webmaster Tools and go to verification methods and choose <code>HTML Tag</code>, you will get some code:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">meta</span> <span class=\"attr\">name</span>=<span class=\"string\">"msvalidate.01"</span> <span class=\"attr\">content</span>=<span class=\"string\">"XXXXXXXXXXXXXXXXXXXXXXX"</span>></span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"bing-webmaster-tools-2\"><p>Copy <code>XXXXXXXXXXXXXXXXXXXXXXX</code> value of <code>content</code> key.<br>Edit <mark class=\"label primary\">NexT config file</mark> and add or change the value of <code>bing_site_verification</code>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">bing_site_verification:</span> <span class=\"string\">XXXXXXXXXXXXXXXXXXXXXXX</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h4 id=\"Yandex-Webmaster-Tools\"><a href=\"#Yandex-Webmaster-Tools\" class=\"headerlink\" title=\"Yandex Webmaster Tools\"></a>Yandex Webmaster Tools</h4><p>Set the verification string of <span class=\"exturl\" data-url=\"aHR0cHM6Ly93ZWJtYXN0ZXIueWFuZGV4LnJ1Lw==\">Yandex Webmaster Tools<i class=\"fa fa-external-link-alt\"></i></span> which is used in submitting sitemap.</p>\n<div class=\"tabs\" id=\"yandex-webmaster-tools\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#yandex-webmaster-tools-1\">Get Verification Code →</a></li><li class=\"tab\"><a href=\"#yandex-webmaster-tools-2\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"yandex-webmaster-tools-1\"><p>Login to Yandex Webmaster Tools and go to verification methods and choose <code>Meta Tag</code>, you will get some code:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">meta</span> <span class=\"attr\">name</span>=<span class=\"string\">"yandex-verification"</span> <span class=\"attr\">content</span>=<span class=\"string\">"XXXXXXXXXXXXXXXXXXXXXXX"</span>></span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"yandex-webmaster-tools-2\"><p>Copy <code>XXXXXXXXXXXXXXXXXXXXXXX</code> value of <code>content</code> key.<br>Edit <mark class=\"label primary\">NexT config file</mark> and add or change the value of <code>yandex_site_verification</code>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">yandex_site_verification:</span> <span class=\"string\">XXXXXXXXXXXXXXXXXXXXXXX</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h4 id=\"Baidu-Webmaster-Tools\"><a href=\"#Baidu-Webmaster-Tools\" class=\"headerlink\" title=\"Baidu Webmaster Tools\"></a>Baidu Webmaster Tools</h4><p>Set the verification string of <span class=\"exturl\" data-url=\"aHR0cHM6Ly96aXl1YW4uYmFpZHUuY29tL3NpdGUv\">Baidu Webmaster Tools<i class=\"fa fa-external-link-alt\"></i></span> which is used in submitting sitemap.</p>\n<div class=\"tabs\" id=\"baidu-webmaster-tools\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#baidu-webmaster-tools-1\">Get Verification Code →</a></li><li class=\"tab\"><a href=\"#baidu-webmaster-tools-2\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"baidu-webmaster-tools-1\"><p>Login to Baidu Webmaster Tools and go to verification methods and choose <code>HTML Tag</code>, you will get some code:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">meta</span> <span class=\"attr\">name</span>=<span class=\"string\">"baidu-site-verification"</span> <span class=\"attr\">content</span>=<span class=\"string\">"code-XXXXXXXXXX"</span>></span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"baidu-webmaster-tools-2\"><p>Copy <code>code-XXXXXXXXXX</code> value of <code>content</code> key.<br>Edit <mark class=\"label primary\">NexT config file</mark> and add or change the value of <code>baidu_site_verification</code>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">baidu_site_verification:</span> <span class=\"string\">code-XXXXXXXXXX</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<div class=\"note info\"><p>By default Baidu will cache and rewrite your site to provide a webpage snapshot for mobile users. You can disable this by setting the site type.</p>\n<p><img src=\"/images/baidu.png\" alt=\"Baidu Webmaster Tools\" loading=\"lazy\"></p>\n</div>\n"},{"title":"Comment Systems","url":"/docs/third-party-services/comments.html","content":"<h3 id=\"Overview\"><a href=\"#Overview\" class=\"headerlink\" title=\"Overview\"></a>Overview</h3><h4 id=\"Multiple-Comment-System-Support\"><a href=\"#Multiple-Comment-System-Support\" class=\"headerlink\" title=\"Multiple Comment System Support\"></a>Multiple Comment System Support</h4><p>NexT allows you to enable multiple commenting systems at the same time. You can modify the following configuration to adjust the style or behavior of multiple commenting systems.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Multiple Comment System Support</span></span><br><span class=\"line\"><span class=\"attr\">comments:</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: tabs | buttons</span></span><br><span class=\"line\"> <span class=\"attr\">style:</span> <span class=\"string\">tabs</span></span><br><span class=\"line\"> <span class=\"comment\"># Choose a comment system to be displayed by default</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: disqus | disqusjs | changyan | livere | gitalk | utterances | isso</span></span><br><span class=\"line\"> <span class=\"attr\">active:</span></span><br><span class=\"line\"> <span class=\"comment\"># Setting `true` means remembering the comment system selected by the visitor</span></span><br><span class=\"line\"> <span class=\"attr\">storage:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"comment\"># Lazyload all comment systems.</span></span><br><span class=\"line\"> <span class=\"attr\">lazyload:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"comment\"># Modify icons and texts for any style, here are some examples</span></span><br><span class=\"line\"> <span class=\"attr\">nav:</span></span><br><span class=\"line\"> <span class=\"comment\">#disqus:</span></span><br><span class=\"line\"> <span class=\"comment\"># text: Load Disqus</span></span><br><span class=\"line\"> <span class=\"comment\"># order: -1</span></span><br><span class=\"line\"> <span class=\"comment\">#gitalk:</span></span><br><span class=\"line\"> <span class=\"comment\"># order: -2</span></span><br></pre></td></tr></table></figure>\n\n<p>You can enable lazyload by setting value <code>comments.lazyload</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>. NexT uses IntersectionObserver to lazyload the comments, which is not supported by IE and most browsers released before 2017.</p>\n<iframe data-feature=\"intersectionobserver\" src=\"https://caniuse.bitsofco.de/embed/index.html?feat=intersectionobserver&periods=current,past_1,past_2,past_3,past_4,past_5&accessible-colours=false\" frameborder=\"0\" width=\"100%\" height=\"400px\"></iframe>\n\n<h4 id=\"How-to-Disable-Comments-on-Page\"><a href=\"#How-to-Disable-Comments-on-Page\" class=\"headerlink\" title=\"How to Disable Comments on Page\"></a>How to Disable Comments on Page</h4><p>When you enabled comment service like Disqus, all new page will have comment service automatically. If you want to disable it in one page, just add <code>comments</code> key to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvZnJvbnQtbWF0dGVy\">front-matter<i class=\"fa fa-external-link-alt\"></i></span> and set its value to <code>false</code>. Like following:</p>\n<figure class=\"highlight md\"><figcaption><span>your-post.md</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\">title: All tags</span><br><span class=\"line\">type: "tags"</span><br><span class=\"line\"><span class=\"section\">comments: false</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Rename-Comment-Count-Text\"><a href=\"#Rename-Comment-Count-Text\" class=\"headerlink\" title=\"Rename Comment Count Text\"></a>Rename Comment Count Text</h4><p>You can rename the post meta text of comment count using <code>languages.yml</code>: <a href=\"/docs/theme-settings/internationalization.html#Override-Default-Translations\">Override Default Translations</a>.</p>\n<h3 id=\"Disqus\"><a href=\"#Disqus\" class=\"headerlink\" title=\"Disqus\"></a>Disqus</h3><p>Disqus is a global comment system that improves discussion on websites and connects conversations across the web.</p>\n<ol>\n<li><p>Create an account and log into <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kaXNxdXMuY29tLw==\">Disqus<i class=\"fa fa-external-link-alt\"></i></span>. Once logged in, click the <code>GET STARTED</code> button on the homepage, then select <code>I want to install Disqus on my site</code> option and you will see the <code>Create a new site</code> interface.</p>\n</li>\n<li><p>Enter your <code>Website Name</code>, which will serve as your Disqus shortname, and select a Category from the drop-down menu. Then click <code>Create Site</code> button.</p>\n</li>\n<li><p>Choose <code>I don't see my platform listed, install manually with Universal Code</code>, configure Disqus for your site, and click <code>Complete Setup</code> button.</p>\n</li>\n<li><p>Set the value <code>enable</code> to <code>true</code>, add the obtained Disqus shortname (<code>shortname</code>), and edit other configurations in <code>disqus</code> section in the <mark class=\"label primary\">NexT config file</mark> as following:</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">disqus:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">shortname:</span> <span class=\"string\">your-short-disqus-name</span></span><br><span class=\"line\"> <span class=\"attr\">count:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></li>\n</ol>\n<h3 id=\"DisqusJS\"><a href=\"#DisqusJS\" class=\"headerlink\" title=\"DisqusJS\"></a>DisqusJS</h3><p>Render Disqus comment component using Disqus API.</p>\n<ol>\n<li><p>Get your Disqus API Key from <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kaXNxdXMuY29tL2FwaS9hcHBsaWNhdGlvbnMv\">Disqus API Application<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n</li>\n<li><p>Go to the settings page of your Disqus Application, enter your domain in Settings → Domains.</p>\n</li>\n<li><p>Get your Disqus Shortname from <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kaXNxdXMuY29tL2FkbWluL3NldHRpbmdzL2dlbmVyYWwv\">General Settings - Disqus Admin<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n</li>\n<li><p>Set the value <code>enable</code> to <code>true</code>, add the obtained Disqus API Key (<code>apikey</code>) and Shortname (<code>shortname</code>), and edit other configurations in <code>disqusjs</code> section in the <mark class=\"label primary\">NexT config file</mark> as following:</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># DisqusJS</span></span><br><span class=\"line\"><span class=\"comment\"># Demo: https://disqusjs.skk.moe</span></span><br><span class=\"line\"><span class=\"attr\">disqusjs:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"comment\"># API Endpoint of Disqus API (https://disqus.com/api/docs/)</span></span><br><span class=\"line\"> <span class=\"comment\"># leave api empty if you are able to connect to Disqus API</span></span><br><span class=\"line\"> <span class=\"comment\"># otherwise you need a reverse proxy for Disqus API</span></span><br><span class=\"line\"> <span class=\"comment\"># For example:</span></span><br><span class=\"line\"> <span class=\"comment\"># api: https://disqus.skk.moe/disqus/</span></span><br><span class=\"line\"> <span class=\"attr\">api:</span></span><br><span class=\"line\"> <span class=\"attr\">apikey:</span> <span class=\"comment\"># register new application from https://disqus.com/api/applications/</span></span><br><span class=\"line\"> <span class=\"attr\">shortname:</span> <span class=\"comment\"># See: https://disqus.com/admin/settings/general/</span></span><br></pre></td></tr></table></figure></li>\n</ol>\n<h3 id=\"Changyan-China\"><a href=\"#Changyan-China\" class=\"headerlink\" title=\"Changyan (China)\"></a>Changyan (China)</h3><p>Changyan is the industry's leading social commenting system, supporting both PC and mobile access methods, providing a new way of commenting on websites. Changyan has a variety of common account login, triple filtering mechanism, real-time data statistics, fast data export, comprehensive support for mobile and other leading functions. It fully satisfies the needs of major websites for user login, comment, sharing, and review.</p>\n<ol>\n<li><p>Create an account or log into <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jaGFuZ3lhbi5rdWFpemhhbi5jb20v\">Changyan<i class=\"fa fa-external-link-alt\"></i></span>, then add your site to get APP ID and APP KEY.</p>\n</li>\n<li><p>Set the value <code>enable</code> to <code>true</code>, and add the obtained APP ID (<code>appid</code>) and APP KEY (<code>appkey</code>) to the <code>changyan</code> section in the <mark class=\"label primary\">NexT config file</mark> as following:</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># changyan</span></span><br><span class=\"line\"><span class=\"attr\">changyan:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">appid:</span></span><br><span class=\"line\"> <span class=\"attr\">appkey:</span></span><br><span class=\"line\"> <span class=\"attr\">count:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></li>\n</ol>\n<p>Note: after you comment, it will take some time for you to see the increase in the number of comments.</p>\n<h3 id=\"LiveRe\"><a href=\"#LiveRe\" class=\"headerlink\" title=\"LiveRe\"></a>LiveRe</h3><p>LiveRe is a content platform based on social networking site reviews to help users communicate freely.</p>\n<ol>\n<li><p>Create an account or log into <span class=\"exturl\" data-url=\"aHR0cHM6Ly9saXZlcmUuY29tLw==\">LiveRe<i class=\"fa fa-external-link-alt\"></i></span>, click on the <code>installation</code> button and select the free city version, then click on the <code>install now</code> button.</p>\n</li>\n<li><p>Copy the <code>data-uid</code> field in the installation code to get your LiveRe UID.</p>\n</li>\n<li><p>Add the obtained LiveRe UID to the <code>livere_uid</code> section in the <mark class=\"label primary\">NexT config file</mark> as following:</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Support for LiveRe comments system.</span></span><br><span class=\"line\"><span class=\"comment\"># You can get your uid from https://livere.com/insight/myCode (General web site)</span></span><br><span class=\"line\"><span class=\"attr\">livere_uid:</span> <span class=\"string\">your_uid</span></span><br></pre></td></tr></table></figure></li>\n</ol>\n<h3 id=\"Gitalk\"><a href=\"#Gitalk\" class=\"headerlink\" title=\"Gitalk\"></a>Gitalk</h3><p>Gitalk is a modern comment component based on Github Issue and Preact.</p>\n<ol>\n<li><p>Click here to sign up for a <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3NldHRpbmdzL2FwcGxpY2F0aW9ucy9uZXc=\">new OAuth Application<i class=\"fa fa-external-link-alt\"></i></span>. Other content can be filled in at will, but be sure to fill in the correct callback URL (usually the domain name corresponding to the comment page). Then you will get a Client ID and a Client secret.</p>\n</li>\n<li><p>Create a repository you want to store Gitalk comments in your GitHub.</p>\n</li>\n<li><p>Set the value <code>enable</code> to <code>true</code>, add Client ID (<code>client_id</code>) and Client secret (<code>client_secret</code>) in step 1, add your Github username (<code>github_id</code> and <code>admin_user</code>) and the created repository name (<code>repo</code>) in step 2, and edit other configurations in <code>gitalk</code> section in the <mark class=\"label primary\">NexT config file</mark> as following:</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Gitalk</span></span><br><span class=\"line\"><span class=\"comment\"># For more information: https://gitalk.github.io</span></span><br><span class=\"line\"><span class=\"attr\">gitalk:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">github_id:</span> <span class=\"comment\"># GitHub repo owner</span></span><br><span class=\"line\"> <span class=\"attr\">repo:</span> <span class=\"comment\"># Repository name to store issues</span></span><br><span class=\"line\"> <span class=\"attr\">client_id:</span> <span class=\"comment\"># GitHub Application Client ID</span></span><br><span class=\"line\"> <span class=\"attr\">client_secret:</span> <span class=\"comment\"># GitHub Application Client Secret</span></span><br><span class=\"line\"> <span class=\"attr\">admin_user:</span> <span class=\"comment\"># GitHub repo owner and collaborators, only these guys can initialize gitHub issues</span></span><br><span class=\"line\"> <span class=\"attr\">distraction_free_mode:</span> <span class=\"literal\">true</span> <span class=\"comment\"># Facebook-like distraction free mode</span></span><br><span class=\"line\"> <span class=\"comment\"># When the official proxy is not available, you can change it to your own proxy address</span></span><br><span class=\"line\"> <span class=\"attr\">proxy:</span> <span class=\"string\">https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token</span> <span class=\"comment\"># This is official proxy address</span></span><br><span class=\"line\"> <span class=\"comment\"># Gitalk's display language depends on user's browser or system environment</span></span><br><span class=\"line\"> <span class=\"comment\"># If you want everyone visiting your site to see a uniform language, you can set a force language value</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: en | es-ES | fr | ru | zh-CN | zh-TW</span></span><br><span class=\"line\"> <span class=\"attr\">language:</span></span><br></pre></td></tr></table></figure></li>\n</ol>\n<div class=\"note warning\"><p>Gitalk relies on the md5 value of the page path for tagging, the comments will not be loaded correctly if a page's permalink is changed.</p>\n</div>\n\n<h3 id=\"Utterances\"><a href=\"#Utterances\" class=\"headerlink\" title=\"Utterances\"></a>Utterances</h3><p>A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Utterances</span></span><br><span class=\"line\"><span class=\"comment\"># For more information: https://utteranc.es</span></span><br><span class=\"line\"><span class=\"attr\">utterances:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">repo:</span> <span class=\"string\">user-name/repo-name</span> <span class=\"comment\"># Github repository owner and name</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: pathname | url | title | og:title</span></span><br><span class=\"line\"> <span class=\"attr\">issue_term:</span> <span class=\"string\">pathname</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light</span></span><br><span class=\"line\"> <span class=\"attr\">theme:</span> <span class=\"string\">github-light</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Isso\"><a href=\"#Isso\" class=\"headerlink\" title=\"Isso\"></a>Isso</h3><p>Isso – <em>Ich schrei sonst</em> – is a lightweight commenting server written in Python and JavaScript. It aims to be a drop-in replacement for Disqus.</p>\n<ol>\n<li><p>You need to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9pc3NvLWNvbW1lbnRzLmRlL2RvY3MvcmVmZXJlbmNlL2luc3RhbGxhdGlvbi8=\">install and configure Isso<i class=\"fa fa-external-link-alt\"></i></span> on your server first.</p>\n</li>\n<li><p>Set the value <code>isso</code> in the <mark class=\"label primary\">NexT config file</mark> as the value <code>data-isso</code> in Isso script. An exemplary script tag is given in the <code>Integration</code> section of the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9pc3NvLWNvbW1lbnRzLmRlL2RvY3MvZ3VpZGVzL3F1aWNrc3RhcnQvI2ludGVncmF0aW9u\">Isso quickstart document<i class=\"fa fa-external-link-alt\"></i></span>, you need to modify it according to the URL of your server.</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Isso</span></span><br><span class=\"line\"><span class=\"comment\"># For more information: https://isso-comments.de</span></span><br><span class=\"line\"><span class=\"attr\">isso:</span> <span class=\"comment\"># <data_isso></span></span><br></pre></td></tr></table></figure></li>\n</ol>\n"},{"title":"Chat Services","url":"/docs/third-party-services/chat-services.html","content":"<h3 id=\"Chatra\"><a href=\"#Chatra\" class=\"headerlink\" title=\"Chatra\"></a>Chatra</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9jaGF0cmEuY29tLw==\">Chatra<i class=\"fa fa-external-link-alt\"></i></span> is a live chat messenger app for your website.</p>\n<div class=\"tabs\" id=\"chatra\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#chatra-1\">Enable Chatra →</a></li><li class=\"tab\"><a href=\"#chatra-2\">Activate sidebar button</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"chatra-1\"><p>Visit <span class=\"exturl\" data-url=\"aHR0cHM6Ly9hcHAuY2hhdHJhLmlvL3NldHRpbmdzL2dlbmVyYWw=\">Dashboard<i class=\"fa fa-external-link-alt\"></i></span> to get your ChatraID.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Chatra Support</span></span><br><span class=\"line\"><span class=\"attr\">chatra:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">async:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">id:</span> <span class=\"string\"><ChatraID></span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"chatra-2\"><p>After Chatra enabled, you can set <code>chat.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># A button to open designated chat widget in sidebar.</span></span><br><span class=\"line\"><span class=\"comment\"># Firstly, you need enable the chat service you want to activate its sidebar button.</span></span><br><span class=\"line\"><span class=\"attr\">chat:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">icon:</span> <span class=\"string\">fa</span> <span class=\"string\">fa-comment</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Tidio\"><a href=\"#Tidio\" class=\"headerlink\" title=\"Tidio\"></a>Tidio</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cudGlkaW8uY29tLw==\">Tidio<i class=\"fa fa-external-link-alt\"></i></span> is a live chat messenger app for your website.</p>\n<div class=\"tabs\" id=\"tidio\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#tidio-1\">Enable Tidio →</a></li><li class=\"tab\"><a href=\"#tidio-2\">Activate sidebar button</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"tidio-1\"><p>Visit <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cudGlkaW8uY29tL3BhbmVsL2Rhc2hib2FyZA==\">Dashboard<i class=\"fa fa-external-link-alt\"></i></span> to get your Public Key.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Tidio Support</span></span><br><span class=\"line\"><span class=\"attr\">tidio:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">key:</span> <span class=\"string\"><Publick</span> <span class=\"string\">Key></span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"tidio-2\"><p>After Tidio enabled, you can set <code>chat.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># A button to open designated chat widget in sidebar.</span></span><br><span class=\"line\"><span class=\"comment\"># Firstly, you need enable the chat service you want to activate its sidebar button.</span></span><br><span class=\"line\"><span class=\"attr\">chat:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">icon:</span> <span class=\"string\">fa</span> <span class=\"string\">fa-comment</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Gitter\"><a href=\"#Gitter\" class=\"headerlink\" title=\"Gitter\"></a>Gitter</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXR0ZXIuaW0v\">Gitter<i class=\"fa fa-external-link-alt\"></i></span> is a chat and networking platform that helps to manage, grow and connect communities through messaging, content and discovery.</p>\n<div class=\"tabs\" id=\"gitter\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#gitter-1\">Enable Gitter →</a></li><li class=\"tab\"><a href=\"#gitter-2\">Activate sidebar button</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"gitter-1\"><p>You need to create a community, then create a webapp room under that community.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Gitter Support</span></span><br><span class=\"line\"><span class=\"attr\">gitter:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">room:</span> <span class=\"string\"><Community>/<Room</span> <span class=\"string\">Name></span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"gitter-2\"><p>After Gitter enabled, you can set <code>chat.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># A button to open designated chat widget in sidebar.</span></span><br><span class=\"line\"><span class=\"comment\"># Firstly, you need enable the chat service you want to activate its sidebar button.</span></span><br><span class=\"line\"><span class=\"attr\">chat:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">icon:</span> <span class=\"string\">fa</span> <span class=\"string\">fa-comment</span></span><br></pre></td></tr></table></figure></div></div></div>\n"},{"title":"External Libraries","url":"/docs/third-party-services/external-libraries.html","content":"<h3 id=\"PJAX\"><a href=\"#PJAX\" class=\"headerlink\" title=\"PJAX\"></a>PJAX</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL01vT3gvcGpheA==\">Pjax<i class=\"fa fa-external-link-alt\"></i></span> is a standalone JavaScript module that uses AJAX (XmlHttpRequest) and <code>pushState()</code> to deliver a fast browsing experience.</p>\n<p>It allows you to completely transform the user experience of standard websites (server-side generated or static ones) to make users feel like they are browsing an app, especially for those with low bandwidth connections.</p>\n<div class=\"note warning\"><p>Please use the absolute path of the image or <span class=\"exturl\" data-url=\"aHR0cHM6Ly9oZXhvLmlvL2RvY3MvdGFnLXBsdWdpbnMjSW5jbHVkZS1Bc3NldHM=\">Hexo asset_img tag<i class=\"fa fa-external-link-alt\"></i></span> in your posts, otherwise the images may fail to load during Pjax refresh.</p>\n</div>\n\n<p>You can enable it by setting value <code>pjax</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Easily enable fast Ajax navigation on your website.</span></span><br><span class=\"line\"><span class=\"comment\"># For more information: https://github.com/next-theme/pjax</span></span><br><span class=\"line\"><span class=\"attr\">pjax:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Fancybox\"><a href=\"#Fancybox\" class=\"headerlink\" title=\"Fancybox\"></a>Fancybox</h3><p>NexT supports the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9mYW5jeWFwcHMuY29tL2ZhbmN5Ym94Lw==\">fancybox<i class=\"fa fa-external-link-alt\"></i></span> plugin, which is a jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.</p>\n<p>You can enable it by setting value <code>fancybox</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">fancybox:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Medium-Zoom\"><a href=\"#Medium-Zoom\" class=\"headerlink\" title=\"Medium Zoom\"></a>Medium Zoom</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2ZyYW5jb2lzY2hhbGlmb3VyL21lZGl1bS16b29t\">Medium Zoom<i class=\"fa fa-external-link-alt\"></i></span> is a JavaScript library for zooming images like Medium.</p>\n<p>You can enable it by setting value <code>mediumzoom</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># A JavaScript library for zooming images like Medium.</span></span><br><span class=\"line\"><span class=\"attr\">mediumzoom:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note warning\"><p>Do not enable both <code>fancybox</code> and <code>mediumzoom</code>.</p>\n</div>\n\n<h3 id=\"Lazyload\"><a href=\"#Lazyload\" class=\"headerlink\" title=\"Lazyload\"></a>Lazyload</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL0Fwb29ydlNheGVuYS9sb3phZC5qcw==\">Lozad.js<i class=\"fa fa-external-link-alt\"></i></span> is a lazy loader plugin in modern vanilla JavaScript. It delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.</p>\n<p>You can enable it by setting value <code>lazyload</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Vanilla JavaScript plugin for lazyloading images.</span></span><br><span class=\"line\"><span class=\"attr\">lazyload:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<p>Then run the following command in <mark class=\"label info\">site root dir</mark> to ensure that <code>lazyload</code> can be enabled or disabled correctly:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo clean</span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Pangu-Autospace\"><a href=\"#Pangu-Autospace\" class=\"headerlink\" title=\"Pangu Autospace\"></a>Pangu Autospace</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3ZpbnRhL3Bhbmd1Lmpz\">pangu.js<i class=\"fa fa-external-link-alt\"></i></span> will automatically insert a blank space between all the Chinese characters and the hexagonal English numeric symbols on the page.</p>\n<p>You can enable it by setting value <code>pangu</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Pangu Support</span></span><br><span class=\"line\"><span class=\"attr\">pangu:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Quicklink\"><a href=\"#Quicklink\" class=\"headerlink\" title=\"Quicklink\"></a>Quicklink</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL0dvb2dsZUNocm9tZUxhYnMvcXVpY2tsaW5r\">Quicklink<i class=\"fa fa-external-link-alt\"></i></span> is a JavaScript plugin that faster subsequent page-loads by prefetching in-viewport links during idle time. Chrome, Firefox, Edge are supported without polyfills.</p>\n<p>You can enable it by setting value <code>quicklink.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"string\">...</span></span><br><span class=\"line\"><span class=\"attr\">quicklink:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">home:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">archive:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">delay:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">timeout:</span> <span class=\"number\">3000</span></span><br><span class=\"line\"> <span class=\"attr\">priority:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"><span class=\"string\">...</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Animation-Effect\"><a href=\"#Animation-Effect\" class=\"headerlink\" title=\"Animation Effect\"></a>Animation Effect</h3><p>NexT enables animation effect by default which is supported by Anime.js and Animate.css, so it will wait for JavaScript loaded to show content.<br>If you need speed you can set the value of <code>motion.enable</code> to <code>false</code> to disable it.</p>\n<p>Edit <mark class=\"label primary\">NexT config file</mark> and set the needed values under the <code>motion</code> to fit your demand. You can preview all Transition variants here: <a href=\"https://theme-next.js.org/animate/\">NexT Animation Effect Preview</a>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Use Animate.css to animate everything.</span></span><br><span class=\"line\"><span class=\"comment\"># For more information: https://animate.style</span></span><br><span class=\"line\"><span class=\"attr\">motion:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">async:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">transition:</span></span><br><span class=\"line\"> <span class=\"comment\"># All available Transition variants: https://theme-next.js.org/animate/</span></span><br><span class=\"line\"> <span class=\"attr\">post_block:</span> <span class=\"string\">fadeIn</span></span><br><span class=\"line\"> <span class=\"attr\">post_header:</span> <span class=\"string\">fadeInDown</span></span><br><span class=\"line\"> <span class=\"attr\">post_body:</span> <span class=\"string\">fadeInDown</span></span><br><span class=\"line\"> <span class=\"attr\">coll_header:</span> <span class=\"string\">fadeInLeft</span></span><br><span class=\"line\"> <span class=\"comment\"># Only for Pisces | Gemini.</span></span><br><span class=\"line\"> <span class=\"attr\">sidebar:</span> <span class=\"string\">fadeInUp</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Progress-Bar\"><a href=\"#Progress-Bar\" class=\"headerlink\" title=\"Progress Bar\"></a>Progress Bar</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL0NvZGVCeVphY2gvcGFjZQ==\">Pace<i class=\"fa fa-external-link-alt\"></i></span> will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress.</p>\n<div class=\"tabs\" id=\"pace\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#pace-1\"><code>pace</code></a></li><li class=\"tab\"><a href=\"#pace-2\"><code>color</code></a></li><li class=\"tab\"><a href=\"#pace-3\"><code>theme</code></a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"pace-1\"><p>You can enable it by setting value <code>pace.enable</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">pace:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"pace-2\"><p>You can change the color of progress bar by setting value <code>pace.color</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">pace:</span></span><br><span class=\"line\"> <span class=\"attr\">color:</span> <span class=\"string\">orange</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"pace-3\"><p>Pace includes a bunch of <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jb2RlYnl6YWNoLmdpdGh1Yi5pby9wYWNlLw==\">themes<i class=\"fa fa-external-link-alt\"></i></span> to get you started. By default NexT uses <code>minimal</code> theme (pace-theme-minimal). You can configure it by editing values in <code>pace.theme</code> section in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">pace:</span></span><br><span class=\"line\"> <span class=\"attr\">theme:</span> <span class=\"string\">minimal</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Canvas-Ribbon\"><a href=\"#Canvas-Ribbon\" class=\"headerlink\" title=\"Canvas Ribbon\"></a>Canvas Ribbon</h3><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2h1c3RjYy9yaWJib24uanM=\">canvas-ribbon.js<i class=\"fa fa-external-link-alt\"></i></span> is a ribbon background of website draw on canvas.</p>\n<p>You can enable it by setting value <code>canvas_ribbon</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>. You can also configure the ribbon setting by editing values in <code>canvas_ribbon</code> section:</p>\n<ul>\n<li>size: The width of the ribbon.</li>\n<li>alpha: The transparency of the ribbon.</li>\n<li>zIndex: The display level of the ribbon.</li>\n</ul>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">canvas_ribbon:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">size:</span> <span class=\"number\">300</span></span><br><span class=\"line\"> <span class=\"attr\">alpha:</span> <span class=\"number\">0.6</span></span><br><span class=\"line\"> <span class=\"attr\">zIndex:</span> <span class=\"number\">-1</span></span><br></pre></td></tr></table></figure>\n"},{"title":"Third-party Plugins","url":"/docs/third-party-services/index.html","content":"<p>Static website is limited in some functions, so we need third-party services to extend our site.<br>In any time you can extend needed functions by using third-party services supported by NexT.</p>\n<h3 id=\"Adding-Plugins\"><a href=\"#Adding-Plugins\" class=\"headerlink\" title=\"Adding Plugins\"></a>Adding Plugins</h3><p>Plugins extend and expand the functionality of NexT. There are two types of libraries: internal scripts and third-party plugins. The internal scripts are loaded from your site by default, they are required by the basic functions of NexT. Third-party plugins provide a large number of optional features. They are loaded from jsDelivr CDN by default, because it is fast in everywhere.</p>\n<p>Configuring these plugins is very easy. For example, if you want to use <code>pjax</code> in your site, just set <code>pjax</code> to <code>true</code> in <mark class=\"label primary\">NexT config file</mark>:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Easily enable fast Ajax navigation on your website.</span></span><br><span class=\"line\"><span class=\"comment\"># For more information: https://github.com/next-theme/pjax</span></span><br><span class=\"line\"><span class=\"attr\">pjax:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<p>If you want to specify the CDN provider for any plugins, you need to set / update the CDN URL. See <a href=\"/docs/advanced-settings/vendors.html\">Advanced Settings</a> for more information.</p>\n<p>Detailed documentation about these plugins is listed below.</p>\n<h3 id=\"Math-Equations\"><a href=\"#Math-Equations\" class=\"headerlink\" title=\"Math Equations\"></a>Math Equations</h3><ul>\n<li><a href=\"/docs/third-party-services/math-equations.html\">Math Equations</a></li>\n</ul>\n<h3 id=\"Comment-Systems\"><a href=\"#Comment-Systems\" class=\"headerlink\" title=\"Comment Systems\"></a>Comment Systems</h3><ul>\n<li><a href=\"/docs/third-party-services/comments.html#Overview\">Overview</a></li>\n<li><a href=\"/docs/third-party-services/comments.html#Disqus\">Disqus</a></li>\n<li><a href=\"/docs/third-party-services/comments.html#DisqusJS\">DisqusJS</a></li>\n<li><a href=\"/docs/third-party-services/comments.html#Changyan\">Changyan (China)</a></li>\n<li><a href=\"/docs/third-party-services/comments.html#LiveRe\">LiveRe</a></li>\n<li><a href=\"/docs/third-party-services/comments.html#Gitalk\">Gitalk</a></li>\n<li><a href=\"/docs/third-party-services/comments.html#Utterances\">Utterances</a></li>\n<li><a href=\"/docs/third-party-services/comments.html#Isso\">Isso</a></li>\n</ul>\n<h3 id=\"Statistics-and-Analytics\"><a href=\"#Statistics-and-Analytics\" class=\"headerlink\" title=\"Statistics and Analytics\"></a>Statistics and Analytics</h3><h4 id=\"Analytics\"><a href=\"#Analytics\" class=\"headerlink\" title=\"Analytics\"></a>Analytics</h4><ul>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Google-Analytics\">Google Analytics</a></li>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Baidu-Analytics-China\">Baidu Analytics (China)</a></li>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Growingio-Analytics\">Growingio Analytics</a></li>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Cloudflare-Web-Analytics\">Cloudflare Web Analytics</a></li>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Microsoft-Clarity-Analytics\">Microsoft Clarity Analytics</a></li>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Matomo-Analytics\">Matomo Analytics</a></li>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Umami-Analytics\">Umami Analytics</a></li>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Plausible-Analytics\">Plausible Analytics</a></li>\n</ul>\n<h4 id=\"Statistics\"><a href=\"#Statistics\" class=\"headerlink\" title=\"Statistics\"></a>Statistics</h4><ul>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#LeanCloud-China\">LeanCloud (China)</a></li>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Firebase\">Firebase</a></li>\n<li><a href=\"/docs/third-party-services/statistics-and-analytics.html#Busuanzi-Counting-China\">Busuanzi Counting</a></li>\n</ul>\n<h3 id=\"Post-Widgets\"><a href=\"#Post-Widgets\" class=\"headerlink\" title=\"Post Widgets\"></a>Post Widgets</h3><ul>\n<li><a href=\"/docs/third-party-services/post-widgets.html#AddToAny\">AddToAny</a></li>\n</ul>\n<h3 id=\"Search-Services\"><a href=\"#Search-Services\" class=\"headerlink\" title=\"Search Services\"></a>Search Services</h3><ul>\n<li><a href=\"/docs/third-party-services/search-services.html#Algolia-Search\">Algolia Search</a></li>\n<li><a href=\"/docs/third-party-services/search-services.html#Local-Search\">Local Search</a></li>\n</ul>\n<h3 id=\"Chat-Services\"><a href=\"#Chat-Services\" class=\"headerlink\" title=\"Chat Services\"></a>Chat Services</h3><ul>\n<li><a href=\"/docs/third-party-services/chat-services.html#Chatra\">Chatra</a></li>\n<li><a href=\"/docs/third-party-services/chat-services.html#Tidio\">Tidio</a></li>\n<li><a href=\"/docs/third-party-services/chat-services.html#Gitter\">Gitter</a></li>\n</ul>\n<h3 id=\"External-Libraries\"><a href=\"#External-Libraries\" class=\"headerlink\" title=\"External Libraries\"></a>External Libraries</h3><ul>\n<li><a href=\"/docs/third-party-services/external-libraries.html#PJAX\">PJAX</a></li>\n<li><a href=\"/docs/third-party-services/external-libraries.html#Fancybox\">Fancybox</a></li>\n<li><a href=\"/docs/third-party-services/external-libraries.html#Medium-Zoom\">MediumZoom</a></li>\n<li><a href=\"/docs/third-party-services/external-libraries.html#Lazyload\">Lazyload</a></li>\n<li><a href=\"/docs/third-party-services/external-libraries.html#Pangu-Autospace\">Pangu Autospace</a></li>\n<li><a href=\"/docs/third-party-services/external-libraries.html#Quicklink\">Quicklink</a></li>\n<li><a href=\"/docs/third-party-services/external-libraries.html#Animation-Effect\">Motion</a></li>\n<li><a href=\"/docs/third-party-services/external-libraries.html#Progress-Bar\">Progress bar</a></li>\n<li><a href=\"/docs/third-party-services/external-libraries.html#Canvas-Ribbon\">Canvas Ribbon</a></li>\n</ul>\n"},{"title":"Math Equations","url":"/docs/third-party-services/math-equations.html","content":"<h3 id=\"Settings\"><a href=\"#Settings\" class=\"headerlink\" title=\"Settings\"></a>Settings</h3><figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Math Formulas Render Support</span></span><br><span class=\"line\"><span class=\"attr\">math:</span></span><br><span class=\"line\"> <span class=\"comment\"># Default (false) will load mathjax / katex script on demand.</span></span><br><span class=\"line\"> <span class=\"comment\"># That is it only render those page which has `mathjax: true` in front-matter.</span></span><br><span class=\"line\"> <span class=\"comment\"># If you set it to true, it will load mathjax / katex script EVERY PAGE.</span></span><br><span class=\"line\"> <span class=\"attr\">every_page:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"attr\">mathjax:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: none | ams | all</span></span><br><span class=\"line\"> <span class=\"attr\">tags:</span> <span class=\"string\">none</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"attr\">katex:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"comment\"># See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex</span></span><br><span class=\"line\"> <span class=\"attr\">copy_tex:</span> <span class=\"literal\">false</span></span><br></pre></td></tr></table></figure>\n\n<p>The <code>every_page</code> option controls whether to render Math Equations every page.</p>\n<ul>\n<li><strong><code>false</code></strong> → Equations will be processed on demand. It will only render those posts which have <code>mathjax: true</code> in their front-matter.</li>\n<li><code>true</code> → Equations will be processed on every page. Even if they not exists on one or another page.</li>\n</ul>\n<details class=\"note default\"><summary><p><strong>Examples with <code>every_page: false</code> option</strong></p>\n</summary>\n<ul>\n<li><p>This post will render the Math Equations</p>\n <figure class=\"highlight md\"><table><tr><td class=\"code\"><pre><span class=\"line\">---</span><br><span class=\"line\">title: Will Render Math</span><br><span class=\"line\"><span class=\"section\">mathjax: true</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br></pre></td></tr></table></figure>\n</li>\n<li><p>This post will NOT render the Math Equations</p>\n <figure class=\"highlight md\"><table><tr><td class=\"code\"><pre><span class=\"line\">---</span><br><span class=\"line\">title: Not Render Math</span><br><span class=\"line\"><span class=\"section\">mathjax: false</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br></pre></td></tr></table></figure>\n</li>\n<li><p>This post will NOT render the Math Equations either</p>\n <figure class=\"highlight md\"><table><tr><td class=\"code\"><pre><span class=\"line\">---</span><br><span class=\"line\"><span class=\"section\">title: Not Render Math Either</span></span><br><span class=\"line\"><span class=\"section\">---</span></span><br></pre></td></tr></table></figure></li>\n</ul>\n\n</details>\n\n<p>The <code>mathjax</code> and <code>katex</code> options are used to set the rendering engine. Please read the detailed document below.</p>\n<h3 id=\"Render-Engines\"><a href=\"#Render-Engines\" class=\"headerlink\" title=\"Render Engines\"></a>Render Engines</h3><p>For now, NexT provides two rendering engines for displaying Math Equations: <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cubWF0aGpheC5vcmcv\">MathJax<i class=\"fa fa-external-link-alt\"></i></span> and <span class=\"exturl\" data-url=\"aHR0cHM6Ly9rYXRleC5vcmcv\">KaTeX<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<ul>\n<li>MathJax is a JavaScript display engine for mathematics that works in all browsers. It is highly modular on input and output. Use MathML, TeX, and ASCIImath as input and produce HTML+CSS, SVG, or MathML as output.</li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cuaW50bWF0aC5jb20vY2c1L2thdGV4LW1hdGhqYXgtY29tcGFyaXNvbi5waHA=\">KaTeX is a faster<i class=\"fa fa-external-link-alt\"></i></span> math rendering engine compared to MathJax 3. And it could survive without JavaScript. But, for now <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL0thVGVYL0thVGVYL3dpa2kvVGhpbmdzLXRoYXQtS2FUZVgtZG9lcy1ub3QtKHlldCktc3VwcG9ydA==\">KaTeX supports less features<i class=\"fa fa-external-link-alt\"></i></span> than MathJax. Here is a list of <span class=\"exturl\" data-url=\"aHR0cHM6Ly9rYXRleC5vcmcvZG9jcy9zdXBwb3J0ZWQuaHRtbA==\">TeX functions supported by KaTeX<i class=\"fa fa-external-link-alt\"></i></span>.</li>\n</ul>\n<p>Firstly, you need to choose a rendering engine and turn on <code>enable</code> for it in <mark class=\"label primary\">NexT config file</mark>. Then you need to install the <strong>corresponding Hexo Renderer</strong> to fully support the display of Math Equations - Only turn on <code>enable</code> <strong>may not let you see the displayed equations correctly</strong>.</p>\n<div class=\"tabs\" id=\"render-engines\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#render-engines-1\">MathJax</a></li><li class=\"tab\"><a href=\"#render-engines-2\">KaTeX</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"render-engines-1\"><p><strong>Renderer Choosing</strong></p>\n<p>If you use MathJax to render Math Equations, you can choose one of the Markdown renderers below:</p>\n<ul>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3d6cGFuL2hleG8tcmVuZGVyZXItcGFuZG9j\">hexo-renderer-pandoc<i class=\"fa fa-external-link-alt\"></i></span></li>\n</ul>\n<p>hexo-renderer-pandoc is recommended because it can handle mathematical formulas in markdown documents perfectly.</p>\n<div class=\"note warning\"><p>If you are using other renderers, such as <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLXJlbmRlcmVyLW1hcmtlZA==\">hexo-renderer-marked<i class=\"fa fa-external-link-alt\"></i></span>, you need to be aware of the conflict between LaTeX and Markdown syntax. For example, an underscore (<code>_</code>) may be interpreted as the start of italic text in Markdown, or subscripted mark in TeX. To avoid syntax errors, please use escape characters (<code>\\_</code>) instead:</p>\n<figure class=\"highlight diff\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"deletion\">-$\\epsilon_0$</span></span><br><span class=\"line\"><span class=\"addition\">+$\\epsilon\\_0$</span></span><br><span class=\"line\"><span class=\"deletion\">-\\begin{eqnarray*}</span></span><br><span class=\"line\"><span class=\"addition\">+\\begin{eqnarray\\*}</span></span><br><span class=\"line\"><span class=\"deletion\">-\\\\</span></span><br><span class=\"line\"><span class=\"addition\">+\\\\\\\\</span></span><br></pre></td></tr></table></figure>\n</div>\n\n<p><strong>Installation</strong></p>\n<ol>\n<li><p>Firstly, set <code>mathjax</code> as rendering engine in <mark class=\"label primary\">NexT config file</mark>.</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">math:</span></span><br><span class=\"line\"> <span class=\"string\">...</span></span><br><span class=\"line\"> <span class=\"attr\">mathjax:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Then you need to uninstall the original renderer <code>hexo-renderer-marked</code>, and install <code>hexo-renderer-pandoc</code>:</p>\n <figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm un hexo-renderer-marked</span><br><span class=\"line\">$ npm i hexo-renderer-pandoc</span><br></pre></td></tr></table></figure>\n</li>\n<li><p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2pnbS9wYW5kb2M=\">pandoc<i class=\"fa fa-external-link-alt\"></i></span> is required for hexo-renderer-pandoc, here's <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2pnbS9wYW5kb2MvYmxvYi9tYXN0ZXIvSU5TVEFMTC5tZA==\">how to install pandoc<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n</li>\n</ol>\n<p><strong>Plugins</strong></p>\n<p>All extensions of MathJax are loaded automatically. For example, <code>mhchem</code> is a tool for writing beautiful chemical equations easily. It implements the <code>\\ce</code> and <code>\\pu</code> chemical equation macros of the LaTeX mhchem package. More information: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9taGNoZW0uZ2l0aHViLmlvL01hdGhKYXgtbWhjaGVtLw==\">MathJax/mhchem Manual<i class=\"fa fa-external-link-alt\"></i></span>.</p></div><div class=\"tab-pane\" id=\"render-engines-2\"><p><strong>Renderer Choosing</strong></p>\n<p>If you use KaTeX to render Math Equations, you can choose one of the Markdown renderers below:</p>\n<ul>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL0NIRU5YQ0hFTi9oZXhvLXJlbmRlcmVyLW1hcmtkb3duLWl0LXBsdXM=\">hexo-renderer-markdown-it-plus<i class=\"fa fa-external-link-alt\"></i></span></li>\n<li><span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLXJlbmRlcmVyLW1hcmtkb3duLWl0\">hexo-renderer-markdown-it<i class=\"fa fa-external-link-alt\"></i></span></li>\n</ul>\n<p><strong>Installation</strong></p>\n<ol>\n<li><p>Firstly, set <code>katex</code> as rendering engine in <mark class=\"label primary\">NexT config file</mark>.</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">math:</span></span><br><span class=\"line\"> <span class=\"string\">...</span></span><br><span class=\"line\"> <span class=\"attr\">katex:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n</li>\n<li><p>Then you need to uninstall the original renderer <code>hexo-renderer-marked</code> and install one of the renderer plugins:</p>\n</li>\n</ol>\n<div class=\"tabs\" id=\"katex-renderer\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#katex-renderer-1\">hexo-renderer-markdown-it-plus</a></li><li class=\"tab\"><a href=\"#katex-renderer-2\">hexo-renderer-markdown-it</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"katex-renderer-1\"><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm un hexo-renderer-marked</span><br><span class=\"line\">$ npm i hexo-renderer-markdown-it-plus</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"katex-renderer-2\"><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm un hexo-renderer-marked</span><br><span class=\"line\">$ npm i hexo-renderer-markdown-it</span><br></pre></td></tr></table></figure>\n\n<p>If you use <code>hexo-renderer-markdown-it</code>, you also need to install <code>markdown-it-katex</code>:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm i markdown-it-katex</span><br></pre></td></tr></table></figure>\n\n<p>And then in <mark class=\"label info\">Hexo config file</mark> you need to add <code>markdown-it-katex</code> as a plugin for <code>hexo-renderer-markdown-it</code>:</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># config of hexo-renderer-markdown-it</span></span><br><span class=\"line\"><span class=\"attr\">markdown:</span></span><br><span class=\"line\"> <span class=\"attr\">render:</span></span><br><span class=\"line\"> <span class=\"attr\">html:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">xhtmlOut:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">breaks:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">linkify:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">typographer:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">quotes:</span> <span class=\"string\">'“”‘’'</span></span><br><span class=\"line\"> <span class=\"attr\">plugins:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">markdown-it-katex</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<p><strong>Plugins</strong></p>\n<p>Copy-tex extension for KaTeX modifies the copy/paste behavior in any browser supporting the Clipboard API so that, when selecting and copying whole KaTeX-rendered elements, the text content of the resulting clipboard renders KaTeX elements as their LaTeX source surrounded by specified delimiters. More information: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL0thVGVYL0thVGVYL3RyZWUvbWFzdGVyL2NvbnRyaWIvY29weS10ZXg=\">Copy-tex extension<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">math:</span></span><br><span class=\"line\"> <span class=\"string\">...</span></span><br><span class=\"line\"> <span class=\"attr\">katex:</span></span><br><span class=\"line\"> <span class=\"comment\"># See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex</span></span><br><span class=\"line\"> <span class=\"attr\">copy_tex:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure>\n\n<div class=\"note danger\"><p><strong>Known Issues</strong></p>\n<ol>\n<li>Firstly, please check <span class=\"exturl\" data-url=\"aHR0cHM6Ly9rYXRleC5vcmcvZG9jcy9pc3N1ZXMuaHRtbA==\">Common Issues<i class=\"fa fa-external-link-alt\"></i></span> of KaTeX.</li>\n<li>Displayed Math (i.e. <code>$$...$$</code>) needs to started with new clear line.<br> In other words: you must not have any characters (except of whitespaces) <strong>before the opening <code>$$</code> and after the ending <code>$$</code></strong> (<span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L3B1bGwvMzIjaXNzdWVjb21tZW50LTM1NzQ4OTUwOQ==\">comment #32<i class=\"fa fa-external-link-alt\"></i></span>).</li>\n<li>Don't support Unicode (<span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L3B1bGwvMzIjaXNzdWVjb21tZW50LTM1NzQ4OTUwOQ==\">comment #32<i class=\"fa fa-external-link-alt\"></i></span>).</li>\n<li>Inline Math (..<code>$...$</code>) must not have white spaces <strong>after the opening <code>$</code> and before the ending <code>$</code></strong> (<span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L3B1bGwvMzIjaXNzdWVjb21tZW50LTM1NzQ4OTUwOQ==\">comment #32<i class=\"fa fa-external-link-alt\"></i></span>).</li>\n<li>If you use math in Heading (i.e. <code>## Heading</code>).<br> Then in corresponding TOC item it will show the related LaTeX code 3 times (<span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L3B1bGwvMzIjaXNzdWVjb21tZW50LTM1OTAxODY5NA==\">comment #32<i class=\"fa fa-external-link-alt\"></i></span>).</li>\n<li>If you use math in your post's title, it will not be rendered (<span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by10aGVtZS1uZXh0L3B1bGwvMzIjaXNzdWVjb21tZW50LTM1OTE0Mjg3OQ==\">comment #32<i class=\"fa fa-external-link-alt\"></i></span>).</li>\n</ol>\n</div></div></div></div>\n\n<div class=\"note warning\"><p>After setting up the math rendering engine or installing / uninstalling the Markdown renderer, please execute <code>hexo clean</code>. Run standard Hexo generate, deploy process or start the server to test whether the plugin is working properly:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo clean && hexo g -d</span><br><span class=\"line\"><span class=\"comment\"># or hexo clean && hexo s</span></span><br></pre></td></tr></table></figure>\n</div>\n\n<div class=\"note warning\"><p>Except for the required renderer, any other Hexo math plugins are unnecessary and there is no need to manually import any JS or CSS files. If you have installed plugins such as <code>hexo-math</code> or <code>hexo-katex</code>, they may conflict with the built-in rendering engine of NexT.</p>\n</div>\n\n<h3 id=\"Examples\"><a href=\"#Examples\" class=\"headerlink\" title=\"Examples\"></a>Examples</h3><div class=\"note info\"><p>The following examples are rendered by <code>mathjax</code> engine.</p>\n</div>\n\n<h4 id=\"Numbering-and-Referring-Equations-in-MathJax\"><a href=\"#Numbering-and-Referring-Equations-in-MathJax\" class=\"headerlink\" title=\"Numbering and Referring Equations in MathJax\"></a>Numbering and Referring Equations in MathJax</h4><p>In NexT v6.3.0, we have added feature to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kb2NzLm1hdGhqYXgub3JnL2VuL2xhdGVzdC9pbnB1dC90ZXgvZXFudW1iZXJzLmh0bWw=\">automatic equation numbering<i class=\"fa fa-external-link-alt\"></i></span> with opportunity to make reference to that equations.</p>\n<p>To enable this feature, you need to set <code>mathjax.tags</code> to <code>ams</code> in <mark class=\"label primary\">NexT config file</mark>.</p>\n<figure class=\"highlight yml\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">math:</span></span><br><span class=\"line\"> <span class=\"attr\">mathjax:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"comment\"># Available values: none | ams | all</span></span><br><span class=\"line\"> <span class=\"attr\">tags:</span> <span class=\"string\">ams</span></span><br></pre></td></tr></table></figure>\n\n<p>And to make the automatic equation numbering work, you have to wrap your LaTeX equations in <code>equation</code> environment. Using the plain old style (i.e., wrap an equation with two dollar signs in each side) will not work. How to refer to an equation? Just give a <code>\\label{}</code> tag and then in your later text, use <code>\\ref{}</code> or <code>\\eqref{}</code> to refer it. Using <code>\\eqref{}</code> is preferred since if you use <code>\\ref{}</code>, there are no parentheses around the equation number. Below are some of the common scenarios for equation numbering.</p>\n<h4 id=\"Simple-Equations\"><a href=\"#Simple-Equations\" class=\"headerlink\" title=\"Simple Equations\"></a>Simple Equations</h4><p>For simple equations, use the following form to give a tag,</p>\n<figure class=\"highlight latex\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">$</span><span class=\"built_in\">$</span><span class=\"keyword\">\\begin</span>{equation} <span class=\"keyword\">\\label</span>{eq1}</span><br><span class=\"line\">e=mc<span class=\"built_in\">^</span>2</span><br><span class=\"line\"><span class=\"keyword\">\\end</span>{equation}<span class=\"built_in\">$</span><span class=\"built_in\">$</span></span><br></pre></td></tr></table></figure>\n\n<p>$$\\begin{equation} \\label{eq1}<br>e=mc^2<br>\\end{equation}$$</p>\n<p>Then, you can refer to this equation in your text easily by using something like:</p>\n<figure class=\"highlight latex\"><table><tr><td class=\"code\"><pre><span class=\"line\">The famous matter-energy equation <span class=\"built_in\">$</span><span class=\"keyword\">\\eqref</span>{eq1}<span class=\"built_in\">$</span> proposed by Einstein...</span><br></pre></td></tr></table></figure>\n\n<p>The famous matter-energy equation $\\eqref{eq1}$ proposed by Einstein...</p>\n<h4 id=\"Multi-line-Equations\"><a href=\"#Multi-line-Equations\" class=\"headerlink\" title=\"Multi-line Equations\"></a>Multi-line Equations</h4><p>For multi-line equations, inside the <code>equation</code> environment, you can use the <code>aligned</code> environment to split it into multiple lines:</p>\n<figure class=\"highlight latex\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">$</span><span class=\"built_in\">$</span><span class=\"keyword\">\\begin</span>{equation} <span class=\"keyword\">\\label</span>{eq2}</span><br><span class=\"line\"><span class=\"keyword\">\\begin</span>{aligned}</span><br><span class=\"line\">a <span class=\"built_in\">&</span>= b + c <span class=\"keyword\">\\\\</span></span><br><span class=\"line\"> <span class=\"built_in\">&</span>= d + e + f + g <span class=\"keyword\">\\\\</span></span><br><span class=\"line\"> <span class=\"built_in\">&</span>= h + i</span><br><span class=\"line\"><span class=\"keyword\">\\end</span>{aligned}</span><br><span class=\"line\"><span class=\"keyword\">\\end</span>{equation}<span class=\"built_in\">$</span><span class=\"built_in\">$</span></span><br></pre></td></tr></table></figure>\n\n<p>$$\\begin{equation} \\label{eq2}<br>\\begin{aligned}<br>a &= b + c \\\\<br> &= d + e + f + g \\\\<br> &= h + i<br>\\end{aligned}<br>\\end{equation}$$</p>\n<figure class=\"highlight latex\"><table><tr><td class=\"code\"><pre><span class=\"line\">Equation <span class=\"built_in\">$</span><span class=\"keyword\">\\eqref</span>{eq2}<span class=\"built_in\">$</span> is a multi-line equation.</span><br></pre></td></tr></table></figure>\n\n<p>Equation $\\eqref{eq2}$ is a multi-line equation.</p>\n<h4 id=\"Multiple-Aligned-Equations\"><a href=\"#Multiple-Aligned-Equations\" class=\"headerlink\" title=\"Multiple Aligned Equations\"></a>Multiple Aligned Equations</h4><p>We can use <code>align</code> environment to align multiple equations. Each of these equations will get its own numbers.</p>\n<figure class=\"highlight latex\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">$</span><span class=\"built_in\">$</span><span class=\"keyword\">\\begin</span>{align}</span><br><span class=\"line\">a <span class=\"built_in\">&</span>= b + c <span class=\"keyword\">\\label</span>{eq3} <span class=\"keyword\">\\\\</span></span><br><span class=\"line\">x <span class=\"built_in\">&</span>= yz <span class=\"keyword\">\\label</span>{eq4} <span class=\"keyword\">\\\\</span></span><br><span class=\"line\">l <span class=\"built_in\">&</span>= m - n <span class=\"keyword\">\\label</span>{eq5}</span><br><span class=\"line\"><span class=\"keyword\">\\end</span>{align}<span class=\"built_in\">$</span><span class=\"built_in\">$</span></span><br></pre></td></tr></table></figure>\n\n<p>$$\\begin{align}<br>a &= b + c \\label{eq3} \\\\<br>x &= yz \\label{eq4} \\\\<br>l &= m - n \\label{eq5}<br>\\end{align}$$</p>\n<figure class=\"highlight latex\"><table><tr><td class=\"code\"><pre><span class=\"line\">There are three aligned equations: equation <span class=\"built_in\">$</span><span class=\"keyword\">\\eqref</span>{eq3}<span class=\"built_in\">$</span>, equation <span class=\"built_in\">$</span><span class=\"keyword\">\\eqref</span>{eq4}<span class=\"built_in\">$</span> and equation <span class=\"built_in\">$</span><span class=\"keyword\">\\eqref</span>{eq5}<span class=\"built_in\">$</span>.</span><br></pre></td></tr></table></figure>\n\n<p>There are three aligned equations: equation $\\eqref{eq3}$, equation $\\eqref{eq4}$ and equation $\\eqref{eq5}$.</p>\n<p>Since <code>align</code> in and of itself is a complete equation environment (read <span class=\"exturl\" data-url=\"aHR0cHM6Ly90ZXguc3RhY2tleGNoYW5nZS5jb20vcXVlc3Rpb25zLzk1NDAyL3doYXQtaXMtdGhlLWRpZmZlcmVuY2UtYmV0d2Vlbi1hbGlnbmVkLWluLWRpc3BsYXllZC1tb2RlLWFuZC1zdGFycmVkLWFsaWdu\">here<i class=\"fa fa-external-link-alt\"></i></span> about the difference between <code>aligned</code> and <code>align</code> in LaTeX). You do not need to wrap it with <code>equation</code> environment.</p>\n<h4 id=\"Exclude-Equations-from-Numbering\"><a href=\"#Exclude-Equations-from-Numbering\" class=\"headerlink\" title=\"Exclude Equations from Numbering\"></a>Exclude Equations from Numbering</h4><p>In the <code>align</code> environment, if you do not want to number one or some equations, just use <code>\\nonumber</code> right behind these equations. Like the following:</p>\n<figure class=\"highlight latex\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">$</span><span class=\"built_in\">$</span><span class=\"keyword\">\\begin</span>{align}</span><br><span class=\"line\">-4 + 5x <span class=\"built_in\">&</span>= 2 + y <span class=\"keyword\">\\nonumber</span> <span class=\"keyword\">\\\\</span></span><br><span class=\"line\">w + 2 <span class=\"built_in\">&</span>= -1 + w <span class=\"keyword\">\\\\</span></span><br><span class=\"line\">ab <span class=\"built_in\">&</span>= cb</span><br><span class=\"line\"><span class=\"keyword\">\\end</span>{align}<span class=\"built_in\">$</span><span class=\"built_in\">$</span></span><br></pre></td></tr></table></figure>\n\n<p>$$\\begin{align}<br>-4 + 5x &= 2 + y \\nonumber \\\\<br>w + 2 &= -1 + w \\\\<br>ab &= cb<br>\\end{align}$$</p>\n<h4 id=\"Use-tag-to-Tag-Equations\"><a href=\"#Use-tag-to-Tag-Equations\" class=\"headerlink\" title=\"Use \\tag to Tag Equations\"></a>Use <code>\\tag</code> to Tag Equations</h4><p>Sometimes, you want to use more «exotic» style to refer your equation. You can use <code>\\tag{}</code> to achieve this. For example:</p>\n<figure class=\"highlight latex\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">$</span><span class=\"built_in\">$</span>x+1<span class=\"keyword\">\\over</span><span class=\"keyword\">\\sqrt</span>{1-x<span class=\"built_in\">^</span>2} <span class=\"keyword\">\\tag</span>{i}<span class=\"keyword\">\\label</span>{eq<span class=\"built_in\">_</span>tag}<span class=\"built_in\">$</span><span class=\"built_in\">$</span></span><br></pre></td></tr></table></figure>\n\n<p>$$x+1\\over\\sqrt{1-x^2} \\tag{i}\\label{eq_tag}$$</p>\n<figure class=\"highlight latex\"><table><tr><td class=\"code\"><pre><span class=\"line\">Equation <span class=\"built_in\">$</span><span class=\"keyword\">\\eqref</span>{eq<span class=\"built_in\">_</span>tag}<span class=\"built_in\">$</span> use `<span class=\"keyword\">\\tag</span>{}` instead of automatic numbering.</span><br></pre></td></tr></table></figure>\n\n<p>Equation $\\eqref{eq_tag}$ use <code>\\tag{}</code> instead of automatic numbering.</p>\n"},{"title":"Post Widgets","url":"/docs/third-party-services/post-widgets.html","content":"<h3 id=\"AddToAny\"><a href=\"#AddToAny\" class=\"headerlink\" title=\"AddToAny\"></a>AddToAny</h3><div class=\"tabs\" id=\"addtoany\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#addtoany-1\">Enable AddToAny →</a></li><li class=\"tab\"><a href=\"#addtoany-2\">Add Buttons</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"addtoany-1\"><p>Edit <mark class=\"label primary\">NexT config file</mark> to enable AddToAny Share:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># AddToAny Share. See: https://www.addtoany.com</span></span><br><span class=\"line\"><span class=\"attr\">addtoany:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">buttons:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">facebook</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">twitter</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"addtoany-2\"><p>After AddToAny enabled, you can add more buttons.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># AddToAny Share. See: https://www.addtoany.com</span></span><br><span class=\"line\"><span class=\"attr\">addtoany:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">buttons:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">facebook</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">twitter</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">telegram</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">wechat</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">qzone</span></span><br></pre></td></tr></table></figure></div></div></div>\n"},{"title":"Search Services","url":"/docs/third-party-services/search-services.html","content":"<h3 id=\"Algolia-Search\"><a href=\"#Algolia-Search\" class=\"headerlink\" title=\"Algolia Search\"></a>Algolia Search</h3><p>NexT provides Algolia search plugin to search your Hexo website content. It should be noted that only turn on <code>enable</code> of <code>algolia_search</code> in <mark class=\"label primary\">NexT config file</mark> does not allow you to use the Algolia search correctly. You need to install the corresponding Hexo plugin to index your website on Algolia: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL29uY2xldG9tL2hleG8tYWxnb2xpYQ==\">Hexo Algolia<i class=\"fa fa-external-link-alt\"></i></span> or <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL0xvdWlzQmFycmFucXVlaXJvL2hleG8tYWxnb2xpYXNlYXJjaA==\">Hexo Algoliasearch<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<div class=\"note danger\"><p><strong>Known Issues</strong></p>\n<ol>\n<li>The latest version of the <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL29uY2xldG9tL2hleG8tYWxnb2xpYQ==\">Hexo Algolia<i class=\"fa fa-external-link-alt\"></i></span> plugin removes the content indexing feature, given Algolia's free account limitation.</li>\n<li>The <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL0xvdWlzQmFycmFucXVlaXJvL2hleG8tYWxnb2xpYXNlYXJjaA==\">Hexo Algoliasearch<i class=\"fa fa-external-link-alt\"></i></span> plugin provides content indexing functionality. The same problem exists with <code>Record Too Big</code> for Algolia's free account.</li>\n</ol>\n</div>\n\n<p>Follow the steps described below to complete the installation of Algolia search.</p>\n<div class=\"tabs\" id=\"algolia-search\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#algolia-search-1\">Registration →</a></li><li class=\"tab\"><a href=\"#algolia-search-2\">Algolia Config →</a></li><li class=\"tab\"><a href=\"#algolia-search-3\">Algolia Plugin →</a></li><li class=\"tab\"><a href=\"#algolia-search-4\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"algolia-search-1\"><p>Register at <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cuYWxnb2xpYS5jb20v\">Algolia<i class=\"fa fa-external-link-alt\"></i></span>, you can log in directly using GitHub or Google Account. Upon Customer's initial sign-up for an Account, Customer will have a free, fourteen (14) day evaluation period (the «Evaluation Period») for the Algolia Services commencing on the Effective Date, subject to the limitations on Algolia's website. After that, Algolia offers a free, branded version for up to 10k records and 100k operations per month.</p>\n<p>If a tutorial pops up, you can skip it. Go straight to create an <code>Index</code> which will be used later.<br><img src=\"/images/algolia-1.png\" alt=\"Algolia Create Index\" loading=\"lazy\"></p></div><div class=\"tab-pane\" id=\"algolia-search-2\"><ol>\n<li><p>Go to the <code>API Keys</code> page and find your credentials. You will need the <code>Application ID</code> and the <code>Search-only API key</code> in the following sections. The <code>Admin API key</code> need to keep confidential. Never store your Admin API Key as <code>apiKey</code> in <mark class=\"label info\">Hexo config file</mark>: it would give full control of your Algolia index to others and you don't want to face the consequences.<br><img src=\"/images/algolia-2.png\" alt=\"Algolia API Keys\" loading=\"lazy\"></p>\n</li>\n<li><p>In the <code>API Keys</code> page, click the <code>All API Keys</code> button to switch to the corresponding tab. Then click the <code>New API Key</code> button to activate a pop-up box where you can setup authorizations and restrictions with a great level of precision. Enter <code>addObject</code>, <code>deleteObject</code>, <code>listIndexes</code>, <code>deleteIndex</code> features in ACL permissions that will be allowed for the given API key. And then click the <code>Create</code> button. Copy this newly created key to the clipboard, we call it a <code>High-privilege API key</code>.<br><img src=\"/images/algolia-3.png\" alt=\"Algolia API Keys 2\" loading=\"lazy\"><br><img src=\"/images/algolia-4.png\" alt=\"Algolia Configuring Records\" loading=\"lazy\"></p>\n</li>\n</ol></div><div class=\"tab-pane\" id=\"algolia-search-3\"><p>Algolia requires users to upload their search index data either manually or via provided APIs. You need to choose one of the following two plugins to install. Both plugins will index your site and upload selected data to Algolia.</p>\n<div class=\"tabs\" id=\"algolia-plugin\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#algolia-plugin-1\">Hexo Algolia</a></li><li class=\"tab\"><a href=\"#algolia-plugin-2\">Hexo Algoliasearch</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"algolia-plugin-1\"><p>Install and configure <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL29uY2xldG9tL2hleG8tYWxnb2xpYQ==\">Hexo Algolia<i class=\"fa fa-external-link-alt\"></i></span> in your Hexo directory.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ npm install hexo-algolia</span><br></pre></td></tr></table></figure>\n\n<p>In your <mark class=\"label info\">Hexo config file</mark>, add the following configuration and replace the <code>Application ID</code>, <code>Search-only API key</code> and <code>indexName</code> with corresponding fields obtained at Algolia.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">algolia:</span></span><br><span class=\"line\"> <span class=\"attr\">applicationID:</span> <span class=\"string\">"Application ID"</span></span><br><span class=\"line\"> <span class=\"attr\">apiKey:</span> <span class=\"string\">"Search-only API key"</span></span><br><span class=\"line\"> <span class=\"attr\">indexName:</span> <span class=\"string\">"indexName"</span></span><br></pre></td></tr></table></figure>\n\n<p>Run the following command to upload index data, keep a weather eye out the output of the command.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">export</span> HEXO_ALGOLIA_INDEXING_KEY=High-privilege API key <span class=\"comment\"># Use Git Bash</span></span><br><span class=\"line\"><span class=\"comment\"># set HEXO_ALGOLIA_INDEXING_KEY=High-privilege API key # Use Windows command line</span></span><br><span class=\"line\">$ hexo clean</span><br><span class=\"line\">$ hexo algolia</span><br></pre></td></tr></table></figure>\n\n<p><img src=\"/images/algolia-5.png\" alt=\"Reload Index\" loading=\"lazy\"></p></div><div class=\"tab-pane\" id=\"algolia-plugin-2\"><p>Install and configure <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL0xvdWlzQmFycmFucXVlaXJvL2hleG8tYWxnb2xpYXNlYXJjaA==\">Hexo Algoliasearch<i class=\"fa fa-external-link-alt\"></i></span> in your Hexo directory.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ <span class=\"built_in\">cd</span> hexo-site</span><br><span class=\"line\">$ npm install hexo-algoliasearch</span><br></pre></td></tr></table></figure>\n\n<p>In your <mark class=\"label info\">Hexo config file</mark>, add the following configuration and replace the <code>Application ID</code>, <code>Search-only API key</code>, <code>High-privilege API key</code> and <code>indexName</code> with corresponding fields obtained at Algolia.</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">algolia:</span></span><br><span class=\"line\"> <span class=\"attr\">appId:</span> <span class=\"string\">"Application ID"</span></span><br><span class=\"line\"> <span class=\"attr\">apiKey:</span> <span class=\"string\">"Search-only API key"</span></span><br><span class=\"line\"> <span class=\"attr\">adminApiKey:</span> <span class=\"string\">"High-privilege API key"</span></span><br><span class=\"line\"> <span class=\"attr\">indexName:</span> <span class=\"string\">"indexName"</span></span><br><span class=\"line\"> <span class=\"attr\">chunkSize:</span> <span class=\"number\">5000</span></span><br><span class=\"line\"> <span class=\"attr\">fields:</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">content:strip:truncate,0,500</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">excerpt:strip</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">gallery</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">permalink</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">photos</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">slug</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">tags</span></span><br><span class=\"line\"> <span class=\"bullet\">-</span> <span class=\"string\">title</span></span><br></pre></td></tr></table></figure>\n\n<p>Run the following command to upload index data, keep a weather eye out the output of the command.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo clean</span><br><span class=\"line\">$ hexo algolia</span><br></pre></td></tr></table></figure></div></div></div></div><div class=\"tab-pane\" id=\"algolia-search-4\"><p>In <mark class=\"label primary\">NexT config file</mark>, turn on <code>enable</code> of <code>algolia_search</code>. At the same time, you need to <strong>turn off other search plugins</strong> like Local Search. You can also adjust the text in <code>labels</code> according to your needs.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Algolia Search</span></span><br><span class=\"line\"><span class=\"attr\">algolia_search:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">hits:</span></span><br><span class=\"line\"> <span class=\"attr\">per_page:</span> <span class=\"number\">10</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h3 id=\"Local-Search\"><a href=\"#Local-Search\" class=\"headerlink\" title=\"Local Search\"></a>Local Search</h3><p>Local search does not require any external 3rd-party services and can be extra indexed by search engines. This search method is recommended for most users.</p>\n<div class=\"tabs\" id=\"local-search\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#local-search-1\">Installation →</a></li><li class=\"tab\"><a href=\"#local-search-2\">Hexo Config →</a></li><li class=\"tab\"><a href=\"#local-search-3\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"local-search-1\"><p>Install <code>hexo-generator-searchdb</code> by executing the following command in <mark class=\"label info\">site root dir</mark>:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install hexo-generator-searchdb</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"local-search-2\"><p>Edit <mark class=\"label info\">Hexo config file</mark> and add following content:</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">search:</span></span><br><span class=\"line\"> <span class=\"attr\">path:</span> <span class=\"string\">search.xml</span></span><br><span class=\"line\"> <span class=\"attr\">field:</span> <span class=\"string\">post</span></span><br><span class=\"line\"> <span class=\"attr\">content:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">format:</span> <span class=\"string\">html</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"local-search-3\"><p>Edit <mark class=\"label primary\">NexT config file</mark> to enable Local Search:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Local search</span></span><br><span class=\"line\"><span class=\"comment\"># Dependencies: https://github.com/next-theme/hexo-generator-searchdb</span></span><br><span class=\"line\"><span class=\"attr\">local_search:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"comment\"># If auto, trigger search by changing input.</span></span><br><span class=\"line\"> <span class=\"comment\"># If manual, trigger search by pressing enter key or search button.</span></span><br><span class=\"line\"> <span class=\"attr\">trigger:</span> <span class=\"string\">auto</span></span><br><span class=\"line\"> <span class=\"comment\"># Show top n results per article, show all results by setting to -1</span></span><br><span class=\"line\"> <span class=\"attr\">top_n_per_article:</span> <span class=\"number\">1</span></span><br><span class=\"line\"> <span class=\"comment\"># Unescape html strings to the readable one.</span></span><br><span class=\"line\"> <span class=\"attr\">unescape:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"comment\"># Preload the search data when the page loads.</span></span><br><span class=\"line\"> <span class=\"attr\">preload:</span> <span class=\"literal\">false</span></span><br></pre></td></tr></table></figure></div></div></div>\n"},{"title":"Statistics and Analytics","url":"/docs/third-party-services/statistics-and-analytics.html","content":"<div class=\"note warning\"><p>NexT will not send record to analytics service provider as long as the page's host name does not match <code>url</code> option set in <mark class=\"label info\">Hexo config file</mark>. This will prevent local debugging from polluting analytics. Make sure you have configured <code>url</code> correctly, otherwise these statistics tools may not work as expected.</p>\n</div>\n\n<h3 id=\"Analytics-Tools\"><a href=\"#Analytics-Tools\" class=\"headerlink\" title=\"Analytics Tools\"></a>Analytics Tools</h3><h4 id=\"Google-Analytics\"><a href=\"#Google-Analytics\" class=\"headerlink\" title=\"Google Analytics\"></a>Google Analytics</h4><ol>\n<li><p>Create an account and log into <span class=\"exturl\" data-url=\"aHR0cHM6Ly9hbmFseXRpY3MuZ29vZ2xlLmNvbS8=\">Google Analytics<i class=\"fa fa-external-link-alt\"></i></span>. <span class=\"exturl\" data-url=\"aHR0cHM6Ly9zdXBwb3J0Lmdvb2dsZS5jb20vYW5hbHl0aWNzLz9obD1lbiN0b3BpYz0zNTQ0OTA2\">More detailed documentation<i class=\"fa fa-external-link-alt\"></i></span></p>\n</li>\n<li><p>Edit <mark class=\"label primary\">NexT config file</mark> and fill <code>tracking_id</code> under section <code>google_analytics</code> with your Google track ID. Google track ID always starts with <code>UA-</code>.</p>\n <figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Google Analytics</span></span><br><span class=\"line\"><span class=\"attr\">google_analytics:</span></span><br><span class=\"line\"> <span class=\"attr\">tracking_id:</span> <span class=\"string\">UA-XXXXXXXX-X</span></span><br><span class=\"line\"> <span class=\"attr\">only_pageview:</span> <span class=\"literal\">false</span></span><br></pre></td></tr></table></figure>\n</li>\n<li><p>When field <code>only_pageview</code> is set to true, NexT will only send <code>pageview</code> event to Google Analytics.<br>The benefit of using this instead of <code>only_pageview: false</code> is reduce a external script on your site, which will give you better performance but no complete analytics function.</p>\n</li>\n</ol>\n<h4 id=\"Baidu-Analytics-China\"><a href=\"#Baidu-Analytics-China\" class=\"headerlink\" title=\"Baidu Analytics (China)\"></a>Baidu Analytics (China)</h4><div class=\"tabs\" id=\"baidu-analytics\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#baidu-analytics-1\">Login →</a></li><li class=\"tab\"><a href=\"#baidu-analytics-2\">Script ID →</a></li><li class=\"tab\"><a href=\"#baidu-analytics-3\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"baidu-analytics-1\"><p>Login to <span class=\"exturl\" data-url=\"aHR0cHM6Ly90b25namkuYmFpZHUuY29tLw==\">Baidu Analytics<i class=\"fa fa-external-link-alt\"></i></span> and locate to site code getting page.</p></div><div class=\"tab-pane\" id=\"baidu-analytics-2\"><p>Copy the script ID after <code>hm.js?</code>, like the following picture:<br><img src=\"/images/analytics-baidu-id.png\" alt=\"NexT Baidu Analytics\" loading=\"lazy\"></p></div><div class=\"tab-pane\" id=\"baidu-analytics-3\"><p>Edit <mark class=\"label primary\">NexT config file</mark> and change the value of <code>baidu_analytics</code> to your script ID.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Baidu Analytics ID</span></span><br><span class=\"line\"><span class=\"attr\">baidu_analytics:</span> <span class=\"string\">your_id</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h4 id=\"Growingio-Analytics\"><a href=\"#Growingio-Analytics\" class=\"headerlink\" title=\"Growingio Analytics\"></a>Growingio Analytics</h4><p>Official documentation: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9kb2NzLmdyb3dpbmdpby5jb20vdjMvZGV2ZWxvcGVyLW1hbnVhbC9zZGtpbnRlZ3JhdGVkL3dlYi1qcy1zZGsvbGF0ZXN0LWpzc2Rr\">https://docs.growingio.com/v3/developer-manual/sdkintegrated/web-js-sdk/latest-jssdk<i class=\"fa fa-external-link-alt\"></i></span></p>\n<p>Edit <mark class=\"label primary\">NexT config file</mark> and change the value of <code>growingio_analytics</code> to your project ID.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Growingio Analytics</span></span><br><span class=\"line\"><span class=\"attr\">growingio_analytics:</span> <span class=\"comment\"># <project_id></span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Cloudflare-Web-Analytics\"><a href=\"#Cloudflare-Web-Analytics\" class=\"headerlink\" title=\"Cloudflare Web Analytics\"></a>Cloudflare Web Analytics</h4><p>Official documentation: <span class=\"exturl\" data-url=\"aHR0cHM6Ly93d3cuY2xvdWRmbGFyZS5jb20vd2ViLWFuYWx5dGljcy8=\">https://www.cloudflare.com/web-analytics/<i class=\"fa fa-external-link-alt\"></i></span></p>\n<p>Edit <mark class=\"label primary\">NexT config file</mark> and change the value of <code>cloudflare_analytics</code> to your project ID.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Cloudflare Web Analytics</span></span><br><span class=\"line\"><span class=\"attr\">cloudflare_analytics:</span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Microsoft-Clarity-Analytics\"><a href=\"#Microsoft-Clarity-Analytics\" class=\"headerlink\" title=\"Microsoft Clarity Analytics\"></a>Microsoft Clarity Analytics</h4><p>Official documentation: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jbGFyaXR5Lm1pY3Jvc29mdC5jb20v\">https://clarity.microsoft.com/<i class=\"fa fa-external-link-alt\"></i></span></p>\n<p>Edit <mark class=\"label primary\">NexT config file</mark> and change the value of <code>clarity_analytics</code> to your project ID.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Microsoft Clarity Analytics</span></span><br><span class=\"line\"><span class=\"attr\">clarity_analytics:</span> <span class=\"comment\"># <project_id></span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Matomo-Analytics-Self-managed\"><a href=\"#Matomo-Analytics-Self-managed\" class=\"headerlink\" title=\"Matomo Analytics (Self-managed)\"></a>Matomo Analytics (Self-managed)</h4><p>Edit <mark class=\"label primary\">NexT config file</mark> and fill <code>server_url</code> and <code>site_id</code> under section <code>matomo</code> with the url of your backend server and your customized site ID.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Matomo Analytics</span></span><br><span class=\"line\"><span class=\"comment\"># See: https://matomo.org/</span></span><br><span class=\"line\"><span class=\"attr\">matomo:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">false</span></span><br><span class=\"line\"> <span class=\"attr\">server_url:</span> <span class=\"comment\"># https://www.example.com/</span></span><br><span class=\"line\"> <span class=\"attr\">site_id:</span> <span class=\"comment\"># <your site id></span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Umami-Analytics-Self-managed\"><a href=\"#Umami-Analytics-Self-managed\" class=\"headerlink\" title=\"Umami Analytics (Self-managed)\"></a>Umami Analytics (Self-managed)</h4><p>Umami is a self-hosted web analytics solution. Official documentation: <span class=\"exturl\" data-url=\"aHR0cHM6Ly91bWFtaS5pcy8=\">https://umami.is/<i class=\"fa fa-external-link-alt\"></i></span></p>\n<p>Edit <mark class=\"label primary\">NexT config file</mark>. Fill <code>script_url</code> under section <code>umami</code> with your tracking script URL, and change the value of <code>website_id</code> to your website ID.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Umami Analytics</span></span><br><span class=\"line\"><span class=\"attr\">umami:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">script_url:</span> <span class=\"comment\"># https://umami.example.com/script.js</span></span><br><span class=\"line\"> <span class=\"attr\">website_id:</span> <span class=\"comment\"># <your website id></span></span><br><span class=\"line\"> <span class=\"attr\">host_url:</span> <span class=\"comment\"># <your umami site url></span></span><br></pre></td></tr></table></figure>\n\n<h4 id=\"Plausible-Analytics-Self-managed\"><a href=\"#Plausible-Analytics-Self-managed\" class=\"headerlink\" title=\"Plausible Analytics (Self-managed)\"></a>Plausible Analytics (Self-managed)</h4><p>Opt for paid managed hosting or self-host it on your server. Official documentation: <span class=\"exturl\" data-url=\"aHR0cHM6Ly9wbGF1c2libGUuaW8v\">https://plausible.io/<i class=\"fa fa-external-link-alt\"></i></span></p>\n<p>Edit <mark class=\"label primary\">NexT config file</mark>. Fill <code>script_url</code> under section <code>plausible</code> with your tracking script URL, and change the value of <code>site_domain</code> to your website domain.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Plausible Analytics</span></span><br><span class=\"line\"><span class=\"attr\">plausible:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">script_url:</span> <span class=\"comment\"># https://plausible.io/js/script.js</span></span><br><span class=\"line\"> <span class=\"attr\">site_domain:</span> <span class=\"comment\"># www.example.com</span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"Counting-Tools\"><a href=\"#Counting-Tools\" class=\"headerlink\" title=\"Counting Tools\"></a>Counting Tools</h3><h4 id=\"LeanCloud-China\"><a href=\"#LeanCloud-China\" class=\"headerlink\" title=\"LeanCloud (China)\"></a>LeanCloud (China)</h4><p>Adding article reading times counting to NexT theme. Documentation how to set the counter up and running safely aviable in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQvaGV4by1sZWFuY2xvdWQtY291bnRlci1zZWN1cml0eQ==\">hexo-leancloud-counter-security<i class=\"fa fa-external-link-alt\"></i></span>.</p>\n<div class=\"tabs\" id=\"leancloud-counter\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#leancloud-counter-1\">Get App Keys →</a></li><li class=\"tab\"><a href=\"#leancloud-counter-2\">Installation →</a></li><li class=\"tab\"><a href=\"#leancloud-counter-3\">Hexo Config →</a></li><li class=\"tab\"><a href=\"#leancloud-counter-4\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"leancloud-counter-1\"><ol>\n<li>Create an account or log in to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jb25zb2xlLmxlYW5jbG91ZC5hcHAvbG9naW4=\">LeanCloud<i class=\"fa fa-external-link-alt\"></i></span>, and then click the button to create an application in <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jb25zb2xlLmxlYW5jbG91ZC5hcHAvYXBwcw==\">dashboard<i class=\"fa fa-external-link-alt\"></i></span>.<br> <img src=\"/images/valine-1.png\" alt=\"LeanCloud\" loading=\"lazy\"></li>\n<li>Go to the application you just created, select <code>Settings → App Keys</code> in the lower left corner, and you will see your APP ID and APP Key.<br> <img src=\"/images/valine-2.png\" alt=\"LeanCloud\" loading=\"lazy\"></li>\n</ol></div><div class=\"tab-pane\" id=\"leancloud-counter-2\"><p>Install <code>hexo-leancloud-counter-security</code> by executing the following command in <mark class=\"label info\">site root dir</mark>:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install hexo-leancloud-counter-security</span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"leancloud-counter-3\"><p>Edit <mark class=\"label info\">Hexo config file</mark> and add following content:</p>\n<figure class=\"highlight yml\"><figcaption><span>Hexo config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">leancloud_counter_security:</span></span><br><span class=\"line\"> <span class=\"attr\">enable_sync:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">app_id:</span> <span class=\"string\"><your</span> <span class=\"string\">app</span> <span class=\"string\">id></span></span><br><span class=\"line\"> <span class=\"attr\">app_key:</span> <span class=\"string\"><your</span> <span class=\"string\">app</span> <span class=\"string\">key></span></span><br><span class=\"line\"> <span class=\"attr\">username:</span> <span class=\"string\"><your</span> <span class=\"string\">username></span> <span class=\"comment\"># Will be asked while deploying if is left blank</span></span><br><span class=\"line\"> <span class=\"attr\">password:</span> <span class=\"string\"><your</span> <span class=\"string\">password></span> <span class=\"comment\"># Recommmended to be left blank. Will be asked while deploying if is left blank</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"leancloud-counter-4\"><p>Edit <mark class=\"label primary\">NexT config file</mark> and fill options under <code>leancloud_visitors</code> section.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\"># Show number of visitors to each article.</span></span><br><span class=\"line\"><span class=\"comment\"># You can visit https://www.leancloud.cn get AppID and AppKey.</span></span><br><span class=\"line\"><span class=\"attr\">leancloud_visitors:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">app_id:</span> <span class=\"comment\">#<app_id></span></span><br><span class=\"line\"> <span class=\"attr\">app_key:</span> <span class=\"comment\">#<app_key></span></span><br><span class=\"line\"> <span class=\"comment\"># Required for apps from CN region</span></span><br><span class=\"line\"> <span class=\"attr\">server_url:</span> <span class=\"comment\"># <your server url></span></span><br><span class=\"line\"> <span class=\"comment\"># Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security</span></span><br><span class=\"line\"> <span class=\"comment\"># If you don't care about security in lc counter and just want to use it directly</span></span><br><span class=\"line\"> <span class=\"comment\"># (without hexo-leancloud-counter-security plugin), set the `security` to `false`.</span></span><br><span class=\"line\"> <span class=\"attr\">security:</span> <span class=\"literal\">true</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h4 id=\"Firebase\"><a href=\"#Firebase\" class=\"headerlink\" title=\"Firebase\"></a>Firebase</h4><p>Firebase Analytics provides the functionality of visitor statistics.</p>\n<div class=\"tabs\" id=\"firestore\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#firestore-1\">Get apiKey & projectId →</a></li><li class=\"tab\"><a href=\"#firestore-2\">NexT Config</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"firestore-1\"><p>Login to <span class=\"exturl\" data-url=\"aHR0cHM6Ly9jb25zb2xlLmZpcmViYXNlLmdvb2dsZS5jb20vdS8wLw==\">Firebase<i class=\"fa fa-external-link-alt\"></i></span> to get apiKey and projectId. The Web API Key gets generated once you go into the "Authentication" section for the first time.</p>\n<p><img src=\"/images/firebase.png\" alt=\"Firebase\" loading=\"lazy\"></p>\n<p><span class=\"exturl\" data-url=\"aHR0cHM6Ly9maXJlYmFzZS5nb29nbGUuY29tL2RvY3MvZmlyZXN0b3JlLw==\">More detailed documentation<i class=\"fa fa-external-link-alt\"></i></span></p></div><div class=\"tab-pane\" id=\"firestore-2\"><p>Edit <mark class=\"label primary\">NexT config file</mark> and add or change <code>firestore</code> section:</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">firestore:</span></span><br><span class=\"line\"> <span class=\"attr\">enable:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">collection:</span> <span class=\"string\">articles</span> <span class=\"comment\">#required, a string collection name to access firestore database</span></span><br><span class=\"line\"> <span class=\"attr\">apiKey:</span> <span class=\"comment\">#required</span></span><br><span class=\"line\"> <span class=\"attr\">projectId:</span> <span class=\"comment\">#required</span></span><br></pre></td></tr></table></figure></div></div></div>\n\n<h4 id=\"Busuanzi-Counting-China\"><a href=\"#Busuanzi-Counting-China\" class=\"headerlink\" title=\"Busuanzi Counting (China)\"></a>Busuanzi Counting (China)</h4><div class=\"tabs\" id=\"busuanzi-counting\"><ul class=\"nav-tabs\"><li class=\"tab active\"><a href=\"#busuanzi-counting-1\">Global Settings →</a></li><li class=\"tab\"><a href=\"#busuanzi-counting-2\">Site UV Settings →</a></li><li class=\"tab\"><a href=\"#busuanzi-counting-3\">Site PV Settings →</a></li><li class=\"tab\"><a href=\"#busuanzi-counting-4\">Per-page PV Settings</a></li></ul><div class=\"tab-content\"><div class=\"tab-pane active\" id=\"busuanzi-counting-1\"><p>Edit <code>busuanzi_count</code> option in <mark class=\"label primary\">NexT config file</mark>.<br>When <code>enable: true</code>, global setting is enabled. If <code>total_visitors</code>, <code>total_views</code>, <code>post_views</code> are all <code>false</code>, Busuanzi only counts but never shows.</p></div><div class=\"tab-pane\" id=\"busuanzi-counting-2\"><p>When <code>total_visitors: true</code>, it will show site UV in footer. You can also use font-awesome by setting <code>total_visitors_icon</code> to the name of the icon.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">busuanzi_count:</span></span><br><span class=\"line\"> <span class=\"attr\">total_visitors:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">total_visitors_icon:</span> <span class=\"string\">fa</span> <span class=\"string\">fa-user</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"busuanzi-counting-3\"><p>When <code>total_views: true</code>, it will show site UV in footer. You can also use font-awesome by setting <code>total_views_icon</code> to the name of the icon.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">busuanzi_count:</span></span><br><span class=\"line\"> <span class=\"attr\">total_views:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">total_views_icon:</span> <span class=\"string\">fa</span> <span class=\"string\">fa-eye</span></span><br></pre></td></tr></table></figure></div><div class=\"tab-pane\" id=\"busuanzi-counting-4\"><p>When <code>post_views: true</code>, it will show page PV in post meta. You can also use font-awesome by setting <code>post_views_icon</code> to the name of the icon.</p>\n<figure class=\"highlight yml\"><figcaption><span>NexT config file</span></figcaption><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"attr\">busuanzi_count:</span></span><br><span class=\"line\"> <span class=\"attr\">post_views:</span> <span class=\"literal\">true</span></span><br><span class=\"line\"> <span class=\"attr\">post_views_icon:</span> <span class=\"string\">far</span> <span class=\"string\">fa-eye</span></span><br></pre></td></tr></table></figure></div></div></div>\n"}]