代码拉取完成，页面将自动刷新
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>上海2000坐标转换系统</title>
<url>/posts/5c283250-0afb-11ec-b838-79832a929e5e/</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><h2 id="首页"><a href="#首页" class="headerlink" title="首页"></a>首页</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901160443.png"></p>
<h2 id="启用技术指南"><a href="#启用技术指南" class="headerlink" title="启用技术指南"></a>启用技术指南</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901160659.png"></p>
<h2 id="认识2000坐标系"><a href="#认识2000坐标系" class="headerlink" title="认识2000坐标系"></a>认识2000坐标系</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901160825.png"></p>
<h2 id="启用六十问"><a href="#启用六十问" class="headerlink" title="启用六十问"></a>启用六十问</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901160913.png"></p>
<h2 id="六十问回答"><a href="#六十问回答" class="headerlink" title="六十问回答"></a>六十问回答</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901161016.png"></p>
<h2 id="使用步骤和注意事项"><a href="#使用步骤和注意事项" class="headerlink" title="使用步骤和注意事项"></a>使用步骤和注意事项</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901161050.png"></p>
<h2 id="常见问题解决"><a href="#常见问题解决" class="headerlink" title="常见问题解决"></a>常见问题解决</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901161124.png"></p>
<h2 id="任务列表"><a href="#任务列表" class="headerlink" title="任务列表"></a>任务列表</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901161217.png"></p>
<h2 id="提交任务"><a href="#提交任务" class="headerlink" title="提交任务"></a>提交任务</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901161221.png"></p>
]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>master</tag>
<tag>截图</tag>
</tags>
</entry>
<entry>
<title>空间数据集成管理平台截图</title>
<url>/posts/f86d67a0-0ae9-11ec-8154-cfebb3b24829/</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="dev-base分支"><a href="#dev-base分支" class="headerlink" title="dev-base分支"></a>dev-base分支</h1><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901154443.png"></p>
<h1 id="分支管理"><a href="#分支管理" class="headerlink" title="分支管理"></a>分支管理</h1><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901154706.png"></p>
<h1 id="dev-changchun分支"><a href="#dev-changchun分支" class="headerlink" title="dev-changchun分支"></a>dev-changchun分支</h1><h2 id="登录"><a href="#登录" class="headerlink" title="登录"></a>登录</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901140642.png" alt="登录页"></p>
<h2 id="首页"><a href="#首页" class="headerlink" title="首页"></a>首页</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901141650.png" alt="首页"></p>
<h2 id="资源目录"><a href="#资源目录" class="headerlink" title="资源目录"></a>资源目录</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901141851.png" alt="资源目录"></p>
<h2 id="仪表盘列表"><a href="#仪表盘列表" class="headerlink" title="仪表盘列表"></a>仪表盘列表</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901142004.png" alt="仪表盘列表"></p>
<h2 id="仪表盘详情"><a href="#仪表盘详情" class="headerlink" title="仪表盘详情"></a>仪表盘详情</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901142223.png" alt="仪表盘详情"></p>
<h2 id="数据出入库"><a href="#数据出入库" class="headerlink" title="数据出入库"></a>数据出入库</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901142322.png" alt="数据出入库"></p>
<h2 id="资源项详情"><a href="#资源项详情" class="headerlink" title="资源项详情"></a>资源项详情</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901142350.png" alt="资源项详情"></p>
<h2 id="地图预览"><a href="#地图预览" class="headerlink" title="地图预览"></a>地图预览</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901143741.png" alt="地图预览"></p>
<h2 id="现势库和历史库对比"><a href="#现势库和历史库对比" class="headerlink" title="现势库和历史库对比"></a>现势库和历史库对比</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901144047.png" alt="现势库和历史库对比"></p>
<h2 id="地图对比"><a href="#地图对比" class="headerlink" title="地图对比"></a>地图对比</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901144437.png" alt="地图对比"></p>
<h2 id="任务状态"><a href="#任务状态" class="headerlink" title="任务状态"></a>任务状态</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901144651.png" alt="任务状态"></p>
<h2 id="数据统计"><a href="#数据统计" class="headerlink" title="数据统计"></a>数据统计</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901145732.png" alt="数据统计"></p>
<h2 id="方案管理"><a href="#方案管理" class="headerlink" title="方案管理"></a>方案管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901145827.png" alt="方案列表"></p>
<h2 id="创建方案"><a href="#创建方案" class="headerlink" title="创建方案"></a>创建方案</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901145915.png" alt="创建方案"></p>
<h2 id="方案添加服务-模板"><a href="#方案添加服务-模板" class="headerlink" title="方案添加服务/模板"></a>方案添加服务/模板</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901150007.png" alt="方案添加模板"></p>
<h2 id="方案服务列表"><a href="#方案服务列表" class="headerlink" title="方案服务列表"></a>方案服务列表</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901150131.png" alt="方案服务列表"></p>
<h2 id="方案编辑"><a href="#方案编辑" class="headerlink" title="方案编辑"></a>方案编辑</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901150302.png" alt="方案编辑"></p>
<h2 id="方案服务编辑"><a href="#方案服务编辑" class="headerlink" title="方案服务编辑"></a>方案服务编辑</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901150404.png" alt="方案服务编辑"></p>
<h2 id="创建任务-提交方案"><a href="#创建任务-提交方案" class="headerlink" title="创建任务/提交方案"></a>创建任务/提交方案</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901150741.png" alt="创建任务"></p>
<h2 id="提交方案字典类型参数填写"><a href="#提交方案字典类型参数填写" class="headerlink" title="提交方案字典类型参数填写"></a>提交方案字典类型参数填写</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901150852.png" alt="提交方案字典类型参数填写"></p>
<h2 id="提交方案文件类型参数填写"><a href="#提交方案文件类型参数填写" class="headerlink" title="提交方案文件类型参数填写"></a>提交方案文件类型参数填写</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901151056.png" alt="提交方案文件类型参数填写"></p>
<h2 id="提交方案文件类型参数临时上传"><a href="#提交方案文件类型参数临时上传" class="headerlink" title="提交方案文件类型参数临时上传"></a>提交方案文件类型参数临时上传</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901151154.png" alt="提交方案文件类型参数临时上传"></p>
<h2 id="计划任务列表"><a href="#计划任务列表" class="headerlink" title="计划任务列表"></a>计划任务列表</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901150449.png" alt="计划任务列表"></p>
<h2 id="创建计划任务"><a href="#创建计划任务" class="headerlink" title="创建计划任务"></a>创建计划任务</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901150555.png" alt="创建计划任务"></p>
<h2 id="流程列表"><a href="#流程列表" class="headerlink" title="流程列表"></a>流程列表</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901151510.png" alt="流程列表"></p>
<h2 id="创建流程"><a href="#创建流程" class="headerlink" title="创建流程"></a>创建流程</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901151546.png" alt="创建流程"></p>
<h2 id="流程定义"><a href="#流程定义" class="headerlink" title="流程定义"></a>流程定义</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901151635.png" alt="流程定义"></p>
<h2 id="流程步骤创建"><a href="#流程步骤创建" class="headerlink" title="流程步骤创建"></a>流程步骤创建</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901151721.png" alt="流程步骤创建"></p>
<h2 id="流程步骤挂载方案"><a href="#流程步骤挂载方案" class="headerlink" title="流程步骤挂载方案"></a>流程步骤挂载方案</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901151755.png" alt="流程步骤挂载方案"></p>
<h2 id="执行流程"><a href="#执行流程" class="headerlink" title="执行流程"></a>执行流程</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901151957.png" alt="执行流程"></p>
<h2 id="流程状态列表"><a href="#流程状态列表" class="headerlink" title="流程状态列表"></a>流程状态列表</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152148.png" alt="流程状态列表"></p>
<h2 id="流程状态详情"><a href="#流程状态详情" class="headerlink" title="流程状态详情"></a>流程状态详情</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152235.png" alt="流程状态详情"></p>
<h2 id="角色列表"><a href="#角色列表" class="headerlink" title="角色列表"></a>角色列表</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152304.png"></p>
<h2 id="角色接口授权"><a href="#角色接口授权" class="headerlink" title="角色接口授权"></a>角色接口授权</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152331.png"></p>
<h2 id="角色方案授权"><a href="#角色方案授权" class="headerlink" title="角色方案授权"></a>角色方案授权</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152403.png"></p>
<h2 id="用户管理"><a href="#用户管理" class="headerlink" title="用户管理"></a>用户管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152441.png"></p>
<h2 id="资源目录管理"><a href="#资源目录管理" class="headerlink" title="资源目录管理"></a>资源目录管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152613.png"></p>
<h2 id="资源目录节点创建"><a href="#资源目录节点创建" class="headerlink" title="资源目录节点创建"></a>资源目录节点创建</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152652.png"><br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152720.png"></p>
<h2 id="资源目录资源项编辑"><a href="#资源目录资源项编辑" class="headerlink" title="资源目录资源项编辑"></a>资源目录资源项编辑</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152810.png"></p>
<h2 id="资源项元数据录入"><a href="#资源项元数据录入" class="headerlink" title="资源项元数据录入"></a>资源项元数据录入</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152849.png"></p>
<h2 id="用户目录"><a href="#用户目录" class="headerlink" title="用户目录"></a>用户目录</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901152958.png"></p>
<h2 id="上传文件"><a href="#上传文件" class="headerlink" title="上传文件"></a>上传文件</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153026.png"></p>
<h2 id="文件目录"><a href="#文件目录" class="headerlink" title="文件目录"></a>文件目录</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153049.png"></p>
<h2 id="文件目录详情"><a href="#文件目录详情" class="headerlink" title="文件目录详情"></a>文件目录详情</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153126.png"></p>
<h2 id="数据库连接"><a href="#数据库连接" class="headerlink" title="数据库连接"></a>数据库连接</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153207.png"></p>
<h2 id="地图服务"><a href="#地图服务" class="headerlink" title="地图服务"></a>地图服务</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153245.png"></p>
<h2 id="用户字典"><a href="#用户字典" class="headerlink" title="用户字典"></a>用户字典</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153321.png"></p>
<h2 id="fmeserver服务器管理"><a href="#fmeserver服务器管理" class="headerlink" title="fmeserver服务器管理"></a>fmeserver服务器管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153501.png"></p>
<h2 id="系统迁移"><a href="#系统迁移" class="headerlink" title="系统迁移"></a>系统迁移</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153554.png"></p>
<h2 id="元数据结构定义"><a href="#元数据结构定义" class="headerlink" title="元数据结构定义"></a>元数据结构定义</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153623.png"></p>
<h2 id="日志管理"><a href="#日志管理" class="headerlink" title="日志管理"></a>日志管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153658.png"></p>
<h2 id="图表管理"><a href="#图表管理" class="headerlink" title="图表管理"></a>图表管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153723.png"></p>
<h2 id="仪表盘管理"><a href="#仪表盘管理" class="headerlink" title="仪表盘管理"></a>仪表盘管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153751.png"></p>
<h2 id="仪表盘设计"><a href="#仪表盘设计" class="headerlink" title="仪表盘设计"></a>仪表盘设计</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153840.png"></p>
<h2 id="仪表盘图表挂载"><a href="#仪表盘图表挂载" class="headerlink" title="仪表盘图表挂载"></a>仪表盘图表挂载</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153910.png"></p>
<h2 id="令牌管理"><a href="#令牌管理" class="headerlink" title="令牌管理"></a>令牌管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901153939.png"></p>
<h2 id="许可管理"><a href="#许可管理" class="headerlink" title="许可管理"></a>许可管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901154001.png"></p>
<h2 id="接口管理"><a href="#接口管理" class="headerlink" title="接口管理"></a>接口管理</h2><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/20210901154027.png"></p>
]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>master</tag>
<tag>截图</tag>
</tags>
</entry>
<entry>
<title>使用GitHub+jsDelivr+PicGo+Imagine打造稳定快速、高效免费图床</title>
<url>/posts/30efc280-f984-11ea-90b0-c5a83a2f2ef9a0b/</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><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>因为在不同平台发布同一篇文章的时候，最一个痛苦的点就是，图片存储问题，各个平台的文件存储方式各不相同，无法直接 <code>Ctrl + C</code> 的方式一键搞定，为了解决这个问题，使用 <code>MarkDown + 图床</code> 的方式进行文章的写作，将图片放到一个统一的地方，在文章中引入图片外链。<br>所谓<strong>图床</strong>，就是将图片储存到第三方静态资源库中，其返回给你一个 URL 进行获取图片。<code>MarkDown</code> 支持使用 URL 的方式显示图片，我想这也是程序员为什么对其偏爱的原因之一。<br>作为程序员，你会发现，现在很多论坛和社区都开始支持使用 <code>MarkDown</code>，如果你没使用图床的情况下，你分享同一篇文章，你要在不同的平台，各自重新编辑排版一遍和上传图片一次。<br>有了图床，情况就不一样了，<code>Ctrl+C</code> 的方式就搞定了，根本不用再 Check 文章内容一遍。</p>
<h3 id="图床的选择"><a href="#图床的选择" class="headerlink" title="图床的选择"></a>图床的选择</h3><ul>
<li><code>微博图床</code>：以前用的人比较多，从 2019 年 4 月开始开启了防盗链，凉凉</li>
<li><code>SM.MS</code>：运营四年多了，也变得越来越慢了，到了晚上直接打不开图片，速度堪忧</li>
<li><code>其他小众图床</code>：随时有挂掉的风险</li>
<li><code>Imgur 等国外图床</code>：国内访问速度太慢，随时有被墙的风险</li>
<li><code>大厂储存服务</code>：例如七牛云、又拍云、腾讯云COS、阿里云OSS等，操作繁琐，又是实名认证又是域名备案的，麻烦，而且还要花钱（有钱又不怕麻烦的当我没说）</li>
<li><code>GitHub 图床</code>：免费，但是国内访问速度慢（不过没关系，利用 <code>jsDelivr</code> 提供的免费的 CDN 加速 速度足够了）</li>
<li><code>Gitee图床</code>：免费，并且是国内的访问速度快。</li>
</ul>
<h2 id="Github图床搭建"><a href="#Github图床搭建" class="headerlink" title="Github图床搭建"></a>Github图床搭建</h2><h3 id="搭建流程"><a href="#搭建流程" class="headerlink" title="搭建流程"></a>搭建流程</h3><ol>
<li>新建 <code>GitHub</code> 仓库</li>
<li>生成一个 <code>Token</code></li>
<li>配置 <code>PicGo</code> 并使用 <code>jsdelivr</code> 作为 <code>CDN</code> 加速</li>
<li>使用 <code>Imagine</code> 进行图片压缩</li>
<li>上传图片到 <code>PicGo</code> 并使用图床</li>
</ol>
<h3 id="新建Github仓库"><a href="#新建Github仓库" class="headerlink" title="新建Github仓库"></a>新建Github仓库</h3><ol>
<li>登录/注册 <code>GitHub</code></li>
<li>新建一个仓库，填写好仓库名: 这里我们使用cdn/img随便都行</li>
<li>仓库描述</li>
<li>将权限设置成 <code>public</code></li>
<li>根据需求选择是否为仓库初始化一个 <code>README.md</code> 描述文件<br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143707426-235923297.png"></li>
</ol>
<h3 id="生成Token"><a href="#生成Token" class="headerlink" title="生成Token"></a>生成Token</h3><ol>
<li><p>点击用户头像 -> 选择 <code>Settings</code><br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143707726-1628597102.png"></p>
</li>
<li><p>点击 <code>Developer settings</code><br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143707980-866353141.png"></p>
</li>
<li><p>点击 <code>Personal access tokens</code><br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143708248-1127631919.png"></p>
</li>
<li><p>点击 <code>Generate new token</code><br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143708476-2136659668.png"></p>
</li>
<li><p>填写 <code>Token</code> 描述，勾选 <code>repo</code>，然后点击 <code>Generate token</code> 生成一个 <code>Token</code><br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143709525-70134527.png"></p>
</li>
<li><p>获取 <code>Token</code> 密钥<br>注意：这个 Token 只会显示一次，自己先保存下来，或者等后面配置好 PicGo 后再关闭此网页<br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143709802-2004377463.png"></p>
</li>
</ol>
<h3 id="配置-PicGo-并使用-jsdelivr-作为-CDN-加速"><a href="#配置-PicGo-并使用-jsdelivr-作为-CDN-加速" class="headerlink" title="配置 PicGo 并使用 jsdelivr 作为 CDN 加速"></a>配置 PicGo 并使用 jsdelivr 作为 CDN 加速</h3><p>前往下载 <a href="https://github.com/Molunerfinn/picgo/releases">PicGo（点击下载）</a>，安装好后开始配置图床</p>
<ul>
<li>设定仓库名：按照 <code>用户名/图床仓库名</code> 的格式填写</li>
<li>设定分支名：<code>master</code></li>
<li>设定 Token：粘贴之前生成的 <code>Token</code></li>
<li>指定存储路径：填写想要储存的路径，如 <code>img/</code>，这样就会在仓库下创建一个名为 img 的文件夹，图片将会储存在此文件夹中</li>
<li>设定自定义域名：它的的作用是，在图片上传后，<code>PicGo</code> 会按照<code>自定义域名+上传的图片名</code>的方式生成访问链接，放到粘贴板上，因为我们要使用<code>jsDelivr</code> 加速访问，所以可以设置为<a href="https://cdn.jsdelivr.net/gh/%E7%94%A8%E6%88%B7%E5%90%8D/%E5%9B%BE%E5%BA%8A%E4%BB%93%E5%BA%93%E5%90%8D">https://cdn.jsdelivr.net/gh/用户名/图床仓库名</a><br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143710014-1605342625.png"></li>
</ul>
<blockquote>
<p>什么是 jsdelivr ?<br>jsDelivr 为开发者提供免费公共 CDN 加速服务</p>
</blockquote>
<h3 id="使用-Imagine-进行图片压缩"><a href="#使用-Imagine-进行图片压缩" class="headerlink" title="使用 Imagine 进行图片压缩"></a>使用 Imagine 进行图片压缩</h3><p>通常情况下，图片大小都是超过 200KB 的，所以网页加载的时候会特别慢，一般我们会对图片进行压缩，这里我推荐 <a href="https://github.com/meowtec/Imagine/releases">Imagine（点击下载）</a> 支持全平台。<br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143712172-1803144749.png"></p>
<blockquote>
<p>Imagine 采用的是有损压缩，介意的可以忽略这一步</p>
</blockquote>
<p>顺便推荐一个无损压缩的网站：<a href="https://tinypng.com/">https://tinypng.com/</a></p>
<h3 id="上传图片到-PicGo-并使用图床"><a href="#上传图片到-PicGo-并使用图床" class="headerlink" title="上传图片到 PicGo 并使用图床"></a>上传图片到 PicGo 并使用图床</h3><p>配置好 <code>PicGo</code> 后，我们就可以进行高效创作了，将<code>压缩后的图片</code>拖拽到<code>上传区</code>，将会自动上传并复制<code>访问链接</code>，将链接粘贴到博文中就行了，访问速度杠杠的<br><img src= "/img/loading.gif" data-lazy-src="https://img2018.cnblogs.com/blog/1705824/201911/1705824-20191113143712417-1116109240.png"><br>此外 <code>PicGo</code> 还有<code>相册</code>功能，可以对已上传的图片进行删除，修改链接等快捷操作，PicGo 还可以生成不同格式的链接、支持批量上传、快捷键上传、自定义链接格式、上传前重命名等，更多功能自己去探索吧！</p>
<h2 id="Gitee图床搭建"><a href="#Gitee图床搭建" class="headerlink" title="Gitee图床搭建"></a>Gitee图床搭建</h2><p>在写 <code>markdown</code> 文件的时，会不可避免的插入图片。可以通过<code>PicGo</code> + <code>gitee</code> 实现<code>markdown</code>图片在线存储。</p>
<h3 id="搭建流程-1"><a href="#搭建流程-1" class="headerlink" title="搭建流程"></a>搭建流程</h3><ol>
<li>下载<code>PicGo</code></li>
<li>安装<code>PicGo</code>并且安装<code>Gitee</code>图床插件(PicGo默认不包含 Gitee 图床)</li>
<li>创建<code>Gitee</code>图床存储仓库</li>
<li>设置<code>Gitee</code>私人令牌</li>
<li>设置PicGo + Gitee图床信息</li>
</ol>
<h3 id="下载PicGo"><a href="#下载PicGo" class="headerlink" title="下载PicGo"></a>下载PicGo</h3><p>前往下载 <a href="https://github.com/Molunerfinn/picgo/releases">PicGo（点击下载）</a>，下载好后进行安装<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_01.jpg"></p>
<h3 id="安装PicGo并且安装Gitee图床插件"><a href="#安装PicGo并且安装Gitee图床插件" class="headerlink" title="安装PicGo并且安装Gitee图床插件"></a>安装PicGo并且安装Gitee图床插件</h3><p>PicGo默认不包含 Gitee 图床,需要自己在插件市场进行安装，请按照图上步骤进行安装。<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_02.png"></p>
<h3 id="创建Gitee图床存储仓库"><a href="#创建Gitee图床存储仓库" class="headerlink" title="创建Gitee图床存储仓库"></a>创建Gitee图床存储仓库</h3><p>登录<a href="https://gitee.com/">Gitee账号</a>(没有自己注册一个账户)，然后点击右上角的<code>+</code>号，按照下图的顺序填写与勾选。<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_03.png"></p>
<h3 id="设置Gitee私人令牌"><a href="#设置Gitee私人令牌" class="headerlink" title="设置Gitee私人令牌"></a>设置Gitee私人令牌</h3><p>私人令牌字符串只会在密码验证后出现一次，注意复制保存。<br>点击右上角个人头像 -> 设置 进入到设置中心，如下：<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_04.png"><br>然后点击<code>私人令牌</code>，按照图上顺序进行填写：<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_05.png"><br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_06.png"><br>生成令牌后请注意保存，关闭窗口后就无法再次查看。<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_07.png"></p>
<h3 id="设置PicGo-Gitee图床信息"><a href="#设置PicGo-Gitee图床信息" class="headerlink" title="设置PicGo + Gitee图床信息"></a>设置PicGo + Gitee图床信息</h3><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_08.png"></p>
<ul>
<li>repo：仓库(一般采用<code>Git用户名/仓库名</code>)</li>
<li>branch：分支(一般使用master)</li>
<li>token：私人令牌(将上一步生成的私人令牌复制粘贴)</li>
<li>path：则是在图片上传成功后访问地址的前缀</li>
<li>customPath: 生成文件后的重命名方式，按照自己的需求进行选择</li>
<li>customUrl: 可以不填写</li>
</ul>
<p>配置成功后的访问地址则是如下：</p>
<blockquote>
<p><a href="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_08.png">https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_08.png</a></p>
</blockquote>
<h2 id="NextCoud图床搭建"><a href="#NextCoud图床搭建" class="headerlink" title="NextCoud图床搭建"></a>NextCoud图床搭建</h2><p>在写 <code>markdown</code> 文件的时，会不可避免的插入图片。可以通过<code>PicGo</code> + <code>NextCloud</code> 实现<code>markdown</code>图片在线存储。</p>
<h3 id="搭建流程-2"><a href="#搭建流程-2" class="headerlink" title="搭建流程"></a>搭建流程</h3><ol>
<li>下载<code>PicGo</code></li>
<li>安装<code>PicGo</code>并且安装<code>NextCloud</code>图床插件(PicGo默认不包含 NextCloud 图床)</li>
<li>搭建<code>NextCloud</code>个人网盘</li>
<li>设置PicGo + NextCloud图床信息</li>
</ol>
<h3 id="下载PicGo-1"><a href="#下载PicGo-1" class="headerlink" title="下载PicGo"></a>下载PicGo</h3><p>前往下载 <a href="https://github.com/Molunerfinn/picgo/releases">PicGo（点击下载）</a>，下载好后进行安装<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/Gitee%E5%9B%BE%E5%BA%8A%E6%90%AD%E5%BB%BA_01.jpg"></p>
<h3 id="安装PicGo并且安装NextCloud图床插件"><a href="#安装PicGo并且安装NextCloud图床插件" class="headerlink" title="安装PicGo并且安装NextCloud图床插件"></a>安装<code>PicGo</code>并且安装<code>NextCloud</code>图床插件</h3><p><code>PicGo</code>默认不包含 <code>NextCloud</code> 图床，需要手动去安装<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/nextcloud%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A_01.png"></p>
<h3 id="搭建NextCloud个人网盘"><a href="#搭建NextCloud个人网盘" class="headerlink" title="搭建NextCloud个人网盘"></a>搭建NextCloud个人网盘</h3><p>查看: <a href="http://www.chenliang0829.cn:8081/topic/5f349605ea4e6f11da8d73d6">阿里云centos服务器搭建nextcloud个人网盘</a></p>
<h3 id="设置PicGo-NextCloud图床信息"><a href="#设置PicGo-NextCloud图床信息" class="headerlink" title="设置PicGo + NextCloud图床信息"></a>设置PicGo + NextCloud图床信息</h3><p>按照图上的提示进行填写<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/nextcloud%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A_02.png"></p>
<ul>
<li>服务地址：nextcloud 网盘的域名及端口/ip及端口</li>
<li>用户名：在 nextcloud 网盘搭建时创建的用户的用户名</li>
<li>密码：在 nextcloud 网盘搭建时创建的用户的密码</li>
<li>保存地址：将图片保存到 nextcloud 的哪里，不写默认就是在根目录</li>
</ul>
<p>配置成功后的访问地址则是如下：</p>
<blockquote>
<p><a href="http://121.199.50.62:8088/s/prXNXtwSDYTpwHW/preview">http://121.199.50.62:8088/s/prXNXtwSDYTpwHW/preview</a></p>
</blockquote>
<h2 id="PicGo搭建自定义web图床"><a href="#PicGo搭建自定义web图床" class="headerlink" title="PicGo搭建自定义web图床"></a>PicGo搭建自定义web图床</h2><p>待完成………….</p>
<p>参考：<a href="https://www.cnblogs.com/sitoi/p/11848816.html">https://www.cnblogs.com/sitoi/p/11848816.html</a></p>
]]></content>
<categories>
<category>图床</category>
</categories>
<tags>
<tag>图床</tag>
<tag>markdown</tag>
<tag>github</tag>
<tag>jsDelivr</tag>
<tag>PicGo</tag>
<tag>Imagine</tag>
</tags>
</entry>
<entry>
<title>Hexo个人博客站点被百度和谷歌搜索引擎收录</title>
<url>/posts/70ba8db0-f72b-11ea-938b-b99af4f0d6b5/</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>参考：<a href="https://www.jianshu.com/p/5e68f78c7791">https://www.jianshu.com/p/5e68f78c7791</a></p>
]]></content>
<tags>
<tag>+ Hexo + 搜索引擎优化 + SEO + 博客搭建</tag>
</tags>
</entry>
<entry>
<title>Hexo使用hexo-admin插件管理文章</title>
<url>/posts/e221c1b0-f732-11ea-b743-5f643a35642e/</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>参考：<a href="https://blog.csdn.net/nineya_com/article/details/103380243">https://blog.csdn.net/nineya_com/article/details/103380243</a><br>这里是文章内容</p>
]]></content>
</entry>
<entry>
<title>Arcgis学习之路(三)之esri/wigets的使用</title>
<url>/posts/d53d8650-4b2e-11eb-8749-916705835835a228/</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="esri-widgets的使用"><a href="#esri-widgets的使用" class="headerlink" title="esri/widgets的使用"></a>esri/widgets的使用</h1><p>本文主要讲解在vue项目中如何使用Arcgis Api for javascript的<code>esri/wigets</code>。</p>
<h2 id="AreaMeasurement2D"><a href="#AreaMeasurement2D" class="headerlink" title="AreaMeasurement2D"></a>AreaMeasurement2D</h2><p>更多配置请查看官网：<a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-AreaMeasurement2D.html">AreaMeasurement2D</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">'esri/widgets/AreaMeasurement2D'</span>], <span class="function"><span class="keyword">function</span>(<span class="params">AreaMeasurement2D</span>) </span>{ <span class="comment">/* code goes here */</span> });</span><br></pre></td></tr></table></figure>
<p>计算并显示地图视图中多边形的面积和周长。这个小部件将为地理坐标系和WebMercator计算面积和周长。<br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-measurement-2d">官方示例</a></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"map"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"topbar"</span> <span class="attr">ref</span>=<span class="string">"topbar"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"action-button esri-icon-measure-line"</span>></span><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <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><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="javascript"> name: <span class="string">'Home'</span>,</span></span><br><span class="line"> data () {</span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="javascript"> view: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> activeWidget: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> publicPath: process.env.BASE_URL <span class="comment">// 获取public的</span></span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> measure2D (AreaMeasurement2D) {</span><br><span class="line"><span class="javascript"> <span class="keyword">if</span> (<span class="built_in">this</span>.activeWidget === <span class="literal">null</span>) {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget = <span class="keyword">new</span> AreaMeasurement2D({</span></span><br><span class="line"><span class="javascript"> view: <span class="built_in">this</span>.view</span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget.viewModel.newMeasurement()</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(<span class="built_in">this</span>.activeWidget, <span class="string">'top-right'</span>)</span></span><br><span class="line"><span class="javascript"> } <span class="keyword">else</span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.remove(<span class="built_in">this</span>.activeWidget)</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget.destroy()</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget = <span class="literal">null</span></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="javascript"> <span class="keyword">const</span> options = {</span></span><br><span class="line"><span class="javascript"> url: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/init.js`</span>,</span></span><br><span class="line"><span class="javascript"> css: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/esri/themes/dark-blue/main.css`</span></span></span><br><span class="line"> }</span><br><span class="line"> esriLoader.loadModules([</span><br><span class="line"><span class="javascript"> <span class="string">'esri/Map'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/views/MapView'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/widgets/AreaMeasurement2D'</span></span></span><br><span class="line"> ], options)</span><br><span class="line"><span class="javascript"> .then(<span class="function">(<span class="params">[ArcGISMap, MapView, AreaMeasurement2D]</span>) =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.map = <span class="keyword">new</span> ArcGISMap({</span></span><br><span class="line"><span class="javascript"> basemap: <span class="string">'hybrid'</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view = <span class="keyword">new</span> MapView({</span></span><br><span class="line"><span class="javascript"> container: <span class="string">'map'</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="built_in">this</span>.map,</span></span><br><span class="line"> zoom: 4</span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="comment">// 添加按钮到右顶部</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(<span class="string">'topbar'</span>, <span class="string">'top-right'</span>)</span></span><br><span class="line"><span class="javascript"> <span class="comment">// 为按钮绑定点击事件</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.$refs.topbar.addEventListener(<span class="string">'click'</span>, <span class="function">() =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.measure2D(AreaMeasurement2D)</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 class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span>></span></span><br><span class="line"><span class="css"><span class="selector-class">.page</span>{</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> flex: 1 1 auto;</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#map</span> {</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> height: 100%;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#topbar</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#fff</span>;</span></span><br><span class="line"> padding: 10px;</span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span> {</span></span><br><span class="line"> font-size: 16px;</span><br><span class="line"> background-color: transparent;</span><br><span class="line"><span class="css"> <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#d3d3d3</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#6e6e6e</span>;</span></span><br><span class="line"> height: 32px;</span><br><span class="line"> width: 32px;</span><br><span class="line"> text-align: center;</span><br><span class="line"><span class="css"> <span class="selector-tag">box-shadow</span>: 0 0 1<span class="selector-tag">px</span> <span class="selector-tag">rgba</span>(0, 0, 0, 0<span class="selector-class">.3</span>);</span></span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span><span class="selector-pseudo">:hover</span>,</span></span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span><span class="selector-pseudo">:focus</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#0079c1</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#e4e4e4</span>;</span></span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.active</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#0079c1</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#e4e4e4</span>;</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>
<p>效果如图：<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_03_03.png" alt="AreaMeasurement2D示例"><br><strong>解释：</strong></p>
<ol>
<li><code>this.$refs.topbar.addEventListener</code>使用<br>不能采用如下这种方式，如果这样做，就相当于立即执行了该函数<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">this</span>.$refs.topbar.addEventListener(<span class="string">'click'</span>, <span class="built_in">this</span>.measure2D(AreaMeasurement2D))</span><br></pre></td></tr></table></figure>
需要采用这种方式：<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">this</span>.$refs.topbar.addEventListener(<span class="string">'click'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">this</span>.measure2D(AreaMeasurement2D)</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li>
</ol>
<p><strong>为什么不用<code>@click="measure2D"</code>?</strong><br>因为我们需要将<code>AreaMeasurement2D</code>传递到<code>measure2D</code>函数中，如果使用<code>@click="measure2D"</code>就无法传递。<br>2. <code>activeWidget.viewModel.newMeasurement()</code>说明<br>使用这行代码就会跳过<code>AreaMeasurement2D</code>初始的“新测量”按钮,如果不加这一行，会在右上角生成<strong>新测量</strong>按钮：如图<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_03_02.png" alt="AreaMeasurement2D默认行为"></p>
<h2 id="AreaMeasurement3D"><a href="#AreaMeasurement3D" class="headerlink" title="AreaMeasurement3D"></a>AreaMeasurement3D</h2><p>更多配置请查看官网：<a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-AreaMeasurement3D.html">AreaMeasurement3D</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">'esri/widgets/AreaMeasurement3D'</span>], <span class="function"><span class="keyword">function</span>(<span class="params">AreaMeasurement3D</span>) </span>{ <span class="comment">/* code goes here */</span> });</span><br></pre></td></tr></table></figure>
<p>计算并显示多边形的面积和周长。这个小部件可以在场景视图中用来测量多边形的面积和周长。<br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-measurement-3d">官方示例</a></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"map"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"topbar"</span> <span class="attr">ref</span>=<span class="string">"topbar"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"action-button esri-icon-measure-area"</span>></span><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <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><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="javascript"> name: <span class="string">'Home'</span>,</span></span><br><span class="line"> data () {</span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="javascript"> view: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> activeWidget: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> publicPath: process.env.BASE_URL <span class="comment">// 获取public的</span></span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> measure2D (AreaMeasurement3D) {</span><br><span class="line"><span class="javascript"> <span class="keyword">if</span> (<span class="built_in">this</span>.activeWidget === <span class="literal">null</span>) {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget = <span class="keyword">new</span> AreaMeasurement3D({</span></span><br><span class="line"><span class="javascript"> view: <span class="built_in">this</span>.view</span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget.viewModel.newMeasurement()</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(<span class="built_in">this</span>.activeWidget, <span class="string">'top-right'</span>)</span></span><br><span class="line"><span class="javascript"> } <span class="keyword">else</span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.remove(<span class="built_in">this</span>.activeWidget)</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget.destroy()</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget = <span class="literal">null</span></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="javascript"> <span class="keyword">const</span> options = {</span></span><br><span class="line"><span class="javascript"> url: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/init.js`</span>,</span></span><br><span class="line"><span class="javascript"> css: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/esri/themes/dark-blue/main.css`</span></span></span><br><span class="line"> }</span><br><span class="line"> esriLoader.loadModules([</span><br><span class="line"><span class="javascript"> <span class="string">'esri/WebScene'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/views/SceneView'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/widgets/AreaMeasurement3D'</span></span></span><br><span class="line"> ], options)</span><br><span class="line"><span class="javascript"> .then(<span class="function">(<span class="params">[WebScene, SceneView, AreaMeasurement3D]</span>) =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.map = <span class="keyword">new</span> WebScene({</span></span><br><span class="line"> portalItem: {</span><br><span class="line"><span class="javascript"> id: <span class="string">'b6c889ff1f684cd7a65301984b80b93d'</span></span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view = <span class="keyword">new</span> SceneView({</span></span><br><span class="line"><span class="javascript"> container: <span class="string">'map'</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="built_in">this</span>.map</span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="comment">// 添加按钮到右顶部</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(<span class="string">'topbar'</span>, <span class="string">'top-right'</span>)</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.$refs.topbar.addEventListener(<span class="string">'click'</span>, <span class="function">() =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.measure2D(AreaMeasurement3D)</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 class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span>></span></span><br><span class="line"><span class="css"><span class="selector-class">.page</span>{</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> flex: 1 1 auto;</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#map</span> {</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> height: 100%;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#topbar</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#fff</span>;</span></span><br><span class="line"> padding: 10px;</span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span> {</span></span><br><span class="line"> font-size: 16px;</span><br><span class="line"> background-color: transparent;</span><br><span class="line"><span class="css"> <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#d3d3d3</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#6e6e6e</span>;</span></span><br><span class="line"> height: 32px;</span><br><span class="line"> width: 32px;</span><br><span class="line"> text-align: center;</span><br><span class="line"><span class="css"> <span class="selector-tag">box-shadow</span>: 0 0 1<span class="selector-tag">px</span> <span class="selector-tag">rgba</span>(0, 0, 0, 0<span class="selector-class">.3</span>);</span></span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span><span class="selector-pseudo">:hover</span>,</span></span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span><span class="selector-pseudo">:focus</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#0079c1</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#e4e4e4</span>;</span></span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.active</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#0079c1</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#e4e4e4</span>;</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>
<p>效果如下：<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_03_04.png" alt="AreaMeasurement3D示例"></p>
<h2 id="DistanceMeasurement2D"><a href="#DistanceMeasurement2D" class="headerlink" title="DistanceMeasurement2D"></a>DistanceMeasurement2D</h2><p>更多配置请查看官网：<a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-DistanceMeasurement2D.html">DistanceMeasurement2D</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">'esri/widgets/DistanceMeasurement2D'</span>], <span class="function"><span class="keyword">function</span>(<span class="params">DistanceMeasurement2D</span>) </span>{ <span class="comment">/* code goes here */</span> });</span><br></pre></td></tr></table></figure>
<p>小部件计算并显示地图视图中两个或多个点之间的距离。这个小部件将计算地理坐标系和WebMercator的地理距离。<br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-measurement-2d">官方示例</a></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"map"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"topbar"</span> <span class="attr">ref</span>=<span class="string">"topbar"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"action-button esri-icon-measure-line"</span>></span><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <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><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="javascript"> name: <span class="string">'Home'</span>,</span></span><br><span class="line"> data () {</span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="javascript"> view: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> activeWidget: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> publicPath: process.env.BASE_URL <span class="comment">// 获取public的</span></span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> measure2D (DistanceMeasurement2D) {</span><br><span class="line"><span class="javascript"> <span class="keyword">if</span> (<span class="built_in">this</span>.activeWidget === <span class="literal">null</span>) {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget = <span class="keyword">new</span> DistanceMeasurement2D({</span></span><br><span class="line"><span class="javascript"> view: <span class="built_in">this</span>.view</span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget.viewModel.newMeasurement()</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(<span class="built_in">this</span>.activeWidget, <span class="string">'top-right'</span>)</span></span><br><span class="line"><span class="javascript"> } <span class="keyword">else</span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.remove(<span class="built_in">this</span>.activeWidget)</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget.destroy()</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget = <span class="literal">null</span></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="javascript"> <span class="keyword">const</span> options = {</span></span><br><span class="line"><span class="javascript"> url: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/init.js`</span>,</span></span><br><span class="line"><span class="javascript"> css: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/esri/themes/dark-blue/main.css`</span></span></span><br><span class="line"> }</span><br><span class="line"> esriLoader.loadModules([</span><br><span class="line"><span class="javascript"> <span class="string">'esri/WebMap'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/views/MapView'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/widgets/DistanceMeasurement2D'</span></span></span><br><span class="line"> ], options)</span><br><span class="line"><span class="javascript"> .then(<span class="function">(<span class="params">[WebMap, MapView, DistanceMeasurement2D]</span>) =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.map = <span class="keyword">new</span> WebMap({</span></span><br><span class="line"> portalItem: {</span><br><span class="line"><span class="javascript"> id: <span class="string">'990d0191f2574db495c4304a01c3e65b'</span></span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view = <span class="keyword">new</span> MapView({</span></span><br><span class="line"><span class="javascript"> container: <span class="string">'map'</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="built_in">this</span>.map</span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="comment">// 添加按钮到右顶部</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(<span class="string">'topbar'</span>, <span class="string">'top-right'</span>)</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.$refs.topbar.addEventListener(<span class="string">'click'</span>, <span class="function">() =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.measure2D(DistanceMeasurement2D)</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 class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span>></span></span><br><span class="line"><span class="css"><span class="selector-class">.page</span>{</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> flex: 1 1 auto;</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#map</span> {</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> height: 100%;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#topbar</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#fff</span>;</span></span><br><span class="line"> padding: 10px;</span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span> {</span></span><br><span class="line"> font-size: 16px;</span><br><span class="line"> background-color: transparent;</span><br><span class="line"><span class="css"> <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#d3d3d3</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#6e6e6e</span>;</span></span><br><span class="line"> height: 32px;</span><br><span class="line"> width: 32px;</span><br><span class="line"> text-align: center;</span><br><span class="line"><span class="css"> <span class="selector-tag">box-shadow</span>: 0 0 1<span class="selector-tag">px</span> <span class="selector-tag">rgba</span>(0, 0, 0, 0<span class="selector-class">.3</span>);</span></span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span><span class="selector-pseudo">:hover</span>,</span></span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span><span class="selector-pseudo">:focus</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#0079c1</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#e4e4e4</span>;</span></span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.active</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#0079c1</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#e4e4e4</span>;</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>
<p>效果如下：<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_03_05.png" alt="DistanceMeasurement2D示例"></p>
<h2 id="DirectLineMeasurement3D"><a href="#DirectLineMeasurement3D" class="headerlink" title="DirectLineMeasurement3D"></a>DirectLineMeasurement3D</h2><p>更多配置请查看官网：<a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-DirectLineMeasurement3D.html">DirectLineMeasurement3D</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">'esri/widgets/DirectLineMeasurement3D'</span>], <span class="function"><span class="keyword">function</span>(<span class="params">DirectLineMeasurement3D</span>) </span>{ <span class="comment">/* code goes here */</span> });</span><br></pre></td></tr></table></figure>
<p>部件计算并显示两点之间的三维距离。这个小部件可以在SceneView中用来测量两点之间的垂直、水平和直接距离。<br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-measurement-3d">官方示例</a></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"map"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"topbar"</span> <span class="attr">ref</span>=<span class="string">"topbar"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"action-button esri-icon-measure-line"</span>></span><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <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><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="javascript"> name: <span class="string">'Home'</span>,</span></span><br><span class="line"> data () {</span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="javascript"> view: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> activeWidget: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> publicPath: process.env.BASE_URL <span class="comment">// 获取public的</span></span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> measure2D (DirectLineMeasurement3D) {</span><br><span class="line"><span class="javascript"> <span class="keyword">if</span> (<span class="built_in">this</span>.activeWidget === <span class="literal">null</span>) {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget = <span class="keyword">new</span> DirectLineMeasurement3D({</span></span><br><span class="line"><span class="javascript"> view: <span class="built_in">this</span>.view</span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget.viewModel.newMeasurement()</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(<span class="built_in">this</span>.activeWidget, <span class="string">'top-right'</span>)</span></span><br><span class="line"><span class="javascript"> } <span class="keyword">else</span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.remove(<span class="built_in">this</span>.activeWidget)</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget.destroy()</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.activeWidget = <span class="literal">null</span></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="javascript"> <span class="keyword">const</span> options = {</span></span><br><span class="line"><span class="javascript"> url: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/init.js`</span>,</span></span><br><span class="line"><span class="javascript"> css: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/esri/themes/dark-blue/main.css`</span></span></span><br><span class="line"> }</span><br><span class="line"> esriLoader.loadModules([</span><br><span class="line"><span class="javascript"> <span class="string">'esri/WebScene'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/views/SceneView'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/widgets/DirectLineMeasurement3D'</span></span></span><br><span class="line"> ], options)</span><br><span class="line"><span class="javascript"> .then(<span class="function">(<span class="params">[WebScene, SceneView, DirectLineMeasurement3D]</span>) =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.map = <span class="keyword">new</span> WebScene({</span></span><br><span class="line"> portalItem: {</span><br><span class="line"><span class="javascript"> id: <span class="string">'b6c889ff1f684cd7a65301984b80b93d'</span></span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view = <span class="keyword">new</span> SceneView({</span></span><br><span class="line"><span class="javascript"> container: <span class="string">'map'</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="built_in">this</span>.map</span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="comment">// 添加按钮到右顶部</span></span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(<span class="string">'topbar'</span>, <span class="string">'top-right'</span>)</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.$refs.topbar.addEventListener(<span class="string">'click'</span>, <span class="function">() =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.measure2D(DirectLineMeasurement3D)</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 class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span>></span></span><br><span class="line"><span class="css"><span class="selector-class">.page</span>{</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> flex: 1 1 auto;</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#map</span> {</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> height: 100%;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#topbar</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#fff</span>;</span></span><br><span class="line"> padding: 10px;</span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span> {</span></span><br><span class="line"> font-size: 16px;</span><br><span class="line"> background-color: transparent;</span><br><span class="line"><span class="css"> <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#d3d3d3</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#6e6e6e</span>;</span></span><br><span class="line"> height: 32px;</span><br><span class="line"> width: 32px;</span><br><span class="line"> text-align: center;</span><br><span class="line"><span class="css"> <span class="selector-tag">box-shadow</span>: 0 0 1<span class="selector-tag">px</span> <span class="selector-tag">rgba</span>(0, 0, 0, 0<span class="selector-class">.3</span>);</span></span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span><span class="selector-pseudo">:hover</span>,</span></span><br><span class="line"><span class="css"> <span class="selector-class">.action-button</span><span class="selector-pseudo">:focus</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#0079c1</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#e4e4e4</span>;</span></span><br><span class="line"> }</span><br><span class="line"><span class="css"> <span class="selector-class">.active</span> {</span></span><br><span class="line"><span class="css"> <span class="selector-tag">background</span>: <span class="selector-id">#0079c1</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">color</span>: <span class="selector-id">#e4e4e4</span>;</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>
<p>效果如下：<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/acrgis_03_06.png" alt="DirectLineMeasurement3D示例"></p>
<h2 id="Measurement"><a href="#Measurement" class="headerlink" title="Measurement"></a>Measurement</h2><p>更多配置请查看官网：<a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Measurement.html">Measurement</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">'esri/widgets/Measurement'</span>], <span class="function"><span class="keyword">function</span>(<span class="params">Measurement</span>) </span>{ <span class="comment">/* code goes here */</span> });</span><br></pre></td></tr></table></figure>
<p>部件计算并显示两点之间的三维距离。这个小部件可以在SceneView中用来测量两点之间的垂直、水平和直接距离。<br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-measurement">官方示例</a></p>
<h2 id="BasemapGallery"><a href="#BasemapGallery" class="headerlink" title="BasemapGallery"></a>BasemapGallery</h2><p><code>BasemapGallery</code>小部件显示一个集合，该集合表示来自ArcGIS.com网站或用户定义的一组地图或图像服务。从BasemapGallery中选择新的基础地图时，地图的基础地图图层将被删除，并替换为在库中选择的关联基础地图的基础地图图层。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery.html">BasemapGallery</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">'esri/widgets/BasemapGallery'</span>], <span class="function"><span class="keyword">function</span>(<span class="params">BasemapGallery</span>) </span>{ <span class="comment">/* code goes here */</span> });</span><br></pre></td></tr></table></figure>
<p>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-basemapgallery/index.html">官方示例</a></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"map"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <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><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="javascript"> name: <span class="string">'Home'</span>,</span></span><br><span class="line"> data () {</span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="javascript"> view: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> publicPath: process.env.BASE_URL <span class="comment">// 获取public的</span></span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> renderMap () {</span><br><span class="line"><span class="javascript"> <span class="keyword">const</span> options = {</span></span><br><span class="line"><span class="javascript"> url: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/init.js`</span>,</span></span><br><span class="line"><span class="javascript"> css: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/esri/themes/dark-blue/main.css`</span></span></span><br><span class="line"> }</span><br><span class="line"> esriLoader.loadModules([</span><br><span class="line"><span class="javascript"> <span class="string">'esri/Map'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/views/MapView'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/widgets/BasemapGallery'</span></span></span><br><span class="line"> ], options)</span><br><span class="line"><span class="javascript"> .then(<span class="function">(<span class="params">[<span class="built_in">Map</span>, MapView, BasemapGallery]</span>) =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.map = <span class="keyword">new</span> <span class="built_in">Map</span>({</span></span><br><span class="line"><span class="javascript"> basemap: <span class="string">'hybrid'</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view = <span class="keyword">new</span> MapView({</span></span><br><span class="line"><span class="javascript"> map: <span class="built_in">this</span>.map,</span></span><br><span class="line"><span class="javascript"> container: <span class="string">'map'</span>,</span></span><br><span class="line"> zoom: 4,</span><br><span class="line"> center: [104.051196, 30.573084]</span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> basemapGallery = <span class="keyword">new</span> BasemapGallery({</span></span><br><span class="line"><span class="javascript"> view: <span class="built_in">this</span>.view</span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(basemapGallery, <span class="string">'top-right'</span>)</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="javascript"> <span class="built_in">this</span>.renderMap()</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span>></span></span><br><span class="line"><span class="css"><span class="selector-class">.page</span>{</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> flex: 1 1 auto;</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#map</span> {</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> height: 100%;</span><br><span class="line">}</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>
<p>效果如下：<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/acrgis_03_07.png" alt="BasemapGallery示例"></p>
<h2 id="BasemapToggle"><a href="#BasemapToggle" class="headerlink" title="BasemapToggle"></a>BasemapToggle</h2><p>BasemapToggle提供了一个小部件，允许最终用户在两个Basemap之间切换。切换的底图设置在视图的map对象内。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapToggle.html">BasemapToggle</a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="built_in">require</span>([<span class="string">'esri/widgets/BasemapToggle'</span>], <span class="function"><span class="keyword">function</span>(<span class="params">BasemapToggle</span>) </span>{ <span class="comment">/* code goes here */</span> });</span><br></pre></td></tr></table></figure>
<p>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=basemap-custom">官方示例</a></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"map"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <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><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="javascript"> name: <span class="string">'Home'</span>,</span></span><br><span class="line"> data () {</span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="javascript"> view: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript"> publicPath: process.env.BASE_URL <span class="comment">// 获取public的</span></span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> renderMap () {</span><br><span class="line"><span class="javascript"> <span class="keyword">const</span> options = {</span></span><br><span class="line"><span class="javascript"> url: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/init.js`</span>,</span></span><br><span class="line"><span class="javascript"> css: <span class="string">`<span class="subst">${<span class="built_in">this</span>.publicPath}</span>4.17/esri/themes/dark-blue/main.css`</span></span></span><br><span class="line"> }</span><br><span class="line"> esriLoader.loadModules([</span><br><span class="line"><span class="javascript"> <span class="string">'esri/Map'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/views/MapView'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/widgets/BasemapToggle'</span></span></span><br><span class="line"> ], options)</span><br><span class="line"><span class="javascript"> .then(<span class="function">(<span class="params">[<span class="built_in">Map</span>, MapView, BasemapToggle]</span>) =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.map = <span class="keyword">new</span> <span class="built_in">Map</span>({</span></span><br><span class="line"><span class="javascript"> basemap: <span class="string">'hybrid'</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view = <span class="keyword">new</span> MapView({</span></span><br><span class="line"><span class="javascript"> map: <span class="built_in">this</span>.map,</span></span><br><span class="line"><span class="javascript"> container: <span class="string">'map'</span>,</span></span><br><span class="line"> zoom: 4,</span><br><span class="line"> center: [104.051196, 30.573084]</span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> basemapToggle = <span class="keyword">new</span> BasemapToggle({</span></span><br><span class="line"><span class="javascript"> view: <span class="built_in">this</span>.view,</span></span><br><span class="line"><span class="javascript"> nextBasemap: <span class="string">'topo-vector'</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view.ui.add(basemapToggle, <span class="string">'bottom-right'</span>)</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="javascript"> <span class="built_in">this</span>.renderMap()</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"scss"</span>></span></span><br><span class="line"><span class="css"><span class="selector-class">.page</span>{</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> flex: 1 1 auto;</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line"><span class="css"><span class="selector-id">#map</span> {</span></span><br><span class="line"> width: 100%;</span><br><span class="line"> height: 100%;</span><br><span class="line">}</span><br><span class="line"><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>
<p>效果如下：<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_03_08.png" alt="BasemapToggle示例"></p>
<h2 id="Bookmarks"><a href="#Bookmarks" class="headerlink" title="Bookmarks"></a>Bookmarks</h2><p>Bookmarks小部件允许最终用户快速导航到感兴趣的特定区域。它显示书签列表，这些书签通常在WebMap中定义。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Bookmarks.html">Bookmarks</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-bookmarks">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webstylesymbol-2d">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=labels-multiple-classes">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=featurelayerview-query-distance">官方示例</a></p>
<h2 id="BuildingExplorer"><a href="#BuildingExplorer" class="headerlink" title="BuildingExplorer"></a>BuildingExplorer</h2><p>BuildingExplorer小部件用于过滤和浏览BuildingSceneLayers的各个组件。建筑场景是建筑物和内部的复杂数字模型，可以包含数千个分组在子层中的组件。使用此小部件，可以按级别、施工阶段或按规程和类别筛选建筑物。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BuildingExplorer.html">BuildingExplorer</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=building-scene-layer-filter">官方示例</a></p>
<h2 id="Compass"><a href="#Compass" class="headerlink" title="Compass"></a>Compass</h2><p>Compass小部件指示相对于当前视图旋转或相机航向的北向位置。单击“指南针”小部件将视图旋转为朝北（航向=0）。默认情况下，此小部件将添加到SceneView。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Compass.html">Compass</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-compass-2d">官方示例</a></p>
<h2 id="CoordinateConversion"><a href="#CoordinateConversion" class="headerlink" title="CoordinateConversion"></a>CoordinateConversion</h2><p>CoordinateConversion小部件提供了一种将用户光标位置显示为地图坐标或几种常用坐标符号之一的方法。此外，小部件还提供了一种将用户输入坐标转换为点的方法。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-CoordinateConversion.html">CoordinateConversion</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-coordinateconversion">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-coordinateconversion-custom">官方示例</a></p>
<h2 id="Daylight"><a href="#Daylight" class="headerlink" title="Daylight"></a>Daylight</h2><p>Daylight小部件可用于操纵时间和日期，并在SceneView中切换阴影。更改时间和日期时，太阳和星星的位置会相应地更新，从而更改场景中的照明和阴影。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Daylight.html">Daylight</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-daylight">官方示例</a></p>
<h2 id="Directions"><a href="#Directions" class="headerlink" title="Directions"></a>Directions</h2><p>Directions小部件提供了一种使用ArcGIS Online和自定义网络分析路线服务构建驾驶和步行方向的方法。与RouteTask的工作方式类似，这个小部件生成一条路由，使用指定的网络在多个点之间寻找成本最低的路径。搜索地址时，用于导航的点的位置取决于搜索属性的locationType。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Directions.html">Directions</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-directions">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=layers-imagery-vfrenderer">官方示例</a></p>
<h2 id="Editor"><a href="#Editor" class="headerlink" title="Editor"></a>Editor</h2><p>Editor小部件提供开箱即用的编辑体验，以帮助简化web应用程序中的编辑体验。小部件有两个不同的工作流：CreateWorkflow和UpdateWorkflow。这些工作流允许您在可编辑要素图层中添加要素或编辑和/或删除现有要素。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html">Editor</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-editor-basic/index.html">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=popup-editaction">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-editor-3d-scenelayer">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-editor-configurable">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-editor-3d">官方示例</a></p>
<h2 id="Expand"><a href="#Expand" class="headerlink" title="Expand"></a>Expand</h2><p>Expand小部件充当打开小部件的可单击按钮。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html">Expand</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-expand">官方示例</a></p>
<h2 id="FeatureForm"><a href="#FeatureForm" class="headerlink" title="FeatureForm"></a>FeatureForm</h2><p>FeatureForm小部件显示功能的属性。此小部件根据功能的属性以及字段是否允许编辑来呈现输入字段。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureForm.html">FeatureForm</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=editing-featureform-fieldvisibility">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=editing-applyedits">官方示例</a><br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=editing-groupedfeatureform">官方示例</a></p>
<h2 id="Fullscreen"><a href="#Fullscreen" class="headerlink" title="Fullscreen"></a>Fullscreen</h2><p>Fullscreen提供一个简单的小部件来显示视图或使用整个屏幕的用户定义的HTMLElement。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Fullscreen.html">Fullscreen</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=visualization-vv-opacity-animate">官方示例</a></p>
<h2 id="Home"><a href="#Home" class="headerlink" title="Home"></a>Home</h2><p>Home提供一个简单的小部件，用于将视图切换到其初始视点或先前定义的视点。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Home.html">Home</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-home">官方示例</a></p>
<h2 id="LayerList"><a href="#LayerList" class="headerlink" title="LayerList"></a>LayerList</h2><p>LayerList小部件提供了一种显示层列表并打开/关闭其可见性的方法。ListItemAPI提供对每个层的属性的访问，允许开发人员配置与层相关的操作，并允许开发人员向与层相关的项添加内容。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html">LayerList</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-layerlist">官方示例</a></p>
<h2 id="Legend"><a href="#Legend" class="headerlink" title="Legend"></a>Legend</h2><p>Legend小部件显示地图中图层的标签和符号。标签及其相应的符号取决于在层的渲染器中设置的值。图例将仅显示视图中可见的图层和子图层。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html">Legend</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-legend">官方示例</a></p>
<h2 id="LineOfSight"><a href="#LineOfSight" class="headerlink" title="LineOfSight"></a>LineOfSight</h2><p>LineOfSight小部件是一个三维分析工具，允许您在SceneView中执行可见性分析。给定观察者和多个目标点之间的可见性是根据视图中当前显示的内容（包括地面、集成网格和三维对象（如建筑物或树木））计算的。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LineOfSight.html">LineOfSight</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-line-of-sight">官方示例</a></p>
<h2 id="Locate"><a href="#Locate" class="headerlink" title="Locate"></a>Locate</h2><p>Locate提供一个简单的小部件，将视图动画化到用户的当前位置。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html">Locate</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-locate/index.html">官方示例</a></p>
<h2 id="NavigationToggle"><a href="#NavigationToggle" class="headerlink" title="NavigationToggle"></a>NavigationToggle</h2><p>NavigationToggle提供两个简单的按钮来切换SceneView的导航模式。请注意，此小部件仅用于SceneView中的3D鼠标交互。它对触摸导航没有影响，并且不应与地图视图中的二维鼠标交互一起使用。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-NavigationToggle.html">NavigationToggle</a><br>示例：</p>
<h2 id="Popup"><a href="#Popup" class="headerlink" title="Popup"></a>Popup</h2><p>Popup小部件允许用户查看功能属性中的内容。弹出窗口通过为用户提供一种简单的方式来交互和查看层中的属性，从而增强了web应用程序。它们在向用户传递信息方面起着重要的作用，从而提高了应用程序的讲故事能力。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html">Popup</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=popup-actions">官方示例</a></p>
<h2 id="Print"><a href="#Print" class="headerlink" title="Print"></a>Print</h2><p>Print小部件将应用程序与打印服务连接起来，以允许打印地图。它利用了服务器端、高质量、完整的地图打印功能，使用ArcGIS的ExportWebMap服务，可以配置自定义布局模板。其中一个只显示地图，而另一个提供带有图例等的布局。Print小部件与PrintTask一起工作，PrintTask生成地图的打印机就绪版本。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Print.html">Print</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-print">官方示例</a></p>
<h2 id="ScaleBar"><a href="#ScaleBar" class="headerlink" title="ScaleBar"></a>ScaleBar</h2><p>ScaleBar小部件在地图上或指定的HTML节点中显示比例尺。小部件遵循各种坐标系，并以公制或非公制值显示单位。公制值根据比例显示公里或米，同样，非公制值根据比例显示英里和英尺。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ScaleBar.html">ScaleBar</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-scalebar">官方示例</a></p>
<h2 id="ScaleRangeSlider"><a href="#ScaleRangeSlider" class="headerlink" title="ScaleRangeSlider"></a>ScaleRangeSlider</h2><p>ScaleRangeSlider小部件允许用户根据指定的缩放范围设置最小和最大缩放。当一个层被提供给小部件时，minScale和maxScale被设置为该层的缩放范围。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ScaleRangeSlider.html">ScaleRangeSlider</a><br>示例：</p>
<h2 id="Search"><a href="#Search" class="headerlink" title="Search"></a>Search</h2><p>Search小部件提供了一种对定位器服务、地图/要素服务要素层和/或表执行搜索操作的方法。如果将定位器与地理编码服务一起使用，则使用findaddress操作，而查询则在要素图层上使用。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html">Search</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-search-3d">官方示例</a></p>
<h2 id="Sketch"><a href="#Sketch" class="headerlink" title="Sketch"></a>Sketch</h2><p>Sketch小部件提供了一个简单的UI，用于在MapView或SceneView上创建和更新图形。这大大减少了在视图中处理图形所需的代码。它用于存储在其图层属性中的图形。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html">Sketch</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=sketch-geometries">官方示例</a></p>
<h2 id="Slice"><a href="#Slice" class="headerlink" title="Slice"></a>Slice</h2><p>Slice切片小部件是一个三维分析工具，可以用来显示SceneView中被遮挡的内容。“切片”小部件可以应用于任何层类型，从而可以查看建筑物内部或探索地质表面。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slice.html">Slice</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=building-scene-layer-slice">官方示例</a></p>
<h2 id="Slider"><a href="#Slider" class="headerlink" title="Slider"></a>Slider</h2><p>Slider一个滑块小部件，可用于过滤数据或从用户处收集数字输入。滑块可以有多个拇指，并提供格式化标签和控制用户输入的功能。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html">Slider</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=visualization-update-data">官方示例</a></p>
<h2 id="Swipe"><a href="#Swipe" class="headerlink" title="Swipe"></a>Swipe</h2><p>Swipe滑动小部件提供了一个工具来显示地图顶部一个或多个图层的一部分。图层可以垂直或水平滑动，以方便比较两个图层或查看图层下面的内容。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Swipe.html">Swipe</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-swipe">官方示例</a></p>
<h2 id="TableList"><a href="#TableList" class="headerlink" title="TableList"></a>TableList</h2><p>TableList小部件提供了一种显示与地图关联的表列表的方法。它用于要素图层表。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TableList.html">TableList</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-tablelist">官方示例</a></p>
<h2 id="TimeSlider"><a href="#TimeSlider" class="headerlink" title="TimeSlider"></a>TimeSlider</h2><p>TimeSlider小部件简化了应用程序中时态数据的可视化。在将时间滑块添加到应用程序之前，首先应该了解如何配置它以正确显示时态数据。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html">TimeSlider</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-timeslider">官方示例</a></p>
<h2 id="Track"><a href="#Track" class="headerlink" title="Track"></a>Track</h2><p>Track提供一个简单的按钮，用于在单击时将视图设置为用户位置的动画。视图根据被跟踪设备朝向的方向旋转。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Track.html">Track</a><br>示例：<br><a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-track">官方示例</a></p>
<h2 id="Zoom"><a href="#Zoom" class="headerlink" title="Zoom"></a>Zoom</h2><p>Zoom缩放小部件允许用户在视图中放大/缩小。<br><a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html">Zoom</a><br>示例：</p>
]]></content>
<categories>
<category>web前端</category>
<category>vue</category>
<category>WebGis</category>
</categories>
<tags>
<tag>arcgis4.17</tag>
<tag>vue</tag>
<tag>esri/wigets</tag>
</tags>
</entry>
<entry>
<title>Arcgis学习之路(五)之实现图层控制</title>
<url>/posts/60272b20-49b5-11eb-b4bb-b1a7a3af1020/</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="Arcgis实现图层控制"><a href="#Arcgis实现图层控制" class="headerlink" title="Arcgis实现图层控制"></a>Arcgis实现图层控制</h1><p>参考：<a href="https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-layerlist-actions">https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-layerlist-actions</a></p>
]]></content>
<categories>
<category>web前端</category>
<category>WebGis</category>
</categories>
<tags>
<tag>arcgis4.17</tag>
<tag>图层控制</tag>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title>Arcgis学习之路(四)之layers的使用</title>
<url>/posts/77f3cf20-49b4-11eb-b8af-e92f48f5dd23/</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="esri-layer"><a href="#esri-layer" class="headerlink" title="esri/layer"></a>esri/layer</h1><h2 id="1、esri-layer的说明"><a href="#1、esri-layer的说明" class="headerlink" title="1、esri/layer的说明"></a>1、esri/layer的说明</h2><h2 id="1、esri-layer的使用"><a href="#1、esri-layer的使用" class="headerlink" title="1、esri/layer的使用"></a>1、esri/layer的使用</h2>]]></content>
<categories>
<category>web前端</category>
<category>WebGis</category>
</categories>
<tags>
<tag>arcgis4.17</tag>
<tag>vue</tag>
<tag>esri/layers</tag>
</tags>
</entry>
<entry>
<title>Arcgis学习之路(二)之离线部署</title>
<url>/posts/748483e0-49b2-11eb-8e4b-29382c4d20e2/</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="arcgis的几种使用情况"><a href="#arcgis的几种使用情况" class="headerlink" title="arcgis的几种使用情况"></a>arcgis的几种使用情况</h1><h2 id="1、api文件下载-本人使用4-17"><a href="#1、api文件下载-本人使用4-17" class="headerlink" title="1、api文件下载(本人使用4.17)"></a>1、api文件下载(本人使用4.17)</h2><p>1.首先先到百度搜索 arcgis api for js，进入<a href="https://developers.arcgis.com/javascript/">官网</a>。<br>2.找到<a href="https://developers.arcgis.com/javascript/latest/guide/get-api/"><code>Get the API</code></a>按钮。<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_download_api.png" alt="arcgis_download_api"><br>3.找到如图所示，点击<a href="https://developers.arcgis.com/downloads/apis-and-sdks?product=javascript">Download API</a><br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_download.png" alt="arcgis_download"><br>4.选择对应版本的<code>API</code>和<code>Documentation</code>(官网默认展示的是最新版本的，所以其他的版本的建议还是将文档也下载下来)<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_download_list.png" alt="arcgis_download_list"></p>
<h2 id="2、部署"><a href="#2、部署" class="headerlink" title="2、部署"></a>2、部署</h2><h3 id="2-1-离线部署-本地部署-不用tomcat或者IIS服务器"><a href="#2-1-离线部署-本地部署-不用tomcat或者IIS服务器" class="headerlink" title="2.1 离线部署|本地部署(不用tomcat或者IIS服务器)"></a>2.1 离线部署|本地部署(不用tomcat或者IIS服务器)</h3><p>1.首先将你下载的API压缩包解压，然后进去找到以你的api版本号命名的文件夹，我的版本是4.17，所以我打开4.17这个文件夹，文件夹里面的内容如下：<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_%E7%A6%BB%E7%BA%BF%E9%83%A8%E7%BD%B2_01.png" alt="arcgis_离线部署_01"><br>2.将4.17这个文件夹拷贝出来（也可以不拷贝出来，就在原位置操作），随便放在一个位置，然后把文件夹名字改成你想要的名字（不改也可以），这里我将文件夹名字不做修改。<br>3.打开<code>4.17</code>文件夹，找到并打开<code>init.js</code>文件和<code>dojo文件夹下的dojo.js</code>文件，crtl+f搜索找到<code>[HOSTNAME_AND_PATH_TO_JSAPI]</code>这串文字，然后将包含这串文字的引号里面里的内容用<code>"你修改的文件夹名字/dojo"</code>替换,这里我用<code>"4.17/dojo"</code>替换，好啦，大功告成了，让我们来测试一下吧！<br>4.使用<br><strong>在html文件中使用</strong>：前提是你的<code>.html</code>文件必须和<code>4.17</code>文件在同一位置。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"4.17/esri/themes/dark-blue/main.css"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"4.17/init.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<p>如果不在请采用相对路径，如：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment"><!--</span></span><br><span class="line"><span class="comment"> 文件路径</span></span><br><span class="line"><span class="comment"> /html/index.html</span></span><br><span class="line"><span class="comment"> /4.17</span></span><br><span class="line"><span class="comment">--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"../4.17/esri/themes/dark-blue/main.css"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span></span></span><br></pre></td></tr></table></figure>
<p><strong>在vue项目使用</strong>：前提是你的<code>4.17</code>文件夹放进<code>/public</code>的根目录下即：<code>/public/4.17</code>，然后安装<a href=""><code>esri-loader</code></a></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> options = {</span><br><span class="line"> url: <span class="string">'4.17/init.js'</span>,</span><br><span class="line"> css: <span class="string">'../../4.17/esri/themes/dark-blue/main.css'</span></span><br><span class="line">}</span><br><span class="line">esriLoader.loadModules([</span><br><span class="line"> <span class="string">'esri/Map'</span>,</span><br><span class="line"> <span class="string">'esri/views/MapView'</span></span><br><span class="line"> ], options)</span><br><span class="line"> .then(<span class="function">(<span class="params">[ArcGISMap, MapView]</span>) =></span> {</span><br><span class="line"> <span class="keyword">var</span> map = <span class="keyword">new</span> ArcGISMap({</span><br><span class="line"> basemap: <span class="string">'streets-relief-vector'</span></span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">var</span> view = <span class="keyword">new</span> MapView({</span><br><span class="line"> container: <span class="string">'map'</span>,</span><br><span class="line"> map: <span class="built_in">this</span>.map,</span><br><span class="line"> center: [<span class="number">-101.17</span>, <span class="number">21.78</span>],</span><br><span class="line"> zoom: <span class="number">4</span></span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// 当视图加载完毕后</span></span><br><span class="line"> view.when(<span class="function">() =></span> {</span><br><span class="line"> })</span><br><span class="line"> })</span><br></pre></td></tr></table></figure>
<h3 id="2-2-离线部署-本地部署-用tomcat服务器"><a href="#2-2-离线部署-本地部署-用tomcat服务器" class="headerlink" title="2.2 离线部署|本地部署(用tomcat服务器)"></a>2.2 离线部署|本地部署(用tomcat服务器)</h3><p>1.首先将下载好的api文件<code>4.17</code>放入Tomcat服务中的<code>Webapp</code>下，然后自己<code>百度tomcat配置项目使用端口</code>，然后启动你的Tomcat服务器<br>2.打开<code>4.17</code>文件夹，找到并打开<code>init.js</code>文件和<code>dojo文件夹下的dojo.js</code>文件，crtl+f搜索找到<code>[HOSTNAME_AND_PATH_TO_JSAPI]</code>这串文字，然后将包含这串文字的引号里面里的内容用<code>"http://localhost:你配置的端口/4.17/dojo"</code>替换,这里我用<code>"http://localhost:你配置的端口/4.17/dojo"</code>替换，好啦，大功告成了，让我们来测试一下吧！<br>3.使用<br><strong>在html文件中使用</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"http://localhost:你配置的端口/4.17/esri/themes/dark-blue/main.css"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://localhost:你配置的端口/4.17/init.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>在vue项目使用</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> options = {</span><br><span class="line"> url: <span class="string">'http://localhost:你配置的端口/4.17/init.js'</span>,</span><br><span class="line"> css: <span class="string">'http://localhost:你配置的端口/4.17/esri/themes/dark-blue/main.css'</span></span><br><span class="line">}</span><br><span class="line">esriLoader.loadModules([</span><br><span class="line"> <span class="string">'esri/Map'</span>,</span><br><span class="line"> <span class="string">'esri/views/MapView'</span></span><br><span class="line"> ], options)</span><br><span class="line"> .then(<span class="function">(<span class="params">[ArcGISMap, MapView]</span>) =></span> {</span><br><span class="line"> <span class="keyword">var</span> map = <span class="keyword">new</span> ArcGISMap({</span><br><span class="line"> basemap: <span class="string">'streets-relief-vector'</span></span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">var</span> view = <span class="keyword">new</span> MapView({</span><br><span class="line"> container: <span class="string">'map'</span>,</span><br><span class="line"> map: <span class="built_in">this</span>.map,</span><br><span class="line"> center: [<span class="number">-101.17</span>, <span class="number">21.78</span>],</span><br><span class="line"> zoom: <span class="number">4</span></span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// 当视图加载完毕后</span></span><br><span class="line"> view.when(<span class="function">() =></span> {</span><br><span class="line"> })</span><br><span class="line"> })</span><br></pre></td></tr></table></figure>
<p>当然<code>以我的失败经验得出</code>肯定会出错，比如左上角的控件符号没有显示,控制台会打印出以下错误：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">Access to Font at 'http://localhost:8080/4.17/esri/themes/base/icons/fonts/CalciteWebCoreIcons.woff?cu4poq' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.</span><br></pre></td></tr></table></figure>
<p>这是显示你已经跨域请求资源导致资源请求失败 但是解决办法是有的 修改Tomcat的web.xml配置文件 打开config/web.xml文件，添加下面的代码</p>
<figure class="highlight xml"><table><tr><td class="code"><pre><span class="line">（如web.xml中有多个filter时要把下面配置放在最前端）</span><br><span class="line"><span class="tag"><<span class="name">filter</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">filter-name</span>></span>CorsFilter<span class="tag"></<span class="name">filter-name</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">filter-class</span>></span>org.apache.catalina.filters.CorsFilter<span class="tag"></<span class="name">filter-class</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">init-param</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">param-name</span>></span>cors.allowed.methods<span class="tag"></<span class="name">param-name</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">param-value</span>></span>GET,POST,HEAD,OPTIONS,PUT<span class="tag"></<span class="name">param-value</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">init-param</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">init-param</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">param-name</span>></span>cors.allowed.headers<span class="tag"></<span class="name">param-name</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">param-value</span>></span>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers<span class="tag"></<span class="name">param-value</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">init-param</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">async-supported</span>></span>true<span class="tag"></<span class="name">async-supported</span>></span></span><br><span class="line"><span class="tag"></<span class="name">filter</span>></span></span><br><span class="line"><span class="tag"><<span class="name">filter-mapping</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">filter-name</span>></span>CorsFilter<span class="tag"></<span class="name">filter-name</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">url-pattern</span>></span>/*<span class="tag"></<span class="name">url-pattern</span>></span></span><br><span class="line"><span class="tag"></<span class="name">filter-mapping</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="2-2-不部署-在线Acrgis"><a href="#2-2-不部署-在线Acrgis" class="headerlink" title="2.2 不部署|在线Acrgis"></a>2.2 不部署|在线Acrgis</h3><p>这种情况因为使用的是<code>arcgis</code>官网的API，并且是在国外，所以在访问过程中会特别慢，<strong>不建议使用</strong>。<br><strong>在html文件中使用</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://js.arcgis.com/4.17/esri/themes/light/main.css"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://js.arcgis.com/4.17/"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<p><strong>在vue项目使用</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> options = {</span><br><span class="line"> url: <span class="string">'https://js.arcgis.com/4.17/init.js'</span>,</span><br><span class="line"> css: <span class="string">'https://js.arcgis.com/4.17/esri/themes/dark-blue/main.css'</span></span><br><span class="line">}</span><br><span class="line">esriLoader.loadModules([</span><br><span class="line"> <span class="string">'esri/Map'</span>,</span><br><span class="line"> <span class="string">'esri/views/MapView'</span></span><br><span class="line"> ], options)</span><br><span class="line"> .then(<span class="function">(<span class="params">[ArcGISMap, MapView]</span>) =></span> {</span><br><span class="line"> <span class="keyword">var</span> map = <span class="keyword">new</span> ArcGISMap({</span><br><span class="line"> basemap: <span class="string">'streets-relief-vector'</span></span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">var</span> view = <span class="keyword">new</span> MapView({</span><br><span class="line"> container: <span class="string">'map'</span>,</span><br><span class="line"> map: <span class="built_in">this</span>.map,</span><br><span class="line"> center: [<span class="number">-101.17</span>, <span class="number">21.78</span>],</span><br><span class="line"> zoom: <span class="number">4</span></span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// 当视图加载完毕后</span></span><br><span class="line"> view.when(<span class="function">() =></span> {</span><br><span class="line"> })</span><br><span class="line"> })</span><br></pre></td></tr></table></figure>
<p>出现地图代表访问成功。<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/arcgis_02_02.png" alt="arcgis示例地图"></p>
]]></content>
<categories>
<category>web前端</category>
<category>WebGis</category>
</categories>
<tags>
<tag>arcgis4.17</tag>
<tag>部署</tag>
</tags>
</entry>
<entry>
<title>Arcgis学习之路(一)之基本使用</title>
<url>/posts/d8bac550-49b1-11eb-a418-fd298bd981a4/</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="arcgis的基本使用"><a href="#arcgis的基本使用" class="headerlink" title="arcgis的基本使用"></a>arcgis的基本使用</h1><p>参考：<a href="https://developers.arcgis.com/javascript/latest/guide/quick-start/">https://developers.arcgis.com/javascript/latest/guide/quick-start/</a></p>
<h2 id="1、在html中使用"><a href="#1、在html中使用" class="headerlink" title="1、在html中使用"></a>1、在html中使用</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://js.arcgis.com/4.17/esri/themes/light/main.css"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://js.arcgis.com/4.17/"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span></span><br><span class="line"><span class="css"> <span class="selector-tag">html</span>,<span class="selector-tag">body</span>,<span class="selector-id">#map</span>{</span></span><br><span class="line"> height: 100%;</span><br><span class="line"> width: 100%;</span><br><span class="line"> box-sizing: border-box;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> padding: 0;</span><br><span class="line"> margin: 0;</span><br><span class="line"> }</span><br><span class="line"> <span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"map"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"> <span class="built_in">require</span>([</span></span><br><span class="line"><span class="javascript"> <span class="string">"esri/Map"</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">"esri/views/MapView"</span></span></span><br><span class="line"><span class="javascript"> ], <span class="function"><span class="keyword">function</span>(<span class="params">Map, MapView</span>) </span>{</span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>({</span></span><br><span class="line"><span class="javascript"> basemap: <span class="string">"topo-vector"</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> view = <span class="keyword">new</span> MapView({</span></span><br><span class="line"><span class="javascript"> container: <span class="string">"map"</span>,</span></span><br><span class="line"> map: map,</span><br><span class="line"> center: [-118.71511,34.09042],</span><br><span class="line"> zoom: 11</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="2、在vue项目中使用"><a href="#2、在vue项目中使用" class="headerlink" title="2、在vue项目中使用"></a>2、在vue项目中使用</h2><p>安装<code>arcgis</code>官方依赖<code>esri-loader</code>,这个只是开发依赖,因此使用命令<code>npm i esri-loader --save-dev</code>来安装.<br>用模块的方式引入 esri-loader:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span><br></pre></td></tr></table></figure>
<p><strong>esriLoader</strong>有以下几个方法:</p>
<ol>
<li>getScript () 从库里面获取 js 文件 ;</li>
<li>isLoaded () 检测模块是否加载完成 ;</li>
<li>loadModules( [ ], options) 用于加载arcgis 模块;</li>
<li>loadCss( url ) 用于加载css文件;</li>
<li>loadScript({url: “xxxxxxxx” }) 将js 加载到页面上;<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"map"</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><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> esriLoader <span class="keyword">from</span> <span class="string">'esri-loader'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"> mounted () {</span><br><span class="line"><span class="javascript"> <span class="keyword">const</span> options = {</span></span><br><span class="line"><span class="javascript"> url: <span class="string">'https://js.arcgis.com/4.17/init.js'</span>,</span></span><br><span class="line"><span class="javascript"> css: <span class="string">'https://js.arcgis.com/4.17/esri/themes/light/main.css'</span></span></span><br><span class="line"> }</span><br><span class="line"> esriLoader.loadModules([</span><br><span class="line"><span class="javascript"> <span class="string">'esri/Map'</span>,</span></span><br><span class="line"><span class="javascript"> <span class="string">'esri/views/MapView'</span></span></span><br><span class="line"> ], options)</span><br><span class="line"><span class="javascript"> .then(<span class="function">(<span class="params">[ArcGISMap, MapView]</span>) =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.map1 = <span class="keyword">new</span> ArcGISMap({</span></span><br><span class="line"><span class="javascript"> basemap: <span class="string">'streets-relief-vector'</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.view1 = <span class="keyword">new</span> MapView({</span></span><br><span class="line"><span class="javascript"> container: <span class="string">'map1'</span>,</span></span><br><span class="line"><span class="javascript"> map: <span class="built_in">this</span>.map1,</span></span><br><span class="line"> center: [-118.71511,34.09042],</span><br><span class="line"> zoom: 4</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 class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
具体部署：<a href="http://www.chenliang0829.cn:8081/topic/5fe590563f9619194ccb8fa7">arcgis for js本地部署/不部署/在线arcgis的几种情况使用</a></li>
</ol>
]]></content>
<categories>
<category>web前端</category>
<category>WebGis</category>
</categories>
<tags>
<tag>arcgis4.17</tag>
</tags>
</entry>
<entry>
<title>vue3学习之路(二)之基础学习</title>
<url>/posts/b9316c70-1a72-11eb-90d7-41c31ce6a681/</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><h2 id="应用和组件实例"><a href="#应用和组件实例" class="headerlink" title="应用和组件实例"></a>应用和组件实例</h2><h3 id="创建一个应用实例"><a href="#创建一个应用实例" class="headerlink" title="创建一个应用实例"></a>创建一个应用实例</h3><p>每个 Vue 应用都是通过用 <code>createApp</code> 函数创建一个新的<strong>应用实例</strong>开始的：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.createApp({ <span class="comment">/* 选项 */</span> })</span><br></pre></td></tr></table></figure>
<p>应用实例暴露的大多数方法都会返回该同一实例，允许链式：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Vue.createApp({})</span><br><span class="line"> .component(<span class="string">'SearchInput'</span>, SearchInputComponent)</span><br><span class="line"> .directive(<span class="string">'focus'</span>, FocusDirective)</span><br><span class="line"> .use(LocalePlugin)</span><br></pre></td></tr></table></figure>
<p>传递给 <code>createApp</code> 的<strong>选项</strong>用于配置<strong>根组件</strong>。当我们挂载应用时，该组件被用作渲染的起点。<br><strong>注意：</strong>一个应用需要被挂载到一个 DOM 元素中。<br>例如：如果我们想把一个 Vue 应用挂载到<code><div id="app"></div></code>，我们应该传递<code>#app</code>：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> RootComponent = { <span class="comment">/* 选项 */</span> }</span><br><span class="line"><span class="keyword">const</span> app = Vue.createApp(RootComponent)</span><br><span class="line"><span class="keyword">const</span> vm = app.mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure>
<h3 id="组件实例-property"><a href="#组件实例-property" class="headerlink" title="组件实例 property"></a>组件实例 property</h3><p>在<code>data</code>中定义的<code>property</code>是通过组件实例暴露的：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.createApp({</span><br><span class="line"> data () {</span><br><span class="line"> count: <span class="number">1</span></span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"><span class="keyword">const</span> vm = app.mount(<span class="string">'#app'</span>)</span><br><span class="line"><span class="built_in">console</span>.log(vm.count) <span class="comment">// => 1</span></span><br></pre></td></tr></table></figure>
<p>可以将用户定义的<code>property</code>添加到组件实例中，例如<code>methods</code>，<code>props</code>，<code>computed</code>，<code>inject</code>和<code>setup</code>。<br>Vue还通过组件实例暴露了一些<code>内置property</code>，如<code>$attrs</code>和<code>$emit</code>。这些<code>property</code>都有一个<code>$</code>前缀，以避免与<code>用户定义的property</code>名冲突。</p>
<h3 id="生命周期钩子"><a href="#生命周期钩子" class="headerlink" title="生命周期钩子"></a>生命周期钩子</h3><ul>
<li>beforeCreate</li>
<li>created</li>
<li>beforeMount</li>
<li>mounted</li>
<li>beforeUpdate</li>
<li>updated</li>
<li>beforeUnmount</li>
<li>unmounted<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/vue3%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90.png" alt="vue3.0生命周期钩子"></li>
</ul>
<h2 id="常用指令"><a href="#常用指令" class="headerlink" title="常用指令"></a>常用指令</h2><p>指令 (Directives) 是带有<code>v-</code>前缀的特殊 attribute。</p>
<h3 id="v-once"><a href="#v-once" class="headerlink" title="v-once"></a>v-once</h3><p>不需要表达式，只渲染元素和组件一次。即：只要给元素或者组件添加了<code>v-once</code>指令，那么元素或者组件只会渲染一次，无论<code>组件实例中property的值</code>怎么改变，元素或者组件都不会被重新渲染。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>插值：{{ msg }}<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>v-once插值：<span class="tag"><<span class="name">span</span> <span class="attr">v-once</span>></span>{{ msg }}<span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"changeMsg"</span>></span>改值<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"> <span class="keyword">const</span> app = Vue.createApp({</span></span><br><span class="line"> data () {</span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="javascript"> msg: <span class="string">'插值'</span></span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> methods: {</span><br><span class="line"> changeMsg () {</span><br><span class="line"><span class="javascript"> <span class="built_in">this</span>.msg = <span class="string">'哈哈哈哈'</span></span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="keyword">const</span> vm = app.mount(<span class="string">'#app'</span>)</span></span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a>v-html</h3><p>更新元素的 innerHTML。<br><strong>注意：</strong>内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"rawHtml"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"> <span class="keyword">const</span> app = Vue.createApp({</span></span><br><span class="line"> data () {</span><br><span class="line"><span class="javascript"> <span class="keyword">return</span> {</span></span><br><span class="line"><span class="handlebars"><span class="xml"> rawHtml: '<span class="tag"><<span class="name">strong</span>></span>哇哈哈哈<span class="tag"></<span class="name">strong</span>></span>'</span></span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"><span class="javascript"> <span class="keyword">const</span> vm = app.mount(<span class="string">'#app'</span>)</span></span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind"></a>v-bind</h3><p>动态地绑定一个或多个<code>attribute</code>，或一个组件<code>prop</code>到表达式。可以直接缩写<code>:</code><br>在绑定<code>class</code>或<code>style</code>attribute 时，支持其它类型的值，如<strong>数组或对象</strong>。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">v-bind:src</span>=<span class="string">"imageSrc"</span> /></span></span><br><span class="line"><span class="comment"><!-- 缩写 --></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">:src</span>=<span class="string">"imageSrc"</span> /></span></span><br><span class="line"><span class="comment"><!-- class 绑定 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"{ red: isRed }"</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">:class</span>=<span class="string">"[classA, classB]"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="v-if"><a href="#v-if" class="headerlink" title="v-if"></a>v-if</h3><p>根据表达式的真假值来有条件地渲染元素。<br>当和<code>v-if</code>一起使用时，<code>v-for</code>的优先级比<code>v-if</code>更高。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>></span>你看见我了<span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="v-else"><a href="#v-else" class="headerlink" title="v-else"></a>v-else</h3><p>前一兄弟元素必须有 v-if 或 v-else-if。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"Math.random() > 0.5"</span>></span></span><br><span class="line"> Now you see me</span><br><span class="line"><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">v-else</span>></span></span><br><span class="line"> Now you don't</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="v-else-if"><a href="#v-else-if" class="headerlink" title="v-else-if"></a>v-else-if</h3><p>前一兄弟元素必须有 v-if 或 v-else-if。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"type === 'A'"</span>></span></span><br><span class="line"> A</span><br><span class="line"><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">v-else-if</span>=<span class="string">"type === 'B'"</span>></span></span><br><span class="line"> B</span><br><span class="line"><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">v-else-if</span>=<span class="string">"type === 'C'"</span>></span></span><br><span class="line"> C</span><br><span class="line"><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">v-else</span>></span></span><br><span class="line"> Not A/B/C</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a>v-show</h3><p>根据表达式的真假值，切换元素的<code>display CSS property</code>。<br>当条件变化时该指令触发过渡效果。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">v-show</span>></span>看见我了<span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<p>与<code>v-if</code>的区别:</p>
<ul>
<li><code>v-if</code>是通过控制dom节点的存在与否来控制元素的显隐,对元素进行销毁和重建;</li>
<li><code>v-show</code>是通过设置DOM元素的<code>display</code>样式，block为显示，none为隐藏,简单地 CSS 对元素进行切换;</li>
<li><code>v-if</code>会使得页面重绘,<code>v-show</code>则只是是页面重排;<br>一般来说<code>v-if</code>有更高的切换开销,而<code>v-show</code>有较高的初始渲染开销,因此,如果需要非常频繁的切换,则试用<code>v-show</code>较好,如果在运行时条件很少改变,则使用用<code>v-show</code>较好</li>
</ul>
]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>vue.js</tag>
<tag>vue3</tag>
</tags>
</entry>
<entry>
<title>vue3学习之路</title>
<url>/posts/fe1d76a0-1831-11eb-9a98-5927cf269e5c/</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>经过了漫长的迭代，Vue 3.0 终于在上 2020-09-18 发布了，带了翻天覆地的变化，使用了 Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hook ，让使用者更加的灵活，接下来我们就开始学习vue3.0。</p>
</blockquote>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>vue安装有如下三种方式：</p>
<ul>
<li>以 <a href="https://www.vue3js.cn/docs/zh/guide/installation.html#cdn">CDN package</a> 的形式导入，简而言之就是以<code><script></code>标签形式导入<br> 对于制作原型或学习，你可以这样使用最新版本 <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/vue@next"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></li>
<li>使用<code>npm</code>安装<br> 在用 Vue 构建大型应用时推荐使用<code>npm</code>安装, <code>NPM</code>能很好地和诸如<code>Webpack</code>或<code>Browserify</code>模块打包器配合使用。同时<code>Vue</code>也提供配套工具来开发单文件组件。 <figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 最新稳定版</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install vue@next</span></span><br></pre></td></tr></table></figure></li>
<li>使用官方的<code>CLI</code>来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。<br> Vue提供了一个官方的<a href="https://github.com/vuejs/vue-cli">CLI</a>，为单页面应用 (SPA) 快速搭建繁杂的脚手架。<br> 对于Vue3，你应该使用<code>npm</code>上可用的<code>Vue CLI v4.5</code>作为<code>@vue/cli@next</code>。要升级，你应该需要全局重新安装最新版本的 @vue/cli： <figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> yarn global add @vue/cli@next</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> OR</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install -g @vue/cli@next</span></span><br></pre></td></tr></table></figure>
然后在 Vue 项目运行： <figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> vue upgrade --next</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="Vite脚手架"><a href="#Vite脚手架" class="headerlink" title="Vite脚手架"></a>Vite脚手架</h2><p><a href="https://github.com/vitejs/vite">Vite</a> 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。<br>通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> npm</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm init vite-app <project-name></span></span><br><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> <project-name></span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm run dev</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> 或者 yarn</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> yarn create vite-app <project-name></span></span><br><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> <project-name></span></span><br><span class="line"><span class="meta">$</span><span class="bash"> yarn</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> yarn dev</span></span><br></pre></td></tr></table></figure>
<p>具体操作步骤如下：</p>
<ol>
<li>第一步：全局重新安装最新版本的 @vue/cli<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install -g @vue/cli@next</span></span><br></pre></td></tr></table></figure></li>
<li>第二步：使用<code>vite</code>快速创建项目<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm init vite-app vite-demo1</span></span><br></pre></td></tr></table></figure>
<img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/vite%E5%88%9B%E5%BB%BA%E5%BF%AB%E9%80%9F%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE1.jpg"></li>
<li>第三步：进入到项目下，并执行如下命令<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> vite-demo1</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install</span></span><br></pre></td></tr></table></figure>
<img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/vite%E5%BF%AB%E9%80%9F%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE2.jpg"></li>
<li>第四步：然后使用<code>npm run dev</code>运行项目<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/vite%E5%BF%AB%E9%80%9F%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE3.jpg"></li>
<li>第五步：在浏览地地址栏输入<code>localhost:3000</code>，出现如下效果<br><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/vite%E5%BF%AB%E9%80%9F%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE4.jpg"><br>至此使用<code>vite</code>创建项目完成。</li>
</ol>
<h2 id="Vue-cli脚手架快速创建项目"><a href="#Vue-cli脚手架快速创建项目" class="headerlink" title="Vue-cli脚手架快速创建项目"></a>Vue-cli脚手架快速创建项目</h2><p>使用<code>vue-cli</code>脚手架快速创建项目，需要执行如下几步：</p>
<ol>
<li>第一步：全局重新安装最新版本的 @vue/cli<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install -g @vue/cli</span></span><br></pre></td></tr></table></figure></li>
<li>第二步：创建项目<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> vue create cli-demo</span></span><br></pre></td></tr></table></figure>
<img src= "/img/loading.gif" data-lazy-src="https://gitee.com/itchenliang/img/raw/master/img/cli%E5%BF%AB%E9%80%9F%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE1.jpg"><br>选择**Default (Vue 3 preview) ([Vue 3] babel, eslint)**，然后回车</li>
</ol>
<h2 id="快速入门"><a href="#快速入门" class="headerlink" title="快速入门"></a>快速入门</h2><h3 id="声明式渲染"><a href="#声明式渲染" class="headerlink" title="声明式渲染"></a>声明式渲染</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line">Counter: {{ counter }}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Vue.createApp({</span><br><span class="line"> data() {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> counter: <span class="number">0</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}).mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure>
<p>这样我们就创建了一个<code>vue</code>项目，请看下面实例：count 每秒自动递增</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">Vue.createApp({</span><br><span class="line"> data() {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> counter: <span class="number">0</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">setInterval</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">this</span>.counter++</span><br><span class="line"> }, <span class="number">1000</span>)</span><br><span class="line"> }</span><br><span class="line">}).mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>vue.js</tag>
<tag>vue3</tag>
</tags>
</entry>
<entry>
<title>typescript学习</title>
<url>/posts/324862d0-0ebb-11eb-8f8a-0f68a72efc71/</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><h2 id="基础类型"><a href="#基础类型" class="headerlink" title="基础类型"></a>基础类型</h2><h3 id="布尔值-boolean"><a href="#布尔值-boolean" class="headerlink" title="布尔值 boolean"></a>布尔值 boolean</h3><p>最基本的数据类型就是简单的<code>true/false</code>值，在JavaScript和TypeScript里叫做<code>boolean</code></p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> flag: <span class="built_in">boolean</span> = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>
<h3 id="数字-number"><a href="#数字-number" class="headerlink" title="数字 number"></a>数字 number</h3><p>和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是<code>number</code>。</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> num1: <span class="built_in">number</span> = <span class="number">6</span> <span class="comment">// 十进制</span></span><br><span class="line"><span class="keyword">let</span> num2: <span class="built_in">number</span> = <span class="number">0xf00d</span> <span class="comment">// 十六进制</span></span><br><span class="line"><span class="keyword">let</span> num3: <span class="built_in">number</span> = <span class="number">0b1010</span> <span class="comment">// ES6的二进制</span></span><br><span class="line"><span class="keyword">let</span> num4: <span class="built_in">number</span> = <span class="number">0o744</span> <span class="comment">// ES6的八进制</span></span><br></pre></td></tr></table></figure>
<h3 id="字符串-string"><a href="#字符串-string" class="headerlink" title="字符串 string"></a>字符串 string</h3><p>和JavaScript一样，可以使用双引号<code>"</code>或单引号<code>'</code>表示字符串。</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> str: <span class="built_in">string</span> = <span class="string">'hello typescript'</span></span><br><span class="line">str = <span class="string">'hello world'</span></span><br></pre></td></tr></table></figure>
<p>还可以使用模板字符串</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> fullname: <span class="built_in">string</span> = <span class="string">'张三'</span></span><br><span class="line"><span class="keyword">let</span> age: <span class="built_in">number</span> = <span class="number">24</span></span><br><span class="line"><span class="keyword">let</span> sentence: <span class="built_in">string</span> = <span class="string">`hello! my name is <span class="subst">${fullname}</span>, I am <span class="subst">${age}</span> years old`</span></span><br><span class="line"><span class="comment">// 使用 tsc 转换后的结果</span></span><br><span class="line"><span class="keyword">var</span> fullname = <span class="string">'张三'</span>;</span><br><span class="line"><span class="keyword">var</span> age = <span class="number">24</span>;</span><br><span class="line"><span class="keyword">var</span> sentence = <span class="string">"hello! my name is "</span> + fullname + <span class="string">", I am "</span> + age + <span class="string">" years old"</span>;</span><br></pre></td></tr></table></figure>
<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><p>有两种方式可以定义数组。<br><strong>第一种</strong>：可以在元素类型后面接上<code>[]</code>，表示由此类型元素组成的一个数组：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1: <span class="built_in">number</span>[] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="comment">// 使用 tsc 命令转换后的结果</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br></pre></td></tr></table></figure>
<p><strong>第一种</strong>：使用数组泛型，<code>Array<元素类型></code>：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> arr2: <span class="built_in">Array</span><<span class="built_in">number</span>> = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="comment">// 使用 tsc 命令转换后的结果</span></span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br></pre></td></tr></table></figure>
<h3 id="元组-Tuple"><a href="#元组-Tuple" class="headerlink" title="元组 Tuple"></a>元组 Tuple</h3><p>元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。<br>如：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> tuple1: [<span class="built_in">string</span>, <span class="built_in">number</span>]</span><br><span class="line">tuple1 = [<span class="string">'haha'</span>, <span class="number">23</span>] <span class="comment">// ok</span></span><br><span class="line">tuple1 = [<span class="number">23</span>, <span class="string">'haha'</span>] <span class="comment">// Error</span></span><br></pre></td></tr></table></figure>
<h3 id="枚举"><a href="#枚举" class="headerlink" title="枚举"></a>枚举</h3><p><code>enum</code>类型是对JavaScript标准数据类型的一个补充。</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="built_in">enum</span> Color {Red, Green, Blue}</span><br><span class="line"><span class="keyword">let</span> c: Color = Color.Green</span><br></pre></td></tr></table></figure>
<p>默认情况下，从<code>0</code>开始为元素编号。即上面的<code>Red=0, Green=1, Blue=2</code>，所以此时<code>c = 1</code>。<br>可以手动的指定成员的数值，如：将上面的例子改成从<code>1</code>开始编号：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="built_in">enum</span> Color {Red = <span class="number">1</span>, Green, Blue}</span><br><span class="line"><span class="keyword">let</span> c: Color = Color.Green</span><br></pre></td></tr></table></figure>
<p>或者，全部都采用手动赋值：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="built_in">enum</span> Color {Red = <span class="number">1</span>, Green = <span class="number">4</span>, Blue = <span class="number">8</span>}</span><br><span class="line"><span class="keyword">let</span> c: Color = Color.Green</span><br></pre></td></tr></table></figure>
<p><strong>注意</strong>：枚举类型提供的一个<code>便利</code>是你可以由枚举的值得到它的名字。</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="built_in">enum</span> Color {Red = <span class="number">1</span>, Green = <span class="number">2</span>, Blue = <span class="number">4</span>}</span><br><span class="line"><span class="keyword">let</span> cName: <span class="built_in">string</span> = Color[<span class="number">2</span>]</span><br><span class="line"><span class="built_in">console</span>.log(cName) <span class="comment">// Green</span></span><br></pre></td></tr></table></figure>
<h3 id="Any"><a href="#Any" class="headerlink" title="Any"></a>Any</h3><p>有时候在编程阶段还不清楚变量的类型，这种情况下，我们不希望<strong>类型检查器</strong>对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 <code>any</code>类型来标记这些变量：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> notSure: <span class="built_in">any</span> = <span class="number">4</span></span><br><span class="line">notSure = <span class="literal">false</span></span><br><span class="line">notSure = <span class="string">'哈哈哈'</span></span><br><span class="line">notSure.ifItExists() <span class="comment">// ok</span></span><br><span class="line">notSure.toFixed() <span class="comment">// ok</span></span><br></pre></td></tr></table></figure>
<h3 id="Void"><a href="#Void" class="headerlink" title="Void"></a>Void</h3><p>某种程度上来说，<code>void</code>类型像是与<code>any</code>类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是<code>void</code>：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>): <span class="title">void</span> </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"This is my warning message"</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>声明一个<code>void</code>类型的变量没有什么大用，因为你只能为它赋予<code>undefined和null</code>：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> unusable: <span class="built_in">void</span> = <span class="literal">undefined</span></span><br></pre></td></tr></table></figure>
<h3 id="Null-和-Undefined"><a href="#Null-和-Undefined" class="headerlink" title="Null 和 Undefined"></a>Null 和 Undefined</h3><p>TypeScript里，<code>undefined</code>和<code>null</code>两者各自有自己的类型分别叫做<code>undefined</code>和<code>null</code>。 和<code>void</code>相似，它们的本身的类型用处不是很大：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> u: <span class="literal">undefined</span> = <span class="literal">undefined</span></span><br><span class="line"><span class="keyword">let</span> n: <span class="literal">null</span> = <span class="literal">null</span></span><br></pre></td></tr></table></figure>
<p>默认情况下<code>null和undefined</code>是所有类型的子类型。 就是说你可以把<code>null和undefined</code>赋值给<code>number</code>类型的变量。</p>
<h3 id="Never"><a href="#Never" class="headerlink" title="Never"></a>Never</h3><p><code>never</code>类型表示的是那些永不存在的值的类型。<br>例如: <code>never</code>类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是<code>never</code>类型，当它们被永不为真的类型保护所约束时。<br><code>never</code>类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是<code>never</code>的子类型或可以赋值给<code>never</code>类型（除了<code>never</code>本身之外）。 即使<code>any</code>也不可以赋值给<code>never</code>。<br>下面是一些返回never类型的函数：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 返回never的函数必须存在无法达到的终点</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">error</span>(<span class="params">message: <span class="built_in">string</span></span>): <span class="title">never</span> </span>{</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(message);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 推断的返回值类型为never</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fail</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> error(<span class="string">"Something failed"</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 返回never的函数必须存在无法达到的终点</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">infiniteLoop</span>(<span class="params"></span>): <span class="title">never</span> </span>{</span><br><span class="line"> <span class="keyword">while</span> (<span class="literal">true</span>) {}</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>教程</tag>
<tag>typescript</tag>
<tag>指南</tag>
</tags>
</entry>
<entry>
<title>Deno学习之路(一)之环境搭建和快速创建项目</title>
<url>/posts/666a7610-0def-11eb-a127-f1b6573612a5/</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><h2 id="Deno是什么？"><a href="#Deno是什么？" class="headerlink" title="Deno是什么？"></a>Deno是什么？</h2><div class="note default simple">
<p>Deno 是一个简单、现代且安全的 JavaScript 和 TypeScript 运行时环境，其基于 V8 引擎并采用 Rust 编程语言构建。<br>官网：<a href="https://www.denojs.cn/">https://www.denojs.cn/</a></p>
</div>
<h2 id="安装Deno"><a href="#安装Deno" class="headerlink" title="安装Deno"></a>安装Deno</h2>]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>deno</tag>
</tags>
</entry>
<entry>
<title>typescript学习之路(一)之环境搭建</title>
<url>/posts/d77245a0-0dee-11eb-83d2-070c3258ed4f/</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><h2 id="Typescript是什么？"><a href="#Typescript是什么？" class="headerlink" title="Typescript是什么？"></a>Typescript是什么？</h2><div class="note default simple">
<p>TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。<br>TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。<br>官网：<a href="https://www.tslang.cn/">https://www.tslang.cn/</a></p>
</div>
<h2 id="安装Typescript"><a href="#安装Typescript" class="headerlink" title="安装Typescript"></a>安装Typescript</h2><p>有两种主要的方式来获取TypeScript工具：</p>
<ul>
<li>通过npm（Node.js包管理器）</li>
<li>安装Visual Studio的TypeScript插件</li>
</ul>
<p>针对使用npm的用户：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install -g typescript</span><br></pre></td></tr></table></figure>
<p>查看是否安装成功：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">tsc -v # tsc --version</span><br></pre></td></tr></table></figure>
<p>查看Typescript命令帮助：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">tsc -h # tsc --help</span><br></pre></td></tr></table></figure>
<h2 id="构建第一个-Typescript-文件"><a href="#构建第一个-Typescript-文件" class="headerlink" title="构建第一个 Typescript 文件"></a>构建第一个 Typescript 文件</h2><p>在编辑器，新建<code>greeter.ts</code>文件并写入如下内容：</p>
<figure class="highlight ts"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">greeter</span>(<span class="params">person</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">"Hello, "</span> + person</span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> user = <span class="string">"Jane User"</span></span><br><span class="line"><span class="built_in">document</span>.body.innerHTML = greeter(user)</span><br></pre></td></tr></table></figure>
<h2 id="编译代码"><a href="#编译代码" class="headerlink" title="编译代码"></a>编译代码</h2><p>在命令行上，运行TypeScript编译器：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">tsc greeter.ts</span><br></pre></td></tr></table></figure>
<p>输出结果为一个<code>greeter.js</code>文件，它包含了和输入文件中相同的JavsScript代码。然后就可以运行typescript生成的JavaScript代码了。</p>
]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>typescript</tag>
</tags>
</entry>
<entry>
<title>electron学习之路(一)之环境搭建和快速创建项目</title>
<url>/posts/b0454160-0de6-11eb-b617-1783d9490e65/</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><h2 id="electron是什么"><a href="#electron是什么" class="headerlink" title="electron是什么?"></a>electron是什么?</h2><div class="note default simple">
<p>使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序<br>官网：<a href="http://www.electronjs.org/">http://www.electronjs.org/</a></p>
</div>
<h2 id="环境搭建"><a href="#环境搭建" class="headerlink" title="环境搭建"></a>环境搭建</h2><p>使用原生的<code>Node.js</code>开发环境来开发<code>Electron应用</code>。 为了打造一个Electron桌面程序的开发环境，只需要安装好<code>Node.js</code>、<code>npm</code>、一个顺手的代码编辑器以及对你的操作系统命令行客户端有基本了解。</p>
<h2 id="创建第一个electron应用"><a href="#创建第一个electron应用" class="headerlink" title="创建第一个electron应用"></a>创建第一个electron应用</h2><p>Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。<br>从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">your-app/</span><br><span class="line"> |- package.json</span><br><span class="line"> |- index.js</span><br><span class="line"> |- index.html</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>首先为项目创建空文件夹<code>electron-demo</code>，然后在命令行输入如下命令：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">cd electron-demo</span><br><span class="line">npm init</span><br></pre></td></tr></table></figure>
<p>然后一直回车到底，或者将<code>npm init</code>替换成<code>npm init -y</code>快速初始化。</p>
<h3 id="配置启动命令"><a href="#配置启动命令" class="headerlink" title="配置启动命令"></a>配置启动命令</h3><p>在上一步执行完成后会在<code>electron-demo</code>目录下创建<code>package.json</code>文件，修改<code>package.json</code>文件：</p>
<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">"electron-demo"</span>,</span><br><span class="line"> <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line"> <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line"> <span class="attr">"scripts"</span>: {</span><br><span class="line"> <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" && exit 1"</span>,</span><br><span class="line"> <span class="attr">"start"</span>: <span class="string">"electron ."</span> <span class="comment">// 启动项</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line"> <span class="attr">"license"</span>: <span class="string">"ISC"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>配置好后，后期就可以直接在命令行输入：<code>npm run start</code>即可运行项目。</p>
<h3 id="安装-Electron"><a href="#安装-Electron" class="headerlink" title="安装 Electron"></a>安装 Electron</h3><p>在<code>electron-demo</code>命令行下输入如下命令进行安装<code>electron</code>：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm i electron -S</span><br></pre></td></tr></table></figure>
<h3 id="开发"><a href="#开发" class="headerlink" title="开发"></a>开发</h3><p>Electron apps 使用JavaScript开发，其工作原理和方法与Node.js 开发相同。 electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样。<br>在<code>electron-demo</code>下新建<code>index.js</code>，然后引入<code>electron</code>：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> electron = <span class="built_in">require</span>(<span class="string">'electron'</span>)</span><br></pre></td></tr></table></figure>
<p><code>electron</code> 模块所提供的功能都是通过命名空间暴露出来的。 比如说： <code>electron.app</code>负责管理<code>Electron</code> 应用程序的生命周期， <code>electron.BrowserWindow</code>类负责创建窗口。<br>下面是一个简单的<code>index.js</code>文件，它将在应用程序准备就绪后打开一个窗口：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> { app, BrowserWindow } = <span class="built_in">require</span>(<span class="string">'electron'</span>)</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createWindow</span> (<span class="params"></span>) </span>{ </span><br><span class="line"> <span class="comment">// 创建浏览器窗口</span></span><br><span class="line"> <span class="keyword">const</span> win = <span class="keyword">new</span> BrowserWindow({</span><br><span class="line"> width: <span class="number">800</span>,</span><br><span class="line"> height: <span class="number">600</span>,</span><br><span class="line"> webPreferences: {</span><br><span class="line"> nodeIntegration: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// 并且为你的应用加载index.html</span></span><br><span class="line"> win.loadFile(<span class="string">'index.html'</span>)</span><br><span class="line">}</span><br><span class="line">app.whenReady().then(createWindow)</span><br></pre></td></tr></table></figure>
]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>Node.js</tag>
<tag>electron</tag>
<tag>桌面应用程序</tag>
</tags>
</entry>
<entry>
<title>weex学习之路(一)之环境搭建和快速创建项目</title>
<url>/posts/2d08fd40-0dce-11eb-b7a3-99b99f39a188/</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><h2 id="weex是什么"><a href="#weex是什么" class="headerlink" title="weex是什么?"></a>weex是什么?</h2><div class="note default simple">
<p><code>Weex</code> 是使用流行的 Web 开发体验来开发高性能原生应用的框架。<br>“Weex” 的发音是 /wiːks/, 和 “Weeks” 同音。<br><code>weex</code>是阿里开源的一款类似<code>react-native</code>的使用js开发客户端的框架,<code>weex</code>可是认为是<code>vue-native</code>。阿里有另外一个<code>rax</code>框架是类似<code>react</code>的的框架 语法和api基本相同，也支持jsx。<br>weex官网：<a href="https://weex.apache.org/zh/">https://weex.apache.org/zh/</a><br>vue官网：<a href="https://cn.vuejs.org/">https://cn.vuejs.org/</a><br>rax官网：<a href="https://alibaba.github.io/rax/">https://alibaba.github.io/rax/</a></p>
</div>
<h2 id="开发环境配置"><a href="#开发环境配置" class="headerlink" title="开发环境配置"></a>开发环境配置</h2><p><code>Weex</code> 官方提供了weex-cli 的脚手架工具来辅助开发和调试。<br>首先需要安装<code>Node.js</code>和<a href="https://github.com/apache/incubator-weex-cli?spm=a2c7j.-zh-guide-develop-setup-develop-environment.0.0.17041a8eIfoQkT"><code>Weex Cli</code></a><br>安装好<code>Node.js</code>后，就可以直接使用 <code>npm</code> 来安装 <code>weex-toolkit</code>, 你也可以通过 <code>yarn</code> 来进行安装。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm i weex-toolkit -g</span><br></pre></td></tr></table></figure>
<p>安装结束后你可以直接使用 <code>weex help</code> 命令验证是否安装成功，它会显示 <code>weex</code> 支持的所有指令，同时，你也可以通过 <code>weex doctor</code> 命令检查你的本地开发环境。</p>
<h2 id="快速创建项目"><a href="#快速创建项目" class="headerlink" title="快速创建项目"></a>快速创建项目</h2><h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>然后初始化 Weex 项目：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">weex create 项目名称</span><br><span class="line">weex create weex-demo</span><br></pre></td></tr></table></figure>
<p>执行完命令后，在 <code>weex-demo</code> 目录中已经为我们生成了标准项目结构。</p>
<h3 id="运行项目"><a href="#运行项目" class="headerlink" title="运行项目"></a>运行项目</h3><p>进入项目所在路径，如果你在生成项目的时候选择了<code>自动安装依赖</code>，在进入项目后只需直接运行 <code>npm start</code> 就可以将项目完整跑起来，否则，你需要预先在项目中运行一下 <code>npm install</code> 安装项目所需依赖。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">cd weex-demo</span><br><span class="line">npm install # 这一步如果在创建项目时选择了自动安装依赖，就跳过</span><br><span class="line">npm start</span><br></pre></td></tr></table></figure>
<p>然后工具会启动一个本地的 <code>web</code> 服务，监听 <code>8081</code> 端口。你可以打开 <code>http://localhost:8081</code> 查看页面在 Web 下的渲染效果。 源代码在 <code>src/</code> 目录中，你可以像一个普通的 <code>Vue.js</code> 项目一样来开发.<br>除此之外，你还可以打开 <code>http://localhost:8081/preview.html</code> 开启一个预览页面，它会把 web 端的页面放在一个 iframe 中渲染，而且在右侧生成一个二维码。用 <a href="https://weex.apache.org/zh/guide/playground.html?spm=a2c7j.-zh-guide-develop-create-a-new-app.0.0.167c2a18mN3Gak"><code>Weex playground app</code></a> 扫描这个二维码可以看到页面在手机上渲染的真实效果。</p>
<h3 id="编译"><a href="#编译" class="headerlink" title="编译"></a>编译</h3><p>默认情况下 <code>weex create</code> 命令并不初始化 <code>iOS</code> 和 <code>Android</code> 项目，你可以通过执行 <code>weex platform add</code> 来添加特定平台的项目。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">weex platform add ios # ios</span><br><span class="line">weex platform add android # android</span><br></pre></td></tr></table></figure>
<p>为了能在本地机器上打开 <code>Android</code> 和 <code>iOS</code> 项目，你应该配置好客户端的开发环境。对于 <code>iOS</code>，你应该安装并且配置好 <a href="https://developer.apple.com/xcode/?spm=a2c7j.-zh-guide-develop-create-a-new-app.0.0.167c2a18mN3Gak"><code>Xcode</code></a>。对于 <code>Android</code>，你应该安装并且配置好 <a href="https://developer.android.com/studio/index.html?spm=a2c7j.-zh-guide-develop-create-a-new-app.0.0.167c2a18mN3Gak"><code>Android Studio</code></a>。当开发环境准备就绪后，运行下面的命令，可以在模拟器或真实设备上启动应用：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">weex run ios</span><br><span class="line">weex run android</span><br><span class="line">weex run web</span><br></pre></td></tr></table></figure>
<h3 id="调试"><a href="#调试" class="headerlink" title="调试"></a>调试</h3><p><code>weex-toolkit</code> 还提供了强大的调试功能，只需要执行：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">weex debug</span><br></pre></td></tr></table></figure>
<p>这条命令会启动一个调试服务，并且在 Chrome （目前只支持基于 V8 引擎的桌面浏览器） 中打开调试页面。详细用法请参考 <a href="https://weex.apache.org/zh/guide/develop/weex_cli.html?spm=a2c7j.-zh-guide-develop-create-a-new-app.0.0.167c2a18mN3Gak">weex-toolkit</a> 的文档。</p>
]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>typescript</tag>
<tag>vue.js</tag>
<tag>weex</tag>
<tag>前端框架</tag>
<tag>小程序</tag>
</tags>
</entry>
<entry>
<title>基于Promise封装自己的Ajax库</title>
<url>/posts/92b5f100-0218-11eb-9a87-f1343616adab/</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>]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>Promise</tag>
<tag>XMLHttpRequest</tag>
<tag>Ajax</tag>
<tag>封装</tag>
</tags>
</entry>
<entry>
<title>Git配置rsa公钥秘钥</title>
<url>/posts/4bbed010-f98e-11ea-8b21-71273ce4fbc1f9b/</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><h2 id="gitee配置rsa公钥密钥"><a href="#gitee配置rsa公钥密钥" class="headerlink" title="gitee配置rsa公钥密钥"></a>gitee配置rsa公钥密钥</h2><p>参考：<a href="https://blog.csdn.net/liyanpig/article/details/105879263">https://blog.csdn.net/liyanpig/article/details/105879263</a></p>
<ol>
<li>在本地命令行输入：<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">ssh-keygen -t rsa -C "xxxxx@xxxxx.com"</span><br></pre></td></tr></table></figure></li>
<li></li>
</ol>
<h2 id="Github配置rsa公钥秘钥"><a href="#Github配置rsa公钥秘钥" class="headerlink" title="Github配置rsa公钥秘钥"></a>Github配置rsa公钥秘钥</h2>]]></content>
<categories>
<category>Git配置</category>
</categories>
<tags>
<tag>Gitee</tag>
<tag>Github</tag>
<tag>公钥</tag>
<tag>秘钥</tag>
<tag>rsa</tag>
</tags>
</entry>
<entry>
<title>Hexo添加发布说说功能</title>
<url>/posts/c370d840-f7e7-11ea-9a66-9918b66381d4/</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>发表<code>说说/动态</code>功能是使用的<code>artitalk.js</code>，<a href="https://artitalk.js.org/doc.html">官网</a></p>
<h2 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h2><div class="note default">
<p>建议使用国际版的LeanCloud<br>因为国际版的leancloud不需要配置serverurl，所以推荐使用国际版，速度没有区别，如果使用国内版的leancloud别忘了填写serverurl即可</p>
</div>
<ol>
<li>前往 <a href="https://leancloud.app/">LeanCloud 国际版</a>，注册账号。</li>
<li>注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。</li>
<li>绑定完成之后点击创建应用，应用名称随意，接着在<code>结构化数据</code>中创建 <code>class</code>，命名为 <code>shuoshuo</code>。</li>
<li>在你新建的应用中找到<code>结构化数据</code>下的<code>用户</code>。点击<code>添加用户</code>，输入想用的<code>用户名及密码</code>。</li>
<li>回到<code>结构化数据</code>中，点击 <code>class</code> 下的 <code>shuoshuo</code>。找到权限，在 Class 访问权限中将 <code>add_fields</code> 以及 <code>create</code> 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 <code>delete</code> 和 <code>update</code> 也设置为跟它们一样的权限。</li>
<li>然后新建一个名为<code>atComment</code>的<code>class</code>，权限什么的使用默认的即可。</li>
<li>点击 <code>class</code> 下的 <code>_User</code> 添加列，列名称为 <code>img</code>，<code>默认值</code>填上你这个账号想要用的发布<code>说说的头像url</code>，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。</li>
<li>在菜单栏中找到<code>设置-> 应用 keys</code>，记下来 <code>AppID</code> 和 <code>AppKey</code> ，一会会用。</li>
<li>最后将 <code>_User</code> 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。</li>
</ol>
<h2 id="开始使用"><a href="#开始使用" class="headerlink" title="开始使用"></a>开始使用</h2><p>使用<code>hexo new page 名称</code>创建一个说说页面，如：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo new page shuoshuo</span><br></pre></td></tr></table></figure>
<p>然后在<code>shuoshuo/index.md</code>中添加如下代码：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><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 class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"artitalk_main"</span>></span><span class="tag"></<span class="name">div</span>></span> // 存放说说列表的容器</span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"> <span class="keyword">new</span> Artitalk({</span></span><br><span class="line"><span class="javascript"> appId: <span class="string">'lMd0eLhIQPpENoI7ScrQSa63-MdYXbMMI'</span>,</span></span><br><span class="line"><span class="javascript"> appKey: <span class="string">'3tOgjMl6MmfupNrqfFHTnHhm'</span></span></span><br><span class="line"> })</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<p>至此就已经实现了发布说说的功能。<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/helinghands/cdn/img/hexo%E6%B7%BB%E5%8A%A0%E5%8F%91%E5%B8%83%E8%AF%B4%E8%AF%B4%E5%8A%9F%E8%83%BD_demo1.jpg"></p>
<h2 id="更多配置"><a href="#更多配置" class="headerlink" title="更多配置"></a>更多配置</h2><p>查看<a href="https://artitalk.js.org/settings.html#%F0%9F%93%8Cappid">artitalk配置文档</a></p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>插件</tag>
<tag>Artitalk</tag>
<tag>说说</tag>
<tag>动态</tag>
</tags>
</entry>
<entry>
<title>Hexo添加站内搜索</title>
<url>/posts/f79a3950-f72d-11ea-8a86-c5fa3ec3bc75/</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>hexo-generator-search</code>插件</p>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>根据它的文档去做相应配置。注意格式只支持 xml。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install hexo-generator-search --save</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">local_search:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">labels:</span></span><br><span class="line"> <span class="attr">input_placeholder:</span> <span class="string">Search</span> <span class="string">for</span> <span class="string">Posts</span></span><br><span class="line"> <span class="attr">hits_empty:</span> <span class="string">"We didn't find any results for the search: ${query}"</span> <span class="comment"># if there are no result</span></span><br></pre></td></tr></table></figure>
<h1 id="Algolia"><a href="#Algolia" class="headerlink" title="Algolia"></a>Algolia</h1><p>你需要安装 <code>hexo-algolia</code> 或 <code>hexo-algoliasearch</code>. 根据它们的説明文档去做相应的配置。</p>
<h2 id="安装-1"><a href="#安装-1" class="headerlink" title="安装"></a>安装</h2><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install hexo-algolia --save</span><br></pre></td></tr></table></figure>
<h2 id="配置-1"><a href="#配置-1" 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">algolia_search:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">hits:</span></span><br><span class="line"> <span class="attr">per_page:</span> <span class="number">6</span></span><br><span class="line"> <span class="attr">labels:</span></span><br><span class="line"> <span class="attr">input_placeholder:</span> <span class="string">Search</span> <span class="string">for</span> <span class="string">Posts</span></span><br><span class="line"> <span class="attr">hits_empty:</span> <span class="string">"We didn't find any results for the search: ${query}"</span> <span class="comment"># if there are no result</span></span><br><span class="line"> <span class="attr">hits_stats:</span> <span class="string">"${hits} results found in ${time} ms"</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>本地搜索</tag>
<tag>Algolia</tag>
</tags>
</entry>
<entry>
<title>Hexo常用插件推荐及使用方法</title>
<url>/posts/22350780-f32d-11ea-bb4a-d3e1cbe3d59d/</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><div class="note success">
<p>主要分享自己在使用<code>Hexo</code>搭建博客时用到的一些插件。</p>
</div>
<h2 id="hexo-abbrlink"><a href="#hexo-abbrlink" class="headerlink" title="hexo-abbrlink"></a>hexo-abbrlink</h2><p>官网：<a href="https://github.com/rozbo/hexo-abbrlink">https://github.com/rozbo/hexo-abbrlink</a><br>hexo博文生成唯一的id，永久链接</p>
<h2 id="hexo-douban"><a href="#hexo-douban" class="headerlink" title="hexo-douban"></a>hexo-douban</h2><p>官网：<a href="https://github.com/mythsman/hexo-douban">https://github.com/mythsman/hexo-douban</a><br>hexo插入豆瓣个人主页</p>
<h2 id="hexo-bilibili-bangumi"><a href="#hexo-bilibili-bangumi" class="headerlink" title="hexo-bilibili-bangumi"></a>hexo-bilibili-bangumi</h2><p>官网：<a href="https://github.com/HCLonely/hexo-bilibili-bangumi">https://github.com/HCLonely/hexo-bilibili-bangumi</a><br>hexo嵌套哔哩哔哩番剧</p>
<h2 id="Artitalk"><a href="#Artitalk" class="headerlink" title="Artitalk"></a>Artitalk</h2><p>官网：<a href="https://artitalk.js.org/">https://artitalk.js.org/</a><br>发布说说</p>
<h2 id="hexo-hide-posts"><a href="#hexo-hide-posts" class="headerlink" title="hexo-hide-posts"></a>hexo-hide-posts</h2><p>官网：<a href="https://github.com/printempw/hexo-hide-posts/blob/master/README_ZH.md">https://github.com/printempw/hexo-hide-posts/blob/master/README_ZH.md</a><br>hexo博客中隐藏指定的文章，并使它们仅可通过链接访问。</p>
<h2 id="hexo-generator-searchdb"><a href="#hexo-generator-searchdb" class="headerlink" title="hexo-generator-searchdb"></a>hexo-generator-searchdb</h2><p>官网：<a href="https://github.com/theme-next/hexo-generator-searchdb">https://github.com/theme-next/hexo-generator-searchdb</a><br>hexo博客本地搜索功能。</p>
<h2 id="hexo-tag-bootstrap"><a href="#hexo-tag-bootstrap" class="headerlink" title="hexo-tag-bootstrap"></a>hexo-tag-bootstrap</h2><p>官网：<a href="https://github.com/wzpan/hexo-tag-bootstrap">https://github.com/wzpan/hexo-tag-bootstrap</a></p>
<h2 id="hexo-tag-friends"><a href="#hexo-tag-friends" class="headerlink" title="hexo-tag-friends"></a>hexo-tag-friends</h2><p>官网：<a href="https://github.com/maplesugarr/hexo-tag-friends/blob/master/docs/README-zh_cn.md">https://github.com/maplesugarr/hexo-tag-friends/blob/master/docs/README-zh_cn.md</a></p>
<h2 id="hexo-tag-aplayer"><a href="#hexo-tag-aplayer" class="headerlink" title="hexo-tag-aplayer"></a>hexo-tag-aplayer</h2><p>官网：<a href="https://github.com/MoePlayer/hexo-tag-aplayer">https://github.com/MoePlayer/hexo-tag-aplayer</a></p>
<h2 id="live2d-widget"><a href="#live2d-widget" class="headerlink" title="live2d-widget"></a>live2d-widget</h2><p>在博客中插入能说话能动能换肤的看板娘</p>
<h2 id="hexo-helper-live2d"><a href="#hexo-helper-live2d" class="headerlink" title="hexo-helper-live2d"></a>hexo-helper-live2d</h2><p>官网：<a href="https://github.com/EYHN/hexo-helper-live2d">https://github.com/EYHN/hexo-helper-live2d</a><br>博客中插入普通版的看板娘</p>
<h2 id="hexo-generator-index-pin-top"><a href="#hexo-generator-index-pin-top" class="headerlink" title="hexo-generator-index-pin-top"></a>hexo-generator-index-pin-top</h2><p>文章置顶功能</p>
<h2 id="hexo-calendar"><a href="#hexo-calendar" class="headerlink" title="hexo-calendar"></a>hexo-calendar</h2><p>官网：<a href="https://github.com/HCLonely/hexo-calendar/blob/master/README_CN.md">https://github.com/HCLonely/hexo-calendar/blob/master/README_CN.md</a><br>类似于github的动态日历</p>
<h2 id="hexo-uuid"><a href="#hexo-uuid" class="headerlink" title="hexo-uuid"></a>hexo-uuid</h2><p>官网：<a href="https://github.com/chekun/hexo-uuid">https://github.com/chekun/hexo-uuid</a><br>hexo博文生成唯一的uuid，比hexo-abbrlink更好用（个人觉得）</p>
<h2 id="hexo-addlink"><a href="#hexo-addlink" class="headerlink" title="hexo-addlink"></a>hexo-addlink</h2><p>官网：<a href="https://github.com/acwong00/hexo-addlink">https://github.com/acwong00/hexo-addlink</a><br>在文章最末添加永久链接及版权声明</p>
<h2 id="hexo-encrypt"><a href="#hexo-encrypt" class="headerlink" title="hexo-encrypt"></a>hexo-encrypt</h2><p>官网：<a href="https://github.com/edolphin-ydf/hexo-encrypt">https://github.com/edolphin-ydf/hexo-encrypt</a><br>hexo对部分博文加密</p>
<h2 id="hexo-baidu-url-push"><a href="#hexo-baidu-url-push" class="headerlink" title="hexo-baidu-url-push"></a>hexo-baidu-url-push</h2><p>官网：<a href="https://www.npmjs.com/package/hexo-baidu-url-push">https://www.npmjs.com/package/hexo-baidu-url-push</a><br>使用百度JS链路自动推送方法，提交链接到百度</p>
<h2 id="hexo-steam-games"><a href="#hexo-steam-games" class="headerlink" title="hexo-steam-games"></a>hexo-steam-games</h2><p>官网：<a href="https://github.com/HCLonely/hexo-steam-games">https://github.com/HCLonely/hexo-steam-games</a><br>在hexo中添加stream的游戏页面</p>
<h2 id="hexo-admonition"><a href="#hexo-admonition" class="headerlink" title="hexo-admonition"></a>hexo-admonition</h2><p>官网：<a href="https://github.com/lxl80/hexo-admonition">https://github.com/lxl80/hexo-admonition</a><br>Hexo 内容辅助插件，例如 note、warning、error 等提示块</p>
<h2 id="hexo-git-backup"><a href="#hexo-git-backup" class="headerlink" title="hexo-git-backup"></a>hexo-git-backup</h2><p>官网：<a href="https://github.com/coneycode/hexo-git-backup">https://github.com/coneycode/hexo-git-backup</a><br><a href="https://plushine.cn/54808.html#%E5%AE%89%E8%A3%85">https://plushine.cn/54808.html#%E5%AE%89%E8%A3%85</a><br>博客备份功能</p>
<h2 id="hexo-generator-feed"><a href="#hexo-generator-feed" class="headerlink" title="hexo-generator-feed"></a>hexo-generator-feed</h2><p>官网：<a href="https://github.com/hexojs/hexo-generator-feed">https://github.com/hexojs/hexo-generator-feed</a><br>网站设置RSS订阅</p>
<h2 id="hexo-baidu-url-submit"><a href="#hexo-baidu-url-submit" class="headerlink" title="hexo-baidu-url-submit"></a>hexo-baidu-url-submit</h2><p>官网：<a href="https://github.com/huiwang/hexo-baidu-url-submit">https://github.com/huiwang/hexo-baidu-url-submit</a><br>参考；<a href="https://blog.csdn.net/weixin_43662543/article/details/104647173">https://blog.csdn.net/weixin_43662543/article/details/104647173</a><br>主动推送Hexo博客新链接至百度搜索引擎，解决百度爬虫被禁止访问的问题，提升网站收录质量和速度。</p>
<p><strong>如果您有更好的常用插件，欢迎在评论区留言。</strong></p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>博客搭建</tag>
<tag>插件</tag>
<tag>教程</tag>
</tags>
</entry>
<entry>
<title>hexo-douban在Hexo中嵌入豆瓣个人主页</title>
<url>/posts/22350780-f32d-11ea-bb4a-d3e1cbe3d591/</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><!-- <div class="note default">
<p>hexo-douban 提示塊標籤</p>
</div> -->
<blockquote><p>hexo-douban: 一个在 Hexo 页面中嵌入豆瓣个人主页的小插件。</p>
<footer><strong>@hexo-douban</strong><cite><a href="https://github.com/mythsman/hexo-douban">github.com/mythsman/hexo-douban</a></cite></footer></blockquote>
<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="attr">douban:</span></span><br><span class="line"> <span class="attr">user:</span> <span class="string">XXXXXXXX</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 class="comment"># 该页面的标题</span></span><br><span class="line"> <span class="attr">quote:</span> <span class="string">'思想和身体，总有一个在路上'</span> <span class="comment"># 写在页面开头的一段话,支持html语法.</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 class="comment"># 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。</span></span><br></pre></td></tr></table></figure>
<ul>
<li>user: 你的豆瓣ID.打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的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)可以把这个数据设置的大一点。</li>
</ul>
<p><strong>注意：</strong>如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。</p>
<h2 id="访问"><a href="#访问" class="headerlink" title="访问"></a>访问</h2><p>如果上面的配置都没有问题，就可以在你的站点输入如下地址进行访问查看结果：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">http://www.yoursite.com/yourblog/books</span><br><span class="line">http://www.yoursite.com/yourblog/movies</span><br><span class="line">http://www.yoursite.com/yourblog/games</span><br></pre></td></tr></table></figure>
<p><strong>注意：</strong>此时<code>books</code>、<code>movies</code>、<code>games</code>不需要使用<code>hexo new page xxx</code>来创建，只需要配置<code>hexo-douban</code>后会自动创建。</p>
<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="attr">menu:</span></span><br><span class="line"> <span class="attr">Home:</span> <span class="string">/</span></span><br><span class="line"> <span class="attr">Archives:</span> <span class="string">/archives</span></span><br><span class="line"> <span class="attr">Books:</span> <span class="string">/books</span> <span class="comment">#This is your books page</span></span><br><span class="line"> <span class="attr">Movies:</span> <span class="string">/movies</span> <span class="comment">#This is your movies page</span></span><br><span class="line"> <span class="attr">Games:</span> <span class="string">/games</span> <span class="comment">#This is your games page</span></span><br></pre></td></tr></table></figure>
<h2 id="Butterfly主题中使用hexo-douban插件"><a href="#Butterfly主题中使用hexo-douban插件" class="headerlink" title="Butterfly主题中使用hexo-douban插件"></a>Butterfly主题中使用hexo-douban插件</h2><p>修改主题配置文件<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/helinghands/cdn/img/movie.png</span></span><br><span class="line"> <span class="attr">books_img:</span> <span class="string">https://cdn.jsdelivr.net/gh/helinghands/cdn/img/book.jpg</span></span><br><span class="line"> <span class="attr">games_img:</span> <span class="string">https://cdn.jsdelivr.net/gh/helinghands/cdn/img/game.jpg</span></span><br></pre></td></tr></table></figure>
<ul>
<li>movies_img: 设置 <code>hexo-douban</code> 中 <code>movies</code> 页面的 <code>top_img</code></li>
<li>books_img: 设置 <code>hexo-douban</code> 中 <code>books</code> 页面的 <code>top_img</code></li>
<li>games_img: 设置 <code>hexo-douban</code> 中 <code>games</code> 页面的 <code>top_img</code></li>
</ul>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>主题</tag>
<tag>插件</tag>
<tag>hexo-douban</tag>
</tags>
</entry>
<entry>
<title>Hexo博客添加看板娘</title>
<url>/posts/22350780-f32d-11ea-bb4a-d3e1cbe3d592/</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><div class="note info">
<p>不知道你们有没有这种体验，就是在逛别人的博客的时候，会在页面左下角或者右下角等界面看到一个会跟随鼠标移动而摇摆的图片动画，看起来还蛮不错，今天就为我的博客添加这样的动画效果 —- 看板娘。</p>
</div>
<h2 id="普通看板娘"><a href="#普通看板娘" class="headerlink" title="普通看板娘"></a>普通看板娘</h2><p>hexo的官方是支持看板娘的，已经封装好了插件，但只是模型，不能说话、不能换装、功能较少。<br>更多详情请查看<a href="https://github.com/EYHN/hexo-helper-live2d">hexo-helper-live2d官网</a></p>
<h3 id="安装插件"><a href="#安装插件" class="headerlink" title="安装插件"></a>安装插件</h3><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install --save hexo-helper-live2d</span><br></pre></td></tr></table></figure>
<h3 id="下载模型"><a href="#下载模型" class="headerlink" title="下载模型"></a>下载模型</h3><p>作者各种模型展示地址：<a href="https://huaji8.top/post/live2d-plugin-2.0/">live2d插件</a>，可选择自己喜欢的模型，然后进行下载安装<br><a href="https://github.com/xiazeyu/live2d-widget-models">模型仓库</a></p>
<ul>
<li>live2d-widget-model-chitose</li>
<li>live2d-widget-model-epsilon2_1</li>
<li>live2d-widget-model-gf</li>
<li>live2d-widget-model-haru/01 (use npm install –save live2d-widget-model-haru)</li>
<li>live2d-widget-model-haru/02 (use npm install –save live2d-widget-model-haru)</li>
<li>live2d-widget-model-haruto</li>
<li>live2d-widget-model-hibiki</li>
<li>live2d-widget-model-hijiki</li>
<li>live2d-widget-model-izumi</li>
<li>live2d-widget-model-koharu</li>
<li>live2d-widget-model-miku</li>
<li>live2d-widget-model-ni-j</li>
<li>live2d-widget-model-nico</li>
<li>live2d-widget-model-nietzsche</li>
<li>live2d-widget-model-nipsilon</li>
<li>live2d-widget-model-nito</li>
<li>live2d-widget-model-shizuku</li>
<li>live2d-widget-model-tororo</li>
<li>live2d-widget-model-tsumiki</li>
<li>live2d-widget-model-unitychan</li>
<li>live2d-widget-model-wanko</li>
<li>live2d-widget-model-z16</li>
</ul>
<p>使用<code>npm install {packagename}</code>进行安装，如：</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install live2d-widget-model-shizuku -S</span><br></pre></td></tr></table></figure>
<h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><p>在站点配置文件<code>_config.yml</code>或者主题配置文件<code>_config.butterfly.yml</code>中新增如下内容：</p>
<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="comment"># Live2D</span></span><br><span class="line"><span class="comment">## https://github.com/EYHN/hexo-helper-live2d</span></span><br><span class="line"><span class="attr">live2d:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># enable: false</span></span><br><span class="line"> <span class="attr">scriptFrom:</span> <span class="string">local</span> <span class="comment"># 默认</span></span><br><span class="line"> <span class="attr">pluginRootPath:</span> <span class="string">live2dw/</span> <span class="comment"># 插件在站点上的根目录(相对路径)</span></span><br><span class="line"> <span class="attr">pluginJsPath:</span> <span class="string">lib/</span> <span class="comment"># 脚本文件相对与插件根目录路径</span></span><br><span class="line"> <span class="attr">pluginModelPath:</span> <span class="string">assets/</span> <span class="comment"># 模型文件相对与插件根目录路径</span></span><br><span class="line"> <span class="comment"># scriptFrom: jsdelivr # jsdelivr CDN</span></span><br><span class="line"> <span class="comment"># scriptFrom: unpkg # unpkg CDN</span></span><br><span class="line"> <span class="comment"># scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url</span></span><br><span class="line"> <span class="attr">tagMode:</span> <span class="literal">false</span> <span class="comment"># 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中</span></span><br><span class="line"> <span class="attr">debug:</span> <span class="literal">false</span> <span class="comment"># 调试, 是否在控制台输出日志</span></span><br><span class="line"> <span class="attr">model:</span></span><br><span class="line"> <span class="attr">use:</span> <span class="string">live2d-widget-model-wanko</span> <span class="comment"># 第二步下载的模型</span></span><br><span class="line"> <span class="comment"># use: wanko # 博客根目录/live2d_models/ 下的目录名</span></span><br><span class="line"> <span class="comment"># use: ./wives/wanko # 相对于博客根目录的路径</span></span><br><span class="line"> <span class="comment"># use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url</span></span><br><span class="line"> <span class="attr">display:</span></span><br><span class="line"> <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line"> <span class="attr">width:</span> <span class="number">150</span></span><br><span class="line"> <span class="attr">height:</span> <span class="number">300</span></span><br><span class="line"> <span class="attr">mobile:</span></span><br><span class="line"> <span class="attr">show:</span> <span class="literal">true</span> <span class="comment"># 手机中是否展示</span></span><br></pre></td></tr></table></figure>
<p><strong>上效果图</strong>：<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/helinghands/cdn/img/live2d-shizuku.gif"></p>
<h2 id="升级看板娘-能说话、能换装"><a href="#升级看板娘-能说话、能换装" class="headerlink" title="升级看板娘(能说话、能换装)"></a>升级看板娘(能说话、能换装)</h2><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><ol>
<li>下载<a href="https://github.com/stevenjoezhang/live2d-widget">live2d文件</a></li>
<li>将下载好的<code>live2d</code>文件解压到<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">首先在/themes/Butterfly/source/下创建live2d-widget目录，</span><br><span class="line">然后将lived2文件解压到 项目根目录/themes/Butterfly/source/live2d-widget</span><br></pre></td></tr></table></figure></li>
<li>更改<code>live2d-widget</code>下的<code>autoload.js</code>文件。里面的内容已经写好了，注释第二行，取消第三行的注释就行了。<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></li>
<li>更改主题配置文件<code>_config.butterfly.yml</code>:<br>由于<code>live2d-widget</code>内部使用了font-awesome，所以我们需要引入<code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"></code><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="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="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"></span></span><br><span class="line"> <span class="string"><script</span> <span class="string">src="/live2d-widget/autoload.js"></script></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></li>
<li>在站点配置文件<code>_config.yml</code>或者Butterfly主题配置文件<code>_config.butterfly.yml</code>中,新增如下内容：<figure class="highlight yml"><table><tr><td class="code"><pre><span class="line"><span class="attr">live2d:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure></li>
<li>然后在项目根目录进行重新三连跪：<figure class="highlight shell"><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>
然后就可以看到效果了。<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/helinghands/cdn/img/live2d-demo.gif"></li>
<li>默认看板娘是在左边，如果想要切换到右边只需要修改<code>根目录/themes/Butterfly/source/live2d-widget/waifu.css</code>:<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-id">#waifu</span> {</span><br><span class="line"> <span class="attribute">bottom</span>: -<span class="number">1000px</span>;</span><br><span class="line"> right: 0; // 这里默认是 left: 0;</span><br><span class="line"> <span class="selector-tag">line-height</span>: 0;</span><br><span class="line"> <span class="selector-tag">margin-bottom</span>: <span class="selector-tag">-10px</span>;</span><br><span class="line"> <span class="selector-tag">position</span>: <span class="selector-tag">fixed</span>;</span><br><span class="line"> <span class="selector-tag">transform</span>: <span class="selector-tag">translateY</span>(3<span class="selector-tag">px</span>);</span><br><span class="line"> <span class="selector-tag">transition</span>: <span class="selector-tag">transform</span> <span class="selector-class">.3s</span> <span class="selector-tag">ease-in-out</span>, <span class="selector-tag">bottom</span> 3<span class="selector-tag">s</span> <span class="selector-tag">ease-in-out</span>;</span><br><span class="line"> <span class="selector-tag">z-index</span>: 1;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#waifu-tool</span> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#aaa</span>;</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> left: 0px; // 这里默认是 right: -10px;</span><br><span class="line"> <span class="selector-tag">top</span>: 70<span class="selector-tag">px</span>;</span><br><span class="line"> <span class="selector-tag">transition</span>: <span class="selector-tag">opacity</span> 1<span class="selector-tag">s</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li>
</ol>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>Hexo</tag>
<tag>live2d</tag>
</tags>
</entry>
<entry>
<title>Butterfly主题安装文档(三)之主题配置2</title>
<url>/posts/3a058e75/</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= "/img/loading.gif" data-lazy-src="https://img-blog.csdnimg.cn/20200901153956590.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">http://www.chenliang0829.cn:8081/upload/202003221513517685885258838558.jpg</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= "/img/loading.gif" data-lazy-src="https://img-blog.csdnimg.cn/20200901154204707.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">http://pic1.win4000.com/wallpaper/2020-08-21/5f3f3d10b054e.jpg</span></span><br></pre></td></tr></table></figure>
<p><img src= "/img/loading.gif" data-lazy-src="https://img-blog.csdnimg.cn/20200901154326878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzY1MzY3,size_16,color_FFFFFF,t_70" alt="主页封面"></p>
<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= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-word-count.png"><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-wordcount-totalcount.png"></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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-laibili.jpg"><br><img src= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-chatra-ui-settings.png"><br><img src= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-tidio-setting.png"><br><img src= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-daovoice-ui.png"><br><img src= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-ad-post.png"><br><img src= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-color_1.png"><br><img src= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-post-beautify.png"><br>开启美化<br><img src= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/snackbar_false.gif"><br>已经开启<br><img src= "/img/loading.gif" data-lazy-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/4ecf4c7a/</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= "/img/loading.gif" data-lazy-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>
<p><img src= "/img/loading.gif" data-lazy-src="https://img-blog.csdnimg.cn/20200828152630240.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>代码块中的所有功能只适用于 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>
<p><strong>default</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-code-default.png"><br><strong>darker</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-code-darker.png"><br><strong>pale night</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-code-pale-night.png"><br><strong>light</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-code-light.png"><br><strong>ocean</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-highlight-ocean.png"><br><strong>mac</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-highlight-mac.png"><br><strong>mac light</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-docs-mac-light.png"></p>
<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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-code-copy.png"></p>
<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></li>
</ul>
<p><strong>highlight_shrink: true</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-highlight-shrink-true.png"><br><strong>highlight_shrink: false</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-highlight-shrink-false.png"><br><strong>highlight_shrink: none</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-docs-highlight-shirk-none.png"></p>
<h2 id="代码换行"><a href="#代码换行" class="headerlink" title="代码换行"></a>代码换行</h2><p>在默认情况下，<code>hexo-highlight</code> 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。<br>修改主题配置文件<code>_config.butterfly.yml</code>：</p>
<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>
<p>然后找到 <code>Hexo</code> 配置文件<code>_config.yml</code>，将 <code>line_number</code> 改成 <code>false</code>:</p>
<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><p>社交图标即主页上个性标签下的各种社交账号关联。</p>
<blockquote>
<p>书写格式：<code>图标名：url || 描述性文字</code></p>
</blockquote>
<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><br>PC端效果展示：<br><img src= "/img/loading.gif" data-lazy-src="https://img-blog.csdnimg.cn/20200828154218519.png"><br>手机端效果展示：<br><img src= "/img/loading.gif" data-lazy-src="https://img-blog.csdnimg.cn/20200828154301188.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>顶部图有 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>
<p><strong>position: both</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-docs-cover-both.png"><br><strong>position: left</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-docs-cover-left.png"><br><strong>position: right</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-docs-cover-right.png"></p>
<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><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-docs-page-meta.png"><br>在文章详情页顶部的资料，<code>date_type</code>: 可设置文章日期显示创建日期 (created) 或者更新日期 (updated) 或者两种都显示 (both)<br><code>categories</code> 是否显示分类<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-post-info.png"><br>tags 是否显示标签<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-post-tag.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">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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-post-copyright.png"></p>
<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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-post-donate.png"></p>
<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>
<p>PC端效果展示：<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-toc-pc.png"><br>手机端效果展示：<br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-toc-mobile.png"><br><strong>number: true</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-toc-true.png"><br><strong>number: false</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-toc-number-false.png"></p>
<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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-docs-releatedpost.png"></p>
<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> 天数之后的文字<br><strong>style: flat</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butteffly-docs-outdate-flat.png"><br><strong>style: simple</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-docs-outdated-simple.png"></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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-avatar.png"></p>
<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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-since.png"></p>
<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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-dark-mode.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">readmode:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-read-mode.png"></p>
<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>
<p><strong>position: left</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-aside-left.png"><br><strong>position: right</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-aside-right.png"><br><strong>card_tags color: false</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/20200426182730.png"><br><strong>card_tags color: false</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/20200426182730.png"><br><strong>card_tags color: true</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/20200426183025.png"></p>
<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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-busuanzi-site-pv.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">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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-doc-runtime.png"></p>
<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>
<p><strong>style: simple</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/20200105232825.png"><br><strong>style: modern</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/20200105233018.png"><br><strong>style: flat</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/20200105233145.png"><br><strong>style: disabled</strong><br><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/20200105233310.png"></p>
<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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-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= "/img/loading.gif" data-lazy-src="https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg"><br><img src= "/img/loading.gif" data-lazy-src="https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg"><br><img src= "/img/loading.gif" data-lazy-src="https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg"><br><img src= "/img/loading.gif" data-lazy-src="https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg"><br><img src= "/img/loading.gif" data-lazy-src="https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg"><br><img src= "/img/loading.gif" data-lazy-src="https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg"><br><img src= "/img/loading.gif" data-lazy-src="https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg"><br><img src= "/img/loading.gif" data-lazy-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>
<p><img src= "/img/loading.gif" data-lazy-src="https://cdn.jsdelivr.net/gh/%E7%99%BE%E5%BA%A6127/CDN/img/hexo-theme-butterfly-docs-mermaid.png"></p>
<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" onclick="scrollToDest($(this).parents('.tabs'),65)"><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" onclick="scrollToDest($(this).parents('.tabs'),65)"><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" onclick="scrollToDest($(this).parents('.tabs'),65)"><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" onclick="scrollToDest($(this).parents('.tabs'),65)"><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" onclick="scrollToDest($(this).parents('.tabs'),65)"><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" onclick="scrollToDest($(this).parents('.tabs'),65)"><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>Butterfly主题安装文档(一)之快速开始</title>
<url>/posts/e4f3f4aa/</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" onclick="scrollToDest($(this).parents('.tabs'),65)"><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" onclick="scrollToDest($(this).parents('.tabs'),65)"><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><code>class_name</code> 和 <code>class_desc</code> 支持 <code>html</code> 格式书写，如不需要，也可以留空。<br>友情链接界面也可以由用户自己自定义，只需要在友情链接的 md 档设置就行，以普通的 Markdown 格式书写。<br>浏览器地址栏输入：<code>http://localhost:4000/link/</code>就可会出现如下效果<br><img src= "/img/loading.gif" data-lazy-src="https://img-blog.csdnimg.cn/20200828143801138.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>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= "/img/loading.gif" data-lazy-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搭建个人博客之环境搭建</title>
<url>/posts/22350780-f32d-11ea-bb4a-d3e1cbe3d593/</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="Hexo"><a href="#Hexo" class="headerlink" title="Hexo"></a>Hexo</h1><p><a href="https://hexo.io/zh-cn/docs/configuration">Hexo官网</a></p>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p><strong>全局安装</strong></p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install -g hexo</span><br></pre></td></tr></table></figure>
<p><strong>局部安装</strong></p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install hexo</span><br></pre></td></tr></table></figure>
<h2 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h2><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo init blog(项目名称)</span><br></pre></td></tr></table></figure>
<p>然后进入到 blog 文件件</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">cd blog</span><br></pre></td></tr></table></figure>
<p>安装依赖</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure>
<h2 id="运行项目"><a href="#运行项目" class="headerlink" title="运行项目"></a>运行项目</h2><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo server # 简写：hexo s</span><br></pre></td></tr></table></figure>
<p>在浏览器地址栏输入：<code>localhost:4000</code>就会出现如下界面：<br><img src= "/img/loading.gif" data-lazy-src="https://img-blog.csdnimg.cn/20200827153051909.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzY1MzY3,size_16,color_FFFFFF,t_70"></p>
<h2 id="命令详解"><a href="#命令详解" class="headerlink" title="命令详解"></a>命令详解</h2><h3 id="init"><a href="#init" class="headerlink" title="init"></a>init</h3><p>新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo init [folder]</span><br></pre></td></tr></table></figure>
<h3 id="new"><a href="#new" class="headerlink" title="new"></a>new</h3><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo new [layout] <title></span><br></pre></td></tr></table></figure>
<p>layout: <模板>在scaffolds中，默认情况下有三个模板post、draft、page</p>
<table>
<thead>
<tr>
<th align="center">参数</th>
<th align="center">功能</th>
<th align="center">路径</th>
</tr>
</thead>
<tbody><tr>
<td align="center">post</td>
<td align="center">新建文章</td>
<td align="center">/source/_posts/</td>
</tr>
<tr>
<td align="center">draft</td>
<td align="center">新建草稿</td>
<td align="center">/source/_drafts/</td>
</tr>
<tr>
<td align="center">page</td>
<td align="center">新建页面（标签页，分类页等）</td>
<td align="center">/source/</td>
</tr>
</tbody></table>
<p><strong>新建article文章：</strong></p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo new post article</span><br></pre></td></tr></table></figure>
<p>此时在<code>/source/_posts</code>文件夹中多了一个article.md文件。打开内容如下：<br><img src= "/img/loading.gif" data-lazy-src="https://img-blog.csdnimg.cn/20200827154605521.png"><br>可以通过<code>http://localhost:8081/2020/08/27/article/</code>查看页面<br><strong>新建页面：</strong></p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo new page article</span><br></pre></td></tr></table></figure>
<p>此时在<code>/source/</code>文件夹下多了一个<code>article</code>文件夹，并且其下还有一个默认<code>index.md</code>文件<br>可以通过<code>http://localhost:8081/article/</code>查看页面</p>
<h3 id="generate"><a href="#generate" class="headerlink" title="generate"></a>generate</h3><p>生成静态文件</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo generate # 或者简写 hexo g</span><br></pre></td></tr></table></figure>
<h3 id="publish"><a href="#publish" class="headerlink" title="publish"></a>publish</h3><p>发布草稿</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo publish [layout] <filename></span><br></pre></td></tr></table></figure>
<h3 id="server"><a href="#server" class="headerlink" title="server"></a>server</h3><p>启动服务器，默认情况下，访问网址为： <a href="http://localhost:4000/%E3%80%82">http://localhost:4000/。</a></p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo server # 或者简写 hexo s</span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th align="center">选项</th>
<th align="center">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="center">-p, –port</td>
<td align="center">重设端口</td>
</tr>
<tr>
<td align="center">-s, –static</td>
<td align="center">只使用静态文件</td>
</tr>
<tr>
<td align="center">-l, –log</td>
<td align="center">启动日记记录，使用覆盖记录格式</td>
</tr>
</tbody></table>
<p>如何：重设启动端口<br><strong>方法一：</strong></p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo s -p 8081</span><br></pre></td></tr></table></figure>
<p><strong>方法二：</strong><br>找到<code>node_modules\hexo-server\index.js</code>文件，可以修改默认的port值！</p>
<h3 id="deploy"><a href="#deploy" class="headerlink" title="deploy"></a>deploy</h3><p>部署网站。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo deploy # 或者简写 hexo d</span><br></pre></td></tr></table></figure>
<h3 id="render"><a href="#render" class="headerlink" title="render"></a>render</h3><p>渲染文件。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo render <file1> [file2] ...</span><br></pre></td></tr></table></figure>
<h3 id="clean"><a href="#clean" class="headerlink" title="clean"></a>clean</h3><p>清除缓存文件 (db.json) 和已生成的静态文件 (public)。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo clean</span><br></pre></td></tr></table></figure>
<h3 id="list"><a href="#list" class="headerlink" title="list"></a>list</h3><p>列出网站资料。</p>
<figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">hexo list <type></span><br></pre></td></tr></table></figure>
<p>更多命令查看：<a href="https://hexo.io/zh-cn/docs/commands">https://hexo.io/zh-cn/docs/commands</a></p>
<h2 id="Front-matter"><a href="#Front-matter" class="headerlink" title="Front-matter"></a>Front-matter</h2><p>Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量，举例来说：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: Hello World</span><br><span class="line">date: 2013/7/13 20:46:25</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<p>以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。</p>
<table>
<thead>
<tr>
<th align="center">参数</th>
<th align="center">描述</th>
<th align="center">默认值</th>
</tr>
</thead>
<tbody><tr>
<td align="center">layout</td>
<td align="center">布局</td>
<td align="center">:–:</td>
</tr>
<tr>
<td align="center">title</td>
<td align="center">标题</td>
<td align="center">文章的文件名</td>
</tr>
<tr>
<td align="center">date</td>
<td align="center">建立日期</td>
<td align="center">文件建立日期</td>
</tr>
<tr>
<td align="center">updated</td>
<td align="center">更新日期</td>
<td align="center">文件更新日期</td>
</tr>
<tr>
<td align="center">comments</td>
<td align="center">开启文章的评论功能</td>
<td align="center">true</td>
</tr>
<tr>
<td align="center">tags</td>
<td align="center">标签（不适用于分页）</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">categories</td>
<td align="center">分类（不适用于分页）</td>
<td align="center"></td>
</tr>
<tr>
<td align="center">permalink</td>
<td align="center">覆盖文章网址</td>
<td align="center"></td>
</tr>
</tbody></table>
<h3 id="分类和标签"><a href="#分类和标签" class="headerlink" title="分类和标签"></a>分类和标签</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">categories:</span><br><span class="line"> - web前端</span><br><span class="line">tags:</span><br><span class="line"> - HTML</span><br><span class="line"> - CSS</span><br></pre></td></tr></table></figure>
<p>如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">categories:</span><br><span class="line">- [Diary, PlayStation]</span><br><span class="line">- [Diary, Games]</span><br><span class="line">- [Life]</span><br></pre></td></tr></table></figure>
<p>此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。<br>更多请查看官网：<a href="https://hexo.io/zh-cn/docs/front-matter">https://hexo.io/zh-cn/docs/front-matter</a></p>
]]></content>
<categories>
<category>博客搭建</category>
</categories>
<tags>
<tag>hexo</tag>
<tag>npm</tag>
</tags>
</entry>
</search>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
