更多详请查看Hexo文档、Fluid主题文档、Fluid主题展示和功能介绍

Hexo写作流程

创建新帖

方法一

要创建新帖子或新页面，您可以运行以下命令：

$ hexo new [layout] </p> <p><code>post</code>是默认值<code>layout</code>，但您可以提供自己的。您可以通过编辑中的<code>default_layout</code>设置来更改默认布局<code>_config.yml</code>。</p> <p>Hexo 中有 3 种默认布局：<code>post</code>,<code>page</code>和<code>draft</code>. 他们每个人创建的文件都保存到不同的路径。新创建的帖子将保存到该<code>source/_posts</code>文件夹中。</p> <p><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://i.loli.net/2021/10/02/h2Bjabc7RuN1UXS.png"></p> <p>如果您不希望使用主题处理文章（帖子/页面），请将<code>layout: false</code>其设置为头版。有关更多详细信息，请参阅<a target="_blank" rel="noopener" href="https://hexo.io/docs/front-matter#Layout">本节</a>。</p> </li> <li><p>方法二</p> <p>直接在目录下找 \source_posts,并在文件夹中添加写好的.md文件</p> </li> </ul> <h2 id="生成静态文件"><a href="#生成静态文件" class="headerlink" title="生成静态文件"></a>生成静态文件</h2><p>$ hexo generate<br>也可简写为：<br>$ hexo g </p> <h2 id="启动服务器"><a href="#启动服务器" class="headerlink" title="启动服务器"></a>启动服务器</h2><p>这一步也可以跳过，用于查看在本地查看生成的静态网页的效果，因为部署到服务器需要一定的时间，所以一般在本地先查看。</p> <p>$ hexo server </p> <p>启动服务器。默认情况下，访问网址为： <code>http://localhost:4000/</code>。</p> <h2 id="部署网站"><a href="#部署网站" class="headerlink" title="部署网站"></a>部署网站</h2><p>这一步通常需要一定的时间，具体时间不等，需要多次刷新查看。</p> <p>$ hexo deploy<br>可简写为：<br>$ hexo d </p> <h2 id="清楚缓存"><a href="#清楚缓存" class="headerlink" title="清楚缓存"></a>清楚缓存</h2><p>$ hexo clean </p> <p>清除缓存文件 (<code>db.json</code>) 和已生成的静态文件 (<code>public</code>)。</p> <p>在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。</p> <p>更多命令查看<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/commands.html">Hexo指令</a></p> <h1 id="Hexo写作"><a href="#Hexo写作" class="headerlink" title="Hexo写作"></a>Hexo写作</h1><h2 id="文档名称"><a href="#文档名称" class="headerlink" title="文档名称"></a>文档名称</h2><ul> <li>通常情况下Hexo 使用帖子标题作为其文件名。您可以编辑<code>new_post_name</code>设置<code>_config.yml</code>以更改默认文件名。例如，<code>:year-:month-:day-:title.md</code>将使用帖子创建日期作为文件名的前缀。您可以使用以下占位符：<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://i.loli.net/2021/10/02/SxLoZitAIg1dfXH.png" alt="image-20211002100532390"></li> </ul> <h2 id="草稿"><a href="#草稿" class="headerlink" title="草稿"></a>草稿</h2><p>之前，我们提到了 Hexo 中的一个特殊布局：<code>draft</code>. 使用此布局初始化的帖子将保存到该<code>source/_drafts</code>文件夹中。您可以使用该<code>publish</code>命令将草稿移动到<code>source/_posts</code>文件夹中。<code>publish</code>与<code>new</code>命令的工作方式类似。</p> <p>$ hexo publish [布局] <title> </p> <p>默认情况下不显示草稿。您可以<code>--draft</code>在运行 Hexo 时添加该选项或启用该<code>render_drafts</code>设置<code>_config.yml</code>以渲染草稿。</p> <h2 id="脚手架"><a href="#脚手架" class="headerlink" title="脚手架"></a>脚手架</h2><p>创建帖子时，Hexo 将根据文件<code>scaffolds</code>夹中的相应文件构建文件。例如：</p> <p>$ hexo 新照片“我的相册” </p> <p>当您运行此命令时，Hexo 将尝试<code>photo.md</code>在<code>scaffolds</code>文件夹中查找并基于它构建帖子。脚手架中提供以下占位符：</p> <p><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://i.loli.net/2021/10/02/KHGzyM5OVckYCDS.png" alt="image-20211002103859285"></p> <p><a target="_blank" rel="noopener" href="https://blog.csdn.net/mqdxiaoxiao/article/details/96774636">Hexo文章的Scaffolds脚手架</a></p> <h2 id="支持格式"><a href="#支持格式" class="headerlink" title="支持格式"></a>支持格式</h2><p>以任何格式编写的 Hexo 支持帖子，只要安装了相应的渲染器插件即可。</p> <p>例如，Hexo默认已安装<code>hexo-renderer-marked</code>并<code>hexo-renderer-ejs</code>安装，因此您可以<code>markdown</code>在<code>ejs</code>. 如果您已经<code>hexo-renderer-pug</code>安装，那么您甚至可以用 pug 模板语言编写您的帖子。</p> <p>您可以重命名您的文章和改变文件扩展名<code>.md</code>来<code>.ejs</code>，然后HEXO将使用<code>hexo-renderer-ejs</code>来呈现文件，这样做对其他格式。</p> <h2 id="文章头"><a href="#文章头" class="headerlink" title="文章头"></a>文章头</h2><p>Front-matter 是文件开头的 YAML 或 JSON 块，用于为您的作品配置设置。以 YAML 编写时，前面的内容以三个破折号结尾，以 JSON 编写时以三个分号结尾。</p> <p>YAML</p> <p>-–<br>标题： Hello World<br>日期： 2013 /7/13 20 :46:25<br>-– </p> <p>JSON</p> <p>“title”: “Hello World”,<br>“date”: “2013/7/13 20:46:25”<br>;;; </p> <p>markdown</p> <p>-–<br>title: Hexo写作格式 //题目<br>date: //日期<br>tags: //标签<br>categories: //分类<br>index_img: //文章图片<br>description: //这是显示在首页的概述，正文内容均会被隐藏。<br>-– </p> <p>文章内容对应下方的位置，不设置title的话默认是文章内容，不是文件名</p> <p><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://i.loli.net/2021/10/02/2TnRSVeqIvltUFb.png" alt="image-20211002101243201"></p> <p>更多格式如下：</p> <p><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://i.loli.net/2021/10/02/GE95OrNfeWax3hI.png" alt="image-20211002104846366"></p> <h2 id="布局"><a href="#布局" class="headerlink" title="布局"></a>布局</h2><p>默认布局为<code>post</code>，根据中<a target="_blank" rel="noopener" href="https://hexo.io/docs/configuration#Writing"><code>default_layout</code></a>设置的值<code>_config.yml</code>。当文章中的布局被禁用 ( <code>layout: false</code>) 时，它将不会使用主题进行处理。但是，它仍然会被任何可用的渲染器渲染：如果一篇文章是用 Markdown 编写的，并且安装了 Markdown 渲染器（如默认的<a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo-renderer-marked">hexo-renderer-marked</a>），它将被渲染为 HTML。</p> <p>无论布局如何，<a target="_blank" rel="noopener" href="https://hexo.io/docs/tag-plugins">标签插件</a>总是被处理，除非被<code>disableNunjucks</code>设置或<a target="_blank" rel="noopener" href="https://hexo.io/api/renderer#Disable-Nunjucks-tags">渲染器</a>禁用。</p> <h2 id="类别和标签"><a href="#类别和标签" class="headerlink" title="类别和标签"></a>类别和标签</h2><p>只有帖子支持使用类别和标签。类别按顺序应用于帖子，从而形成分类和子分类的层次结构。标签都定义在同一层级上，因此它们出现的顺序并不重要。</p> <p>类别：<br>- 运动<br>- 棒球<br>标签：<br>- 受伤<br>- 格斗<br>- 令人震惊 </p> <p>如果要应用多个类别层次结构，请使用名称列表而不是单个名称。如果 Hexo 在帖子上看到任何以这种方式定义的类别，它将将该帖子的每个类别视为自己独立的层次结构。</p> <p>类别：<br>- [体育，棒球]<br>- [美国职棒大联盟，美国联盟，波士顿红红袜]<br>- [美国职棒大联盟，美国的同盟，新的纽约洋基队]<br>- 对抗 </p> <h1 id="Hexo语法"><a href="#Hexo语法" class="headerlink" title="Hexo语法"></a>Hexo语法</h1><h2 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h2><ul> <li>首先fluid不支持[toc]显示整个文章的目录</li> </ul> <p>标题的语法与markdown无区别，如下：</p> <p>/*<br># 一级标题<br>## 二级标题<br>### 三级标题<br>#### 四级标题<br>##### 五级标题<br>###### 六级标题<br>(In addition: do not foget the space behind #.)<br>*/ </p> <h2 id="字体Typeface"><a href="#字体Typeface" class="headerlink" title="字体Typeface"></a>字体Typeface</h2><p>/*<br>加粗 **内容**<br>代码高亮显示 ==内容==<br>删除线 <del>内容</del><br>斜体 *内容*<br>*/ </p> <p>加粗： <strong>加粗的内容</strong></p> <p>代码高亮显示：高亮的内容</p> <p>删除线：有删除线的内容</p> <p>斜体： <em>斜体内容</em></p> <h2 id="引用Quote"><a href="#引用Quote" class="headerlink" title="引用Quote"></a>引用Quote</h2><p>/*<br>>引用内容<br>>>引用内容<br>>>>yy内容<br>*/ </p> <blockquote> <p>内容</p> <blockquote> <p>内容</p> </blockquote> <blockquote> <blockquote> <p>内容</p> </blockquote> </blockquote> </blockquote> <h2 id="分割线Lines"><a href="#分割线Lines" class="headerlink" title="分割线Lines"></a>分割线Lines</h2><p>/*<br>分割线1：<br>-–<br>分割线2：<br>***<br>*/ </p> <p>分割线1：</p> <hr> <p>分割线2：</p> <hr> <h2 id="图像Picture"><a href="#图像Picture" class="headerlink" title="图像Picture"></a>图像Picture</h2><p>//插入在线图片||本地图片 #注意必须用英文#<br>![图片名字](图片路径or地址)<br> 如：![](C:\Users\Husile\Desktop\=\心理学\民大\98E1376B2FA94D942168E531C228FECA.jpg) </p> <h5 id="插入本地图片"><a href="#插入本地图片" class="headerlink" title="插入本地图片"></a>插入本地图片</h5><p><a target="_blank" rel="noopener" href="https://imgchr.com/i/DViYRA"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://s3.ax1x.com/2020/11/17/DViYRA.gif" alt="DViYRA.gif"></a></p> <ul> <li>利用图床工具，可将本地图片保存到云并生成相应连接</li> </ul> <p>插入网络链接图片</p> <p><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1141259048,554497535&fm=26&gp=0.jpg" alt="test"></p> <h2 id="超链接Hyperlink"><a href="#超链接Hyperlink" class="headerlink" title="超链接Hyperlink"></a>超链接Hyperlink</h2><p>//超链接语法<br>[名字](地址链接)<br>如：[我的给github](<a target="_blank" rel="noopener" href="https://github.com/Bsheepcoder/New/_thread/_learn/tree/master">https://github.com/Bsheepcoder/New\_thread\_learn/tree/master</a>) </p> <h5 id="超链接语法："><a href="#超链接语法：" class="headerlink" title="超链接语法："></a>超链接语法：</h5><p><a target="_blank" rel="noopener" href="https://github.com/Bsheepcoder/New_thread_learn/tree/master">我的给github</a></p> <h2 id="列表Listing"><a href="#列表Listing" class="headerlink" title="列表Listing"></a>列表Listing</h2><p>//无序列表 · 这种<br>- 内容<br>- 内容<br>//有序(1+.+名称) 要加空格<br> 1. 哈哈<br> 2. 嘻嘻 </p> <h5 id="无序："><a href="#无序：" class="headerlink" title="无序："></a>无序：</h5><ul> <li>内容1</li> <li>内容2</li> </ul> <h5 id="有序："><a href="#有序：" class="headerlink" title="有序："></a>有序：</h5><ol> <li>内容</li> <li>内容</li> </ol> <h2 id="表格Tabulation"><a href="#表格Tabulation" class="headerlink" title="表格Tabulation"></a>表格Tabulation</h2><p>//表格代码很复杂，一般不用语言写 </p> <table> <thead> <tr> <th>1</th> <th>0</th> <th>0</th> </tr> </thead> <tbody><tr> <td>0</td> <td>1</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>1</td> </tr> </tbody></table> <pre><code>//直接右键插入/ctrl t </code></pre> <p>1</p> <p>0</p> <p>0</p> <p>0</p> <p>1</p> <p>0</p> <p>0</p> <p>0</p> <p>1</p> <h2 id="另In-addition"><a href="#另In-addition" class="headerlink" title="另In addition"></a>另In addition</h2><p>//常用的快捷键也很好用 </p> <pre><code>ctrl 1 ~ 6 标题 ctrl shift k/m 代码块或公式块 ctrl t 插入表格 </code></pre> <h2 id="问题与解决"><a href="#问题与解决" class="headerlink" title="问题与解决"></a>问题与解决</h2><ul> <li><p><strong>问题原因</strong>：远程库与本地库不一致造成的，在hint中也有提示把远程库同步到本地库就可以了。</p> <p><strong>解决办法</strong>：使用命令行：</p> </li> </ul> <p>git pull –rebase origin master </p> <p><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://img-blog.csdnimg.cn/20190103111754961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RpZXRpbWUxOTQz,size_16,color_FFFFFF,t_70" alt="运行图象"></p> <p>成功后即可push</p> <h1 id="Hexo-数学公式"><a href="#Hexo-数学公式" class="headerlink" title="Hexo 数学公式"></a>Hexo 数学公式</h1><ul> <li>参考 <a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_38496329/article/details/104065659">https://blog.csdn.net/qq_38496329/article/details/104065659</a></li> </ul> </article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://bsheepcoder.github.io">Bsheepcoder</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://bsheepcoder.github.io/2021/10/13/hexo-skill/">https://bsheepcoder.github.io/2021/10/13/hexo-skill/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来源 <a href="https://bsheepcoder.github.io" target="_blank">Q's blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/hexo/">Hexo</a></div><div class="post-share"><div class="social-share" data-image="/img/page1.png" data-sites="facebook,x,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related" href="/2021/10/13/linux-advanced/" title="Linux笔记(从基础到高级):后篇"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info"><div class="info-1"><div class="info-item-1">上一篇</div><div class="info-item-2">Linux笔记(从基础到高级):后篇</div></div><div class="info-2"><div class="info-item-1">基于CentOS 7 ，CentOS官方 Uuntu root用户 python APT软件管理和远程登陆软件操作相关命令更新ubantu软件下载地址先备份文件安装远程登陆 netstat -anp | more 没有22号端口 ifconfig linux对Linux Centos8.1/8.2生产环境选择最小安装日志管理系统常用日志日志管理服务 rsyslogd 用户是主机名字实例日志轮替把自己的日志加入日志轮替日志轮替机制查看内存日志 Linux系统定制 Linux内核目录 init中的main.c void main(void) Linux内核最新版和内核升级 yum update kernel //升级内核 Linux的系统与备份 dump restore Linux可视化管理webmin和bt运维工具webin bt ...</div></div></div></a><a class="pagination-related" href="/2021/10/13/hexo-fluidquestion/" title="Hexo-Fluid出现问题与解决"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-right"><div class="info-1"><div class="info-item-1">下一篇</div><div class="info-item-2">Hexo-Fluid出现问题与解决</div></div><div class="info-2"><div class="info-item-1">更多详请查看Hexo文档、Fluid主题文档、Fluid主题展示和功能介绍 hexo页面代码块格式错误问题：我自己有一个习惯，当我要写代码块的时候，我习惯这样写: 这样在Typora中是支持的，但是部署到Hexo上时就会出现错误，导致代码块错位。方法：方法就是在写代码块的时候，避免用 - ，各一行也不会出错，或者直接不使用 - 分级。 hexo s时提示4000端口被占用问题有的时候在执行‘hexo sever’的命令时,提示以下内容： FATAL Port 4000 has been used. Try other port instead. 方法：出现问题的原因是4000端口被占用，这个端口是可以随意设置的不是固定的，可以输入以指定端口开启服务： hexo server -p 4001 或者在可以在站点下的文件_config.yml内加上如下代码更改hexo-server运行时的端口号： server: port: 4001 #端口号随意，默认是4000,可以更改为其他 compress: true header: true hexo...</div></div></div></a></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><a class="pagination-related" href="/2021/10/13/hexo-fluidquestion/" title="Hexo-Fluid出现问题与解决"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-13</div><div class="info-item-2">Hexo-Fluid出现问题与解决</div></div><div class="info-2"><div class="info-item-1">更多详请查看Hexo文档、Fluid主题文档、Fluid主题展示和功能介绍 hexo页面代码块格式错误问题：我自己有一个习惯，当我要写代码块的时候，我习惯这样写: 这样在Typora中是支持的，但是部署到Hexo上时就会出现错误，导致代码块错位。方法：方法就是在写代码块的时候，避免用 - ，各一行也不会出错，或者直接不使用 - 分级。 hexo s时提示4000端口被占用问题有的时候在执行‘hexo sever’的命令时,提示以下内容： FATAL Port 4000 has been used. Try other port instead. 方法：出现问题的原因是4000端口被占用，这个端口是可以随意设置的不是固定的，可以输入以指定端口开启服务： hexo server -p 4001 或者在可以在站点下的文件_config.yml内加上如下代码更改hexo-server运行时的端口号： server: port: 4001 #端口号随意，默认是4000,可以更改为其他 compress: true header: true hexo...</div></div></div></a><a class="pagination-related" href="/2022/02/15/hexo-gitpage&giteepage/" title="Hexo静态网页同时部署GitPage和GiteePage"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2022-02-15</div><div class="info-item-2">Hexo静态网页同时部署GitPage和GiteePage</div></div><div class="info-2"><div class="info-item-1">参考资料使用hexo+github搭建个人博客遇到过哪些坑部署hexo时出错：fatal: Could not read from remote repository.Error: Spawn failed hexo | 同时提交到 github 和 gitee 步骤因为我已经先在gitpage部署完成，只需添加gitee部署的路径即可。如何部署在gitpage 准备好gitee的账号在git中创建ssh密钥注意：该命令是在本地PC上执行ssh-keygen -t rsa -C “xxxxx@xxxxx.com“ Generating public/private rsa key pair… 在提示的路径中找到ssh生成的.pub文件，打开，将公钥保存到仓库，详细参考在Hexo的根目录下找到_config.yml文件，修改deploy项为如下：此时执行如下，即可实现同时部署 hexo ghexo d 结果 http://bsheepcoder.gitee.io/blog/ 可能我的config文件配置还有问题，页面切换之后只有内...</div></div></div></a><a class="pagination-related" href="/2022/02/15/hexo-google-sitemap1/" title="Hexo网站自动生成站点地图提交Google"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2022-02-15</div><div class="info-item-2">Hexo网站自动生成站点地图提交Google</div></div><div class="info-2"><div class="info-item-1">参考文献 Hexo进阶-生成站点地图（Sitemap） Google站点地图官方文档让Google搜索到GitHub Pages 下文取自google官方文档在以下情况下，您可能需要站点地图： **网站规模很大。**在这种情况下，Google 网页抓取工具更有可能在抓取时漏掉部分新网页或最近更新的网页。 **网站有大量内容页归档，这些内容页之间互不关联或缺少有效链接。**如果您的网站网页没有自然地相互引用，那么您可以在站点地图中列出这些网页，确保 Google 不会漏掉其中某些网页。 **网站为新网站且指向该网站的外部链接不多。**Googlebot 及其他网页抓取工具是通过跟踪网页之间的链接来抓取网页的。因此，如果没有其他网站链接到您的网页，Google 可能不会发现您的网页。 **您的网站包含大量富媒体内容（视频、图片）或显示在 Google 新闻中。**如果提供了站点地图，在适当情况下，Google 能将站点地图中的其他信息纳入搜索范围。在以下情况下，您可能不需要站点地图： **您的网站规模“较小”。**规模较小是指网站上的网页数不超过 500 个。（只有您认...</div></div></div></a><a class="pagination-related" href="/2022/02/17/hexo-mermaid/" title="Mermaid从入门到入土"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2022-02-17</div><div class="info-item-2">Mermaid从入门到入土</div></div><div class="info-2"><div class="info-item-1"> 转载自 https://zhuanlan.zhihu.com/p/355997933 感觉Mermaid还是有点鸡肋，开启之后界面加载明显慢了很多，还需要优化吧，实现的样式也比较单一。概述什么是Mermaid？ Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表。项目地址：https://github.com/mermaid-js/mermaid（需要将梯子设置成全局模式才能访问）怎么使用Mermaid？使用特定的Mermaid渲染器； **使用集成了Mermaid渲染功能的Markdown编辑器，如Typora。**使用时，需要将代码块的语言选择为Mermaid。 Typora是宇宙第一笔记软件，不接受反驳 Mermaid能绘制哪些图？饼状图：使用pie关键字，具体用法后文将详细介绍流程图：使用graph关键字，具体用法后文将详细介绍序列图：使用sequenceDiagram关键字甘特图：使用gantt关键字类图：使用classDiagram关键字状态图：使用...</div></div></div></a><a class="pagination-related" href="/2022/03/18/hexo-butterfly/" title="Hexo主题换为butterfly"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2022-03-18</div><div class="info-item-2">Hexo主题换为butterfly</div></div><div class="info-2"><div class="info-item-1">参考资料 butterfly主题文档网页 https://butterfly.js.org/ </div></div></div></a></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="/img/page1.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">Bsheepcoder</div><div class="author-info-description">Bsheepcoder 的技术博客，记录 AI、编程、计算机科学的学习笔记</div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">123</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">32</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">25</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Bsheepcoder"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons"><a class="social-icon" href="https://github.com/Bsheepcoder" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">欢迎来到 Q's blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Hexo%E5%86%99%E4%BD%9C%E6%B5%81%E7%A8%8B"><span class="toc-number">1.</span> <span class="toc-text">Hexo写作流程</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E6%96%B0%E5%B8%96"><span class="toc-number">1.1.</span> <span class="toc-text">创建新帖</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2022/12/06/ai-antalgorithm/" title="演化算法">演化算法</a><time datetime="2022-12-05T16:00:00.000Z" title="发表于 2022-12-06 00:00:00">2022-12-06</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2022/11/25/latex-bj1/" title="Texstudio基本操作">Texstudio基本操作</a><time datetime="2022-11-24T16:00:00.000Z" title="发表于 2022-11-25 00:00:00">2022-11-25</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2022/11/22/%E5%89%8D%E7%AB%AF-bootstrap1/" title="Bootstrap框架认识到实战">Bootstrap框架认识到实战</a><time datetime="2022-11-21T16:00:00.000Z" title="发表于 2022-11-22 00:00:00">2022-11-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2022/11/19/python-highlevel1/" title="Python高级特性总结">Python高级特性总结</a><time datetime="2022-11-18T16:00:00.000Z" title="发表于 2022-11-19 00:00:00">2022-11-19</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2022/11/17/ai-cuda/" title="对CUDA的认识">对CUDA的认识</a><time datetime="2022-11-16T16:00:00.000Z" title="发表于 2022-11-17 00:00:00">2022-11-17</time></div></div></div></div></div></div></main><footer id="footer"><div class="footer-other"><div class="footer-copyright"><span class="copyright">© 2021 - 2026 By Bsheepcoder</span><span class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo 8.1.2</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly 5.5.5</a></span></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=5.5.5"></script><script src="/js/main.js?v=5.5.5"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1.14/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar@0.1.16/dist/snackbar.min.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><i class="fas fa-spinner fa-pulse" id="loading-status" hidden="hidden"></i><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="text-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据加载中</span></div><div class="local-search-input"><input placeholder="搜索文章..." type="text"/></div><hr/><div id="local-search-results"></div><div class="ais-Pagination" id="local-search-pagination" style="display:none;"><ul class="ais-Pagination-list"></ul></div><div id="local-search-stats"></div></div><div id="search-mask"></div><script src="/js/search/local-search.js?v=5.5.5"></script></div></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>