代码拉取完成，页面将自动刷新
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Butterfly主题安装文档(一)之快速开始</title>
<url>/posts/22836fb1-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><p>有的人认为 hexo 自带的主题<code>landscape</code>非常难看，那么我们有没有好看的主题可选呢？</p>
<div class="hide-block"><button type="button" class="hide-button button--animated" style="background-color: bg;color: color">查看回答？
</button><span class="hide-content"><p>当然是有的，有不少的人给我们提供了十分多的主题，查看主题库：<a href="https://hexo.io/themes/">https://hexo.io/themes/</a></p>
</span></div>
<p>hexo-theme-butterfly 是基于 Molunerfinn 的 hexo-theme-melody 的基础上进行开发的。<br><strong>接下来推荐几款觉得好看的主题库？</strong></p>
<ul>
<li>Butterfly：这款主题非常好看，好用，功能十分齐全，当然本站也是用的该主题</li>
</ul>
<h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><div class="tabs" id="tab"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tab-1"><i class="fab fa-git-square"></i>Git安装</button></li><li class="tab"><button type="button" data-href="#tab-2"><i class="fab fa-npm"></i>npm安装</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tab-1"><p>在您的项目根目录下：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tab-2"><blockquote><p>此方法只支持 Hexo 5.0.0 以上版本</p>
</blockquote>
在您的项目根目录下：
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm i hexo-theme-butterfly</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button></div></div></div>
<h1 id="应用主题"><a href="#应用主题" class="headerlink" title="应用主题"></a>应用主题</h1><p>修改站点配置文件<code>_config.yml</code>，把主题改为 <code>butterfly</code></p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">theme:</span> <span class="string">butterfly</span></span><br></pre></td></tr></table></figure>
<h2 id="安装插件"><a href="#安装插件" class="headerlink" title="安装插件"></a>安装插件</h2><p>如果沒有 pug 以及 stylus 的渲染器，还需要下载，否则在项目运行时会报错：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure>
<h2 id="升级建议"><a href="#升级建议" class="headerlink" title="升级建议"></a>升级建议</h2><p>为了減少升级主题带来的不便，我们还需要做以下操作：采用如下两种方式中的任意一种都行<br><strong>方式一：</strong><br>把主题文件夹中的 <code>_config.yml</code> 复制到 Hexo 根目录下，同时重命名为 <code>_config.butterfly.yml</code>。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">将</span><br><span class="line">- blog</span><br><span class="line"> - themes</span><br><span class="line"> - Butterfly</span><br><span class="line"> - config.yml</span><br><span class="line">复制到</span><br><span class="line">- blog</span><br><span class="line"> - _config.butterfly.yml (将_config.yml重命名)</span><br></pre></td></tr></table></figure>
<p><strong>方式二：</strong><br>推荐把主题默认的配置文件<code>_config.yml</code> 复制到 Hexo 根目录下的<code>source/_data/</code>目录下，然后将文件名改为<code>butterfly.yml</code>（如果 <code>source/_data/</code> 的目录不存在则创建一个）。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">将</span><br><span class="line">- blog</span><br><span class="line"> - themes</span><br><span class="line"> - Butterfly</span><br><span class="line"> - config.yml</span><br><span class="line">复制到</span><br><span class="line">- blog</span><br><span class="line"> - source</span><br><span class="line"> - _data</span><br><span class="line"> - butterfly.yml (将_config.yml重命名)</span><br></pre></td></tr></table></figure>
<h1 id="主题页面配置"><a href="#主题页面配置" class="headerlink" title="主题页面配置"></a>主题页面配置</h1><h2 id="Front-matter"><a href="#Front-matter" class="headerlink" title="Front-matter"></a>Front-matter</h2><p>Front-matter 是每个markdown文件最上方以 — 分隔的区域，用于指定文章的参数。</p>
<div class="note info"><p>如果可选的参数，可根据自己的需要添加，不用全部都写在 markdown里， 是在每一个markdown文件里配置</p>
</div>
<h3 id="Page-Front-matter"><a href="#Page-Front-matter" class="headerlink" title="Page Front-matter"></a>Page Front-matter</h3><figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 【必填】页面标题</span><br><span class="line">date: 【必填】页面创建日期</span><br><span class="line">type: 【必填】标签、分类和友情链接三个页面必须填写</span><br><span class="line">updated: 【可选】页面更新日期</span><br><span class="line">comments: 【可选】页面评论模块(默认为true)</span><br><span class="line">description: 【可选】页面描述</span><br><span class="line">keywords: 【可选】页面关键字</span><br><span class="line">top<span class="emphasis">_img: 【可选】页面顶部图片</span></span><br><span class="line"><span class="emphasis">mathjax: 【可选】展示 mathjax (当设置 mathjax 的 per_</span>page: false 时，才需要配置，默认 false)</span><br><span class="line">katex: 【可选】展示 katex (当设置 katex 的 per<span class="emphasis">_page: false 时，才需要配置，默认 false)</span></span><br><span class="line"><span class="emphasis">aside: 【可选】展示侧边栏 (默认 true)</span></span><br><span class="line"><span class="emphasis">aplayer： 【可选】在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐配置</span></span><br><span class="line"><span class="emphasis">highlight_</span>shrink： 【可选】配置代码框是否展开 (true/false)(默认设置为 highlight<span class="emphasis">_shrink 的配置)</span></span><br><span class="line"><span class="emphasis">---</span></span><br></pre></td></tr></table></figure>
<h3 id="Post-Front-matter"><a href="#Post-Front-matter" class="headerlink" title="Post Front-matter"></a>Post Front-matter</h3><figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 【必需】文章标题</span><br><span class="line">date: 【必需】文章创建日期</span><br><span class="line">updated: 【可选】文章更新日期</span><br><span class="line">tags: 【可选】文章标签</span><br><span class="line">categories: 【可选】文章分类</span><br><span class="line">keywords: 【可选】文章关键字</span><br><span class="line">description: 【可选】文章描述</span><br><span class="line">top<span class="emphasis">_img: 【可选】文章顶部图片</span></span><br><span class="line"><span class="emphasis">comments： 【可选】显示文章评论模块 (默认 true)</span></span><br><span class="line"><span class="emphasis">cover: 【可选】文章缩略图 (如果没有设置 top_</span>img, 文章页顶部将显示缩略图，可设为 false / 图片地址 / 留空)</span><br><span class="line">toc: 【可选】显示文章 TOC (默认为设置中 toc 的 enable 配置)</span><br><span class="line">toc<span class="emphasis">_number: 【可选】显示 toc_</span>number (默认为设置中 toc 的 number 配置)</span><br><span class="line">auto<span class="emphasis">_open: 【可选】是否自动打开 TOC (默认为设置中 toc 的 auto_</span>open 配置)</span><br><span class="line">copyright: 【可选】显示文章版权模块 (默认为设置中 post<span class="emphasis">_copyright 的 enable 配置)</span></span><br><span class="line"><span class="emphasis">copyright_</span>author: 【可选】文章版权模块的文章作者</span><br><span class="line">copyright<span class="emphasis">_author_</span>href: 【可选】文章版权模块的文章作者链接</span><br><span class="line">copyright<span class="emphasis">_url: 【可选】文章版权模块的文章连结链接</span></span><br><span class="line"><span class="emphasis">copyright_</span>info: 【可选】文章版权模块的版权声明文字</span><br><span class="line">mathjax: 【可选】显示 mathjax (当设置 mathjax 的 per<span class="emphasis">_page: false 时，才需要配置，默认 false)</span></span><br><span class="line"><span class="emphasis">katex: 【可选】显示 katex (当设置 katex 的 per_</span>page: false 时，才需要配置，默认 false)</span><br><span class="line">aplayer: 【可选】在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐 配置</span><br><span class="line">highlight<span class="emphasis">_shrink：【可选】配置代码框是否展开 (true/false)(默认为设置中 highlight_</span>shrink 的配置)</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<h1 id="标签页"><a href="#标签页" class="headerlink" title="标签页"></a>标签页</h1><p>在项目根目录下，在命令行输入：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo new page tags</span><br></pre></td></tr></table></figure>
<p>你会找到 <code>source/tags/index.md</code> 这个文件, 修改这个文件内容：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 标签</span><br><span class="line">date: 2020-08-28 14:17:49</span><br><span class="line">type: "tags"</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<h1 id="分类页"><a href="#分类页" class="headerlink" title="分类页"></a>分类页</h1><p>在项目根目录下，在命令行输入：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo new page categories</span><br></pre></td></tr></table></figure>
<p>你会找到 <code>source/categories/index.md</code> 这个文件, 修改这个文件内容：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 分类</span><br><span class="line">date: 2020-08-28 14:17:49</span><br><span class="line">type: "categories"</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<h1 id="友情链接"><a href="#友情链接" class="headerlink" title="友情链接"></a>友情链接</h1><p>在项目根目录下，在命令行输入：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo new page link</span><br></pre></td></tr></table></figure>
<p>你会找到 <code>source/link/index.md</code> 这个文件, 修改这个文件内容：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: 友情链接</span><br><span class="line">date: 2020-08-28 14:17:49</span><br><span class="line">type: "link"</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<h2 id="新增友情链接"><a href="#新增友情链接" class="headerlink" title="新增友情链接"></a>新增友情链接</h2><p>在 Hexo 项目目录中的 <code>source/_data</code>，创建一个文件 <code>link.yml</code>, 并写入如下内容：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">友情链接</span></span><br><span class="line"> <span class="attr">class_desc:</span> <span class="string">那些人，那些事</span></span><br><span class="line"> <span class="attr">link_list:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">JerryC</span></span><br><span class="line"> <span class="attr">link:</span> <span class="string">https://jerryc.me/</span></span><br><span class="line"> <span class="attr">avatar:</span> <span class="string">https://jerryc.me/image/avatar.png</span></span><br><span class="line"> <span class="attr">descr:</span> <span class="string">今日事,今日毕</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Hexo</span></span><br><span class="line"> <span class="attr">link:</span> <span class="string">https://hexo.io/zh-tw/</span></span><br><span class="line"> <span class="attr">avatar:</span> <span class="string">https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg</span></span><br><span class="line"> <span class="attr">descr:</span> <span class="string">快速、简单且强大的网誌框架</span></span><br><span class="line"><span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">网站</span></span><br><span class="line"> <span class="attr">class_desc:</span> <span class="string">值得推荐的网站</span></span><br><span class="line"> <span class="attr">link_list:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Youtube</span></span><br><span class="line"> <span class="attr">link:</span> <span class="string">https://www.youtube.com/</span></span><br><span class="line"> <span class="attr">avatar:</span> <span class="string">https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png</span></span><br><span class="line"> <span class="attr">descr:</span> <span class="string">视频网站</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Weibo</span></span><br><span class="line"> <span class="attr">link:</span> <span class="string">https://www.weibo.com/</span></span><br><span class="line"> <span class="attr">avatar:</span> <span class="string">https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png</span></span><br><span class="line"> <span class="attr">descr:</span> <span class="string">中国最大社交分享平台</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Twitter</span></span><br><span class="line"> <span class="attr">link:</span> <span class="string">https://twitter.com/</span></span><br><span class="line"> <span class="attr">avatar:</span> <span class="string">https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png</span></span><br><span class="line"> <span class="attr">descr:</span> <span class="string">社交分享平台</span></span><br></pre></td></tr></table></figure>
<p>可以按自己的友链修改<br><code>class_name</code> 和 <code>class_desc</code> 支持 <code>html</code> 格式书写，如不需要，也可以留空。<br>友情链接界面也可以由用户自己自定义，只需要在友情链接的 md 档设置就行，以普通的 Markdown 格式书写。<br>浏览器地址栏输入：<code>http://localhost:4000/link/</code>就可会出现如下效果<br><img src="https://img-blog.csdnimg.cn/20201209151752452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h1 id="音乐"><a href="#音乐" class="headerlink" title="音乐"></a>音乐</h1><p>音乐界面使用了插件 <code>hexo-tag-aplayer</code><br>具体使用方法请参考插件<a href="https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md">文档</a></p>
<h1 id="电影"><a href="#电影" class="headerlink" title="电影"></a>电影</h1><p>电影界面使用了插件 <code>hexo-douban</code><br>具体使用方法请参考插件的<a href="https://github.com/mythsman/hexo-douban">文档</a>。<br><strong>注意：</strong><code>hexo-douban</code> 会主动生成页面，所以不需要自己创建。对应网页的 <code>top_img</code> 可以在主题配置文件中修改。</p>
<h1 id="404页面"><a href="#404页面" class="headerlink" title="404页面"></a>404页面</h1><p>主题内置了一个简单的 404 页面，可在设置中开启</p>
<div class="note warning"><p>本地预览时，访问出错的网站是不会跳到 404 页面的。如需本地预览，请访问 <code>http://localhost:4000/404.html</code></p>
</div>
<p>修改配置文件<code>_config.butterfly.yml</code>:</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 404页面</span></span><br><span class="line"><span class="comment"># A simple 404 page</span></span><br><span class="line"><span class="attr">error_404:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">subtitle:</span> <span class="string">页面没有找到</span></span><br><span class="line"> <span class="attr">background:</span> <span class="string">https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png</span></span><br></pre></td></tr></table></figure>
<p>404页面如下：<br><img src="https://img-blog.csdnimg.cn/20200828145513853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzY1MzY3,size_16,color_FFFFFF,t_70" alt="404页面"><br>原文链接：<a href="https://demo.jerryc.me/posts/dc584b87/">https://demo.jerryc.me/posts/dc584b87/</a></p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>Butterfly</tag>
<tag>主题</tag>
</tags>
</entry>
<entry>
<title>在 Hexo 中使用 artitalk 新增说说功能</title>
<url>/posts/22836fb0-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><blockquote>
<p>主要使用 <a href="https://artitalk.js.org/doc.html#%F0%9F%9A%80-%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8">artitalk.js</a></p>
</blockquote>
<h2 id="LeanCloud-的相关准备"><a href="#LeanCloud-的相关准备" class="headerlink" title="LeanCloud 的相关准备"></a>LeanCloud 的相关准备</h2><blockquote>
<p>建议使用国际版的 LeanCloud<br>因为国际版的 leancloud 不需要配置 serverurl，所以推荐使用国际版，速度没有区别，如> 果使用国内版的 leancloud 别忘了填写 serverurl 即可</p>
</blockquote>
<ul>
<li>前往 <a href="https://leancloud.app/">LeanCloud 国际版</a>，注册账号。</li>
<li>注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。</li>
<li>绑定完成之后点击<code>创建应用</code>，应用名称随意，接着在<code>结构化数据</code>中创建 <code>class</code>，命名为 <code>shuoshuo</code>。</li>
<li>在你新建的应用中找到<code>结构化数据</code>下的<code>用户</code>。点击<code>添加用户</code>，输入想用的用户名及密码。</li>
<li>回到<code>结构化数据</code>中，点击 <code>class</code> 下的 <code>shuoshuo</code>。找到权限，在 <code>Class 访问权限</code>中将 <code>add_fields</code> 以及 <code>create</code> 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 <code>delete</code> 和 <code>update</code> 也设置为跟它们一样的权限。</li>
<li>然后新建一个名为<code>atComment</code>的class，权限什么的使用默认的即可。</li>
<li>点击 <code>class</code> 下的 <code>_User</code> 添加列，列名称为 <code>img</code>，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。</li>
<li>在最菜单栏中找到设置-> 应用 keys，记下来 <code>AppID</code> 和 <code>AppKey</code> ，一会会用。</li>
<li>最后将 <code>_User</code> 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。</li>
</ul>
<blockquote>
<p><em>注意：</em>关于设置权限的这几步<br>这几步一定要设置好，才可以保证不被 “闲人” 破解发布说说的验证</p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/20201209163741309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="开始使用"><a href="#开始使用" class="headerlink" title="开始使用"></a>开始使用</h2><p>在博客中新建一个说说页面</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">hexo <span class="keyword">new</span> page shuoshuo</span><br></pre></td></tr></table></figure>
<p>然后在 <code>shuoshuo/index.md</code> 的内容区域中添加以下代码</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/artitalk"</span>></span></span><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"artitalk_main"</span>></span></span><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span></span></span><br><span class="line"> new Artitalk({</span><br><span class="line"><span class="code"> appId: 'xxxx',</span></span><br><span class="line"><span class="code"> appKey: 'xxx'</span></span><br><span class="line"><span class="code"> })</span></span><br><span class="line"><span class="code"></script></span></span><br></pre></td></tr></table></figure>
<h2 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h2><p>因为 Artitalk 对 Pjax 的支持不友善，如果使用 Valine 评论的话，请把说说页面添加到主题配置 文件中的 Pjax 的 exclude 去，不然会引起 Artitalk 和 Valine 都加载出错<br>在主题配置文件中修改</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">pjax:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">exclude:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">/shuoshuo/</span></span><br></pre></td></tr></table></figure>
<p>页面效果<br><img src="https://img-blog.csdnimg.cn/20201209163515509.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>artitalk</tag>
<tag>LeanCloud</tag>
</tags>
</entry>
<entry>
<title>Gitee + PicGo 图床搭建</title>
<url>/posts/22836fb3-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="Gitee-图床搭建"><a href="#Gitee-图床搭建" class="headerlink" title="Gitee 图床搭建"></a>Gitee 图床搭建</h1><p>快速上手</p>
<ul>
<li>下载安装 PicGo</li>
<li>安装 Gitee 图床插件</li>
<li>创建 Gitee 图床存储仓库</li>
<li>设置 Gitee 私人令牌</li>
<li>配置 PicGo + Gitee 图床信息</li>
</ul>
<h2 id="下载安装-PicGo"><a href="#下载安装-PicGo" class="headerlink" title="下载安装 PicGo"></a>下载安装 PicGo</h2><p><a href="https://github.com/Molunerfinn/PicGo/releases">点击下载PicGo</a>，选择 (.exe) 文件下载后安装即可<br><img src="https://gitee.com/dulily/cdn/raw/master/img/20201203192011.png"></p>
<h2 id="安装-Gitee-图床插件"><a href="#安装-Gitee-图床插件" class="headerlink" title="安装 Gitee 图床插件"></a>安装 Gitee 图床插件</h2><p>在 PicGo 界面的插件设置中搜索 gitee 的插件，两个插件都可以选择，这里选择第二个插件安装使用<br><img src="https://gitee.com/dulily/cdn/raw/master/img/20201203192207.png"></p>
<h2 id="创建-Gitee-图床存储仓库"><a href="#创建-Gitee-图床存储仓库" class="headerlink" title="创建 Gitee 图床存储仓库"></a>创建 Gitee 图床存储仓库</h2><p>登录个人 Gitee 账号，创建一个图床仓库<br><img src="https://gitee.com/dulily/cdn/raw/master/img/20201203192353.png"><br><em>注意：一定要勾选使用Readme文件初始化这个仓库，会自动帮你生成 master 分支</em>（否则后期上传图片报错404）</p>
<h2 id="设置-Gitee-私人令牌"><a href="#设置-Gitee-私人令牌" class="headerlink" title="设置 Gitee 私人令牌"></a>设置 Gitee 私人令牌</h2><p>在 Gitee 的设置中，找到 私人令牌，点击新增生成新令牌即可<br><img src="https://gitee.com/dulily/cdn/raw/master/img/20201203192800.png"><br>点击提交即可生成（<em>注意：令牌生成后，记得保存哦，关闭窗口就无法查看了</em>）<br><img src="https://gitee.com/dulily/cdn/raw/master/img/20201203192931.png"></p>
<h2 id="配置-PicGo-Gitee-图床信息"><a href="#配置-PicGo-Gitee-图床信息" class="headerlink" title="配置 PicGo + Gitee 图床信息"></a>配置 PicGo + Gitee 图床信息</h2><p>在 PicGo 界面找到 图床设置 -> gitee<br><img src="https://gitee.com/dulily/cdn/raw/master/img/20201203193043.png"></p>
<p>注意两个必填项即可</p>
<ul>
<li>repo：仓库(一般采用Git用户名/仓库名)</li>
<li>branch：分支(一般使用master)</li>
<li>token：私人令牌(将上一步生成的私人令牌复制粘贴)</li>
<li>path：则是在图片上传成功后访问地址的前缀</li>
<li>customPath: 生成文件后的重命名方式，按照自己的需求进行选择</li>
<li>customUrl: 可以不填写</li>
</ul>
<p>以上步骤完成后即可使用 PicGo 上传图片到 gitee 图床了</p>
]]></content>
<categories>
<category>图床</category>
</categories>
<tags>
<tag>Gitee</tag>
<tag>picGo</tag>
</tags>
</entry>
<entry>
<title>Hexo 部署到 Gitee</title>
<url>/posts/22836fb2-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>选择部署到 Gitee 上的原因是访问速度比 Github 快速，且Gitee 是国内的码云平台</p>
<h2 id="新建-Gitee-仓库"><a href="#新建-Gitee-仓库" class="headerlink" title="新建 Gitee 仓库"></a>新建 Gitee 仓库</h2><p>如果没有注册的话，就去 <a href="https://gitee.com/">Gitee 官网</a> 注册一个哦，注册成功后创建仓库。<br>仓库的名称可以随便写，但是仓库的路径要和用户名（个人空间地址）一致<br><img src="https://img-blog.csdnimg.cn/20201209140542353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>这样访问地址就不会生成二级域名了</p>
<h2 id="在-Gitee-中添加-SSH-公钥"><a href="#在-Gitee-中添加-SSH-公钥" class="headerlink" title="在 Gitee 中添加 SSH 公钥"></a>在 Gitee 中添加 SSH 公钥</h2><h3 id="检查是否已有-SSH"><a href="#检查是否已有-SSH" class="headerlink" title="检查是否已有 SSH"></a>检查是否已有 SSH</h3><p>在本地打开 git bash 命令行窗口，输入以下命令</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> ~/.ssh</span></span><br></pre></td></tr></table></figure>
<p>如果没有，显示</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">bash: cd: /c/Users/Administrator/.ssh: No such file or directory</span><br></pre></td></tr></table></figure>
<p>否的话，标识本地已经有创建过的 SSH key 了，可以跳过 <code>2.2</code> 节，直接 <code>2.3</code> 节</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> ~/.ssh</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> ls</span></span><br><span class="line">id_rsa id_rsa.pub known_hosts</span><br></pre></td></tr></table></figure>
<h3 id="创建-SSH-key"><a href="#创建-SSH-key" class="headerlink" title="创建 SSH key"></a>创建 SSH key</h3><p>最后一个参数替换为自己的 Gitee 注册邮箱</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> ssh-keygen -t rsa -C <span class="string">"your_email@example.com"</span></span></span><br><span class="line">Generating public/private rsa key pair.</span><br></pre></td></tr></table></figure>
<p>接下来会提示输入生成的key存放的路径，不设置直接回车的话会默认创建在C:/Users/你的用户账号/.ssh文件夹下</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">Enter file in which to save the key (/c/Users/Him/.ssh/id_rsa):</span><br><span class="line">Created directory '/c/Users/userpath/.ssh'.</span><br></pre></td></tr></table></figure>
<p>再接下来会提示你输入密码，这个密码是用来每次提交的时候输入确认，可以不设置，直接回车两次</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">Enter passphrase (empty for no passphrase):</span><br><span class="line">Enter same passphrase again:</span><br></pre></td></tr></table></figure>
<p>最后成功后会看到类似如下的输出，表示成功生成SSH key了，可以到C:/Users/你的用户账号/.ssh文件夹下查看</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">Your identification has been saved in /c/Users/Him/.ssh/id_rsa.</span><br><span class="line">Your public key has been saved in /c/Users/Him/.ssh/id_rsa.pub.</span><br><span class="line">The key fingerprint is:</span><br><span class="line">SHA256:RwvBINgH8CEt2KniltmykeyDsOseUYcwMzehFeyT86s xxxxxx@qq.com</span><br><span class="line">The key's randomart image is:</span><br><span class="line">+---[RSA 2048]----+</span><br><span class="line">| o+%OO+o. |</span><br><span class="line">|..=+%*+ .. |</span><br><span class="line">| ..+o+o.. . |</span><br><span class="line">|o. o=. o . |</span><br><span class="line">|o oolalala S o |</span><br><span class="line">| +.+.. . . |</span><br><span class="line">|. .o . |</span><br><span class="line">| . . . |</span><br><span class="line">| . E. |</span><br><span class="line">+----[SHA256]-----+</span><br></pre></td></tr></table></figure>
<p><img src="https://img-blog.csdnimg.cn/20201209141736985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h3 id="测试-SSH-连接"><a href="#测试-SSH-连接" class="headerlink" title="测试 SSH 连接"></a>测试 SSH 连接</h3><p>输入命令</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> ssh -T git@gitee.com</span></span><br></pre></td></tr></table></figure>
<p>会得到如下输出，询问是否确认连接，输入yes回车确认</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">The authenticity of host 'gitee.com (180.97.125.228)' can't be established.</span><br><span class="line">ECDSA key fingerprint is SHA256:FQGC9Kn/eye1W8icdBgrQp+KkGYoFgbVr17bmjey0Wc.</span><br><span class="line">Are you sure you want to continue connecting (yes/no/[fingerprint])? yes</span><br></pre></td></tr></table></figure>
<p>最后连接成功会看到如下输出</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">Warning: Permanently added 'gitee.com,180.97.125.228' (ECDSA) to the list of known hosts.</span><br><span class="line">Hi dulily! You've successfully authenticated, but GITEE.COM does not provide shell access.</span><br></pre></td></tr></table></figure>
<h3 id="在-Gitee-中添加-SSH-公钥-1"><a href="#在-Gitee-中添加-SSH-公钥-1" class="headerlink" title="在 Gitee 中添加 SSH 公钥"></a>在 Gitee 中添加 SSH 公钥</h3><p>先在 C 盘指定目录中找到 <code>id_rsa_pub</code> 文件，复制内容<br>然后打开 gitee 个人设置里面的 安全设置 - SSH公钥，标题可以随便取，把粘贴的内容复制到公钥里面，点击确定就可以<br><img src="https://img-blog.csdnimg.cn/20201209142827738.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="修改-config-yml"><a href="#修改-config-yml" class="headerlink" title="修改 _config.yml"></a>修改 _config.yml</h2><p>修改博客目录中的配置文件 <code>_config.yml</code></p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">'git'</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">git@gitee.com:dulily/dulily.git</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">master</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p><em>注意：type里面的 git 需要加单引号；repo 的内容是复制的仓库的 SSH 链接</em></p>
</blockquote>
<h2 id="安装-hexo-deployer-git"><a href="#安装-hexo-deployer-git" class="headerlink" title="安装 hexo-deployer-git"></a>安装 <code>hexo-deployer-git</code></h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
<h2 id="推送博客目录到远程-Gitee"><a href="#推送博客目录到远程-Gitee" class="headerlink" title="推送博客目录到远程 Gitee"></a>推送博客目录到远程 Gitee</h2><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo g -d</span><br></pre></td></tr></table></figure>
<p><img src="https://img-blog.csdnimg.cn/20201209143745982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<p>这时候，远程仓库的 blog 目录下会新增很多文件夹</p>
<p><img src="https://img-blog.csdnimg.cn/20201209144633708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="开启-Gitee-Pages-服务"><a href="#开启-Gitee-Pages-服务" class="headerlink" title="开启 Gitee Pages 服务"></a>开启 Gitee Pages 服务</h2><p><img src="https://img-blog.csdnimg.cn/20201209144134734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/20201209144251203.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>注意勾选，直接点击生成即可，开启后，直接访问开启好的网站地址就可以访问博客了<br><img src="https://img-blog.csdnimg.cn/20201209144545433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<p><a href="https://dulily.gitee.io/">我的博客</a></p>
<blockquote>
<p>补充，后期如果新增了文章，只需要执行 <code>hexo g -d</code> ，然后更新 Gitee Pages 服务即可</p>
</blockquote>
]]></content>
<categories>
<category>博客部署</category>
</categories>
<tags>
<tag>Gitee</tag>
<tag>SSH key</tag>
</tags>
</entry>
<entry>
<title>Hexo 快速开始</title>
<url>/posts/22836fb4-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>Hexo 是一个快速、简洁且高效的博客框架，使用 Markdown 或其他渲染引擎解析文章，在几秒内，即可利用靓丽的主题生成静态网页<br><a href="https://hexo.io/zh-cn/">Hexo 官网</a></p>
<h2 id="安装前提"><a href="#安装前提" class="headerlink" title="安装前提"></a>安装前提</h2><p>安装 Hexo 之前需要安装以下程序</p>
<ul>
<li>Node.js （版本不低于 12.0及以上）</li>
<li>Git</li>
</ul>
<h2 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h2><p>全局安装</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>
<h2 id="建站"><a href="#建站" class="headerlink" title="建站"></a>建站</h2><p>安装 Hexo 完成后，执行下列命令，Hexo 会在指定文件夹中新建所需要的文件</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">hexo init <floder></span><br><span class="line">cd <floder></span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>
<p>新建 <floder> 文件完成后，指定的文件夹的目录有</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml</span><br><span class="line">├── package.json</span><br><span class="line">├── scaffolds</span><br><span class="line">├── source</span><br><span class="line">| ├── _drafts</span><br><span class="line">| └── _posts</span><br><span class="line">└── themes</span><br></pre></td></tr></table></figure>
<h2 id="启动项目"><a href="#启动项目" class="headerlink" title="启动项目"></a>启动项目</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>Hexo</tag>
</tags>
</entry>
<entry>
<title>在 Hexo 中添加豆瓣个人主页</title>
<url>/posts/22836fb5-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>hexo-douban：可以在 Hexo 页面中嵌入豆瓣页面的插件<br><a href="https://github.com/mythsman/hexo-douban">hexo-douban</a></p>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install hexo-douban --save-dev</span><br></pre></td></tr></table></figure>
<h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h2><p>在博客站点的配置文件 <code>_config.yml</code> 中添加以下内容（注意：不是主题的配置文件）</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># hexo-douban</span></span><br><span class="line"><span class="attr">douban:</span></span><br><span class="line"> <span class="attr">user:</span> <span class="string">xxxx</span> <span class="comment"># 你的豆瓣ID</span></span><br><span class="line"> <span class="attr">builtin:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">book:</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">'那些年，我翻阅过的书'</span></span><br><span class="line"> <span class="attr">quote:</span> <span class="string">'思想和身体，总有一个在路上'</span></span><br><span class="line"> <span class="attr">movie:</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">'那些年，我追过的电影'</span></span><br><span class="line"> <span class="attr">quote:</span> <span class="string">'过去、现在、和未来'</span></span><br><span class="line"> <span class="attr">game:</span></span><br><span class="line"> <span class="attr">title:</span> <span class="string">'那些年，我玩过的游戏'</span></span><br><span class="line"> <span class="attr">quote:</span> <span class="string">'还记得你曾经的游戏角色吗'</span></span><br><span class="line"> <span class="attr">timeout:</span> <span class="number">10000</span> </span><br></pre></td></tr></table></figure>
<ul>
<li>user: 你的豆瓣ID.打开<a href="https://www.douban.com/">豆瓣</a>，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的URL大概是这样：”<a href="https://www.douban.com/people/xxxxxx/"">https://www.douban.com/people/xxxxxx/"</a> ，其中的”xxxxxx”就是你的个人ID了。</li>
<li>builtin: 是否将生成页面的功能嵌入hexo s和hexo g中，默认是false,另一可选项为true(1.x.x版本新增配置项)。<br>如果配置了builtin参数为true，那么除了可以使用hexo douban命令之外，hexo g或hexo s也内嵌了生成页面的功能。</li>
<li>title: 该页面的标题.</li>
<li>quote: 写在页面开头的一段话,支持html语法.</li>
<li>timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。<br>注意：如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。</li>
</ul>
<h2 id="访问"><a href="#访问" class="headerlink" title="访问"></a>访问</h2><p>如果上面的配置都没有问题，就可以使用以下地址访问</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">http:<span class="comment">//localhost:4000/books</span></span><br><span class="line">http:<span class="comment">//localhost:4000/movies</span></span><br><span class="line">http:<span class="comment">//localhost:4000/games</span></span><br></pre></td></tr></table></figure>
<p><em>注意：此时books、movies、games不需要使用hexo new page xxx来创建，只需要配置hexo-douban后会自动创建。</em></p>
<h2 id="Butterfly-主题中使用-hexo-douban-插件"><a href="#Butterfly-主题中使用-hexo-douban-插件" class="headerlink" title="Butterfly 主题中使用 hexo-douban 插件"></a>Butterfly 主题中使用 hexo-douban 插件</h2><h3 id="添加到菜单中"><a href="#添加到菜单中" class="headerlink" title="添加到菜单中"></a>添加到菜单中</h3><p>如果上面的页面显示都无问题的话，就可以在主题的配置文件 <code>_config.butterfly.yml</code> 中为这些页面添加菜单链接了</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line"> <span class="string">娱乐||fas</span> <span class="attr">fa-list:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">电影</span> <span class="string">||</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-film</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">游戏</span> <span class="string">||</span> <span class="string">/games/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-gamepad</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">书籍</span> <span class="string">||</span> <span class="string">/books/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-book</span></span><br></pre></td></tr></table></figure>
<p>并且修改主题配置文件 <code>_config.butterfly.yml</code></p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># If you are using hexo-douban, you can configure it (如果你有使用 hexo-douban,可配置這個)</span></span><br><span class="line"><span class="attr">douban:</span></span><br><span class="line"> <span class="attr">meta:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">movies_img:</span> <span class="string">https://gitee.com/dulily/cdn/raw/master/img/me.jpg</span></span><br><span class="line"> <span class="attr">books_img:</span> <span class="string">https://gitee.com/dulily/cdn/raw/master/img/221410-15917120505729.jpg</span></span><br><span class="line"> <span class="attr">games_img:</span> <span class="string">https://gitee.com/dulily/cdn/raw/master/img/fbb1db7f27e748086d30301c6540918f.jpg</span></span><br></pre></td></tr></table></figure>
<ul>
<li>movies_img: 设置 hexo-douban 中 movies 页面的 top_img</li>
<li>books_img: 设置 hexo-douban 中 books 页面的 top_img</li>
<li>games_img: 设置 hexo-douban 中 games 页面的 top_img</li>
</ul>
<p>页面的效果<br><img src="https://img-blog.csdnimg.cn/20201209161416721.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<p>其他页面都是类似的</p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo-douban</tag>
</tags>
</entry>
<entry>
<title>Hexo 中 Butterfly主题和看板娘的使用</title>
<url>/posts/22836fb6-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>默认的 Hexo 主题为 landscape，我选择了 <code>Butterfly</code> 作为博客主题</p>
<h1 id="Butterfly-主题使用"><a href="#Butterfly-主题使用" class="headerlink" title="Butterfly 主题使用"></a>Butterfly 主题使用</h1><h2 id="Butterfly-安装"><a href="#Butterfly-安装" class="headerlink" title="Butterfly 安装"></a>Butterfly 安装</h2><p>Git 安装<br>在博客的根目录执行</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">git clone -b master https:<span class="comment">//github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly</span></span><br></pre></td></tr></table></figure>
<p>安装完成后可在 根目录/themes/butterfly 查看主题文件夹</p>
<h2 id="应用主题"><a href="#应用主题" class="headerlink" title="应用主题"></a>应用主题</h2><p>修改博客根目录的配置文件 <code>_config.yml</code>，把主题改为 <code>butterfly</code></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">theme: butterfly</span><br></pre></td></tr></table></figure>
<h2 id="安装插件"><a href="#安装插件" class="headerlink" title="安装插件"></a>安装插件</h2><p>如果你没有 pug 和 stylus 的渲染器，需要安装</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure>
<h2 id="升级建议"><a href="#升级建议" class="headerlink" title="升级建议"></a>升级建议</h2><p>把主题文件夹中的<code> _config.yml</code> 复製到 Hexo 根目录里，同时重新命名为 <code>_config.butterfly.yml</code>。<br>以后只需要在<code> _config.butterfly.yml</code>进行配置就行。</p>
<p>Hexo会自动合并主题中的<code>_config.yml</code>和 <code>_config.butterfly.yml</code>里的配置，如果存在同名配置，会使用<code>_config.butterfly.yml</code>的配置，其优先度较高。<br><img src="https://img-blog.csdnimg.cn/20200904160651121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h1 id="看板娘的使用"><a href="#看板娘的使用" class="headerlink" title="看板娘的使用"></a>看板娘的使用</h1><p>先来看看效果吧<br><img src="https://img-blog.csdnimg.cn/20200904160920315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h2 id="下载-live2D"><a href="#下载-live2D" class="headerlink" title="下载 live2D"></a>下载 live2D</h2><p><a href="https://github.com/stevenjoezhang/live2d-widget">live2D文件</a><br>先在github 上将文件压缩包下载下来，然后解压，放置在目录 <code>博客根目录/themes/butterfly/source/</code> 中（我这里是把文件夹名改Wie live2d-widget）<br><img src="https://img-blog.csdnimg.cn/20200904161144108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h2 id="更改-autoload-js-文件"><a href="#更改-autoload-js-文件" class="headerlink" title="更改 autoload.js 文件"></a>更改 autoload.js 文件</h2><p>更改 live2d-widget 下的 autoload.js 文件，其实只需要将第二行注释掉，取消第三行的注释即可<br><img src="https://img-blog.csdnimg.cn/20200904161340111.png#pic_center" alt="在这里插入图片描述"></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 注意：live2d_path 参数应使用绝对路径</span></span><br><span class="line"><span class="comment">// const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";</span></span><br><span class="line"><span class="keyword">const</span> live2d_path = <span class="string">"/live2d-widget/"</span>;</span><br></pre></td></tr></table></figure>
<h2 id="添加资源文件"><a href="#添加资源文件" class="headerlink" title="添加资源文件"></a>添加资源文件</h2><p>在 博客根目录的主题配置文件 <code>_config.butterfly.yml</code> 中找到 <code>inject</code> 并修改，引入 css 文件和 js 文件即可<br><img src="https://img-blog.csdnimg.cn/20200904161452660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">inject:</span><br><span class="line"> head:</span><br><span class="line"> # - <link rel="stylesheet" href="/xxx.css"></span><br><span class="line"> <link rel=<span class="string">"stylesheet"</span> href=<span class="string">"https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"</span>></span><br><span class="line"> <script src=<span class="string">"/live2d-widget/autoload.js"</span>></script></span><br><span class="line"> bottom:</span><br></pre></td></tr></table></figure>
<h2 id="启用-live2d"><a href="#启用-live2d" class="headerlink" title="启用 live2d"></a>启用 live2d</h2><p>可以在 博客根目录的主题配置文件 <code>_config.butterfly.yml</code> 最后新增以下内容</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">live2d:</span><br><span class="line"> enable: <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p>最后，执行命令即可看到效果（同时要注意 public 文件夹中有没有生成 live2d-widget 文件夹）<br><img src="https://img-blog.csdnimg.cn/20200904161809464.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>live2d</tag>
</tags>
</entry>
<entry>
<title>在 Hexo 中使用 iconfont 图标</title>
<url>/posts/8cc76970-5940-11eb-b82a-ef43803d0d32/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><blockquote>
<p><a href="https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2">iconfont首页</a></p>
</blockquote>
<h2 id="iconfont-获取"><a href="#iconfont-获取" class="headerlink" title="iconfont 获取"></a>iconfont 获取</h2><ul>
<li>可以先在首页搜索你想要的图标，然后添加到购物车中，然后把购物车中的图标添加到项目中，如果没有项目的话可以新建一个项目。</li>
<li>生成在线链接<ul>
<li>点击 font class 按钮直接就可以生成链接了 </li>
<li>复制生成的链接地址，在浏览器窗口查看<br><img src="https://gitee.com/dulily/cdn/raw/master/img/20210118114331.png"></li>
</ul>
</li>
</ul>
<p><img src="https://gitee.com/dulily/cdn/raw/master/img/20210118114553.png"></p>
<h2 id="引入字体样式"><a href="#引入字体样式" class="headerlink" title="引入字体样式"></a>引入字体样式</h2><p>可以选择直接把字体样式下载引入到博客中，或者直接把刚才的链接引入，这里我就先选择下载到本地</p>
<ul>
<li>把刚才查看的 css 代码另存为 <code>/themes/Butterfly/source/css/</code> 中，命名为 <code>iconfont.css</code> </li>
<li>在 <code>_config.butterfly.yml</code> 中引入样式文件<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 插入代码到头部 </head> 之前 和 底部 </body> 之前</span></span><br><span class="line"><span class="attr">inject:</span></span><br><span class="line"> <span class="attr">head:</span></span><br><span class="line"> <span class="comment"># - <link rel="stylesheet" href="/xxx.css"></span></span><br><span class="line"> <span class="string"><link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="/css/iconfont.css"></span></span><br><span class="line"> <span class="attr">bottom:</span></span><br><span class="line"> <span class="comment"># - <script src="xxxx"></script></span></span><br></pre></td></tr></table></figure>
我的博客主题是 <code>Butterfly</code> 根据自己的主题参考即可<h2 id="开始使用"><a href="#开始使用" class="headerlink" title="开始使用"></a>开始使用</h2>在 <code>_config.butterfly.yml</code> 中添加<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">social:</span></span><br><span class="line"> <span class="attr">iconfont icon-git:</span> <span class="string">https://github.com/03DuLi</span> <span class="string">||</span> <span class="string">Github</span></span><br><span class="line"> <span class="attr">iconfont icon-email:</span> <span class="string">mailto:duli2476@163.com</span> <span class="string">||</span> <span class="string">Email</span></span><br><span class="line"> <span class="attr">iconfont icon-gitee1:</span> <span class="string">https://gitee.com/dulily</span> <span class="string">||</span> <span class="string">Gitee</span></span><br><span class="line"> <span class="attr">iconfont icon-csdn1:</span> <span class="string">https://mp.csdn.net/console/article?spm=1010.2135.3001.5128</span> <span class="string">||</span> <span class="string">CSDN</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<blockquote>
<p>注：这里我只是引入了图标样式。没有引入图标的其他字体文件，可以根据自己的需要引入文件</p>
</blockquote>
<p>样式可以查看我的<a href="https://dulily.gitee.io/">博客</a>哦</p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>iconfont</tag>
</tags>
</entry>
<entry>
<title>在 Hexo 中使用 Hexo-abbrlink生成唯一文章链接</title>
<url>/posts/22836fb7-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><blockquote>
<p>Hexo 生成博客文章的链接时，默认格式 <code>permalink: :year/:month/:day/:title/</code> ，即按照 年：月：日：标题的格式来生成的。如果标题中含中文的话，复制URL链接的话中文字符就会是一大串编码字符。如果想为每一篇文章生成唯一 ID 的话，推荐使用 <a href="https://github.com/rozbo/hexo-abbrlink">hexo-abbrlink</a> 或 <a href="https://github.com/chekun/hexo-uuid">hexo-uuid</a></p>
</blockquote>
<h2 id="hexo-abbrlink"><a href="#hexo-abbrlink" class="headerlink" title="hexo-abbrlink"></a>hexo-abbrlink</h2><p>博客根目录下安装</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install hexo-abbrlink --save</span><br></pre></td></tr></table></figure>
<p><code>config.yml</code> 中修改</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">permalink:</span> <span class="string">posts/:abbrlink/</span></span><br></pre></td></tr></table></figure>
<p><code>hexo clean -> hexo g -> hexo s</code> 在本地查看，博客文章链接如 <code>https://dulily.gitee.io/posts/28872/</code><br><code>hexo-abbrlink</code> 官方文档中还介绍了其他配置，可以自行修改哦</p>
<h2 id="hexo-uuid"><a href="#hexo-uuid" class="headerlink" title="hexo-uuid"></a>hexo-uuid</h2><p>博客根目录下安装</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm install hexo-uuid --save</span><br></pre></td></tr></table></figure>
<p><code>config.yml</code> 中修改</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">permalink:</span> <span class="string">posts/:uuid/</span></span><br></pre></td></tr></table></figure>
<p><code>hexo clean -> hexo g -> hexo s</code> 在本地查看，博客文章链接如 <code>https://dulily.gitee.io/posts/22836fb7-5935-11eb-ba6a-a5e2f242e8b2</code><br><code>hexo-uuid</code> 官方文档中还介绍了其他配置，可以自行修改哦</p>
<blockquote>
<p>两种方式随便选择一种都行</p>
</blockquote>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo-abbrlink</tag>
<tag>hexo-uuid</tag>
</tags>
</entry>
<entry>
<title>Butterfly主题安装文档(三)之主题配置2</title>
<url>/posts/22836fb8-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="图片设置"><a href="#图片设置" class="headerlink" title="图片设置"></a>图片设置</h1><h2 id="站点图标"><a href="#站点图标" class="headerlink" title="站点图标"></a>站点图标</h2><p>站点图标又称站点icon(<code>favicon.ico</code>)<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">favicon:</span> <span class="string">/img/favicon.png</span> <span class="comment"># 将图片放入 themes -> Butterfly -> source -> img 里</span></span><br></pre></td></tr></table></figure>
<p><img src="https://img-blog.csdnimg.cn/20201209152950204.png" alt="在这里插入图片描述"></p>
<h2 id="头像"><a href="#头像" class="headerlink" title="头像"></a>头像</h2><p>头像即是首页个人卡片处展示的自己的头像<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">avatar:</span></span><br><span class="line"> <span class="attr">img:</span> <span class="string">/image/ava.png</span></span><br><span class="line"> <span class="attr">effect:</span> <span class="literal">false</span> <span class="comment"># 头像会一直转圈 </span></span><br></pre></td></tr></table></figure>
<p><img src="https://img-blog.csdnimg.cn/20201209153219417.png" alt="在这里插入图片描述"></p>
<h2 id="主页封面图片"><a href="#主页封面图片" class="headerlink" title="主页封面图片"></a>主页封面图片</h2><p>在访问系统首页时，出现的封面图片<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">index_img:</span> <span class="string">https://gitee.com/dulily/cdn/raw/master/img/214707-1543326427a764.jpg</span></span><br></pre></td></tr></table></figure>
<h2 id="文章详情页的顶部图片"><a href="#文章详情页的顶部图片" class="headerlink" title="文章详情页的顶部图片"></a>文章详情页的顶部图片</h2><p>当没有在<code>front-matter</code>设置<code>top_img</code>和<code>cover</code>的情况下会显示该图<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">default_top_img:</span> <span class="string">http://pic1.win4000.com/wallpaper/2020-08-21/5f3f3d10b054e.jpg</span></span><br></pre></td></tr></table></figure>
<h2 id="归档页顶部的图片"><a href="#归档页顶部的图片" class="headerlink" title="归档页顶部的图片"></a>归档页顶部的图片</h2><p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">archive_img:</span> <span class="string">http://pic1.win4000.com/wallpaper/2020-07-24/5f1a7c9533901.jpg</span></span><br></pre></td></tr></table></figure>
<h2 id="标签页顶部的图片"><a href="#标签页顶部的图片" class="headerlink" title="标签页顶部的图片"></a>标签页顶部的图片</h2><p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">tag_img:</span> <span class="string">http://pic1.win4000.com/wallpaper/2020-07-24/5f1a7c9533901.jpg</span></span><br></pre></td></tr></table></figure>
<h2 id="分类页顶部的图片"><a href="#分类页顶部的图片" class="headerlink" title="分类页顶部的图片"></a>分类页顶部的图片</h2><p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">category_img:</span> <span class="string">http://pic.netbian.com/uploads/allimg/170609/123945-14969831856c4d.jpg</span></span><br></pre></td></tr></table></figure>
<h2 id="文章封面"><a href="#文章封面" class="headerlink" title="文章封面"></a>文章封面</h2><p>每篇文章都可以设置一张封面，可以为每篇文章设置默认封面<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">cover:</span></span><br><span class="line"> <span class="attr">index_enable:</span> <span class="literal">true</span> <span class="comment"># 是否展示文章封面</span></span><br><span class="line"> <span class="attr">aside_enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">archives_enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">position:</span> <span class="string">both</span> <span class="comment"># 封面展示的位置 left/right/both</span></span><br><span class="line"> <span class="comment"># 当没有设置cover时，默认展示的文章封面</span></span><br><span class="line"> <span class="attr">default_cover:</span></span><br><span class="line"> <span class="comment"># 当配置多张图片时，会随机选择一张作为 cover. 此时写法为</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">http://pic1.win4000.com/wallpaper/2020-07-08/5f056636a92cf_270_185.jpg</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">http://pic1.win4000.com/wallpaper/2020-08-17/5f39f8e53b026_270_185.png</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">http://pic1.win4000.com/wallpaper/2020-07-23/5f19587122afa_270_185.jpg</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">http://pic1.win4000.com/wallpaper/2020-07-22/5f17b43d50c03_270_185.png</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">http://pic1.win4000.com/wallpaper/2020-08-14/5f363d07a24be_270_185.jpg</span></span><br></pre></td></tr></table></figure>
<p>也可以修改每个<code>md文件</code>的<code>front-matter</code>的<code>cover</code>属性，会覆盖上面的默认封面。</p>
<h2 id="错误图片"><a href="#错误图片" class="headerlink" title="错误图片"></a>错误图片</h2><p>配置了该属性后会替换无法展示的图片<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">error_img:</span></span><br><span class="line"> <span class="attr">flink:</span> <span class="string">/img/friend_404.gif</span></span><br><span class="line"> <span class="attr">post_page:</span> <span class="string">/img/404.jpg</span></span><br></pre></td></tr></table></figure>
<h1 id="字数统计"><a href="#字数统计" class="headerlink" title="字数统计"></a>字数统计</h1><p>要为 <code>Butterfly</code> 配上字数统计特性，你需要如下几个步骤:</p>
<ol>
<li>打开 hexo 工作目录</li>
<li><code>npm install hexo-wordcount --save</code> or <code>yarn add hexo-wordcount</code></li>
<li>修改主题配置文件<code>_config.butterfly.yml</code>：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">wordcount:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">post_wordcount:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">min2read:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">total_wordcount:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<img src="https://img-blog.csdnimg.cn/20201209153657392.png" alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/20201209153635904.png" alt="在这里插入图片描述"></li>
</ol>
<h1 id="文章节选"><a href="#文章节选" class="headerlink" title="文章节选"></a>文章节选</h1><p>主页文章节选，也就是文章摘要<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">index_post_content:</span></span><br><span class="line"> <span class="attr">method:</span> <span class="number">3</span></span><br><span class="line"> <span class="attr">length:</span> <span class="number">500</span> <span class="comment"># 节选文章的前500个字</span></span><br></pre></td></tr></table></figure>
<h1 id="分享"><a href="#分享" class="headerlink" title="分享"></a>分享</h1><p>只能选择一个分享服务商</p>
<h2 id="AddThis"><a href="#AddThis" class="headerlink" title="AddThis"></a>AddThis</h2><p>访问 <a href="https://www.addthis.com/">AddThis</a> 官网, 找到你的 <code>pub-id</code><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-addthis.jpg"><br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">addThis:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># or false</span></span><br><span class="line"> <span class="attr">pubid:</span> <span class="string">你的pub-id</span></span><br></pre></td></tr></table></figure>
<h2 id="sharejs"><a href="#sharejs" class="headerlink" title="sharejs"></a>sharejs</h2><p>如果你不知道 <a href="https://github.com/overtrue/share.js/">sharejs</a>，到官网看看说明吧。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">sharejs:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">sites:</span> <span class="string">facebook,twitter,wechat,weibo,qq</span> <span class="comment">#想要显示的内容</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-sharejs.png"></p>
<h2 id="AddToAny"><a href="#AddToAny" class="headerlink" title="AddToAny"></a>AddToAny</h2><p>可以到 <a href="https://www.addtoany.com/">addtoany</a> 查看使用说明。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><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">item:</span> <span class="string">facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-addtoany.png"></p>
<h1 id="评论"><a href="#评论" class="headerlink" title="评论"></a>评论</h1><p>从 3.0.0 开始，开启评论需要在 comments-use 中填写你需要的评论。<br>支持双评论显示，只需要配置两个评论（第一个为默认显示）<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">comments:</span></span><br><span class="line"> <span class="attr">use:</span> <span class="comment"># 使用的评论（请注意，填写的评论首字母需要大写。最多支持两个，如果不需要请留空）</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">Valine</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">Disqus</span></span><br><span class="line"> <span class="comment"># - Valine</span></span><br><span class="line"> <span class="comment"># - Disqus</span></span><br><span class="line"> <span class="attr">text:</span> <span class="literal">true</span> <span class="comment"># 是否显示评论服务商的名字</span></span><br><span class="line"> <span class="attr">lazyload:</span> <span class="literal">false</span> <span class="comment"># 是否为评论开启 lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启 lazyload 后，评论数将不显示）</span></span><br><span class="line"> <span class="attr">count:</span> <span class="literal">false</span> <span class="comment"># 是否在文章顶部显示评论数 livere 和 utterances 不支持评论数显示</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-single-comments.png"></p>
<h2 id="disqus"><a href="#disqus" class="headerlink" title="disqus"></a>disqus</h2><p>注册 <a href="https://disqus.com/">disqus</a>，配置你自己的 <code>disqus</code>，然后在 <code>Butterfly</code> 里开启它。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">disqus:</span></span><br><span class="line"> <span class="attr">shortname:</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-disqus.png"></p>
<h2 id="Disqusjs"><a href="#Disqusjs" class="headerlink" title="Disqusjs"></a>Disqusjs</h2><p>与 Disqus 一样，但由于 Disqus 在中国大陆无法访问， 使用 Disqusjs 可以在无法访问 Disqus 时显示评论。具体可参考 <a href="https://github.com/SukkaW/DisqusJS">Disqusjs</a>。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">disqusjs:</span></span><br><span class="line"> <span class="attr">shortname:</span></span><br><span class="line"> <span class="attr">siteName:</span></span><br><span class="line"> <span class="attr">apikey:</span></span><br><span class="line"> <span class="attr">api:</span></span><br><span class="line"> <span class="attr">nocomment:</span> <span class="comment"># display when a blog post or an article has no comment attached</span></span><br><span class="line"> <span class="attr">admin:</span></span><br><span class="line"> <span class="attr">adminLabel:</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-disqusjs.png"></p>
<h2 id="来必力"><a href="#来必力" class="headerlink" title="来必力"></a>来必力</h2><p>注册<a href="https://livere.com/">来必力</a>，配置你自己的来必力设置，然后在 Butterfly 里开启它。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">livere:</span></span><br><span class="line"> <span class="attr">uid:</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-laibili.jpg"><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-laibili_2.png"></p>
<h2 id="gitalk"><a href="#gitalk" class="headerlink" title="gitalk"></a>gitalk</h2><p>遵循 <a href="https://github.com/gitalk/gitalk">gitalk</a> 的指示去获取你的 github Oauth 应用的 client id 和 secret 值。以及查看它的相关配置説明。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">gitalk:</span></span><br><span class="line"> <span class="attr">client_id:</span> <span class="string">你的client</span> <span class="string">id</span> </span><br><span class="line"> <span class="attr">client_secret:</span> <span class="string">你的client</span> <span class="string">secret</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">你的github仓库</span></span><br><span class="line"> <span class="attr">owner:</span> <span class="string">你的github用户名</span></span><br><span class="line"> <span class="attr">admin:</span> <span class="string">该仓库的拥有者或协作者</span></span><br><span class="line"> <span class="attr">language:</span> <span class="string">zh-CN</span> <span class="comment"># en, zh-CN, zh-TW, es-ES, fr, ru</span></span><br><span class="line"> <span class="attr">perPage:</span> <span class="number">10</span> <span class="comment"># Pagination size, with maximum 100.</span></span><br><span class="line"> <span class="attr">distractionFreeMode:</span> <span class="literal">false</span> <span class="comment"># Facebook-like distraction free mode.</span></span><br><span class="line"> <span class="attr">pagerDirection:</span> <span class="string">last</span> <span class="comment"># Comment sorting direction, available values are last and first.</span></span><br><span class="line"> <span class="attr">createIssueManually:</span> <span class="literal">false</span> <span class="comment"># Gitalk will create a corresponding github issue for your every single page automatically</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-gitalk.png"></p>
<h2 id="Valine"><a href="#Valine" class="headerlink" title="Valine"></a>Valine</h2><p>遵循 <a href="https://github.com/xCss/Valine">Valine</a> 的指示去配置你的 LeanCloud 应用。以及查看相应的配置説明。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">valine:</span></span><br><span class="line"> <span class="attr">appId:</span> <span class="comment"># leancloud application app id</span></span><br><span class="line"> <span class="attr">appKey:</span> <span class="comment"># leancloud application app key</span></span><br><span class="line"> <span class="attr">pageSize:</span> <span class="number">10</span> <span class="comment"># comment list page size</span></span><br><span class="line"> <span class="attr">avatar:</span> <span class="string">monsterid</span> <span class="comment"># gravatar style https://valine.js.org/#/avatar</span></span><br><span class="line"> <span class="attr">lang:</span> <span class="string">en</span> <span class="comment"># i18n: zh-CN/zh-TW/en/ja</span></span><br><span class="line"> <span class="attr">placeholder:</span> <span class="string">记得留下你的暱称和邮箱....可以快速收到回復</span> <span class="comment"># valine comment input placeholder(like: Please leave your footprints )</span></span><br><span class="line"> <span class="attr">guest_info:</span> <span class="string">nick,mail,link</span> <span class="comment">#valine comment header info (nick/mail/link)</span></span><br><span class="line"> <span class="attr">recordIP:</span> <span class="literal">false</span> <span class="comment"># Record reviewer IP</span></span><br><span class="line"> <span class="attr">serverURLs:</span> <span class="comment"># This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span></span><br><span class="line"> <span class="attr">bg:</span> <span class="string">/image/comment_bg.png</span> <span class="comment"># valine background</span></span><br><span class="line"> <span class="attr">emojiCDN:</span> <span class="comment"># emoji CDN</span></span><br><span class="line"> <span class="attr">enableQQ:</span> <span class="literal">false</span> <span class="comment"># enable the Nickname box to automatically get QQ Nickname and QQ Avatar</span></span><br><span class="line"> <span class="attr">requiredFields:</span> <span class="string">nick,mail</span> <span class="comment"># required fields (nick/mail)</span></span><br></pre></td></tr></table></figure>
<p>Valine 于 v1.4.5 开始支持自定义表情，如果你需要自行配置，请在 emojiCDN 配置表情 CDN。<br>同时在 Hexo 工作目录下的 source/_data/ 创建一个 json 文件 valine.json, 等同于 Valine 需要配置的 emojiMaps，valine.json 配置方式可参考如下</p>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="line"># valine.json</span><br><span class="line">{ </span><br><span class="line"><span class="attr">"tv_doge"</span>: <span class="string">"6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png"</span>,</span><br><span class="line"><span class="attr">"tv_亲亲"</span>: <span class="string">"a8111ad55953ef5e3be3327ef94eb4a39d535d06.png"</span>,</span><br><span class="line"><span class="attr">"tv_偷笑"</span>: <span class="string">"bb690d4107620f1c15cff29509db529a73aee261.png"</span>,</span><br><span class="line"><span class="attr">"tv_再见"</span>: <span class="string">"180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png"</span>,</span><br><span class="line"><span class="attr">"tv_冷漠"</span>: <span class="string">"b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png"</span>,</span><br><span class="line"><span class="attr">"tv_发怒"</span>: <span class="string">"34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png"</span>,</span><br><span class="line"><span class="attr">"tv_发财"</span>: <span class="string">"34db290afd2963723c6eb3c4560667db7253a21a.png"</span>,</span><br><span class="line"><span class="attr">"tv_可爱"</span>: <span class="string">"9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png"</span>,</span><br><span class="line"><span class="attr">"tv_吐血"</span>: <span class="string">"09dd16a7aa59b77baa1155d47484409624470c77.png"</span>,</span><br><span class="line"><span class="attr">"tv_呆"</span>: <span class="string">"fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png"</span>,</span><br><span class="line"><span class="attr">"tv_呕吐"</span>: <span class="string">"9f996894a39e282ccf5e66856af49483f81870f3.png"</span>,</span><br><span class="line"><span class="attr">"tv_困"</span>: <span class="string">"241ee304e44c0af029adceb294399391e4737ef2.png"</span>,</span><br><span class="line"><span class="attr">"tv_坏笑"</span>: <span class="string">"1f0b87f731a671079842116e0991c91c2c88645a.png"</span>,</span><br><span class="line"><span class="attr">"tv_大佬"</span>: <span class="string">"093c1e2c490161aca397afc45573c877cdead616.png"</span>,</span><br><span class="line"><span class="attr">"tv_大哭"</span>: <span class="string">"23269aeb35f99daee28dda129676f6e9ea87934f.png"</span>,</span><br><span class="line"><span class="attr">"tv_委屈"</span>: <span class="string">"d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png"</span>,</span><br><span class="line"><span class="attr">"tv_害羞"</span>: <span class="string">"a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png"</span>,</span><br><span class="line"><span class="attr">"tv_尴尬"</span>: <span class="string">"7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png"</span>,</span><br><span class="line"><span class="attr">"tv_微笑"</span>: <span class="string">"70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png"</span>,</span><br><span class="line"><span class="attr">"tv_思考"</span>: <span class="string">"90cf159733e558137ed20aa04d09964436f618a1.png"</span>,</span><br><span class="line"><span class="attr">"tv_惊吓"</span>: <span class="string">"0d15c7e2ee58e935adc6a7193ee042388adc22af.png"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-valine.png"></p>
<h2 id="Utterances"><a href="#Utterances" class="headerlink" title="Utterances"></a>Utterances</h2><p>与 Gitalk 一样，基于 GitHub issues 的评论工具。相对于 Gitalk, 其相对需要权限较少。具体配置可参考 <a href="https://utteranc.es/">Utterances</a>。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">utterances:</span></span><br><span class="line"> <span class="attr">repo:</span></span><br><span class="line"> <span class="comment"># 可选 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"># 可选 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark</span></span><br><span class="line"> <span class="attr">light_theme:</span> <span class="string">github-light</span></span><br><span class="line"> <span class="attr">dark_theme:</span> <span class="string">photon-dark</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-Utterances.png"></p>
<h2 id="Facebook-Comment"><a href="#Facebook-Comment" class="headerlink" title="Facebook Comment"></a>Facebook Comment</h2><p>Facebook Comments 是 Facebook 提供的评论插件，需要登陆 Facebook 才可评论。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Facebook Comments Plugin</span></span><br><span class="line"><span class="comment"># https://developers.facebook.com/docs/plugins/comments/</span></span><br><span class="line"><span class="attr">facebook_comments:</span></span><br><span class="line"> <span class="attr">app_id:</span> </span><br><span class="line"> <span class="attr">user_id:</span> <span class="comment"># optional</span></span><br><span class="line"> <span class="attr">pageSize:</span> <span class="number">10</span> <span class="comment"># The number of comments to show</span></span><br><span class="line"> <span class="attr">order_by:</span> <span class="string">social</span> <span class="comment"># social/time/reverse_time</span></span><br><span class="line"> <span class="attr">lang:</span> <span class="string">en_US</span> <span class="comment"># Language en_US/zh_CN/zh_TW and so on。</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-butterfly-docs-facebook-comments.png"></p>
<h1 id="在线聊天"><a href="#在线聊天" class="headerlink" title="在线聊天"></a>在线聊天</h1><p>从 3.0 开始，Butterfly 主题内置了 4 种在綫聊天工具。你可以选择开启一种，方便你与访客的交流。<br><strong>通用设置</strong><br>这些工具都提供了一个按钮可以打开 / 关闭聊天窗口。<br>主题也提供了一个集合主题特色的按钮来替换这些工具本身的按钮，这个聊天按钮将会出现在右下角里。<br>你只需要把 chat_btn 打开就行。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">chat_btn:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-button.png"></p>
<h2 id="chatra"><a href="#chatra" class="headerlink" title="chatra"></a>chatra</h2><p>配置 <a href="https://chatra.com/">chatra</a>, 需要知道 Public key,打开 chatra 并注册账号。你可以在 Preferences 中找到 Public key<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-chatra-id.png"><br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><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">id:</span> <span class="string">xxxxxxxx</span></span><br></pre></td></tr></table></figure>
<p>chatra 的样式你可以 Chat Widget 自行配置<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-chatra-ui-settings.png"><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-chatra-ui-demo.png"></p>
<h2 id="tidio"><a href="#tidio" class="headerlink" title="tidio"></a>tidio</h2><p>配置 tidio, 需要知道 Public key, 打开 <a href="https://www.tidio.com/">tidio</a> 并注册账号。你可以在 Preferences > Developer 中找到 Public key<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-tidio-id.png"><br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><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">public_key:</span> <span class="string">XXXX</span></span><br></pre></td></tr></table></figure>
<p>tidio 的样式你可以 Channels 自行配置<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-tidio-setting.png"><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-tidio-demo.png"></p>
<h2 id="daovoice"><a href="#daovoice" class="headerlink" title="daovoice"></a>daovoice</h2><p>打开 <a href="http://daovoice.io/">daovoice</a> 并注册帐号,找到你的 app id<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-daovoice-appid.png"><br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">daovoice:</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="string">xxxxx</span></span><br></pre></td></tr></table></figure>
<p>可在聊天设置里配置聊天按钮等样式<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-daovoice-ui.png"><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-daovoice-demo.png"></p>
<h2 id="Gitter"><a href="#Gitter" class="headerlink" title="Gitter"></a>Gitter</h2><p>打开 <a href="https://gitter.im/">Gitter</a> 并注册帐号,创建一个 community 或者 room, 复製名称到设置去<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-gitter-setting.png"><br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><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><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-gitter-ui.png"></p>
<h2 id="crisp"><a href="#crisp" class="headerlink" title="crisp"></a>crisp</h2><p>打开 <a href="https://crisp.chat/en/">crisp</a> 并注册帐号,找到需要的网站 ID<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-buttefly-docs-chat-crisp.pngg"><br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">crisp:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">website_id:</span> <span class="string">xxxxxxxx</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-crisp-demo.png"></p>
<h1 id="分析统计"><a href="#分析统计" class="headerlink" title="分析统计"></a>分析统计</h1><h2 id="百度统计"><a href="#百度统计" class="headerlink" title="百度统计"></a>百度统计</h2><ol>
<li>登录百度统计的官方网站</li>
<li>找到你百度统计的统计代码<br><img src="https://img-blog.csdnimg.cn/20200901163056923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzY1MzY3,size_16,color_FFFFFF,t_70"><br>修改主题配置文件<code>_config.butterfly.yml</code>：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">baidu_analytics:</span> <span class="string">你的代码</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="谷歌统计"><a href="#谷歌统计" class="headerlink" title="谷歌统计"></a>谷歌统计</h2><ol>
<li>登录谷歌分析的官方网站</li>
<li>找到你的谷歌分析的跟踪 ID<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-google-analytics.jpg"><br>修改主题配置文件<code>_config.butterfly.yml</code>：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">google_analytics:</span> <span class="string">你的代码</span> <span class="comment"># 通常以`UA-`打头</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="谷歌统计-1"><a href="#谷歌统计-1" class="headerlink" title="谷歌统计"></a>谷歌统计</h2><ol>
<li>登录腾讯移动分析的官方网站</li>
<li>选择 WEB应用</li>
<li>找到你的站点 ID<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-tencent-analysic.png"><br>修改主题配置文件<code>_config.butterfly.yml</code>：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">tencent_analytics:</span> <span class="string">你的ID</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="CNZZ分析"><a href="#CNZZ分析" class="headerlink" title="CNZZ分析"></a>CNZZ分析</h2><ol>
<li>登录 CNZZ 分析的官方网站</li>
<li>找到 站点设置 - 获取代码</li>
<li>找到你的 web_id<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-CNZZ-analysic.pngg"><br>修改主题配置文件<code>_config.butterfly.yml</code>：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">cnzz_analytics:</span> <span class="string">你的代码</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h1 id="广告"><a href="#广告" class="headerlink" title="广告"></a>广告</h1><h2 id="谷歌广告"><a href="#谷歌广告" class="headerlink" title="谷歌广告"></a>谷歌广告</h2><p>主题已集成谷歌广告（自动广告）<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">google_adsense:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">auto_ads:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">js:</span> <span class="string">https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</span></span><br><span class="line"> <span class="attr">client:</span> <span class="comment"># 填入个人识别码</span></span><br><span class="line"> <span class="attr">enable_page_level_ads:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-google-adsense1.png"></p>
<h2 id="手动广告"><a href="#手动广告" class="headerlink" title="手动广告"></a>手动广告</h2><p>主题预留了三个位置可供插入广告，分别为主页文章 (每三篇文章出现广告)/aside 公告之后 / 文章页打赏之后。，把 html 代码填写到对应的位置<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">ad:</span></span><br><span class="line"> <span class="attr">index:</span></span><br><span class="line"> <span class="attr">aside:</span></span><br><span class="line"> <span class="attr">post:</span></span><br></pre></td></tr></table></figure>
<p>例如：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">index:</span> <span class="string"><ins</span> <span class="string">class="adsbygoogle"</span> <span class="string">style="display:block"</span> <span class="string">data-ad-format="fluid"</span> <span class="string">data-ad-layout-key="xxxxxxxxxxxx"</span> <span class="string">data-ad-client="ca-pub-xxxxxxxxxx"</span> <span class="string">data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script></span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-ad-post.png"><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-ad-index.png"></p>
<h1 id="网站验证"><a href="#网站验证" class="headerlink" title="网站验证"></a>网站验证</h1><p>如果需要搜索引擎收录网站，可能需要登录对应搜索引擎的管理平台进行提交。<br>各自的验证码可从各自管理平台拿到<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Google Webmaster tools verification setting</span></span><br><span class="line"><span class="comment"># See: https://www.google.com/webmasters/</span></span><br><span class="line"><span class="attr">google_site_verification:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Bing Webmaster tools verification setting</span></span><br><span class="line"><span class="comment"># See: https://www.bing.com/webmaster/</span></span><br><span class="line"><span class="attr">bing_site_verification:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Baidu Webmaster tools verification setting</span></span><br><span class="line"><span class="comment"># See: https://ziyuan.baidu.com/site/</span></span><br><span class="line"><span class="attr">baidu_site_verification:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 360 Webmaster tools verification setting</span></span><br><span class="line"><span class="comment"># see http://zhanzhang.so.com/</span></span><br><span class="line"><span class="attr">qihu_site_verification:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Yandex Webmaster tools verification setting</span></span><br><span class="line"><span class="comment"># see https://webmaster.yandex.com/</span></span><br><span class="line"><span class="attr">yandex_site_verification:</span></span><br></pre></td></tr></table></figure>
<h1 id="美化-特效"><a href="#美化-特效" class="headerlink" title="美化/特效"></a>美化/特效</h1><h2 id="自定义主题色"><a href="#自定义主题色" class="headerlink" title="自定义主题色"></a>自定义主题色</h2><p>可以修改大部分 UI 颜色<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">theme_color:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">main:</span> <span class="string">"#49B1F5"</span></span><br><span class="line"> <span class="attr">paginator:</span> <span class="string">"#00c4b6"</span></span><br><span class="line"> <span class="attr">button_hover:</span> <span class="string">"#FF7242"</span></span><br><span class="line"> <span class="attr">text_selection:</span> <span class="string">"#00c4b6"</span></span><br><span class="line"> <span class="attr">link_color:</span> <span class="string">"#99a9bf"</span></span><br><span class="line"> <span class="attr">meta_color:</span> <span class="string">"#858585"</span></span><br><span class="line"> <span class="attr">hr_color:</span> <span class="string">"#A4D8FA"</span></span><br><span class="line"> <span class="attr">code_foreground:</span> <span class="string">"#F47466"</span></span><br><span class="line"> <span class="attr">code_background:</span> <span class="string">"rgba(27, 31, 35, .05)"</span></span><br><span class="line"> <span class="attr">toc_color:</span> <span class="string">"#00c4b6"</span></span><br><span class="line"> <span class="attr">blockquote_padding_color:</span> <span class="string">"#49b1f5"</span></span><br><span class="line"> <span class="attr">blockquote_background_color:</span> <span class="string">"#49b1f5"</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-color_1.png"><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-color_2.png"></p>
<h2 id="网站背景"><a href="#网站背景" class="headerlink" title="网站背景"></a>网站背景</h2><p>默认显示白色，可设置图片或者颜色<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">background:</span></span><br></pre></td></tr></table></figure>
<p>留意: 如果你的网站根目录不是’/‘, 使用本地图片时，需加上你的根目录。<br>例如：网站是 <code>https://yoursite.com/blog</code>, 引用一张 <code>img/xx.png</code> 图片，则设置 <code>background</code> 为 <code>url (/blog/img/xx.png)</code><br>background: url(<a href="https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png">https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png</a>)<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-set-body-background-img.png"></p>
<h2 id="footer-背景"><a href="#footer-背景" class="headerlink" title="footer 背景"></a>footer 背景</h2><p>footer 的背景会与 <code>top_img</code> 的一致，当设置 <code>false</code> 时，将与主题色一致。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># footer是否显示图片背景(与top_img一致)</span></span><br><span class="line"><span class="attr">footer_bg:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-footer-img.png"></p>
<h2 id="打字效果"><a href="#打字效果" class="headerlink" title="打字效果"></a>打字效果</h2><p>打字效果 <a href="https://github.com/disjukr/activate-power-mode">activate-power-mode</a><br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Typewriter Effect (打字效果)</span></span><br><span class="line"><span class="comment"># https://github.com/disjukr/activate-power-mode</span></span><br><span class="line"><span class="attr">activate_power_mode:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">colorful:</span> <span class="literal">true</span> <span class="comment"># open particle animation (冒光特效)</span></span><br><span class="line"> <span class="attr">shake:</span> <span class="literal">true</span> <span class="comment"># open shake (抖动特效)</span></span><br></pre></td></tr></table></figure>
<h2 id="背景特效"><a href="#背景特效" class="headerlink" title="背景特效"></a>背景特效</h2><h3 id="静止彩带"><a href="#静止彩带" class="headerlink" title="静止彩带"></a>静止彩带</h3><p>好看的彩带背景，可设置每次刷新更换彩带，或者每次点击更换彩带<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><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">false</span></span><br><span class="line"> <span class="attr">size:</span> <span class="number">150</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><span class="line"> <span class="attr">click_to_change:</span> <span class="literal">false</span> <span class="comment">#设置是否每次点击都更换綵带</span></span><br><span class="line"> <span class="attr">mobile:</span> <span class="literal">false</span> <span class="comment"># false 手机端不显示 true 手机端显示</span></span><br></pre></td></tr></table></figure>
<p>相关配置可查看 <a href="https://github.com/hustcc/ribbon.js">canvas_ribbon</a><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-canvas-ribbon.png"></p>
<h3 id="动态彩带"><a href="#动态彩带" class="headerlink" title="动态彩带"></a>动态彩带</h3><p>好看的彩带背景，会飘动<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">canvas_ribbon_piao:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">mobile:</span> <span class="literal">false</span> <span class="comment"># false 手机端不显示 true 手机端显示</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-canvas-ribbon-piao.gif"></p>
<h3 id="canvas-nest"><a href="#canvas-nest" class="headerlink" title="canvas-nest"></a>canvas-nest</h3><p>好看的星空例子特效，会飘动<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">canvas_nest:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">color:</span> <span class="string">'0,0,255'</span> <span class="comment">#color of lines, default: '0,0,0'; RGB values: (R,G,B).(<span class="doctag">note:</span> use ',' to separate.)</span></span><br><span class="line"> <span class="attr">opacity:</span> <span class="number">0.7</span> <span class="comment"># the opacity of line (0~1), default: 0.5.</span></span><br><span class="line"> <span class="attr">zIndex:</span> <span class="number">-1</span> <span class="comment"># z-index property of the background, default: -1.</span></span><br><span class="line"> <span class="attr">count:</span> <span class="number">99</span> <span class="comment"># the number of lines, default: 99.</span></span><br><span class="line"> <span class="attr">mobile:</span> <span class="literal">false</span> <span class="comment"># false 手机端不显示 true 手机端显示</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-canvas_nest.gif"></p>
<h2 id="鼠标点击效果"><a href="#鼠标点击效果" class="headerlink" title="鼠标点击效果"></a>鼠标点击效果</h2><h3 id="烟花"><a href="#烟花" class="headerlink" title="烟花"></a>烟花</h3><p>zIndex 建议只在 -1 和 9999 上选<br>-1 代表烟火效果在底部<br>9999 代表烟火效果在前面<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">fireworks:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">zIndex:</span> <span class="number">9999</span> <span class="comment"># -1 or 9999</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-firewall.gif"></p>
<h3 id="爱心"><a href="#爱心" class="headerlink" title="爱心"></a>爱心</h3><p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 点击出现爱心</span></span><br><span class="line"><span class="attr">click_heart:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/click_love.gif"></p>
<h3 id="文字"><a href="#文字" class="headerlink" title="文字"></a>文字</h3><p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 点击出现文字，文字可自行修改</span></span><br><span class="line"><span class="attr">ClickShowText:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">text:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">I</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">LOVE</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">YOU</span></span><br><span class="line"> <span class="attr">fontSize:</span> <span class="string">15px</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/click_word.gif"></p>
<h2 id="页面美化"><a href="#页面美化" class="headerlink" title="页面美化"></a>页面美化</h2><p>会改变 ol、ul、h1-h5 的样式<br><code>field</code> 配置生效的区域</p>
<ul>
<li>post 只在文章页生效</li>
<li>site 在全站生效<br>修改主题配置文件<code>_config.butterfly.yml</code>：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 美化页面显示</span></span><br><span class="line"><span class="attr">beautify:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">field:</span> <span class="string">site</span> <span class="comment"># site/post</span></span><br><span class="line"> <span class="attr">title-prefix-icon:</span> <span class="string">'\f0c1'</span></span><br><span class="line"> <span class="attr">title-prefix-icon-color:</span> <span class="string">"#F47466"</span></span><br></pre></td></tr></table></figure>
未开启美化<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-post-beautify.png"><br>开启美化<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-post-beautif.png"></li>
</ul>
<h2 id="自定义字体和字体大小"><a href="#自定义字体和字体大小" class="headerlink" title="自定义字体和字体大小"></a>自定义字体和字体大小</h2><h3 id="全局字体"><a href="#全局字体" class="headerlink" title="全局字体"></a>全局字体</h3><p>可自行设置字体的 <code>font-family</code><br>如不需要配置，请留空<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">font:</span></span><br><span class="line"> <span class="attr">global-font-size:</span></span><br><span class="line"> <span class="attr">code-font-size:</span></span><br><span class="line"> <span class="attr">font-family:</span> <span class="string">-apple-system,</span> <span class="string">BlinkMacSystemFont,</span> <span class="string">"Segoe UI"</span><span class="string">,</span> <span class="string">"Helvetica Neue"</span><span class="string">,</span> <span class="string">Lato,</span> <span class="string">Roboto,</span> <span class="string">"PingFang SC"</span><span class="string">,</span> <span class="string">"Microsoft JhengHei"</span><span class="string">,</span> <span class="string">"Microsoft YaHei"</span><span class="string">,</span> <span class="string">sans-serif</span></span><br><span class="line"> <span class="attr">code-font-family:</span> <span class="string">consolas,</span> <span class="string">Menlo,</span> <span class="string">"PingFang SC"</span><span class="string">,</span> <span class="string">"Microsoft JhengHei"</span><span class="string">,</span> <span class="string">"Microsoft YaHei"</span><span class="string">,</span> <span class="string">sans-serif</span></span><br></pre></td></tr></table></figure>
<h3 id="Blog-标题字体"><a href="#Blog-标题字体" class="headerlink" title="Blog 标题字体"></a>Blog 标题字体</h3><p>可自行设置字体的 <code>font-family</code><br>如不需要配置，请留空<br>如不需要使用网络字体，只需要把 font_link 留空就行<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">blog_title_font:</span></span><br><span class="line"> <span class="attr">font_link:</span> <span class="string">https://fonts.googleapis.com/css?family=Titillium+Web&display=swap</span></span><br><span class="line"> <span class="attr">font-family:</span> <span class="string">Titillium</span> <span class="string">Web,</span> <span class="string">'PingFang SC'</span><span class="string">,</span> <span class="string">'Hiragino Sans GB'</span><span class="string">,</span> <span class="string">'Microsoft JhengHei'</span><span class="string">,</span> <span class="string">'Microsoft YaHei'</span><span class="string">,</span> <span class="string">sans-serif</span></span><br></pre></td></tr></table></figure>
<h2 id="网站副标题"><a href="#网站副标题" class="headerlink" title="网站副标题"></a>网站副标题</h2><p>可设置主页中显示的网站副标题或者喜欢的座右铭。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 主页subtitle</span></span><br><span class="line"><span class="attr">subtitle:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># 打字效果</span></span><br><span class="line"> <span class="attr">effect:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># 循环或者只打字一次</span></span><br><span class="line"> <span class="attr">loop:</span> <span class="literal">false</span></span><br><span class="line"> <span class="comment"># source调用第三方服务</span></span><br><span class="line"> <span class="comment"># source: false 关闭调用</span></span><br><span class="line"> <span class="comment"># source: 1 调用搏天api的随机语录（简体） https://api.btstu.cn/</span></span><br><span class="line"> <span class="comment"># source: 2 调用一言网的一句话（简体） https://hitokoto.cn/</span></span><br><span class="line"> <span class="comment"># source: 3 调用一句网（简体） http://yijuzhan.com/</span></span><br><span class="line"> <span class="comment"># source: 4 调用今日诗词（简体） https://www.jinrishici.com/</span></span><br><span class="line"> <span class="comment"># subtitle 会先显示 source , 再显示 sub 的内容</span></span><br><span class="line"> <span class="attr">source:</span> <span class="literal">false</span></span><br><span class="line"> <span class="comment"># 如果有英文逗号' , ',请使用转义字元 &#44;</span></span><br><span class="line"> <span class="comment"># 如果有英文双引号' " ',请使用转义字元 &quot;</span></span><br><span class="line"> <span class="comment"># 开头不允许转义字元，如需要，请把整个句子用双引号包住</span></span><br><span class="line"> <span class="comment"># 例如 ”&quotNever put off till tomorrow what you can do today&quot"</span></span><br><span class="line"> <span class="comment"># 如果关闭打字效果，subtitle只会显示sub的第一行文字</span></span><br><span class="line"> <span class="attr">sub:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">今日事&#44;今日毕</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">Never</span> <span class="string">put</span> <span class="string">off</span> <span class="string">till</span> <span class="string">tomorrow</span> <span class="string">what</span> <span class="string">you</span> <span class="string">can</span> <span class="string">do</span> <span class="string">today</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-index-subtitle.gif"></p>
<h2 id="主页-top-img-显示大小"><a href="#主页-top-img-显示大小" class="headerlink" title="主页 top_img 显示大小"></a>主页 top_img 显示大小</h2><p>默认的显示为全屏。site-info 的区域会居中显示<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 主页设置</span></span><br><span class="line"><span class="comment"># 默认top_img全屏，site_info在中间</span></span><br><span class="line"><span class="comment"># 使用默认, 都无需填写（建议默认）</span></span><br><span class="line"><span class="attr">index_site_info_top:</span> <span class="comment"># 主页标题距离顶部距离 例如 300px/300em/300rem/10%</span></span><br><span class="line"><span class="attr">index_top_img_height:</span> <span class="comment">#主页top_img高度 例如 300px/300em/300rem 不能使用百分比</span></span><br></pre></td></tr></table></figure>
<p>注意：index_top_img_height 的值不能使用百分比。<br>2 个都不填的话，会使用默认值<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-index-top-img-setting.png"></p>
<h2 id="页面加载动画-preloader"><a href="#页面加载动画-preloader" class="headerlink" title="页面加载动画 preloader"></a>页面加载动画 preloader</h2><p>当进入网页时，因为加载速度的问题，可能会导致 top_img 图片出现断层显示，或者网页加载不全而出现等待时间，开启 preloader 后，会显示加载动画，等页面加载完，加载动画会消失。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">preloader:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-preloader.gif"></p>
<h2 id="PWA"><a href="#PWA" class="headerlink" title="PWA"></a>PWA</h2><p>PWA简单来说就是让网站有App体验,要为 Butterfly 配上 PWA 特性，你需要如下几个步骤:</p>
<ol>
<li>打开 hexo 工作目录</li>
<li><code>npm install hexo-offline --save</code> 或者 <code>yarn add hexo-offline</code></li>
<li>修改主题配置文件<code>_config.butterfly.yml</code>：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># offline config passed to sw-precache.</span></span><br><span class="line"><span class="attr">offline:</span></span><br><span class="line"> <span class="attr">maximumFileSizeToCacheInBytes:</span> <span class="number">10485760</span> <span class="comment"># 缓存的最大文件大小，以字节为单位</span></span><br><span class="line"> <span class="attr">staticFileGlobs:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">public/**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}</span></span><br><span class="line"> <span class="comment"># 静态文件合集，如果你的站点使用了例如webp格式的文件，请将文件类型添加进去。</span></span><br><span class="line"> <span class="attr">stripPrefix:</span> <span class="string">public</span></span><br><span class="line"> <span class="attr">verbose:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">runtimeCaching:</span></span><br><span class="line"> <span class="comment"># CDNs - should be cacheFirst, since they should be used specific versions so should not change</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">urlPattern:</span> <span class="string">/*</span> <span class="comment"># 如果你需要加载CDN资源，请配置该选项，如果没有，可以不配置。</span></span><br><span class="line"> <span class="attr">handler:</span> <span class="string">cacheFirst</span></span><br><span class="line"> <span class="attr">options:</span></span><br><span class="line"> <span class="attr">origin:</span> <span class="string">your_websie_url</span> <span class="comment"># 可替换成你的 url</span></span><br></pre></td></tr></table></figure>
更多内容请查看 <a href="https://github.com/JLHwung/hexo-offline">hexo-offline</a> 的官方文档</li>
<li>在主题配置文件中开启 pwa 选项。<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">pwa:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">manifest:</span> <span class="string">/img/pwa/manifest.json</span></span><br><span class="line"> <span class="attr">apple_touch_icon:</span> <span class="string">/img/pwa/apple-touch-icon.png</span></span><br><span class="line"> <span class="attr">favicon_32_32:</span> <span class="string">/img/pwa/32.png</span></span><br><span class="line"> <span class="attr">favicon_16_16:</span> <span class="string">/img/pwa/16.png</span></span><br><span class="line"> <span class="attr">mask_icon:</span> <span class="string">/img/pwa/safari-pinned-tab.svg</span></span><br></pre></td></tr></table></figure></li>
<li>在创建 source/ 目录中创建 manifest.json 文件。<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"name"</span>: <span class="string">"string"</span>, <span class="comment">//应用全称</span></span><br><span class="line"> <span class="attr">"short_name"</span>: <span class="string">"Junzhou"</span>, <span class="comment">//应用简称</span></span><br><span class="line"> <span class="attr">"theme_color"</span>: <span class="string">"#49b1f5"</span>, <span class="comment">//匹配浏览器的地址栏颜色</span></span><br><span class="line"> <span class="attr">"background_color"</span>: <span class="string">"#49b1f5"</span>,<span class="comment">//加载应用时的背景色</span></span><br><span class="line"> <span class="attr">"display"</span>: <span class="string">"standalone"</span>,<span class="comment">//首选显示模式 其他选项有：fullscreen,minimal-ui,browser</span></span><br><span class="line"> <span class="attr">"scope"</span>: <span class="string">"/"</span>,</span><br><span class="line"> <span class="attr">"start_url"</span>: <span class="string">"/"</span>,</span><br><span class="line"> <span class="attr">"icons"</span>: [ <span class="comment">//该数组指定icons图标参数，用来时适配不同设备（需为png，至少包含一个192px*192px的图标）</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"src"</span>: <span class="string">"images/pwaicons/36.png"</span>, <span class="comment">//图标文件的目录，需在source/目录下自行创建。</span></span><br><span class="line"> <span class="attr">"sizes"</span>: <span class="string">"36x36"</span>,</span><br><span class="line"> <span class="attr">"type"</span>: <span class="string">"image/png"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"src"</span>: <span class="string">"images/pwaicons/48.png"</span>,</span><br><span class="line"> <span class="attr">"sizes"</span>: <span class="string">"48x48"</span>,</span><br><span class="line"> <span class="attr">"type"</span>: <span class="string">"image/png"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"src"</span>: <span class="string">"images/pwaicons/72.png"</span>,</span><br><span class="line"> <span class="attr">"sizes"</span>: <span class="string">"72x72"</span>,</span><br><span class="line"> <span class="attr">"type"</span>: <span class="string">"image/png"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"src"</span>: <span class="string">"images/pwaicons/96.png"</span>,</span><br><span class="line"> <span class="attr">"sizes"</span>: <span class="string">"96x96"</span>,</span><br><span class="line"> <span class="attr">"type"</span>: <span class="string">"image/png"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"src"</span>: <span class="string">"images/pwaicons/144.png"</span>,</span><br><span class="line"> <span class="attr">"sizes"</span>: <span class="string">"144x144"</span>,</span><br><span class="line"> <span class="attr">"type"</span>: <span class="string">"image/png"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"src"</span>: <span class="string">"images/pwaicons/192.png"</span>,</span><br><span class="line"> <span class="attr">"sizes"</span>: <span class="string">"192x192"</span>,</span><br><span class="line"> <span class="attr">"type"</span>: <span class="string">"image/png"</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"src"</span>: <span class="string">"images/pwaicons/512.png"</span>,</span><br><span class="line"> <span class="attr">"sizes"</span>: <span class="string">"512x512"</span>,</span><br><span class="line"> <span class="attr">"type"</span>: <span class="string">"image/png"</span></span><br><span class="line"> }</span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">"splash_pages"</span>: <span class="literal">null</span> <span class="comment">//配置自定义启动动画。</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
你也可以通过 <a href="https://app-manifest.firebaseapp.com/">Web App Manifest</a> 快速创建 manifest.json。（Web App Manifest 要求至少包含一个 512*512 像素的图标）</li>
</ol>
<ul>
<li>可以通过 Chrome 插件 Lighthouse 检查 PWA 配置是否生效以及配置是否正确。<ul>
<li>打开博客页面</li>
<li>启动 Lighthouse 插件 (Lighthouse 插件要求至少包含一个 512*512 像素的图标)<br>关于 PWA（渐进式增强 Web 应用）的更多内容请参閲 <a href="https://developers.google.com/web/tools/lighthouse/audits/address-bar">Google Tools for Web Developers</a></li>
</ul>
</li>
</ul>
<h1 id="图片大图查看模式"><a href="#图片大图查看模式" class="headerlink" title="图片大图查看模式"></a>图片大图查看模式</h1><h2 id="fancybox"><a href="#fancybox" class="headerlink" title="fancybox"></a>fancybox</h2><p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># fancybox http://fancyapps.com/fancybox/3/</span></span><br><span class="line"><span class="attr">fancybox:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/fancybox.gif"></p>
<h2 id="medium-zoom"><a href="#medium-zoom" class="headerlink" title="medium_zoom"></a>medium_zoom</h2><p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">medium_zoom:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/medium_zoom.gif"></p>
<h1 id="Snackbar-弹窗"><a href="#Snackbar-弹窗" class="headerlink" title="Snackbar 弹窗"></a>Snackbar 弹窗</h1><p>Snackbar 弹窗，根据自己爱好开启<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">snackbar:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">position:</span> <span class="string">bottom-left</span></span><br><span class="line"> <span class="attr">bg_light:</span> <span class="string">'#49b1f5'</span> <span class="comment">#light mode时弹窗背景</span></span><br><span class="line"> <span class="attr">bg_dark:</span> <span class="string">'#2d3035'</span> <span class="comment">#dark mode时弹窗背景</span></span><br></pre></td></tr></table></figure>
<p>未开启<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/snackbar_false.gif"><br>已经开启<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/snackbar_true.gif"></p>
<h1 id="豆瓣"><a href="#豆瓣" class="headerlink" title="豆瓣"></a>豆瓣</h1><p>很多人使用 <a href="https://github.com/mythsman/hexo-douban">hexo-douban</a> 这款插件。但是该插件是直接生成相应的网页，而不会去读取对应的 markdown 文件。因此，可在设置里进行相应的配置。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 如果你有使用hexo-douban，可配置这个</span></span><br><span class="line"><span class="attr">douban:</span></span><br><span class="line"> <span class="attr">meta:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">movies_img:</span> <span class="string">https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg</span></span><br><span class="line"> <span class="attr">books_img:</span></span><br><span class="line"> <span class="attr">games_img:</span></span><br></pre></td></tr></table></figure>
<p>由于豆瓣开启了反盗链，因此，一些浏览器（safari）会无法显示图片，可把 meta 设为 true。但此操作会导致一些插件失效（例如：不蒜子）。</p>
<h1 id="Pjax"><a href="#Pjax" class="headerlink" title="Pjax"></a>Pjax</h1><p>当用户点击链接，通过 ajax 更新页面需要变化的部分，然后使用 HTML5 的 pushState 修改浏览器的 URL 地址。<br>这样可以不用重复加载相同的资源（css/js）， 从而提升网页的加载速度。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 如果你有使用hexo-douban，可配置这个</span></span><br><span class="line"><span class="attr">pjax:</span> </span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">exclude:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">/music/</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">/no-pjax/</span></span><br></pre></td></tr></table></figure>
<h1 id="Inject"><a href="#Inject" class="headerlink" title="Inject"></a>Inject</h1><p>如想添加额外的 <code>js/css/meta</code> 等等东西，可以在 Inject 里添加，支持添加到 head (<code></body></code> 标籤之前) 和 bottom (<code></html></code> 标籤之前)。<br>请注意：以标準的 html 格式添加内容<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line"> <span class="attr">head:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="/self.css"></span></span><br><span class="line"> <span class="attr">bottom:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">src="xxxx"></script></span></span><br></pre></td></tr></table></figure>
<p>留意: 如果你的网站根目录不是’/‘, 使用本地图片时，需加上你的根目录。<br>例如：网站是 <code>https://yoursite.com/blog</code>, 引用 <code>css/xx.css</code>，则设置为 <code><link rel="stylesheet" href="/blog/css/xx.css"></code></p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>Butterfly</tag>
<tag>主题</tag>
<tag>配置</tag>
</tags>
</entry>
<entry>
<title>Butterfly主题安装文档(二)之主题配置</title>
<url>/posts/22836fb9-5935-11eb-ba6a-a5e2f242e8b2/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="语言"><a href="#语言" class="headerlink" title="语言"></a>语言</h1><p>修改项目配置文件 <code>_config.yml</code><br>默认语言是 en</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">language:</span> <span class="string">zh-CN</span></span><br></pre></td></tr></table></figure>
<p>主题支持三种语言：</p>
<ol>
<li>default(en)</li>
<li>zh-CN (简体中文)</li>
<li>zh-TW (繁体中文)</li>
</ol>
<h1 id="网站资料"><a href="#网站资料" class="headerlink" title="网站资料"></a>网站资料</h1><p>修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改项目根目录的<code>_config.yml</code><br><img src="https://img-blog.csdnimg.cn/20200828152255640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzY1MzY3,size_16,color_FFFFFF,t_70"></p>
<h1 id="导航菜单"><a href="#导航菜单" class="headerlink" title="导航菜单"></a>导航菜单</h1><p>修改 主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><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">fas</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">fas</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">fas</span> <span class="string">fa-tags</span></span><br><span class="line"> <span class="attr">Categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line"> <span class="string">List||fas</span> <span class="attr">fa-list:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">Music</span> <span class="string">||</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">Movie</span> <span class="string">||</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br><span class="line"> <span class="attr">Link:</span> <span class="string">/link/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-link</span></span><br><span class="line"> <span class="attr">About:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br></pre></td></tr></table></figure>
<p>必须是 <code>/xxx/</code>，后面 <code>||</code> 分开，然后写图标名<a href="https://fontawesome.com/icons?from=io">支持的图标网</a>。<br><strong>注意：</strong> 导航的文字可自行更改</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line"> <span class="string">首页:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-home</span></span><br><span class="line"> <span class="string">归档:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-archive</span></span><br><span class="line"> <span class="string">标签:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-tags</span></span><br><span class="line"> <span class="string">分类:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line"> <span class="string">列表||fas</span> <span class="attr">fa-list:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">音乐</span> <span class="string">||</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">电影</span> <span class="string">||</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br><span class="line"> <span class="string">友情链接:</span> <span class="string">/link/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-link</span></span><br><span class="line"> <span class="string">关于:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br></pre></td></tr></table></figure>
<h1 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h1><p>代码块中的所有功能只适用于 Hexo 默认的 highlight 渲染，如果使用第三方的渲染器，不一定会有效</p>
<h2 id="代码高亮主题"><a href="#代码高亮主题" class="headerlink" title="代码高亮主题"></a>代码高亮主题</h2><blockquote>
<p>Butterfly 支持 6 种代码高亮样式, 自定义主题请查看<a href="https://demo.百度.me/posts/4aa8abbe/#%E4%BB%A3%E7%A2%BC%E9%AB%98%E4%BA%AE%E4%B8%BB%E9%A1%8C">自定义主题</a></p>
</blockquote>
<ul>
<li>default</li>
<li>darker</li>
<li>pale night</li>
<li>light</li>
<li>ocean</li>
<li>mac</li>
<li>mac light</li>
</ul>
<p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">highlight_theme:</span> <span class="string">light</span></span><br></pre></td></tr></table></figure>
<h2 id="代码复制"><a href="#代码复制" class="headerlink" title="代码复制"></a>代码复制</h2><p>Butterfly主题支持代码复制功能。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">highlight_copy:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h2 id="代码展开-关闭"><a href="#代码展开-关闭" class="headerlink" title="代码展开/关闭"></a>代码展开/关闭</h2><p>在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击 <code>></code> 可展开代码</p>
<ul>
<li>true 全部代码框不展开，需点击 <code>></code> 打开</li>
<li>false 代码狂展开，有 <code>></code> 点击按钮</li>
<li>none 不显示 <code>></code> 按钮<br>修改主题配置文件<code>_config.butterfly.yml</code>：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">highlight_shrink:</span> <span class="literal">true</span> <span class="comment">#代码框不展开，需点击 '>' 打开</span></span><br></pre></td></tr></table></figure>
<h2 id="代码换行"><a href="#代码换行" class="headerlink" title="代码换行"></a>代码换行</h2>在默认情况下，<code>hexo-highlight</code> 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。<br>修改主题配置文件<code>_config.butterfly.yml</code>：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">code_word_wrap:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
然后找到 <code>Hexo</code> 配置文件<code>_config.yml</code>，将 <code>line_number</code> 改成 <code>false</code>:<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">highlight:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">line_number:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">auto_detect:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">tab_replace:</span></span><br></pre></td></tr></table></figure>
<h1 id="社交图标"><a href="#社交图标" class="headerlink" title="社交图标"></a>社交图标</h1>社交图标即主页上个性标签下的各种社交账号关联。<blockquote>
<p>书写格式：<code>图标名：url || 描述性文字</code></p>
</blockquote>
</li>
</ul>
<p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">social:</span></span><br><span class="line"> <span class="attr">fab fa-github:</span> <span class="string">https://github.com/xxxxx</span> <span class="string">||</span> <span class="string">Github</span></span><br><span class="line"> <span class="attr">fas fa-envelope:</span> <span class="string">mailto:xxxxxx@gmail.com</span> <span class="string">||</span> <span class="string">Email</span></span><br></pre></td></tr></table></figure>
<p>图标名可在这寻找: <a href="https://fontawesome.com/icons?from=io">https://fontawesome.com/icons?from=io</a></p>
<h1 id="顶部图"><a href="#顶部图" class="headerlink" title="顶部图"></a>顶部图</h1><p>顶部图有 2 种配置：具体 url 和（留空，true 和 false，三个效果一样）</p>
<h2 id="page页"><a href="#page页" class="headerlink" title="page页"></a>page页</h2><p><strong>当具体 url 时</strong></p>
<ul>
<li>主页的顶部图可以在主题配置文件中设置 <code>index_img</code></li>
<li>archives 页的顶部图可以在主题配置文件中设置 <code>archive_img</code></li>
<li>其他 page 页的顶部图可以在各自的 md 页面设置 <code>front-matter</code> 中的 <code>top_img</code><div class="note info"><p>页面如果没有设置各自的 top_img，则会显示 <code>default_top_img</code> 图片</p>
</div></li>
</ul>
<p><strong>留空， true 和 false</strong><br>主页会显示纯颜色的顶部图，其他 page 的顶部图没有设置时，也会显示纯颜色的顶部图</p>
<h2 id="post页"><a href="#post页" class="headerlink" title="post页"></a>post页</h2><p>post 页的顶部图会优先显示各自<code>front-matter</code>中的<code>top_img</code>, 如果没有设置，则会缩略图（即各自 front-matter 中的 cover)，如果没有则会显示显示 <code>default_top_img</code> 图片</p>
<h1 id="文章置顶"><a href="#文章置顶" class="headerlink" title="文章置顶"></a>文章置顶</h1><p>要为文章置顶，你需要安装插件 (<a href="https://github.com/netcan/hexo-generator-index-pin-top">hexo-generator-index-pin-top</a> 或者 <a href="https://github.com/hexo-next/hexo-generator-indexed">hexo-generator-indexed</a>)</p>
<ul>
<li>如果使用 <code>hexo-generator-index-pin-top</code>, 需要先卸载掉 <code>hexo-generator-index</code>，然后在文章的 front-matter 区域里添加 <code>top: true</code> 属性来把这篇文章置顶</li>
<li>如果使用 <code>hexo-generator-indexed</code>, 需要先卸载掉 <code>hexo-generator-index</code>，然后在文章的 front-matter 区域里添加 <code>sticky: 1</code> 属性来把这篇文章置顶。数值越大，置顶的优先级越大</li>
</ul>
<h1 id="文章封面"><a href="#文章封面" class="headerlink" title="文章封面"></a>文章封面</h1><p>文章的 markdown 文档上，在 <code>Front-matter</code> 添加<code>cover</code>, 并填上要显示的图片地址。</p>
<ul>
<li>如果不配置 cover, 可以设置显示默认的 cover。</li>
<li>如果不想在首页显示 cover, 可以设置为 false。</li>
</ul>
<p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">cover:</span></span><br><span class="line"> <span class="comment"># 是否显示文章封面</span></span><br><span class="line"> <span class="attr">index_enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">aside_enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">archives_enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># 封面显示的位置</span></span><br><span class="line"> <span class="comment"># 三个值可配置 left , right , both</span></span><br><span class="line"> <span class="attr">position:</span> <span class="string">both</span></span><br><span class="line"> <span class="comment"># 当没有设置cover时，默认的封面显示</span></span><br><span class="line"> <span class="attr">default_cover:</span> <span class="comment"># 当配置多张图片时，会随机选择</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">https://cdn.jsdelivr.net/gh/百度127/CDN@latest/cover/default_bg.png</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">https://cdn.jsdelivr.net/gh/百度127/CDN@latest/cover/default_bg2.png</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">https://cdn.jsdelivr.net/gh/百度127/CDN@latest/cover/default_bg3.png</span></span><br></pre></td></tr></table></figure>
<h1 id="文章页相关配置"><a href="#文章页相关配置" class="headerlink" title="文章页相关配置"></a>文章页相关配置</h1><h2 id="文章-meta-显示"><a href="#文章-meta-显示" class="headerlink" title="文章 meta 显示"></a>文章 meta 显示</h2><p>这个选项是用来显示文章的相关信息的。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">post_meta:</span></span><br><span class="line"> <span class="attr">page:</span></span><br><span class="line"> <span class="attr">date_type:</span> <span class="string">both</span> <span class="comment"># created or updated or both 主页文章日期是创建日或者更新日或都显示</span></span><br><span class="line"> <span class="attr">categories:</span> <span class="literal">true</span> <span class="comment"># true or false 主页是否显示分类</span></span><br><span class="line"> <span class="attr">tags:</span> <span class="literal">true</span> <span class="comment"># true or false 主页是否显示标籤</span></span><br><span class="line"> <span class="attr">label:</span> <span class="literal">true</span> <span class="comment"># true or false 显示描述性文字</span></span><br><span class="line"> <span class="attr">post:</span></span><br><span class="line"> <span class="attr">date_type:</span> <span class="string">both</span> <span class="comment"># created or updated or both 文章页日期是创建日或者更新日或都显示</span></span><br><span class="line"> <span class="attr">categories:</span> <span class="literal">true</span> <span class="comment"># true or false 文章页是否显示分类</span></span><br><span class="line"> <span class="attr">tags:</span> <span class="literal">true</span> <span class="comment"># true or false 文章页是否显示标籤</span></span><br><span class="line"> <span class="attr">label:</span> <span class="literal">true</span> <span class="comment"># true or false 显示描述性文字</span></span><br></pre></td></tr></table></figure>
<p>在文章详情页顶部的资料，<code>date_type</code>: 可设置文章日期显示创建日期 (created) 或者更新日期 (updated) 或者两种都显示 (both)<br><code>categories</code> 是否显示分类<br>tags 是否显示标签</p>
<h2 id="文章版权"><a href="#文章版权" class="headerlink" title="文章版权"></a>文章版权</h2><p>为你的博客文章展示文章版权和许可协议。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">post_copyright:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">decode:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">license:</span> <span class="string">CC</span> <span class="string">BY-NC-SA</span> <span class="number">4.0</span></span><br><span class="line"> <span class="attr">license_url:</span> <span class="string">https://creativecommons.org/licenses/by-nc-sa/4.0/</span></span><br></pre></td></tr></table></figure>
<p>如果有文章（例如：转载文章）不需要显示版权，可以在文章 Front-matter 单独设置</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">copyright: false</span><br></pre></td></tr></table></figure>
<p>从 3.0.0 开始，支持对单独文章设置版权信息，可以在文章 Front-matter 单独设置</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">copyright: true</span><br><span class="line">copyright<span class="emphasis">_author: xxxx</span></span><br><span class="line"><span class="emphasis">copyright_</span>author<span class="emphasis">_href: https://xxxxxx.com</span></span><br><span class="line"><span class="emphasis">copyright_</span>url: https://xxxxxx.com</span><br><span class="line">copyright<span class="emphasis">_info: 此文章版权归xxxxx所有，如有转载，请註明来自原作者</span></span><br></pre></td></tr></table></figure>
<h2 id="文章打赏"><a href="#文章打赏" class="headerlink" title="文章打赏"></a>文章打赏</h2><p>在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。对于没有提供二维码的，可配置一张软件的 icon 图片，然后在 link 上添加相应的打赏链接。用户点击图片就会跳转到链接去。link 可以不写，会默认为图片的链接。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">reward:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">QR_code:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/image/wechat.jpg</span></span><br><span class="line"> <span class="attr">link:</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">微信</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/image/alipay.jpg</span></span><br><span class="line"> <span class="attr">link:</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">支付宝</span></span><br></pre></td></tr></table></figure>
<h2 id="文章隐藏"><a href="#文章隐藏" class="headerlink" title="文章隐藏"></a>文章隐藏</h2><p>如需要文章隐藏功能，请装插件 <a href="https://github.com/hexo-next/hexo-generator-indexed">hexo-generator-indexed</a> 或者 <a href="https://github.com/printempw/hexo-hide-posts">hexo-hide-posts</a></p>
<h2 id="TOC目录"><a href="#TOC目录" class="headerlink" title="TOC目录"></a>TOC目录</h2><p>在文章页，会有一个目录，用于显示 TOC。</p>
<ul>
<li>enable: 是否显示 TOC</li>
<li>number: 是否显示章节数</li>
<li>auto_open: 可选择进入文章页面时，是否自动打开 sidebar 显示 TOC</li>
</ul>
<p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<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">true</span></span><br><span class="line"> <span class="attr">auto_open:</span> <span class="literal">true</span> <span class="comment"># auto open the sidebar</span></span><br></pre></td></tr></table></figure>
<h3 id="为特定的文章配置"><a href="#为特定的文章配置" class="headerlink" title="为特定的文章配置"></a>为特定的文章配置</h3><p>在你的文章 md 文件的头部，Front-matter 中加入 toc_number、toc 和 auto_open，并配置 true 或者 false 即可。<br>主题会优先判断文章 Markdown 的 Front-matter 是否有配置，如有，则以 Front-matter 的配置为准。否则，以主题配置文件中的配置为准</p>
<h2 id="相关文章"><a href="#相关文章" class="headerlink" title="相关文章"></a>相关文章</h2><p>相关文章推荐的原理是根据文章 tags 的比重来推荐<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">related_post:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">6</span> <span class="comment"># 显示推荐文章数目</span></span><br><span class="line"> <span class="attr">date_type:</span> <span class="string">created</span> <span class="comment"># or created or updated 文章日期显示创建日或者更新日</span></span><br></pre></td></tr></table></figure>
<h2 id="文章锚点"><a href="#文章锚点" class="headerlink" title="文章锚点"></a>文章锚点</h2><p>开启文章锚点后，当你在文章页进行滚动时，文章链接会根据标题 ID 进行替换<br>(注意：每替换一次，会留下一个歷史记录。所以如果一篇文章有很多锚点的话，网页的歷史记录会很多。)<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">anchor:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h2 id="文章过期提醒"><a href="#文章过期提醒" class="headerlink" title="文章过期提醒"></a>文章过期提醒</h2><p>可设置是否显示文章过期提醒，以更新时间为基准。</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">noticeOutdate:</span><br><span class="line"> enable: true</span><br><span class="line"> style: flat # style: simple/flat</span><br><span class="line"> limit<span class="emphasis">_day: 365 # When will it be shown</span></span><br><span class="line"><span class="emphasis"> position: top # position: top/bottom</span></span><br><span class="line"><span class="emphasis"> message_</span>prev: It has been</span><br><span class="line"> message<span class="emphasis">_next: days since the last update, the content of the article may be outdated.</span></span><br></pre></td></tr></table></figure>
<p><strong>limit_day：</strong> 距离更新时间多少天才显示文章过期提醒<br><strong>message_prev：</strong> 距离更新时间多少天才显示文章过期提醒<br><strong>message_next：</strong> 天数之后的文字</p>
<h1 id="头像"><a href="#头像" class="headerlink" title="头像"></a>头像</h1><p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">avatar:</span></span><br><span class="line"> <span class="attr">img:</span> <span class="string">/img/avatar.png</span></span><br><span class="line"> <span class="attr">effect:</span> <span class="literal">true</span> <span class="comment"># 头像会一直转圈</span></span><br></pre></td></tr></table></figure>
<h1 id="复制相关配置"><a href="#复制相关配置" class="headerlink" title="复制相关配置"></a>复制相关配置</h1><p>可配置网站是否可以复制、复制的内容是否添加版权信息</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">copy:</span><br><span class="line"> enable: true # 是否开启网站复制权限</span><br><span class="line"> copyright: # 复制的内容后面加上版权信息</span><br><span class="line"><span class="code"> enable: true # 是否开启复制版权信息添加</span></span><br><span class="line"><span class="code"> limit_count: 50 # 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息</span></span><br></pre></td></tr></table></figure>
<p>添加版权后复制内容：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.</span><br><span class="line"></span><br><span class="line">作者: itchenliang</span><br><span class="line">连结: http://localhost:4000/posts/bd3c650b/#Paragraph</span><br><span class="line">来源: 个人博客</span><br><span class="line">着作权归作者所有。商业转载请联络作者获得授权，非商业转载请註明出处。</span><br></pre></td></tr></table></figure>
<h1 id="Footer-设置"><a href="#Footer-设置" class="headerlink" title="Footer 设置"></a>Footer 设置</h1><h2 id="项目年份"><a href="#项目年份" class="headerlink" title="项目年份"></a>项目年份</h2><p>since 是一个来展示你站点起始时间的选项。它位于页面的最底部。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">footer:</span></span><br><span class="line"> <span class="attr">owner:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">since:</span> <span class="number">2018</span></span><br></pre></td></tr></table></figure>
<h2 id="页脚自定义文本"><a href="#页脚自定义文本" class="headerlink" title="页脚自定义文本"></a>页脚自定义文本</h2><p>custom_text 是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持 HTML。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">custom_text:</span> <span class="string">Hi,</span> <span class="string">welcome</span> <span class="string">to</span> <span class="string">my</span> <span class="string"><a</span> <span class="string">href="https://百度.me/">blog</a>!</span> <span class="comment"># 也叫自定义文本</span></span><br></pre></td></tr></table></figure>
<h2 id="ICP"><a href="#ICP" class="headerlink" title="ICP"></a>ICP</h2><p>对于部分有备案的域名，可以在 ICP 配置显示。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">ICP:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">http://www.beian.miit.gov.cn/state/outPortal/loginPortal.action</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">粤ICP备xxxx</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">/img/icp.png</span></span><br></pre></td></tr></table></figure>
<h1 id="右下角按钮"><a href="#右下角按钮" class="headerlink" title="右下角按钮"></a>右下角按钮</h1><h2 id="简繁转换"><a href="#简繁转换" class="headerlink" title="简繁转换"></a>简繁转换</h2><p>简体繁体互换, 右下角会有简繁转换按钮。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">translate:</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: 繁')</span></span><br><span class="line"> <span class="attr">default:</span> <span class="string">简</span></span><br><span class="line"> <span class="comment">#网站默认语言，1: 繁体中文, 2: 简体中文</span></span><br><span class="line"> <span class="attr">defaultEncoding:</span> <span class="number">1</span></span><br><span class="line"> <span class="comment">#延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0</span></span><br><span class="line"> <span class="attr">translateDelay:</span> <span class="number">0</span></span><br><span class="line"> <span class="comment">#当文字是简体时，按钮显示的文字</span></span><br><span class="line"> <span class="attr">msgToTraditionalChinese:</span> <span class="string">"繁"</span></span><br><span class="line"> <span class="comment">#当文字是繁体时，按钮显示的文字</span></span><br><span class="line"> <span class="attr">msgToSimplifiedChinese:</span> <span class="string">"简"</span></span><br></pre></td></tr></table></figure>
<h2 id="夜间模式"><a href="#夜间模式" class="headerlink" title="夜间模式"></a>夜间模式</h2><p>右下角会有夜间模式按钮<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">darkmode:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># dark mode和 light mode切换按钮</span></span><br><span class="line"> <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">autoChangeMode:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<h2 id="阅读模式"><a href="#阅读模式" class="headerlink" title="阅读模式"></a>阅读模式</h2><p>阅读模式下会去掉除文章外的内容，避免干扰阅读。只会出现在文章页面，右下角会有阅读模式按钮。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">readmode:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h1 id="侧边栏设置"><a href="#侧边栏设置" class="headerlink" title="侧边栏设置"></a>侧边栏设置</h1><h2 id="侧边排版"><a href="#侧边排版" class="headerlink" title="侧边排版"></a>侧边排版</h2><p>可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">aside:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">mobile:</span> <span class="literal">true</span> <span class="comment"># 手机页面（ 显示宽度 < 768px ）是否显示aside内容</span></span><br><span class="line"> <span class="attr">position:</span> <span class="string">right</span> <span class="comment"># left or right</span></span><br><span class="line"> <span class="attr">card_author:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">description:</span></span><br><span class="line"> <span class="attr">button:</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line"> <span class="attr">text:</span> <span class="string">Github</span></span><br><span class="line"> <span class="attr">link:</span> <span class="string">https://github.com/百度127/hexo-theme-butterfly</span></span><br><span class="line"> <span class="attr">card_announcement:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">content:</span> <span class="string">This</span> <span class="string">is</span> <span class="string">my</span> <span class="string">Blog</span></span><br><span class="line"> <span class="attr">card_recent_post:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">5</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line"> <span class="attr">sort:</span> <span class="string">date</span> <span class="comment"># date or updated</span></span><br><span class="line"> <span class="attr">card_categories:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">8</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line"> <span class="attr">expand:</span> <span class="string">none</span> <span class="comment"># none/true/false</span></span><br><span class="line"> <span class="attr">card_tags:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">40</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line"> <span class="attr">color:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">card_archives:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">monthly</span> <span class="comment"># yearly or monthly</span></span><br><span class="line"> <span class="attr">format:</span> <span class="string">MMMM</span> <span class="string">YYYY</span> <span class="comment"># eg: YYYY年MM月</span></span><br><span class="line"> <span class="attr">order:</span> <span class="number">-1</span> <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">8</span> <span class="comment"># if set 0 will show all</span></span><br><span class="line"> <span class="attr">card_webinfo:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h2 id="访问人数"><a href="#访问人数" class="headerlink" title="访问人数"></a>访问人数</h2><p>访问 <a href="http://busuanzi.ibruce.info/">busuanzi</a> 的官方网站查看更多的介绍。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">busuanzi:</span></span><br><span class="line"> <span class="attr">site_uv:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">site_pv:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">page_pv:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h2 id="运行时间"><a href="#运行时间" class="headerlink" title="运行时间"></a>运行时间</h2><p>网页已运行时间<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">runtimeshow:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">publish_date:</span> <span class="number">6</span><span class="string">/7/2018</span> <span class="number">00</span><span class="string">:00:00</span> </span><br><span class="line"> <span class="comment">##网页开通时间</span></span><br><span class="line"> <span class="comment">#格式: 月/日/年 时间</span></span><br><span class="line"> <span class="comment">#也可以写成 年/月/日 时间</span></span><br></pre></td></tr></table></figure>
<h1 id="标签外挂"><a href="#标签外挂" class="headerlink" title="标签外挂"></a>标签外挂</h1><h2 id="Note-Bootstrap-Callout"><a href="#Note-Bootstrap-Callout" class="headerlink" title="Note (Bootstrap Callout)"></a>Note (Bootstrap Callout)</h2><p>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><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="attr">border_radius:</span> <span class="number">3</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>
<p>用法：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line">{<span class="string">%</span> <span class="string">note</span> [<span class="string">class</span>] [<span class="literal">no</span><span class="string">-icon</span>] <span class="string">%</span>}</span><br><span class="line"><span class="string">Any</span> <span class="string">content</span> <span class="string">(support</span> <span class="string">inline</span> <span class="string">tags</span> <span class="string">too.io).</span></span><br><span class="line">{<span class="string">%</span> <span class="string">endnote</span> <span class="string">%</span>}</span><br></pre></td></tr></table></figure>
<p>如：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% note default %}</span><br><span class="line">default 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note primary no-icon %}</span><br><span class="line">primary 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note success %}</span><br><span class="line">success 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note info %}</span><br><span class="line">info 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note warning %}</span><br><span class="line">warning 提示块标籤</span><br><span class="line">{% endnote %}</span><br><span class="line"></span><br><span class="line">{% note danger %}</span><br><span class="line">danger 提示块标籤</span><br><span class="line">{% endnote %}</span><br></pre></td></tr></table></figure>
<h1 id="Gallery-相册图库"><a href="#Gallery-相册图库" class="headerlink" title="Gallery 相册图库"></a>Gallery 相册图库</h1><p>一个图库集合。<br><strong>写法</strong></p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span></span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure>
<ul>
<li>name: 图库名字</li>
<li>description：图库描述</li>
<li>link：连接到对应相册的地址</li>
<li>img-url：图库封面的地址</li>
</ul>
<p>如：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span></span><br><span class="line">{% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}</span><br><span class="line">{% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}</span><br><span class="line">{% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}</span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure>
<div class="gallery-group-main">
<figure class="gallery-group">
<img class="gallery-group-img" src='https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png'>
<figcaption>
<div class="gallery-group-name">壁纸</div>
<p>收藏的一些壁纸</p>
<a href='/Gallery/wallpaper'></a>
</figcaption>
</figure>
<figure class="gallery-group">
<img class="gallery-group-img" src='https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg'>
<figcaption>
<div class="gallery-group-name">漫威</div>
<p>关于漫威的图片</p>
<a href='/Gallery/marvel'></a>
</figcaption>
</figure>
<figure class="gallery-group">
<img class="gallery-group-img" src='https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg'>
<figcaption>
<div class="gallery-group-name">OH MY GIRL</div>
<p>关于OH MY GIRL的图片</p>
<a href='/Gallery/ohmygirl'></a>
</figcaption>
</figure>
</div>
<h1 id="Gallery-相册"><a href="#Gallery-相册" class="headerlink" title="Gallery 相册"></a>Gallery 相册</h1><p>写法:</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure>
<p>如：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% gallery %}</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">{% endgallery %}</span><br></pre></td></tr></table></figure>
<div class="justified-gallery"><p><img src="https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg"><br><img src="https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg"><br><img src="https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg"><br><img src="https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg"><br><img src="https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg"><br><img src="https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg"><br><img src="https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg"><br><img src="https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg"></p>
</div>
<h1 id="回答问题-tag-hide"><a href="#回答问题-tag-hide" class="headerlink" title="回答问题 tag-hide"></a>回答问题 tag-hide</h1><p>如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个。</p>
<div class="note success"><p>success inline</p>
</div>
<p>inline 在文本里面添加按钮隐藏内容，只限文字(content不能包含英文逗号，可用 <code>&sbquo;</code>)</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% hideInline content,display,bg,color %}</span><br></pre></td></tr></table></figure>
<ul>
<li>content: 文本内容</li>
<li>display: 按钮显示的文字 (可选)</li>
<li>bg: 按钮的背景颜色 (可选)</li>
<li>color: 按钮文字的颜色 (可选)</li>
</ul>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">哪个英文字母最酷？ {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}</span><br><span class="line">门里站着一个人? {% hideInline 闪 %}</span><br></pre></td></tr></table></figure>
<p>哪个英文字母最酷？ <span class="hide-inline"><button type="button" class="hide-button button--animated" style="background-color: #FF7242;color: #fff">查看答案
</button><span class="hide-content">因为西装裤(C装酷)</span></span></p>
<p>门里站着一个人? <span class="hide-inline"><button type="button" class="hide-button button--animated" style="">Click
</button><span class="hide-content">闪</span></span></p>
<h1 id="绘图mermaid（饼状图、柱状图等）"><a href="#绘图mermaid（饼状图、柱状图等）" class="headerlink" title="绘图mermaid（饼状图、柱状图等）"></a>绘图mermaid（饼状图、柱状图等）</h1><p>使用 mermaid 标籤可以绘製 Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看 <a href="https://mermaid-js.github.io/mermaid/#/">mermaid 文档</a><br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><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"># built-in themes: default/forest/dark/neutral</span></span><br><span class="line"> <span class="attr">theme:</span> <span class="string">default</span></span><br></pre></td></tr></table></figure>
<p>写法：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">内容</span><br><span class="line">{% endmermaid %}</span><br></pre></td></tr></table></figure>
<p>例如：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% mermaid %}</span><br><span class="line">pie</span><br><span class="line"><span class="code"> title Key elements in Product X</span></span><br><span class="line"><span class="code"> "Calcium" : 42.96</span></span><br><span class="line"><span class="code"> "Potassium" : 50.05</span></span><br><span class="line"><span class="code"> "Magnesium" : 10.01</span></span><br><span class="line"><span class="code"> "Iron" : 5</span></span><br><span class="line"><span class="code">{% endmermaid %}</span></span><br></pre></td></tr></table></figure>
<h1 id="Tabs标签页"><a href="#Tabs标签页" class="headerlink" title="Tabs标签页"></a>Tabs标签页</h1><p>使用方法:</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line">{<span class="string">%</span> <span class="string">tabs</span> <span class="string">test1</span> <span class="string">%</span>}</span><br><span class="line"><span class="string"><!--</span> <span class="string">tab</span> <span class="string">--></span></span><br><span class="line"><span class="string">**This</span> <span class="string">is</span> <span class="string">Tab</span> <span class="number">1</span><span class="string">.**</span></span><br><span class="line"><span class="string"><!--</span> <span class="string">endtab</span> <span class="string">--></span></span><br><span class="line"></span><br><span class="line"><span class="string"><!--</span> <span class="string">tab</span> <span class="string">--></span></span><br><span class="line"><span class="string">**This</span> <span class="string">is</span> <span class="string">Tab</span> <span class="number">2</span><span class="string">.**</span></span><br><span class="line"><span class="string"><!--</span> <span class="string">endtab</span> <span class="string">--></span></span><br><span class="line"></span><br><span class="line"><span class="string"><!--</span> <span class="string">tab</span> <span class="string">--></span></span><br><span class="line"><span class="string">**This</span> <span class="string">is</span> <span class="string">Tab</span> <span class="number">3</span><span class="string">.**</span></span><br><span class="line"><span class="string"><!--</span> <span class="string">endtab</span> <span class="string">--></span></span><br><span class="line">{<span class="string">%</span> <span class="string">endtabs</span> <span class="string">%</span>}</span><br></pre></td></tr></table></figure>
<div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">test1 1</button></li><li class="tab"><button type="button" data-href="#test1-2">test1 2</button></li><li class="tab"><button type="button" data-href="#test1-3">test1 3</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button></div></div></div>
<p>图标：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% tabs test4 %}</span><br><span class="line"><span class="xml"><span class="comment"><!-- tab 第一个Tab --></span></span></span><br><span class="line"><span class="strong">**tab名字为第一个Tab**</span></span><br><span class="line"><span class="xml"><span class="comment"><!-- endtab --></span></span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="comment"><!-- tab @fab fa-apple-pay --></span></span></span><br><span class="line"><span class="strong">**只有图标 没有Tab名字**</span></span><br><span class="line"><span class="xml"><span class="comment"><!-- endtab --></span></span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="comment"><!-- tab 炸弹@fas fa-bomb --></span></span></span><br><span class="line"><span class="strong">**名字+icon**</span></span><br><span class="line"><span class="xml"><span class="comment"><!-- endtab --></span></span></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure>
<div class="tabs" id="test4"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test4-1">第一个Tab</button></li><li class="tab"><button type="button" data-href="#test4-2"><i class="fab fa-apple-pay" style="text-align: center;"></i></button></li><li class="tab"><button type="button" data-href="#test4-3"><i class="fas fa-bomb"></i>炸弹</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test4-1"><p><strong>tab名字为第一个Tab</strong></p><button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test4-2"><p><strong>只有图标 没有Tab名字</strong></p><button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test4-3"><p><strong>名字+icon</strong></p><button type="button" class="tab-to-top"><i class="fas fa-arrow-up"></i></button></div></div></div>
<h1 id="Button"><a href="#Button" class="headerlink" title="Button"></a>Button</h1><p>使用方法：</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}</span><br><span class="line">[url] : 链接</span><br><span class="line">[text] : 按钮文字</span><br><span class="line">[icon] : [可选] 图标</span><br><span class="line">[color] : [可选] 按钮背景顔色(默认style时）</span><br><span class="line"><span class="code"> 按钮字体和边框顔色(outline时)</span></span><br><span class="line"><span class="code"> default/blue/pink/red/purple/orange/green</span></span><br><span class="line"><span class="code">[style] : [可选] 按钮样式 默认实心</span></span><br><span class="line"><span class="code"> outline/留空</span></span><br><span class="line"><span class="code">[layout] : [可选] 按钮佈局 默认为line</span></span><br><span class="line"><span class="code"> block/留空</span></span><br><span class="line"><span class="code">[position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边</span></span><br><span class="line"><span class="code"> center/right/留空</span></span><br><span class="line"><span class="code">[size] : [可选] 按钮大小</span></span><br><span class="line"><span class="code"> larger/留空</span></span><br></pre></td></tr></table></figure>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">This is my website, click the button {% btn 'http://www.baidu.com',百度 %}</span><br><span class="line">This is my website, click the button {% btn 'http://www.baidu.com',百度,far fa-hand-point-right %}</span><br><span class="line">This is my website, click the button {% btn 'http://www.baidu.com',百度,,outline %}</span><br><span class="line">This is my website, click the button {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline %}</span><br><span class="line">This is my website, click the button {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,larger %}</span><br></pre></td></tr></table></figure>
<p>This is my website, click the button <a class="btn-beautify button--animated " href="http://www.baidu.com"
title="百度"><span>百度</span></a><br>This is my website, click the button <a class="btn-beautify button--animated " href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a><br>This is my website, click the button <a class="btn-beautify button--animated outline" href="http://www.baidu.com"
title="百度"><span>百度</span></a><br>This is my website, click the button <a class="btn-beautify button--animated outline" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a><br>This is my website, click the button <a class="btn-beautify button--animated larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a></p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,block %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,block center larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,block right outline larger %}</span><br></pre></td></tr></table></figure>
<a class="btn-beautify button--animated block" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated block center larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated block right outline larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,blue larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,pink larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,red larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,purple larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,orange larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,green larger %}</span><br></pre></td></tr></table></figure>
<a class="btn-beautify button--animated larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated blue larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated pink larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated red larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated purple larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated orange larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated green larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"btn-center"</span>></span></span></span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline blue larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline pink larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline red larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline purple larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline orange larger %}</span><br><span class="line">{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline green larger %}</span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure>
<div class="btn-center">
<a class="btn-beautify button--animated outline larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated outline blue larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated outline pink larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated outline red larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated outline purple larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated outline orange larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
<a class="btn-beautify button--animated outline green larger" href="http://www.baidu.com"
title="百度"><i class="far fa-hand-point-right fa-fw"></i><span>百度</span></a>
</div>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>Butterfly</tag>
<tag>主题</tag>
<tag>配置</tag>
</tags>
</entry>
<entry>
<title>bpmn.js的汉化</title>
<url>/posts/4b996780-684c-11eb-bd66-4fb1c1101a24/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>如果你的需求中需要将流程图编辑汉化，那你可以往下看看啦！</p>
<p>这篇文章还是基于之前创建的项目 <code>vue-bpmn</code> ，我们先在 <code>views</code> 文件夹下新建 <code>chinese.vue</code> 文件，然后把之前写好的 <code>panel.vue</code> 的内容复制一份到 <code>chinese.vue</code> 文件中</p>
<h1 id="bpmn-js-汉化"><a href="#bpmn-js-汉化" class="headerlink" title="bpmn.js 汉化"></a>bpmn.js 汉化</h1><h2 id="准备汉化文件"><a href="#准备汉化文件" class="headerlink" title="准备汉化文件"></a>准备汉化文件</h2><p>bpmn官网给了一个<a href="https://github.com/bpmn-io/bpmn-js-examples/tree/master/i18n">翻译</a>的例子可以参考<br>我们需要的文件是 <code>translationsGerman.js</code> 和 <code>customTranslate.js</code> ，官网例子中也有这两个文件，如果没有找到合适的汉化文件的话，可以直接复制下面的文件使用<br>我们把这两个文件放到 <code>utils</code> 文件夹下<br><code>translationsGerman.js</code> </p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"></span><br><span class="line"> <span class="comment">// Labels</span></span><br><span class="line"> <span class="string">'Activate the global connect tool'</span> : <span class="string">'激活全局连接工具'</span>,</span><br><span class="line"> <span class="string">'Append {type}'</span>: <span class="string">'添加 {type}'</span>,</span><br><span class="line"> <span class="string">'Add Lane above'</span>: <span class="string">'添加到通道之上'</span>,</span><br><span class="line"> <span class="string">'Divide into two Lanes'</span>: <span class="string">'分割成两个道'</span>,</span><br><span class="line"> <span class="string">'Divide into three Lanes'</span>: <span class="string">'分割成三个道'</span>,</span><br><span class="line"> <span class="string">'Add Lane below'</span>: <span class="string">'在下面添加道'</span>,</span><br><span class="line"> <span class="string">'Append compensation activity'</span>: <span class="string">'追加补偿活动'</span>,</span><br><span class="line"> <span class="string">'Change type'</span>: <span class="string">'修改类型'</span>,</span><br><span class="line"> <span class="string">'Connect using Association'</span>: <span class="string">'使用关联连接'</span>,</span><br><span class="line"> <span class="string">'Connect using Sequence/MessageFlow or Association'</span>: <span class="string">'使用顺序/消息流或者关联连接'</span>,</span><br><span class="line"> <span class="string">'Connect using DataInputAssociation'</span>: <span class="string">'使用数据输入关联连接'</span>,</span><br><span class="line"> <span class="string">'Remove'</span>: <span class="string">'移除'</span>,</span><br><span class="line"> <span class="string">'Activate the hand tool'</span>: <span class="string">'激活抓手工具'</span>,</span><br><span class="line"> <span class="string">'Activate the lasso tool'</span>: <span class="string">'激活套索工具'</span>,</span><br><span class="line"> <span class="string">'Activate the create/remove space tool'</span>: <span class="string">'激活创建/删除空间工具'</span>,</span><br><span class="line"> <span class="string">'Create expanded SubProcess'</span>: <span class="string">'创建扩展子过程'</span>,</span><br><span class="line"> <span class="string">'Create IntermediateThrowEvent/BoundaryEvent'</span> : <span class="string">'创建中间抛出事件/边界事件'</span>,</span><br><span class="line"> <span class="string">'Create Pool/Participant'</span>: <span class="string">'创建池/参与者'</span>,</span><br><span class="line"> <span class="string">'Parallel Multi Instance'</span>: <span class="string">'并行多重事件'</span>,</span><br><span class="line"> <span class="string">'Sequential Multi Instance'</span>: <span class="string">'时序多重事件'</span>,</span><br><span class="line"> <span class="string">'DataObjectReference'</span>:<span class="string">'数据对象参考'</span>,</span><br><span class="line"> <span class="string">'DataStoreReference'</span>:<span class="string">'数据存储参考'</span>,</span><br><span class="line"> <span class="string">'Loop'</span>: <span class="string">'循环'</span>,</span><br><span class="line"> <span class="string">'Ad-hoc'</span>: <span class="string">'即席'</span>,</span><br><span class="line"> <span class="string">'Create {type}'</span>: <span class="string">'创建 {type}'</span>,</span><br><span class="line"> <span class="string">'Task'</span>: <span class="string">'任务'</span>,</span><br><span class="line"> <span class="string">'Send Task'</span>: <span class="string">'发送任务'</span>,</span><br><span class="line"> <span class="string">'Receive Task'</span>: <span class="string">'接收任务'</span>,</span><br><span class="line"> <span class="string">'User Task'</span>: <span class="string">'用户任务'</span>,</span><br><span class="line"> <span class="string">'Manual Task'</span>: <span class="string">'手工任务'</span>,</span><br><span class="line"> <span class="string">'Business Rule Task'</span>: <span class="string">'业务规则任务'</span>,</span><br><span class="line"> <span class="string">'Service Task'</span>: <span class="string">'服务任务'</span>,</span><br><span class="line"> <span class="string">'Script Task'</span>: <span class="string">'脚本任务'</span>,</span><br><span class="line"> <span class="string">'Call Activity'</span>: <span class="string">'调用活动'</span>,</span><br><span class="line"> <span class="string">'Sub Process (collapsed)'</span>: <span class="string">'子流程（折叠的）'</span>,</span><br><span class="line"> <span class="string">'Sub Process (expanded)'</span>: <span class="string">'子流程（展开的）'</span>,</span><br><span class="line"> <span class="string">'Start Event'</span>: <span class="string">'开始事件'</span>,</span><br><span class="line"> <span class="string">'StartEvent'</span>: <span class="string">'开始事件'</span>,</span><br><span class="line"> <span class="string">'Intermediate Throw Event'</span>: <span class="string">'中间事件'</span>,</span><br><span class="line"> <span class="string">'End Event'</span>: <span class="string">'结束事件'</span>,</span><br><span class="line"> <span class="string">'EndEvent'</span>: <span class="string">'结束事件'</span>,</span><br><span class="line"> <span class="string">'Create StartEvent'</span>: <span class="string">'创建开始事件'</span>,</span><br><span class="line"> <span class="string">'Create EndEvent'</span>: <span class="string">'创建结束事件'</span>,</span><br><span class="line"> <span class="string">'Create Gateway'</span>: <span class="string">'创建网关'</span>,</span><br><span class="line"> <span class="string">'Create Task'</span>: <span class="string">'创建任务'</span>,</span><br><span class="line"> <span class="string">'Create Intermediate/Boundary Event'</span>: <span class="string">'创建中间/边界事件'</span>,</span><br><span class="line"> <span class="string">'Create DataObjectReference'</span>: <span class="string">'创建数据对象'</span>,</span><br><span class="line"> <span class="string">'Create DataStoreReference'</span>: <span class="string">'创建数据存储'</span>,</span><br><span class="line"> <span class="string">'Create Group'</span>: <span class="string">'创建分组'</span>,</span><br><span class="line"> <span class="string">'Message Start Event'</span>: <span class="string">'消息开始事件'</span>,</span><br><span class="line"> <span class="string">'Timer Start Event'</span>: <span class="string">'定时开始事件'</span>,</span><br><span class="line"> <span class="string">'Conditional Start Event'</span>: <span class="string">'条件开始事件'</span>,</span><br><span class="line"> <span class="string">'Signal Start Event'</span>: <span class="string">'信号开始事件'</span>,</span><br><span class="line"> <span class="string">'Error Start Event'</span>: <span class="string">'错误开始事件'</span>,</span><br><span class="line"> <span class="string">'Escalation Start Event'</span>: <span class="string">'升级开始事件'</span>,</span><br><span class="line"> <span class="string">'Compensation Start Event'</span>: <span class="string">'补偿开始事件'</span>,</span><br><span class="line"> <span class="string">'Message Start Event (non-interrupting)'</span>: <span class="string">'消息开始事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Timer Start Event (non-interrupting)'</span>: <span class="string">'定时开始事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Conditional Start Event (non-interrupting)'</span>: <span class="string">'条件开始事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Signal Start Event (non-interrupting)'</span>: <span class="string">'信号开始事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Escalation Start Event (non-interrupting)'</span>: <span class="string">'升级开始事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Message Intermediate Catch Event'</span>: <span class="string">'消息中间捕获事件'</span>,</span><br><span class="line"> <span class="string">'Message Intermediate Throw Event'</span>: <span class="string">'消息中间抛出事件'</span>,</span><br><span class="line"> <span class="string">'Timer Intermediate Catch Event'</span>: <span class="string">'定时中间捕获事件'</span>,</span><br><span class="line"> <span class="string">'Escalation Intermediate Throw Event'</span>: <span class="string">'升级中间抛出事件'</span>,</span><br><span class="line"> <span class="string">'Conditional Intermediate Catch Event'</span>: <span class="string">'条件中间捕获事件'</span>,</span><br><span class="line"> <span class="string">'Link Intermediate Catch Event'</span>: <span class="string">'链接中间捕获事件'</span>,</span><br><span class="line"> <span class="string">'Link Intermediate Throw Event'</span>: <span class="string">'链接中间抛出事件'</span>,</span><br><span class="line"> <span class="string">'Compensation Intermediate Throw Event'</span>: <span class="string">'补偿中间抛出事件'</span>,</span><br><span class="line"> <span class="string">'Signal Intermediate Catch Event'</span>: <span class="string">'信号中间捕获事件'</span>,</span><br><span class="line"> <span class="string">'Signal Intermediate Throw Event'</span>: <span class="string">'信号中间抛出事件'</span>,</span><br><span class="line"> <span class="string">'Message End Event'</span>: <span class="string">'消息结束事件'</span>,</span><br><span class="line"> <span class="string">'Escalation End Event'</span>: <span class="string">'定时结束事件'</span>,</span><br><span class="line"> <span class="string">'Error End Event'</span>: <span class="string">'错误结束事件'</span>,</span><br><span class="line"> <span class="string">'Cancel End Event'</span>: <span class="string">'取消结束事件'</span>,</span><br><span class="line"> <span class="string">'Compensation End Event'</span>: <span class="string">'补偿结束事件'</span>,</span><br><span class="line"> <span class="string">'Signal End Event'</span>: <span class="string">'信号结束事件'</span>,</span><br><span class="line"> <span class="string">'Terminate End Event'</span>: <span class="string">'终止结束事件'</span>,</span><br><span class="line"> <span class="string">'Message Boundary Event'</span>: <span class="string">'消息边界事件'</span>,</span><br><span class="line"> <span class="string">'Message Boundary Event (non-interrupting)'</span>: <span class="string">'消息边界事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Timer Boundary Event'</span>: <span class="string">'定时边界事件'</span>,</span><br><span class="line"> <span class="string">'Timer Boundary Event (non-interrupting)'</span>: <span class="string">'定时边界事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Escalation Boundary Event'</span>: <span class="string">'升级边界事件'</span>,</span><br><span class="line"> <span class="string">'Escalation Boundary Event (non-interrupting)'</span>: <span class="string">'升级边界事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Conditional Boundary Event'</span>: <span class="string">'条件边界事件'</span>,</span><br><span class="line"> <span class="string">'Conditional Boundary Event (non-interrupting)'</span>: <span class="string">'条件边界事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Error Boundary Event'</span>: <span class="string">'错误边界事件'</span>,</span><br><span class="line"> <span class="string">'Cancel Boundary Event'</span>: <span class="string">'取消边界事件'</span>,</span><br><span class="line"> <span class="string">'Signal Boundary Event'</span>: <span class="string">'信号边界事件'</span>,</span><br><span class="line"> <span class="string">'Signal Boundary Event (non-interrupting)'</span>: <span class="string">'信号边界事件（非中断）'</span>,</span><br><span class="line"> <span class="string">'Compensation Boundary Event'</span>: <span class="string">'补偿边界事件'</span>,</span><br><span class="line"> <span class="string">'Exclusive Gateway'</span>: <span class="string">'互斥网关'</span>,</span><br><span class="line"> <span class="string">'Parallel Gateway'</span>: <span class="string">'并行网关'</span>,</span><br><span class="line"> <span class="string">'Inclusive Gateway'</span>: <span class="string">'相容网关'</span>,</span><br><span class="line"> <span class="string">'Complex Gateway'</span>: <span class="string">'复杂网关'</span>,</span><br><span class="line"> <span class="string">'Event based Gateway'</span>: <span class="string">'事件网关'</span>,</span><br><span class="line"> <span class="string">'Transaction'</span>: <span class="string">'转运'</span>,</span><br><span class="line"> <span class="string">'Sub Process'</span>: <span class="string">'子流程'</span>,</span><br><span class="line"> <span class="string">'Event Sub Process'</span>: <span class="string">'事件子流程'</span>,</span><br><span class="line"> <span class="string">'Collapsed Pool'</span>: <span class="string">'折叠池'</span>,</span><br><span class="line"> <span class="string">'Expanded Pool'</span>: <span class="string">'展开池'</span>,</span><br><span class="line"></span><br><span class="line"> <span class="comment">// Errors</span></span><br><span class="line"> <span class="string">'no parent for {element} in {parent}'</span>: <span class="string">'在{parent}里，{element}没有父类'</span>,</span><br><span class="line"> <span class="string">'no shape type specified'</span>: <span class="string">'没有指定的形状类型'</span>,</span><br><span class="line"> <span class="string">'flow elements must be children of pools/participants'</span>: <span class="string">'流元素必须是池/参与者的子类'</span>,</span><br><span class="line"> <span class="string">'out of bounds release'</span>: <span class="string">'out of bounds release'</span>,</span><br><span class="line"> <span class="string">'more than {count} child lanes'</span>: <span class="string">'子道大于{count} '</span>,</span><br><span class="line"> <span class="string">'element required'</span>: <span class="string">'元素不能为空'</span>,</span><br><span class="line"> <span class="string">'diagram not part of bpmn:Definitions'</span>: <span class="string">'流程图不符合bpmn规范'</span>,</span><br><span class="line"> <span class="string">'no diagram to display'</span>: <span class="string">'没有可展示的流程图'</span>,</span><br><span class="line"> <span class="string">'no process or collaboration to display'</span>: <span class="string">'没有可展示的流程/协作'</span>,</span><br><span class="line"> <span class="string">'element {element} referenced by {referenced}#{property} not yet drawn'</span>: <span class="string">'由{referenced}#{property}引用的{element}元素仍未绘制'</span>,</span><br><span class="line"> <span class="string">'already rendered {element}'</span>: <span class="string">'{element} 已被渲染'</span>,</span><br><span class="line"> <span class="string">'failed to import {element}'</span>: <span class="string">'导入{element}失败'</span>,</span><br><span class="line"> <span class="comment">//属性面板的参数</span></span><br><span class="line"> <span class="string">'Id'</span>:<span class="string">'编号'</span>,</span><br><span class="line"> <span class="string">'Name'</span>:<span class="string">'名称'</span>,</span><br><span class="line"> <span class="string">'General'</span>:<span class="string">'常规'</span>,</span><br><span class="line"> <span class="string">'Details'</span>:<span class="string">'详情'</span>,</span><br><span class="line"> <span class="string">'Message Name'</span>:<span class="string">'消息名称'</span>,</span><br><span class="line"> <span class="string">'Message'</span>:<span class="string">'消息'</span>,</span><br><span class="line"> <span class="string">'Initiator'</span>:<span class="string">'创建者'</span>,</span><br><span class="line"> <span class="string">'Asynchronous Continuations'</span>:<span class="string">'持续异步'</span>,</span><br><span class="line"> <span class="string">'Asynchronous Before'</span>:<span class="string">'异步前'</span>,</span><br><span class="line"> <span class="string">'Asynchronous After'</span>:<span class="string">'异步后'</span>,</span><br><span class="line"> <span class="string">'Job Configuration'</span>:<span class="string">'工作配置'</span>,</span><br><span class="line"> <span class="string">'Exclusive'</span>:<span class="string">'排除'</span>,</span><br><span class="line"> <span class="string">'Job Priority'</span>:<span class="string">'工作优先级'</span>,</span><br><span class="line"> <span class="string">'Retry Time Cycle'</span>:<span class="string">'重试时间周期'</span>,</span><br><span class="line"> <span class="string">'Documentation'</span>:<span class="string">'文档'</span>,</span><br><span class="line"> <span class="string">'Element Documentation'</span>:<span class="string">'元素文档'</span>,</span><br><span class="line"> <span class="string">'History Configuration'</span>:<span class="string">'历史配置'</span>,</span><br><span class="line"> <span class="string">'History Time To Live'</span>:<span class="string">'历史的生存时间'</span>,</span><br><span class="line"> <span class="string">'Forms'</span>:<span class="string">'表单'</span>,</span><br><span class="line"> <span class="string">'Form Key'</span>:<span class="string">'表单key'</span>,</span><br><span class="line"> <span class="string">'Form Fields'</span>:<span class="string">'表单字段'</span>,</span><br><span class="line"> <span class="string">'Business Key'</span>:<span class="string">'业务key'</span>,</span><br><span class="line"> <span class="string">'Form Field'</span>:<span class="string">'表单字段'</span>,</span><br><span class="line"> <span class="string">'ID'</span>:<span class="string">'编号'</span>,</span><br><span class="line"> <span class="string">'Type'</span>:<span class="string">'类型'</span>,</span><br><span class="line"> <span class="string">'Label'</span>:<span class="string">'名称'</span>,</span><br><span class="line"> <span class="string">'Default Value'</span>:<span class="string">'默认值'</span>,</span><br><span class="line"> <span class="string">'Validation'</span>:<span class="string">'校验'</span>,</span><br><span class="line"> <span class="string">'Add Constraint'</span>:<span class="string">'添加约束'</span>,</span><br><span class="line"> <span class="string">'Config'</span>:<span class="string">'配置'</span>,</span><br><span class="line"> <span class="string">'Properties'</span>:<span class="string">'属性'</span>,</span><br><span class="line"> <span class="string">'Add Property'</span>:<span class="string">'添加属性'</span>,</span><br><span class="line"> <span class="string">'Value'</span>:<span class="string">'值'</span>,</span><br><span class="line"> <span class="string">'Listeners'</span>:<span class="string">'监听器'</span>,</span><br><span class="line"> <span class="string">'Execution Listener'</span>:<span class="string">'执行监听'</span>,</span><br><span class="line"> <span class="string">'Event Type'</span>:<span class="string">'事件类型'</span>,</span><br><span class="line"> <span class="string">'Listener Type'</span>:<span class="string">'监听器类型'</span>,</span><br><span class="line"> <span class="string">'Java Class'</span>:<span class="string">'Java类'</span>,</span><br><span class="line"> <span class="string">'Expression'</span>:<span class="string">'表达式'</span>,</span><br><span class="line"> <span class="string">'Must provide a value'</span>:<span class="string">'必须提供一个值'</span>,</span><br><span class="line"> <span class="string">'Delegate Expression'</span>:<span class="string">'代理表达式'</span>,</span><br><span class="line"> <span class="string">'Script'</span>:<span class="string">'脚本'</span>,</span><br><span class="line"> <span class="string">'Script Format'</span>:<span class="string">'脚本格式'</span>,</span><br><span class="line"> <span class="string">'Script Type'</span>:<span class="string">'脚本类型'</span>,</span><br><span class="line"> <span class="string">'Inline Script'</span>:<span class="string">'内联脚本'</span>,</span><br><span class="line"> <span class="string">'External Script'</span>:<span class="string">'外部脚本'</span>,</span><br><span class="line"> <span class="string">'Resource'</span>:<span class="string">'资源'</span>,</span><br><span class="line"> <span class="string">'Field Injection'</span>:<span class="string">'字段注入'</span>,</span><br><span class="line"> <span class="string">'Extensions'</span>:<span class="string">'扩展'</span>,</span><br><span class="line"> <span class="string">'Input/Output'</span>:<span class="string">'输入/输出'</span>,</span><br><span class="line"> <span class="string">'Input Parameters'</span>:<span class="string">'输入参数'</span>,</span><br><span class="line"> <span class="string">'Output Parameters'</span>:<span class="string">'输出参数'</span>,</span><br><span class="line"> <span class="string">'Parameters'</span>:<span class="string">'参数'</span>,</span><br><span class="line"> <span class="string">'Output Parameter'</span>:<span class="string">'输出参数'</span>,</span><br><span class="line"> <span class="string">'Timer Definition Type'</span>:<span class="string">'定时器定义类型'</span>,</span><br><span class="line"> <span class="string">'Timer Definition'</span>:<span class="string">'定时器定义'</span>,</span><br><span class="line"> <span class="string">'Date'</span>:<span class="string">'日期'</span>,</span><br><span class="line"> <span class="string">'Duration'</span>:<span class="string">'持续'</span>,</span><br><span class="line"> <span class="string">'Cycle'</span>:<span class="string">'循环'</span>,</span><br><span class="line"> <span class="string">'Signal'</span>:<span class="string">'信号'</span>,</span><br><span class="line"> <span class="string">'Signal Name'</span>:<span class="string">'信号名称'</span>,</span><br><span class="line"> <span class="string">'Escalation'</span>:<span class="string">'升级'</span>,</span><br><span class="line"> <span class="string">'Error'</span>:<span class="string">'错误'</span>,</span><br><span class="line"> <span class="string">'Link Name'</span>:<span class="string">'链接名称'</span>,</span><br><span class="line"> <span class="string">'Condition'</span>:<span class="string">'条件名称'</span>,</span><br><span class="line"> <span class="string">'Variable Name'</span>:<span class="string">'变量名称'</span>,</span><br><span class="line"> <span class="string">'Variable Event'</span>:<span class="string">'变量事件'</span>,</span><br><span class="line"> <span class="string">'Specify more than one variable change event as a comma separated list.'</span>:<span class="string">'多个变量事件以逗号隔开'</span>,</span><br><span class="line"> <span class="string">'Wait for Completion'</span>:<span class="string">'等待完成'</span>,</span><br><span class="line"> <span class="string">'Activity Ref'</span>:<span class="string">'活动参考'</span>,</span><br><span class="line"> <span class="string">'Version Tag'</span>:<span class="string">'版本标签'</span>,</span><br><span class="line"> <span class="string">'Executable'</span>:<span class="string">'可执行文件'</span>,</span><br><span class="line"> <span class="string">'External Task Configuration'</span>:<span class="string">'扩展任务配置'</span>,</span><br><span class="line"> <span class="string">'Task Priority'</span>:<span class="string">'任务优先级'</span>,</span><br><span class="line"> <span class="string">'External'</span>:<span class="string">'外部'</span>,</span><br><span class="line"> <span class="string">'Connector'</span>:<span class="string">'连接器'</span>,</span><br><span class="line"> <span class="string">'Must configure Connector'</span>:<span class="string">'必须配置连接器'</span>,</span><br><span class="line"> <span class="string">'Connector Id'</span>:<span class="string">'连接器编号'</span>,</span><br><span class="line"> <span class="string">'Implementation'</span>:<span class="string">'实现方式'</span>,</span><br><span class="line"> <span class="string">'Field Injections'</span>:<span class="string">'字段注入'</span>,</span><br><span class="line"> <span class="string">'Fields'</span>:<span class="string">'字段'</span>,</span><br><span class="line"> <span class="string">'Result Variable'</span>:<span class="string">'结果变量'</span>,</span><br><span class="line"> <span class="string">'Topic'</span>:<span class="string">'主题'</span>,</span><br><span class="line"> <span class="string">'Configure Connector'</span>:<span class="string">'配置连接器'</span>,</span><br><span class="line"> <span class="string">'Input Parameter'</span>:<span class="string">'输入参数'</span>,</span><br><span class="line"> <span class="string">'Assignee'</span>:<span class="string">'代理人'</span>,</span><br><span class="line"> <span class="string">'Candidate Users'</span>:<span class="string">'候选用户'</span>,</span><br><span class="line"> <span class="string">'Candidate Groups'</span>:<span class="string">'候选组'</span>,</span><br><span class="line"> <span class="string">'Due Date'</span>:<span class="string">'到期时间'</span>,</span><br><span class="line"> <span class="string">'Follow Up Date'</span>:<span class="string">'跟踪日期'</span>,</span><br><span class="line"> <span class="string">'Priority'</span>:<span class="string">'优先级'</span>,</span><br><span class="line"> <span class="string">'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)'</span>:<span class="string">'跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00'</span>,</span><br><span class="line"> <span class="string">'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)'</span>:<span class="string">'跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00'</span>,</span><br><span class="line"> <span class="string">'Variables'</span>:<span class="string">'变量'</span>,</span><br><span class="line"></span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<p> <code>customTranslate.js</code></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> translations <span class="keyword">from</span> <span class="string">'./translationsGerman'</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">customTranslate</span>(<span class="params">template, replacements</span>) </span>{</span><br><span class="line"> replacements = replacements || {};</span><br><span class="line"></span><br><span class="line"> <span class="comment">// Translate</span></span><br><span class="line"> template = translations[template] || template;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// Replace</span></span><br><span class="line"> <span class="keyword">return</span> template.replace(<span class="regexp">/{([^}]+)}/g</span>, <span class="function"><span class="keyword">function</span>(<span class="params">_, key</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> str = replacements[key];</span><br><span class="line"> <span class="keyword">if</span> (translations[replacements[key]] != <span class="literal">null</span> && translations[replacements[key]] != <span class="string">'undefined'</span>) {</span><br><span class="line"> str = translations[replacements[key]];</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> str || <span class="string">'{'</span> + key + <span class="string">'}'</span>;</span><br><span class="line"> });</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h2><p>接下来我们修改 <code>chinese.vue</code> 文件</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">...</span><br><span class="line"><span class="comment">// 汉化</span></span><br><span class="line"><span class="keyword">import</span> customTranslate <span class="keyword">from</span> <span class="string">'../utils/customTranslate'</span></span><br><span class="line">...</span><br><span class="line"> methods: {</span><br><span class="line"> init () {</span><br><span class="line"> <span class="comment">// 将汉化包装成一个模块</span></span><br><span class="line"> <span class="keyword">const</span> customTranslateModule = {</span><br><span class="line"> translate: [<span class="string">'value'</span>, customTranslate]</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 建模，创建 bpmn 对象</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler = <span class="keyword">new</span> BpmnModeler({</span><br><span class="line"> ...</span><br><span class="line"> additionalModules: [</span><br><span class="line"> ...</span><br><span class="line"> <span class="comment">// 汉化模块</span></span><br><span class="line"> customTranslateModule</span><br><span class="line"> ],</span><br><span class="line"> ...</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">this</span>.createNewDiagram()</span><br><span class="line"> },</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>效果图</p>
<p><img src="https://img-blog.csdnimg.cn/20210206113444387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
]]></content>
<categories>
<category>bpmn.js</category>
</categories>
<tags>
<tag>vue</tag>
<tag>bpmn.js</tag>
</tags>
</entry>
<entry>
<title>bpmn.js元素事件监听</title>
<url>/posts/4b998e90-684c-11eb-bd66-4fb1c1101a24/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>如果在编辑流程图的过程中，需要对图中元素的动作进行监听，比如：</p>
<ul>
<li><code>shape.added</code> 新增一个 <code>shape</code> 之后触发</li>
<li><code>shape.removed</code> 删除一个 <code>shape</code> 之后触发</li>
<li><code>connect.end</code> 连线完成后触发</li>
</ul>
<p>官网提供了很多<a href="https://github.com/bpmn-io/diagram-js/blob/master/lib/features/modeling/Modeling.js">其他事件</a><br>接下来一起来测试一下吧</p>
<h2 id="监听-nodeler并绑定事件"><a href="#监听-nodeler并绑定事件" class="headerlink" title="监听 nodeler并绑定事件"></a>监听 nodeler并绑定事件</h2><p>还是在之前项目 <code>vue-bpmn</code> 的基础上，在 <code>views</code> 文件夹下新增 <code>event.vue</code> 文件<br>在 <code>success()</code> 函数中添加上监听事件的函数</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><script></span><br><span class="line">...</span><br><span class="line"> success () {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'创建成功'</span>)</span><br><span class="line"> <span class="built_in">this</span>.addModelerListener()</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 监听 modeler</span></span><br><span class="line"> addModelerListener () {</span><br><span class="line"> <span class="keyword">const</span> bpmnjs = <span class="built_in">this</span>.bpmnModeler</span><br><span class="line"> <span class="keyword">const</span> that = <span class="built_in">this</span></span><br><span class="line"> <span class="comment">// 这里用 forEach 给 modeler 上添加要绑定的事件</span></span><br><span class="line"> <span class="keyword">const</span> events = [<span class="string">'shape.added'</span>, <span class="string">'shape.move.end'</span>, <span class="string">'shape.removed'</span>, <span class="string">'connect.end'</span>, <span class="string">'connect.move'</span>]</span><br><span class="line"> events.forEach(<span class="function"><span class="params">event</span> =></span> {</span><br><span class="line"> that.bpmnModeler.on (event, <span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(event, e)</span><br><span class="line"> <span class="keyword">const</span> elementRegistry = bpmnjs.get(<span class="string">'elementRegistry'</span>)</span><br><span class="line"> <span class="keyword">const</span> shape = e.element ? elementRegistry.get(e.element.id) : e.shape</span><br><span class="line"> <span class="built_in">console</span>.log(shape)</span><br><span class="line"> <span class="comment">// 通过监听事件判断操作方式</span></span><br><span class="line"> <span class="keyword">if</span> (event === <span class="string">'shape.added'</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'新增了shape'</span>)</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (event === <span class="string">'shape.removed'</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'删除了shape'</span>)</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"></script></span><br></pre></td></tr></table></figure>
<p>效果图<br><img src="https://img-blog.csdnimg.cn/20210206140952347.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="监听-element-并绑定事件"><a href="#监听-element-并绑定事件" class="headerlink" title="监听 element 并绑定事件"></a>监听 element 并绑定事件</h2><p>此小节主要是用于监听用户点击图形上的 <code>element</code> 或者监听某个 <code>element</code> 改变，比如：</p>
<ul>
<li><code>element.click</code>：点击元素</li>
<li><code>element.changed</code>：当元素发生改变的时候（包括新增、移动、删除元素）</li>
</ul>
<p>还是在 <code>success()</code> 上添加监听事件 <code>addEventBusListener()</code> ，配置好后，当元素被点击、新增、移动和删除的时候就能监听到了</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><script></span><br><span class="line">...</span><br><span class="line"> success () {</span><br><span class="line"> <span class="built_in">this</span>.addEventBusListener()</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 监听 element </span></span><br><span class="line"> addEventBusListener () {</span><br><span class="line"> <span class="keyword">const</span> eventBus = <span class="built_in">this</span>.bpmnModeler.get(<span class="string">'eventBus'</span>) <span class="comment">// 需要使用 eventBus</span></span><br><span class="line"> <span class="keyword">const</span> eventType = [<span class="string">'element.click'</span>, <span class="string">'element.changed'</span>] <span class="comment">// 需要监听的事件集合</span></span><br><span class="line"> eventType.forEach (<span class="function"><span class="params">eventType</span> =></span> {</span><br><span class="line"> eventBus.on(eventType, <span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(e)</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"></script></span><br></pre></td></tr></table></figure>
<blockquote>
<p>当点击画布的时候，有可能根元素也会触发此事件，一般是不想让它触发的，我们可以在 <code>eventBus.on()</code> 的回调函数中添加一个判断来避免这个问题。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">eventBus.on(eventType, <span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!e || e.element.type == <span class="string">'bpmn:Process'</span>) <span class="keyword">return</span> <span class="comment">// 这里根元素是 bpmn:Process</span></span><br><span class="line"> <span class="built_in">console</span>.log(e)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>我们可以使用 <code>elementRegistry</code> 来获取 <code>shape</code> 信息，使用 <code>e.element</code> 和 <code>shape</code> 获取到的信息是一样的，不过更推荐用<code>elementRegistry</code> 来获取 <code>shape</code> 信息</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 监听 element </span></span><br><span class="line">addEventBusListener () {</span><br><span class="line"> <span class="keyword">const</span> eventBus = <span class="built_in">this</span>.bpmnModeler.get(<span class="string">'eventBus'</span>) <span class="comment">// 需要使用 eventBus</span></span><br><span class="line"> <span class="keyword">const</span> eventType = [<span class="string">'element.click'</span>, <span class="string">'element.changed'</span>] <span class="comment">// 需要监听的事件集合</span></span><br><span class="line"> eventType.forEach (<span class="function"><span class="params">eventType</span> =></span> {</span><br><span class="line"> eventBus.on(eventType, <span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (!e || e.element.type == <span class="string">'bpmn:Process'</span>) <span class="keyword">return</span> <span class="comment">// 这里根元素是 bpmn:Process</span></span><br><span class="line"> <span class="built_in">console</span>.log(e)</span><br><span class="line"> <span class="keyword">const</span> elementRegistry = <span class="built_in">this</span>.bpmnModeler.get(<span class="string">'elementRegistry'</span>)</span><br><span class="line"> <span class="keyword">const</span> shape = elementRegistry.get(e.element.id) <span class="comment">// 传递 id 进去</span></span><br><span class="line"> <span class="built_in">console</span>.log(shape) <span class="comment">// {Shape}</span></span><br><span class="line"> <span class="built_in">console</span>.log(e.element) <span class="comment">// {Shape}</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">JSON</span>.stringify(shape) === <span class="built_in">JSON</span>.stringify(e.element)) <span class="comment">// true</span></span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="https://img-blog.csdnimg.cn/20210206145100544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
]]></content>
<categories>
<category>bpmn.js</category>
</categories>
<tags>
<tag>vue</tag>
<tag>bpmn.js</tag>
</tags>
</entry>
<entry>
<title>bpmn.js在vue中初体验</title>
<url>/posts/4b998e91-684c-11eb-bd66-4fb1c1101a24/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><blockquote>
<p>前提：项目中需要绘制流程图的需求，涉及到Activiti和Bpmn.js的使用，接下来就来看看如何在Vue中使用Bpmn.js绘制在线流程图吧。</p>
</blockquote>
<p>额，<a href="https://bpmn.io/">bpmn.js</a>是什么？是一个实验BPMN2.0渲染工具包和web建模器，可以使画流程图的功能在前端来完成。<br>如果你不了解它的话，可以来这<a href="https://demo.bpmn.io/s/start">初体验一下</a>，看看它是否满足你的需求吧。<br><code>vue</code> 中集成 <code>Bpmn.js</code> 实现在线绘图，导出 <code>xml</code>、<code>svg</code>、在线保存等操作</p>
<p><strong>bpmn.js界面内容介绍</strong><br><img src="https://img-blog.csdnimg.cn/20210205154535936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br> 接下来进入正题啦！<br>首先先创建一个 <code>vue</code> 项目，并安装好路由</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">vue create vue-bpmn</span><br><span class="line">cd vue-bpmn</span><br><span class="line">npm i vue-router -S</span><br></pre></td></tr></table></figure>
<p>项目搭建完成后，配置好路由相关部分，我们在<code>views</code>文件夹下新建一个<code>basic.vue</code>的文件</p>
<h1 id="vue中使用bpmn-js"><a href="#vue中使用bpmn-js" class="headerlink" title="vue中使用bpmn.js"></a>vue中使用bpmn.js</h1><h2 id="bpmn-js-基础"><a href="#bpmn-js-基础" class="headerlink" title="bpmn.js 基础"></a>bpmn.js 基础</h2><p>其实这部分主要是将 <code>xml</code> 格式的 <code> bpmn</code> 内容解析为图片显示出来</p>
<ol>
<li><p>安装相关依赖</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i bpmn-js --save-D</span><br></pre></td></tr></table></figure></li>
<li><p>添加 <code>Bpmn</code> 流程图模板 <code>xml</code> 文件（这个文件可以自己绘图构建）<br>在 <code>mock</code> 文件夹下新建 <code>xmlStr.js</code> 文件</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> xmlStr = <span class="string">`</span></span><br><span class="line"><span class="string"><?xml version="1.0" encoding="UTF-8"?></span></span><br><span class="line"><span class="string"> <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"</span></span><br><span class="line"><span class="string"> xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"</span></span><br><span class="line"><span class="string"> xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"</span></span><br><span class="line"><span class="string"> xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"</span></span><br><span class="line"><span class="string"> id="sample-diagram"</span></span><br><span class="line"><span class="string"> targetNamespace="http://bpmn.io/schema/bpmn"</span></span><br><span class="line"><span class="string"> xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"></span></span><br><span class="line"><span class="string"> <bpmn2:process id="Process_1" isExecutable="false"></span></span><br><span class="line"><span class="string"> <bpmn2:startEvent id="StartEvent_1" /></span></span><br><span class="line"><span class="string"> </bpmn2:process></span></span><br><span class="line"><span class="string"> <bpmndi:BPMNDiagram id="BPMNDiagram_1"></span></span><br><span class="line"><span class="string"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"></span></span><br><span class="line"><span class="string"> <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"></span></span><br><span class="line"><span class="string"> <dc:Bounds x="192" y="82" width="36" height="36" /></span></span><br><span class="line"><span class="string"> </bpmndi:BPMNShape></span></span><br><span class="line"><span class="string"> </bpmndi:BPMNPlane></span></span><br><span class="line"><span class="string"> </bpmndi:BPMNDiagram></span></span><br><span class="line"><span class="string"></bpmn2:definitions>`</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>编写相关代码 <code>basic.vue</code></p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><template></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"container"</span>></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"canvas"</span> ref=<span class="string">"canvas"</span>></div></span><br><span class="line"> </div></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line"><span class="comment">// 引入相关依赖</span></span><br><span class="line"><span class="keyword">import</span> BpmnModeler <span class="keyword">from</span> <span class="string">'bpmn-js/lib/Modeler'</span></span><br><span class="line"><span class="keyword">import</span> { xmlStr } <span class="keyword">from</span> <span class="string">'../mock/xmlStr'</span> <span class="comment">// 直接引用 xml格式</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> name: <span class="string">'basic'</span>,</span><br><span class="line"> data () {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> bpmnModeler: <span class="literal">null</span>, <span class="comment">// bpmn 建模器</span></span><br><span class="line"> container: <span class="literal">null</span>,</span><br><span class="line"> canvas: <span class="literal">null</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> mounted () {</span><br><span class="line"> <span class="built_in">this</span>.init()</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> init () {</span><br><span class="line"> <span class="comment">// 获取canvas的dom节点</span></span><br><span class="line"> <span class="keyword">const</span> canvas = <span class="built_in">this</span>.$refs.canvas</span><br><span class="line"> <span class="comment">// 建模</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler = <span class="keyword">new</span> BpmnModeler({</span><br><span class="line"> container: canvas</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">this</span>.createNewDiagram()</span><br><span class="line"> },</span><br><span class="line"> createNewDiagram () {</span><br><span class="line"> <span class="comment">// 将字符串转换成图显示出来</span></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">const</span> result = <span class="built_in">this</span>.bpmnModeler.importXML(xmlStr)</span><br><span class="line"> <span class="keyword">const</span> { warnings } = result</span><br><span class="line"> <span class="built_in">console</span>.log(warnings)</span><br><span class="line"> } <span class="keyword">catch</span> (err) {</span><br><span class="line"> <span class="built_in">console</span>.log(err.message, err.warnings)</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"></script></span><br><span class="line"></span><br><span class="line"><style scoped></span><br><span class="line">.container {</span><br><span class="line"> width: <span class="number">100</span>%;</span><br><span class="line"> height: <span class="number">100</span>%;</span><br><span class="line">}</span><br><span class="line">.canvas {</span><br><span class="line"> width: <span class="number">100</span>%;</span><br><span class="line"> height: <span class="number">100</span>%;</span><br><span class="line">}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure>
<p>运行代码后效果图</p>
<p><img src="https://img-blog.csdnimg.cn/20210205151011871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="bpmn-js添加左侧工具栏"><a href="#bpmn-js添加左侧工具栏" class="headerlink" title="bpmn.js添加左侧工具栏"></a>bpmn.js添加左侧工具栏</h2><blockquote>
<p>左侧工具栏主要是为用户在线自定义流程图使用</p>
</blockquote>
<p>如果我们需要使用左侧的工具栏，只需要在 <code>main.js</code> 中引入相应的 <code>css</code> 样式就可以了<br>在 <code>main.js</code> 中添加bpmn左侧工具栏 <code>css</code> 样式</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./routes/index'</span></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// bpmn 工作流绘图工具的样式</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">"bpmn-js/dist/assets/diagram-js.css"</span> <span class="comment">// 左边工具栏以及编辑节点的样式</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">"bpmn-js/dist/assets/bpmn-font/css/bpmn.css"</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">"bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css"</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">"bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"> router,</span><br><span class="line"> render: <span class="function"><span class="params">h</span> =></span> h(App)</span><br><span class="line">}).$mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure>
<p>其他代码都不变，此时页面上就多了左侧工具栏了，我们可以自己添加节点</p>
<p><img src="https://img-blog.csdnimg.cn/20210205151834244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<blockquote>
<p>补充：如果你添加了左侧工具栏的样式，但是你不想绘制流程图，只查看流程图的话，也可以将 <code>basic.vue</code> 下面的内容修改一下就可以啦</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 绘制流程图</span></span><br><span class="line"><span class="comment">// import BpmnModeler from "bpmn-js/lib/Modeler"</span></span><br><span class="line"><span class="comment">// 预览流程图</span></span><br><span class="line"><span class="keyword">import</span> BpmnViewer <span class="keyword">from</span> <span class="string">"bpmn-js/lib/Viewer"</span></span><br><span class="line"></span><br><span class="line">init() {</span><br><span class="line"> <span class="keyword">const</span> canvas = <span class="built_in">this</span>.$refs.canvas</span><br><span class="line"> <span class="comment">// this.bpmnModeler = new BpmnModeler({ // 可编辑</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler = <span class="keyword">new</span> BpmnViewer({ <span class="comment">// 仅预览</span></span><br><span class="line"> container: canvas</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">this</span>.createNewDiagram()</span><br><span class="line"> },</span><br></pre></td></tr></table></figure>
<h2 id="bpmn-js添加右侧属性栏"><a href="#bpmn-js添加右侧属性栏" class="headerlink" title="bpmn.js添加右侧属性栏"></a>bpmn.js添加右侧属性栏</h2><blockquote>
<p>属性栏顾名思义就是流程图中节点的属性信息</p>
</blockquote>
<p>如果想在界面中添加右侧属性栏的话就需要安装相关插件了</p>
<ol>
<li>安装插件</li>
</ol>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i bpmn-js-properties-panel --save-D</span><br><span class="line">npm i camunda-bpmn-moddle --save-D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>在 <code>main.js</code> 中添加相关 <code>css</code> 样式</li>
</ol>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line">...</span><br><span class="line"><span class="comment">// 使用bpmn.js- 右侧属性栏</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'</span> <span class="comment">// 右边工具栏样式</span></span><br><span class="line">...</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>在 <code>views</code> 下新建 <code>panel.vue</code> 文件，并配置好路由</li>
</ol>
<p><strong>打 … 的地方和 <code>basic.vue</code> 文件的内容一样哦</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// panel.vue</span></span><br><span class="line"><template></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"container"</span>></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"canvas"</span> ref=<span class="string">"canvas"</span>></div></span><br><span class="line"> <!-- 右边属性栏部分 --></span><br><span class="line"> <div id=<span class="string">"js-properties-panel"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"panel"</span>></div></span><br><span class="line"> </div></span><br><span class="line"></template></span><br><span class="line"></span><br><span class="line"><script></span><br><span class="line"><span class="comment">// 引入相关依赖</span></span><br><span class="line">...</span><br><span class="line"><span class="comment">// 使用右侧属性栏</span></span><br><span class="line"><span class="keyword">import</span> propertiesPanelModule <span class="keyword">from</span> <span class="string">'bpmn-js-properties-panel'</span></span><br><span class="line"><span class="keyword">import</span> propertiesProviderModule <span class="keyword">from</span> <span class="string">'bpmn-js-properties-panel/lib/provider/camunda'</span></span><br><span class="line"><span class="keyword">import</span> camundaModdleDescriptor <span class="keyword">from</span> <span class="string">'camunda-bpmn-moddle/resources/camunda'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> name: <span class="string">'basic'</span>,</span><br><span class="line"> data () {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> ...</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> mounted () {</span><br><span class="line"> <span class="built_in">this</span>.init()</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> init () {</span><br><span class="line"> <span class="comment">// 获取canvas的dom节点</span></span><br><span class="line"> <span class="keyword">const</span> canvas = <span class="built_in">this</span>.$refs.canvas</span><br><span class="line"> <span class="comment">// 建模</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler = <span class="keyword">new</span> BpmnModeler({</span><br><span class="line"> container: canvas,</span><br><span class="line"> <span class="comment">// 添加控制板</span></span><br><span class="line"> propertiesPanel: {</span><br><span class="line"> parent: <span class="string">'#js-properties-panel'</span></span><br><span class="line"> },</span><br><span class="line"> additionalModules: [</span><br><span class="line"> <span class="comment">// 右边的属性栏</span></span><br><span class="line"> propertiesProviderModule,</span><br><span class="line"> propertiesPanelModule</span><br><span class="line"> ],</span><br><span class="line"> moddleExtensions: {</span><br><span class="line"> camunda: camundaModdleDescriptor</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">this</span>.createNewDiagram()</span><br><span class="line"> },</span><br><span class="line"> createNewDiagram () {</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"></script></span><br><span class="line"></span><br><span class="line"><style scoped></span><br><span class="line">...</span><br><span class="line">.panel {</span><br><span class="line"> position: absolute;</span><br><span class="line"> top: <span class="number">0</span>;</span><br><span class="line"> right: <span class="number">0</span>;</span><br><span class="line"> width: <span class="number">300</span>px;</span><br><span class="line">}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure>
<p>运行后效果</p>
<p><img src="https://img-blog.csdnimg.cn/20210205153317130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<p>以上，就是 在 <code>vue</code> 中使用 <code>bpmn.js</code> 中绘制流程图的全部内容啦！</p>
<blockquote>
<p>关于右下角 <code>BPMN.IO</code> 这个 logo，官方要求是不给删或者隐藏的，否则就侵权，如果实在是不需要 logo的话可以简单地把 logo 的 css样式隐藏一下</p>
</blockquote>
<p><code>js</code> 部分</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">mounted() {</span><br><span class="line"> <span class="comment">// 删除 bpmn logo bpmn.io官方要求不给删或者隐藏，否则侵权 内部使用</span></span><br><span class="line"> <span class="keyword">const</span> bjsIoLogo = <span class="built_in">document</span>.querySelector(<span class="string">'.bjs-powered-by'</span>)</span><br><span class="line"> <span class="keyword">while</span> (bjsIoLogo.firstChild) {</span><br><span class="line"> bjsIoLogo.removeChild(bjsIoLogo.firstChild)</span><br><span class="line"> }</span><br><span class="line">},</span><br></pre></td></tr></table></figure>
<p><code>css</code> 部分</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.bjs-powered-by</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>]]></content>
<categories>
<category>bpmn.js</category>
</categories>
<tags>
<tag>vue</tag>
<tag>bpmn.js</tag>
</tags>
</entry>
<entry>
<title>bpmn.js在vue中发送http请求</title>
<url>/posts/4b99b5a0-684c-11eb-bd66-4fb1c1101a24/</url>
<content><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><blockquote>
<p>之前使用的是本地写死的 <code>xml</code> 字符串来渲染流程图，实际开发中肯定不满足我们的需求，那么我们应该如何解决这个问题呢？</p>
</blockquote>
<p>常用的做法是：前端发送 <code>axios</code> 请求，获取到 <code>xml</code> 的字符串，然后使用 <code>bpmn.js</code> 中的 <code>importXML</code> 的方法将 <code>xml</code> 字符串转换为图形在页面上渲染出来。</p>
<p>接下来进入正题啦~</p>
<h1 id="bpmn-js在vue中发送http请求"><a href="#bpmn-js在vue中发送http请求" class="headerlink" title="bpmn.js在vue中发送http请求"></a>bpmn.js在vue中发送http请求</h1><h2 id="通过http请求获取并渲染数据"><a href="#通过http请求获取并渲染数据" class="headerlink" title="通过http请求获取并渲染数据"></a>通过http请求获取并渲染数据</h2><p>还是在之前创建好的项目 <code>vue-bpmn</code> 的基础上添加代码</p>
<p>先在项目中安装 <code>axios</code> 用于发送 <code>http</code> 请求</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">npm i axios --save-D</span><br></pre></td></tr></table></figure>
<p>然后在 <code>views</code> 文件夹下新建 <code>axios.vue</code> 的文件，并配置好路由规则</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// axios.vue</span></span><br><span class="line"><template></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"container"</span>></span><br><span class="line"> <template v-<span class="keyword">if</span>=<span class="string">"loading"</span>></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"loading"</span>></span><br><span class="line"> Loading</span><br><span class="line"> </div></span><br><span class="line"> </template></span><br><span class="line"> <template v-<span class="keyword">else</span>></span><br><span class="line"> <div <span class="class"><span class="keyword">class</span></span>=<span class="string">"canvas"</span> ref=<span class="string">"canvas"</span>></div></span><br><span class="line"> <div id=<span class="string">"js-properties-panel"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"panel"</span>></div></span><br><span class="line"> </template></span><br><span class="line"> </div></span><br><span class="line"></template></span><br></pre></td></tr></table></figure>
<p><code>css</code> 部分的样式</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line"><<span class="selector-tag">style</span> <span class="selector-tag">scoped</span>></span><br><span class="line"><span class="selector-class">.container</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.canvas</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.panel</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure>
<p>然后在 <code>js</code> 部分引入 <code>axios</code> 并模拟向后端发送请求获取并渲染数据</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><script></span><br><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span></span><br><span class="line"><span class="keyword">import</span> BpmnModeler <span class="keyword">from</span> <span class="string">'bpmn-js/lib/Modeler'</span></span><br><span class="line"><span class="comment">// 引入一个本地的xml字符串，若是没有获取到后台的数据则用它</span></span><br><span class="line"><span class="keyword">import</span> { xmlStr } <span class="keyword">from</span> <span class="string">'../mock/xmlStr'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用右侧属性栏</span></span><br><span class="line"><span class="keyword">import</span> propertiesPanelModule <span class="keyword">from</span> <span class="string">'bpmn-js-properties-panel'</span></span><br><span class="line"><span class="keyword">import</span> propertiesProviderModule <span class="keyword">from</span> <span class="string">'bpmn-js-properties-panel/lib/provider/camunda'</span></span><br><span class="line"><span class="keyword">import</span> camundaModdleDescriptor <span class="keyword">from</span> <span class="string">'camunda-bpmn-moddle/resources/camunda'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> data () {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> bpmnModeler: <span class="literal">null</span>, <span class="comment">// bpmn 建模器</span></span><br><span class="line"> container: <span class="literal">null</span>,</span><br><span class="line"> canvas: <span class="literal">null</span>,</span><br><span class="line"> loading: <span class="literal">true</span>,</span><br><span class="line"> xmlUrl: <span class="string">''</span>,</span><br><span class="line"> defaultXmlStr: xmlStr</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> mounted() {</span><br><span class="line"> <span class="built_in">this</span>.init()</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> <span class="keyword">async</span> init () {</span><br><span class="line"> <span class="built_in">this</span>.loading = <span class="literal">true</span></span><br><span class="line"> <span class="built_in">this</span>.xmlUrl = <span class="keyword">await</span> <span class="built_in">this</span>.getXmlUrl()</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>.xmlUrl)</span><br><span class="line"> <span class="built_in">this</span>.loading = <span class="literal">false</span></span><br><span class="line"> <span class="comment">// 等待 DOM 更新之后再对工作流进行初始化</span></span><br><span class="line"> <span class="built_in">this</span>.$nextTick(<span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">this</span>.initBpmn()</span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 该方法模拟请求后台获取 bpmn 文件</span></span><br><span class="line"> getXmlUrl () {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =></span> {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> url = <span class="string">'https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmnMock.bpmn'</span></span><br><span class="line"> resolve(url)</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> initBpmn () {</span><br><span class="line"> <span class="comment">// 获取canvas的dom节点</span></span><br><span class="line"> <span class="keyword">const</span> canvas = <span class="built_in">this</span>.$refs.canvas</span><br><span class="line"> <span class="comment">// 建模</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler = <span class="keyword">new</span> BpmnModeler({</span><br><span class="line"> container: canvas,</span><br><span class="line"> <span class="comment">// 添加控制板</span></span><br><span class="line"> propertiesPanel: {</span><br><span class="line"> parent: <span class="string">'#js-properties-panel'</span></span><br><span class="line"> },</span><br><span class="line"> additionalModules: [</span><br><span class="line"> <span class="comment">// 右边的属性栏</span></span><br><span class="line"> propertiesProviderModule,</span><br><span class="line"> propertiesPanelModule</span><br><span class="line"> ],</span><br><span class="line"> moddleExtensions: {</span><br><span class="line"> camunda: camundaModdleDescriptor</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">this</span>.createNewDiagram()</span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">async</span> createNewDiagram () {</span><br><span class="line"> <span class="keyword">const</span> that = <span class="built_in">this</span></span><br><span class="line"> <span class="keyword">let</span> bpmnXmlStr = <span class="string">''</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">this</span>.xmlUrl === <span class="string">''</span>) { <span class="comment">// 若是后台没有数据则使用默认的一个 xml</span></span><br><span class="line"> bpmnXmlStr = <span class="built_in">this</span>.defaultXmlStr</span><br><span class="line"> <span class="built_in">this</span>.transformCanvas(bpmnXmlStr)</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">let</span> res = <span class="keyword">await</span> axios({</span><br><span class="line"> method: <span class="string">'get'</span>,</span><br><span class="line"> timeout: <span class="number">120000</span>,</span><br><span class="line"> url: that.xmlUrl,</span><br><span class="line"> headers: { <span class="string">'Content-Type'</span>: <span class="string">'multipart/form-data'</span> }</span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">console</span>.log(res)</span><br><span class="line"> bpmnXmlStr = res[<span class="string">'data'</span>]</span><br><span class="line"> <span class="built_in">this</span>.transformCanvas(bpmnXmlStr)</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> transformCanvas (bpmnXmlStr) {</span><br><span class="line"> <span class="comment">// 将字符串转换成图显示出来</span></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">const</span> result = <span class="built_in">this</span>.bpmnModeler.importXML(bpmnXmlStr)</span><br><span class="line"> <span class="keyword">const</span> { warnings } = result</span><br><span class="line"> <span class="built_in">console</span>.log(warnings)</span><br><span class="line"> <span class="built_in">this</span>.success()</span><br><span class="line"> <span class="comment">// 让图能自适应屏幕</span></span><br><span class="line"> <span class="keyword">var</span> canvas = <span class="built_in">this</span>.bpmnModeler.get(<span class="string">'canvas'</span>)</span><br><span class="line"> canvas.zoom(<span class="string">'fit-viewport'</span>)</span><br><span class="line"> } <span class="keyword">catch</span> (err) {</span><br><span class="line"> <span class="built_in">console</span>.log(err.message, err.warnings)</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> success () {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'创建成功'</span>)</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<p>效果演示</p>
<p><img src="https://img-blog.csdnimg.cn/20210205170403486.gif" alt="在这里插入图片描述"></p>
<p>请求接口来源 <a href="https://juejin.cn/post/6844904017592614919">多谢</a></p>
<h2 id="编辑之后将最新的bpmn发送给后台"><a href="#编辑之后将最新的bpmn发送给后台" class="headerlink" title="编辑之后将最新的bpmn发送给后台"></a>编辑之后将最新的bpmn发送给后台</h2><blockquote>
<p>仅仅涉及到数据渲染是远远不够的，如果我们修改了数据，该怎么把数据发送给后台并存储呢？</p>
</blockquote>
<p>这个问题就涉及到 <code>bpmn.js</code> 中的事件绑定，需要给图形绑定一个事件 来检测到图形的改变，并获取到最新的 <code>xml</code> 信息发送给后台</p>
<p>在 <code>views</code> 文件夹下新建一个 <code>save.vue</code> 文件，并将 <code>axios.vue</code> 中的内容复制到 <code>save.vue</code> 中，同时记得配置路由哦<br>在 <code>success()</code> 方法中新增一个 <code>addBpmnListener()</code> 的方法</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// save.vue</span></span><br><span class="line"><script></span><br><span class="line"> success () {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'创建成功'</span>)</span><br><span class="line"> <span class="built_in">this</span>.addBpmnListener()</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 添加绑定事件</span></span><br><span class="line"> addBpmnListener () {</span><br><span class="line"> <span class="comment">// 给图绑定事件，当图有发生改变的时候就会触发这个事件</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler.on(<span class="string">'commandStack.changed'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">this</span>.saveDiagram(<span class="function">(<span class="params">err, xml</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(xml) <span class="comment">// 这里获取到的就是最新的 xml 信息</span></span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 下载为 bpmn 格式，done 是个函数，调用的时候传入的</span></span><br><span class="line"> saveDiagram (done) {</span><br><span class="line"> <span class="comment">// 把传入的 done 再传给 bpmn 原型的 saveXML 函数调用</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler.saveXML({ <span class="attr">format</span>: <span class="literal">true</span> }, <span class="function">(<span class="params">err, xml</span>) =></span> {</span><br><span class="line"> done(err, xml)</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<p>编辑图后，就能获得最新的 <code>xml</code> 内容</p>
<p><img src="https://img-blog.csdnimg.cn/20210205172517266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="编辑完后保存为bpmn文件或svg文件"><a href="#编辑完后保存为bpmn文件或svg文件" class="headerlink" title="编辑完后保存为bpmn文件或svg文件"></a>编辑完后保存为bpmn文件或svg文件</h2><p>通过监听 <code>commandStack.changed</code> 事件我们就能获取到修改完成之后最新的 <code>xml</code> 信息了<br>我们可以了最新的 <code>xml</code> 信息传递给后台，也可以直接下载为 <code>bpmn/svg</code> 文件</p>
<p>在 <code>views</code> 文件夹下新建 <code>download.vue</code> 并配置好路由规则，把 <code>save.vue</code> 的内容复制到 <code>download.vue</code> 中<br>先给添加两个按钮，这两个按钮先隐藏（因为此时 <code>href</code> 中没有连接），待图更新完后显示出来供用户下载</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span> <span class="attr">v-else</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> <span class="attr">ref</span>=<span class="string">"saveBpmn"</span> <span class="attr">class</span>=<span class="string">"hidden"</span>></span>保存为bpmn<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> <span class="attr">ref</span>=<span class="string">"saveSvg"</span> <span class="attr">class</span>=<span class="string">"hidden"</span>></span>保存为svg<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"canvas"</span> <span class="attr">ref</span>=<span class="string">"canvas"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"js-properties-panel"</span> <span class="attr">class</span>=<span class="string">"panel"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">template</span>></span></span><br></pre></td></tr></table></figure>
<p>然后修改 <code>js</code> 部分的代码</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><script></span><br><span class="line">methods: {</span><br><span class="line"> <span class="comment">// 添加绑定事件</span></span><br><span class="line"> addBpmnListener () {</span><br><span class="line"> <span class="keyword">const</span> downloadLink = <span class="built_in">this</span>.$refs.saveBpmn</span><br><span class="line"> <span class="keyword">const</span> downloadSvgLink = <span class="built_in">this</span>.$refs.saveSvg</span><br><span class="line"> <span class="comment">// 给图绑定事件，当图有发生改变的时候就会触发这个事件</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler.on(<span class="string">'commandStack.changed'</span>, <span class="function">() =></span> {</span><br><span class="line"> downloadLink.display = <span class="string">'block'</span></span><br><span class="line"> downloadSvgLink.display = <span class="string">'block'</span></span><br><span class="line"> <span class="built_in">this</span>.saveBpmn(<span class="function">(<span class="params">err, xml</span>) =></span> {</span><br><span class="line"> <span class="built_in">this</span>.setEncoded(downloadLink, <span class="string">'diagram.bpmn'</span>, err ? <span class="literal">null</span> : xml) <span class="comment">// 这里获取到的 xml 就是最新的 xml 信息</span></span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">this</span>.saveSvg(<span class="function">(<span class="params">err, svg</span>) =></span> {</span><br><span class="line"> <span class="built_in">this</span>.setEncoded(downloadSvgLink, <span class="string">'diagram.svg'</span>, err ? <span class="literal">null</span> : svg)</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 下载为 Svg 格式，done 是个函数，调用的时候传入的</span></span><br><span class="line"> saveSvg (done) {</span><br><span class="line"> <span class="comment">// 把传入的 done 再传给 bpmn 原型的 saveSVG 函数调用</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler.saveSVG(done)</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 下载为 bpmn 格式，done 是个函数，调用的时候传入的</span></span><br><span class="line"> saveBpmn (done) {</span><br><span class="line"> <span class="comment">// 把传入的 done 再传给 bpmn 原型的 saveXML 函数调用</span></span><br><span class="line"> <span class="built_in">this</span>.bpmnModeler.saveXML({ <span class="attr">format</span>: <span class="literal">true</span> }, <span class="function">(<span class="params">err, xml</span>) =></span> {</span><br><span class="line"> done(err, xml)</span><br><span class="line"> })</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 当图发生改变的时候会调用这个函数，这个 data 就是图的 xml</span></span><br><span class="line"> setEncoded (link, name, data) {</span><br><span class="line"> <span class="comment">// 把 xml 转换为 URI，下载要用到的</span></span><br><span class="line"> <span class="keyword">const</span> encodeData = <span class="built_in">encodeURIComponent</span>(data)</span><br><span class="line"> <span class="comment">// 下载图的具体操作，改变 a 的属性，className 另 a 标签可点击，href 可以下载，download 是下载的文件的名字</span></span><br><span class="line"> <span class="built_in">console</span>.log(link, name, data)</span><br><span class="line"> <span class="keyword">let</span> xmlFile = <span class="keyword">new</span> File([data], <span class="string">'test.bpmn'</span>)</span><br><span class="line"> <span class="built_in">console</span>.log(xmlFile)</span><br><span class="line"> <span class="keyword">if</span> (data) {</span><br><span class="line"> link.className = <span class="string">'active'</span></span><br><span class="line"> <span class="comment">// 将数据给到连接</span></span><br><span class="line"> link.href = <span class="string">'data:application/bpmn20-xml;charset=UTF-8,'</span> + encodeData</span><br><span class="line"> <span class="comment">// 设置文件名</span></span><br><span class="line"> link.download = name</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
<p>效果演示</p>
<p><img src="https://img-blog.csdnimg.cn/20210206101345243.gif" alt="在这里插入图片描述"></p>
]]></content>
<categories>
<category>bpmn.js</category>
</categories>
<tags>
<tag>vue</tag>
<tag>bpmn.js</tag>
</tags>
</entry>
</search>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手