<?xml version="1.0" encoding="utf-8"?>
<search> 
  
  
    
    <entry>
      <title>10分钟2700w请求的攻击我是如何处理的</title>
      <link href="/posts/dfb3.html"/>
      <url>/posts/dfb3.html</url>
      
        <content type="html"><![CDATA[<p>昨天2023年7月16日，本站遇到了搭建博客以来最大的攻击，10分钟2700w的请求🙏，峰值达到了令人震惊的1400w！</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/16/64b374b85aef1.webp!blogimg"></p><p>从时间上来看，<code>18:40</code>到<code>18:50</code>，短短10分钟，几乎是一瞬间就被请求了https数2000万次，多吉云在<code>20:00</code>给我发送了请求数激增到<code>2000w</code>的短信</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/16/64b375bb765c8.webp!blogimg"></p><p>我立马反应过来，登录控制台一看，哦豁，由于之前换了域名，还没来的及设置<code>QPS 限制</code>，于是就被钻空子了</p><h2 id="什么是QPS-限制？"><a href="#什么是QPS-限制？" class="headerlink" title="什么是QPS 限制？"></a>什么是QPS 限制？</h2><p>超出 QPS 限制的请求会直接返回错误，设置较低频次限制可能会影响正常用户的使用，请根据业务情况合理设置阈值。<br>被 QPS 限制拦截的请求不会产生 HTTPS 请求数计费。但需要特别注意的是，当请求被“域名防盗链”规则优先拦截后，无论是否超过 QPS 限制，都将进行 HTTPS 请求数计费。</p><p>比如我设置为<code>120次/s</code>，那么一个ip在1s内只能请求当前域名120次，将QPS设置在一个合理的范围内将能够很大程度上的保护你的站点，设置过低将降低正常用户的访问。</p><h2 id="日志查看"><a href="#日志查看" class="headerlink" title="日志查看"></a>日志查看</h2><p>设置好QPS以后，我痛定思痛，将多吉云提供的将近3G的日志下载了下来</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/16/64b3ec3092400.png!blogimg"></p><p>下载下来vscode打开一看，好家伙，上百万行数据，随便搜索了一下，无一例外，全是国外ip</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/16/64b3ed84d0e1f.png!blogimg"></p><h2 id="痛定思痛"><a href="#痛定思痛" class="headerlink" title="痛定思痛"></a>痛定思痛</h2><p>首先一定要设置好QPS和每日上限，我目前每日上限设置为5G，QPS为20&#x2F;s</p><p>经过仔细观察可以发现，几乎所有的攻击都来自海外，所以我们需要屏蔽海外的流量，首先<code>Nginx防火墙</code>，从Nginx下手其实并不是最优解，因为即便是在Nginx将所有的海外ip都封禁了，但是由于我有使用CDN，也就是说，流量还是会<code>先经过CDN</code>再来到<code>Nginx防火墙</code>，依然被刷掉了CDN的https次数，所以我们应该另外寻找办法</p><p>首先我们可以想到在机房层面屏蔽海外ip和udp，这是最优解，但是总是调整或者经常联系机房对我这个社恐来说是不现实的，于是我看上了第二种办法。</p><p>那就是从解析层面处理，使用<a href="https://www.dnspod.cn/">DNSPod</a>解析是支持境内与境内分开解析的，将境内解析到国内CDN以后，再将境外解析到127.0.0.1即可解决问题。</p><p>但是解析到127.0.0.1以后使用境外ip是完全打不开了，所以我做了一个单页面用来提示境外访问使用境内网络环境访问。</p><p>项目地址: <a href="https://github.com/anzhiyu-c/OverseasProhibition">https://github.com/anzhiyu-c/OverseasProhibition</a></p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/16/64b3f1de49bf3.webp"></p><p>然后使用cname这个单页网站解析到vercel</p><p>直接在vercl导入github项目后绑定自定义域名</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/16/64b3f26ad541c.webp!blogimg"></p><p>至此算是做了我能想到的所有努力，欢迎大家补充。</p>]]></content>
      
      
      <categories>
          
          <category> 网络安全 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 博客 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>通义万相上手体验</title>
      <link href="/posts/2594.html"/>
      <url>/posts/2594.html</url>
      
        <content type="html"><![CDATA[<p>前两天通过了<a href="https://wanxiang.aliyun.com/">通义万相</a>的适用体验，一番试用下来，感触最深的便是，当今AI横行，唯有融入并去接受他们才能适应时代。</p><p>在我的使用场景下，一般是生成封面图，或者一些唯美超现实主义的图片，相比<code>midjourney</code>绘制的图，二者对我而言<strong>都一样</strong>。因为二者都能达到我的使用要求。</p><h2 id="通义万相"><a href="#通义万相" class="headerlink" title="通义万相"></a>通义万相</h2><p>作为阿里推出的一款大模型AI绘画，每日免费使用50次，一般的用户基本都能满足，这点让我极其舒适，也就不必再去续费<code>midjourney</code>了（偷笑😏），能够使用中文绘制。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/09/64aa54516b47d.webp!blogimg"></p><p>可选的绘制比例有<code>1:1</code>,<code>16:9</code>,<code>9:16</code></p><p>绘制时间一般在<code>1分钟以内</code>，算是比较快的了，可能和描述的多少有关。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/09/64aa545164658.webp!blogimg"></p><p>有时候它也会无法绘制（会返还灵感值），猜测使用英文绘制会更好，也许中文支持并没有那么高。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/09/64aa54516ffe4.webp!blogimg"></p><p>绘制后会产生4张图片，也能够继续选择风格继续生成。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/09/64aa54518f442.webp!blogimg"></p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>总而言之，能用，但是如果抱有很高的期待估计不行，国产AI，任重道远。</p><blockquote><p>以下评价由chatGPT生成<br>  通义万相，是一个奇妙而令人陶醉的体验。当你进入这个神奇的场所时，你将被环绕在美学与艺术的氛围中，仿佛穿越到了一个超现实的世界。<br>  在通义万相中，每一个细节都充满了独特的魅力。你会发现自己被无尽的创意和惊喜所包围，每一步都带来一种新奇的体验。这里是一个融合了音乐、视觉艺术和互动装置的综合体，它将唤起你内心深处的感官共鸣。<br>  当你触摸艺术品的时候，你会感受到一种奇妙的交互体验。声音和图像交织在一起，创造出一种前所未有的感官盛宴。每一次呼吸、每一次动作都会与艺术融为一体，让你感受到无比的连结和共振。<br>  通义万相是一个无边界的创意空间，它鼓励你尽情释放内心的想象力。你可以探索各种艺术形式，沉浸在色彩斑斓的光影中，感受音乐的魅力，与装置艺术互动。这里没有束缚，只有自由和无限的可能性。<br>  在通义万相中，你将发现自己重新与内心对话，发现被埋藏的感官和情感。这是一个让你逃离现实束缚、融入艺术的仙境。在这里，时间似乎慢下来，你可以尽情感受每一刻的美好，让自己沉浸在艺术的海洋中。<br>  通义万相的体验感受难以言喻，因为它触及了我们深藏的灵魂。它让我们重新审视世界，从不同的角度看待生活。在这里，你会被艺术的魔力所吸引，被创造力的火花所点燃，成为那个不受拘束的自己。<br>  加入通义万相，让自己沉浸在艺术的世界中，感受创造力的奇迹。这将是一次前所未有的体验，让你的心灵得到滋养，灵感得以释放，并在美与想象的交汇处找到真正的自我。来吧，让我们一起探索通义万相，开启一段令人难忘的艺术之旅。</p></blockquote>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> AI </tag>
            
            <tag> 绘图 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>html 属性Accesskey详细解析</title>
      <link href="/posts/e140.html"/>
      <url>/posts/e140.html</url>
      
        <content type="html"><![CDATA[<p><code>accesskey</code>是一个在国内很冷门的属性，一般只有做无障碍才需要使用到它，目前我发现的国内网站有使用的一个是<a href="https://www.taobao.com/">淘宝</a>，另一个是<a href="https://www.jd.com/">京东</a>，此处点名表扬👍，现在也有越来越多的网站在使用这个属性，并且国内的很多网站都开始支持起了无障碍，目前 微博，京东，淘宝等都支持无障碍通道模式。</p><p>我们来仔细看看京东和淘宝是怎么做的，不难发现它们都是在同一个地方使用了这个属性，那就是搜索🔍!</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="3">    <span class="gallery-data">[{"url":"https://img02.anheyu.com/adminuploads/1/2023/07/01/64a01fd29c767.webp!blogimg","alt":""},{"url":"https://img02.anheyu.com/adminuploads/1/2023/07/01/64a020547c995.webp!blogimg","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><h2 id="简介ℹ️"><a href="#简介ℹ️" class="headerlink" title="简介ℹ️"></a>简介ℹ️</h2><p>在HTML4.0.1的时候，HTML accesskey属性请可以作用在以下元素上：<code>&lt;a&gt;</code>, <code>&lt;area&gt;</code>, <code>&lt;button&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;label&gt;</code>, <code>&lt;legend&gt;</code>以及<code>&lt;textarea&gt;</code>元素。然后到了HTML5规范的时候，<code>accesskey</code>属性可以作用在任意的元素上，变成了“全局属性”，但是由于它糟糕的浏览器支持⬆️，依然只建议在这些元素上使用。</p><h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">accesskey</span>=<span class="string">&quot;s&quot;</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>自定义快捷访问搜索<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>这里的属性值 <code>s</code> 对应的就是键盘上的<code>字母s</code>，如果是<code>accesskey=&quot;1&quot;</code>则<code>1</code>对应的就是键盘上的<code>数字1</code>。</p><p>需要注意的是，虽然说<code>accesskey</code>属性值和键盘相对应，但并不是说直接按下这个键，就能快捷访问。浏览器是通过快捷键组合访问的形式进行页面元素的快速访问的，下面是一张交互图。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/07/01/64a0231d0059e.png!blogimg"></p><p>MDN文档显示<code>Opera浏览器</code>是：<code>Shift + Esc</code> 打开可访问的快捷键定义列表，此时可以按下对应的 key 进行访问。但是根据自己的测试，<code>Shift + Esc</code> 打开的是浏览器的任务管理器，和<code>Chrome浏览器</code>一致。我想，MDN文档对Opera的描述应该是Opera还没有采用Blink内核之前的行为吧，所以现在应该是和<code>Chrome</code>一致了。</p><p><code>IE浏览器</code>和<code>Chrome浏览器</code>的组合键是一样的，但是其交互行为却和其他浏览器不一样，举个例子：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">accesskey</span>=<span class="string">&quot;s&quot;</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>自定义快捷访问搜索链接<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>在windows操作系统下，按下<kbd>ctrl</kbd> + <kbd>s</kbd>，IE浏览器只是让<code>&lt;a&gt;元素</code>获得焦点，但是其他所有浏览器都是直接触发click行为。在我看来，IE浏览器的这种行为是不友好的，对于普通的控件元素而言，还可以获得焦点后回车访问，但是，对于类似<code>&lt;div&gt;这类元素</code>，<code>accesskey属性</code>几乎是没有任何意义的，因为根本无法通过键盘触发<code>&lt;div&gt;</code>点击行为。而<code>Chrome等浏览器</code>就没有这个问题，如下HTML：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">accesskey</span>=<span class="string">&quot;s&quot;</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>测试自定义快捷访问搜索链接（点我或者使用快捷键可以让我变成红色触发click事件）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>如果你是mac系统，你可以按下<kbd>ctrl</kbd> + <kbd>option</kbd> + <kbd>s</kbd>，上面这段话就会变成红色，win系统可以按下<kbd>alt</kbd> + <kbd>s</kbd></p><h2 id="隐藏的元素能否可以触发accesskey快捷访问？"><a href="#隐藏的元素能否可以触发accesskey快捷访问？" class="headerlink" title="隐藏的元素能否可以触发accesskey快捷访问？"></a>隐藏的元素能否可以触发accesskey快捷访问？</h2><p>一个元素，如果CSS display属性的计算值是none，是无法通过Tab键进行索引聚焦的。那设置的<code>accesskey快捷访问</code>是否可以访问呢？</p><p>根据我的测试，Chrome浏览器和Firefox浏览器是可以的，元素即使隐藏，只要设置了<code>accesskey快捷访问</code>，按下对应组合键的时候就能触发click行为。例如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">accesskey</span>=<span class="string">&quot;s&quot;</span> <span class="attr">hidden</span>&gt;</span>链接<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>在windows操作系统Chrome浏览器下，按下<kbd>Alt</kbd> + <kbd>a</kbd>，页面会直接刷新。<br>在mac操作系统Chrome浏览器下，按下<kbd>ctrl</kbd> + <kbd>option</kbd> + <kbd>a</kbd>，页面会直接刷新。</p><p>包括对于最新的Edge浏览器（IE11）也会被直接刷新！这就很神奇了，我们可以利用这一点做很多事情，嘿嘿</p><h2 id="多个元素使用相同的accesskey属性值会怎样？"><a href="#多个元素使用相同的accesskey属性值会怎样？" class="headerlink" title="多个元素使用相同的accesskey属性值会怎样？"></a>多个元素使用相同的accesskey属性值会怎样？</h2><p>如下测试代码：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">accesskey</span>=<span class="string">&quot;b&quot;</span> <span class="attr">tabindex</span>=<span class="string">&quot;0&quot;</span> <span class="attr">onClick</span>=<span class="string">&quot;this.style.color=&#x27;red&#x27;;&quot;</span>&gt;</span>测试1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">accesskey</span>=<span class="string">&quot;b&quot;</span> <span class="attr">tabindex</span>=<span class="string">&quot;0&quot;</span> <span class="attr">onClick</span>=<span class="string">&quot;this.style.color=&#x27;red&#x27;;&quot;</span>&gt;</span>测试2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>在<code>Chrome浏览器</code>和<code>Edge浏览器(IE11)</code>下，上面一行<div>的accesskey属性设置会被忽略，作用的是后来居上的元素，从此处看来，Edge已经彻底向Chrome靠齐了，前端人振奋！</p><p>但是在<code>Safair浏览器</code>上就是只有第一个测试1会变为红色，下面一行的不会触发。</p><h2 id="糟糕的浏览器支持"><a href="#糟糕的浏览器支持" class="headerlink" title="糟糕的浏览器支持"></a>糟糕的浏览器支持</h2><p>为什么🧐说它是糟糕的浏览器支持呢，首先我们来看看它的支持程度</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="10">    <span class="gallery-data">[{"url":"https://img02.anheyu.com/adminuploads/1/2023/07/01/64a0220ac6038.png!blogimg","alt":""},{"url":"https://img02.anheyu.com/adminuploads/1/2023/07/01/64a0220ac6087.png!blogimg","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><p>从<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/accesskey">mdn</a>查询的和从<a href="https://caniuse.com/?search=accesskey">caniuse</a>查询的都看起来很不错，几乎是在有浏览器存在的时代就已经有了这个属性，说明它从很久很久以前就已经有了，可能比你我的年龄都大，看起来好像不是那么“糟糕”，那么为什么要说它是“糟糕”的呢，原因就是它产生的实在是太早了，导致众多浏览器都不给面子，各家都有自己的想法，实现方式不一样且没有被统一规范，没有统一的实践。</p><p>从上面<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/accesskey">mdn</a>查询的和从<a href="https://caniuse.com/?search=accesskey">caniuse</a>看到的交互图我们可以发现，每个浏览器与平台系统都有自己的看法，谁也不服谁🫤，这使得开发者无所适从，需要适配去尝试每一个浏览器是一件很麻烦的事情，所以它是糟糕的浏览器支持。</p><h2 id="是否要使用"><a href="#是否要使用" class="headerlink" title="是否要使用?"></a>是否要使用?</h2><p>当然要用啊！简简单单加一个HTML属性，又不要你做任何其他多余的事情，就可以让浏览器支持快捷访问，举手之劳，何乐而不为呢？几乎所有的网站都有导航，导航都是公用的，是不是可以从<code>accesskey=&quot;s&quot;</code>开始依次设置下；很多网站都有搜索功能，是不是可以像京东一样，在<code>&lt;input&gt;</code>输入框HTML上设置<code>accesskey=&quot;/&quot;</code>。如果大家都这么设置和处理，久而久之，就会形成约定俗成的行业规范标准，对用户而言其实非常好的一件事情。就好像回车支持表单提交一样的，一旦大家都这么做了，用户就很容易形成习惯，一种更方便快捷高效访问使用网站的习惯，此时如果你的网站不支持，对于多年浸染网络的用户就觉得你这个网站体验做的不好。</p><h2 id="使用后存在的问题"><a href="#使用后存在的问题" class="headerlink" title="使用后存在的问题"></a>使用后存在的问题</h2><p>理想虽美好，但若想真正实现还比较难，原因就在于：</p><ol><li>首先组合键访问的方式还是比较啰嗦的，尤其Firefox以及Mac OS X系统下，要同时按下3个键才行，有这么多找键按键的时间，我鼠标早就点过去了；</li><li>其次，用户如何知道你的网站做了快捷键支持呢？</li><li><code>accesskey 值</code>可能与系统或浏览器键盘快捷键或辅助技术功能相冲突。对于一个操作系统来说，辅助技术和浏览器组合可能无法与其他操作系统协同工作。</li><li>某些 <code>accesskey 值</code>可能不会出现在某些键盘上，特别是在国际化是一个问题的时候。</li></ol><h2 id="如何安全并优雅的使用"><a href="#如何安全并优雅的使用" class="headerlink" title="如何安全并优雅的使用"></a>如何安全并优雅的使用</h2><p>说实话，没有什么好的解决办法，目前我找到的解决办法有以下两种，本站均已使用。</p><ol><li>尽量少的使用<code>accesskey</code>，仅仅在公共且重要的位置给予使用</li><li>使用javascrpt增强<code>accesskey</code>，增强它的表现能力，主要增强点为<code>浏览器兼容</code>,<code>快捷键提醒</code>,<code>快速触发聚焦</code></li></ol><p>完成这两点以后，就可以像本站一样</p><p>按下<kbd>shift</kbd> + <kbd>?</kbd> 查看accesskey快捷键</p><p>直接按下<kbd>s</kbd> 然后回车，就可以搜索🔍，直接按下<kbd>h</kbd> 然后回车，就可以回到首页。</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 开发 </tag>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>全新卡片式外链标签引入</title>
      <link href="/posts/39a9.html"/>
      <url>/posts/39a9.html</url>
      
        <content type="html"><![CDATA[<h2 id="携带跳转链接的卡片"><a href="#携带跳转链接的卡片" class="headerlink" title="携带跳转链接的卡片"></a>携带跳转链接的卡片</h2><figure class="highlight md"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% intCard link img tip cardTitle logo title subTitle %&#125;</span><br></pre></td></tr></table></figure><p>必填项<code>link</code>，<code>img</code>，<code>tip</code></p>    <div class="introduction-card" style="">      <div class="introduction-card-top" style="">        <div class="int-card-info">          <div class="int-tip">新品主题</div>          <div class="int-cardTitle">全新简洁apple风格卡片主题</div>        </div>        <img src="https://img02.anheyu.com/adminuploads/1/2023/03/27/64215d46a1ca6.webp" class="no-lightbox"/>      </div>            <div class="introduction-card-bottom">        <div class="left">          <img src="/img/512.png" class="no-lightbox"/>          <div class="info">            <div class="title">安知鱼主题</div>            <div class="subTitle">生活明朗，万物可爱</div>          </div>        </div>        <div class="right">          <a href="https://blog.anheyu.com/" tableindex="-1" class="no-text-decoration">前往</a>        </div>      </div>        </div>  <h2 id="不携带跳转链接的卡片"><a href="#不携带跳转链接的卡片" class="headerlink" title="不携带跳转链接的卡片"></a>不携带跳转链接的卡片</h2><p>不填写<code>logo</code> <code>title</code> <code>subTitle</code></p>    <div class="introduction-card" style="height: 416px;">      <div class="introduction-card-top" style="height: 100%;border-radius:15px;">        <div class="int-card-info">          <div class="int-tip">新品主题</div>          <div class="int-cardTitle">全新简洁apple风格卡片主题</div>        </div>        <img src="https://img02.anheyu.com/adminuploads/1/2023/03/27/64215d46a1ca6.webp" class="no-lightbox"/>      </div>          </div>  ]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> 教程 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>音乐meting自建api</title>
      <link href="/posts/a76e.html"/>
      <url>/posts/a76e.html</url>
      
        <content type="html"><![CDATA[<p>不少小伙伴发现最近安知鱼主题的音乐胶囊配置无效或者音乐馆没有界面出来，原因其实是因为官方的meting api因为某种原因挂掉了。<br>既然知道了问题所在，就很好解决了，<a href="https://blog.anheyu.com/docs/">安知鱼主题</a>的配置文件CDN选项自带有<code>meting_api</code>配置，我们可以自己搭建meting api以提高访问性和稳定性，或者使用其他人提供出来的免费API，只不过稳定性可能会没有那么高。</p><h2 id="自建API"><a href="#自建API" class="headerlink" title="自建API"></a>自建API</h2><p>项目地址<a href="https://github.com/injahow/meting-api">meting-api</a></p><p>部署方式此处提供宝塔部署方法，新建一个站点，然后将项目代码下载下来，<code>上传到站点目录</code>并<code>解压</code></p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/06/08/648191697446e.png!blogimg"><br><img src="https://img02.anheyu.com/adminuploads/1/2023/06/08/6481916ee374e.png!blogimg"></p><p>然后在当前目录执行命令安装依赖</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">composer install</span><br></pre></td></tr></table></figure><p>在根目录会有<code>index.php</code>，可以在这里调整参数设置API路径缓存及时间等等，详细见原项目README.md，博主全默认配置，注意配置完后可能会存在跨域的情况，可以修改<code>index.php</code>前面加上允许跨站的两行代码，修复这个情况，虽然本来就有这个，但是不知道为什么写在后面就会跨域，写在前面就不会再有这种情况了。</p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?php</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 允许跨站</span></span><br><span class="line"><span class="title function_ invoke__">header</span>(<span class="string">&#x27;Access-Control-Allow-Origin: *&#x27;</span>);</span><br><span class="line"><span class="title function_ invoke__">header</span>(<span class="string">&#x27;Access-Control-Allow-Methods: GET&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置API路径</span></span><br><span class="line"><span class="title function_ invoke__">define</span>(<span class="string">&#x27;API_URI&#x27;</span>, <span class="title function_ invoke__">api_uri</span>());</span><br><span class="line"><span class="comment">// 设置中文歌词</span></span><br><span class="line"><span class="title function_ invoke__">define</span>(<span class="string">&#x27;TLYRIC&#x27;</span>, <span class="literal">true</span>);</span><br><span class="line"><span class="comment">// 设置歌单文件缓存及时间</span></span><br><span class="line"><span class="title function_ invoke__">define</span>(<span class="string">&#x27;CACHE&#x27;</span>, <span class="literal">true</span>);</span><br><span class="line"><span class="title function_ invoke__">define</span>(<span class="string">&#x27;CACHE_TIME&#x27;</span>, <span class="number">86400</span>);</span><br><span class="line"><span class="comment">// 设置短期缓存-需要安装apcu</span></span><br><span class="line"><span class="title function_ invoke__">define</span>(<span class="string">&#x27;APCU_CACHE&#x27;</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure><p>当你出现这个则代表部署成功</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/06/08/648194353dca8.png!blogimg"></p><p>如果你是<a href="https://blog.anheyu.com/docs/">安知鱼主题</a>，你只需要在主题配置文件的最下方修改<code>CDN.option.meting_api</code></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">meting_api:</span> <span class="string">https://meting.qjqq.cn/?server=:server&amp;type=:type&amp;id=:id&amp;auth=:auth&amp;r=:r</span></span><br></pre></td></tr></table></figure><p><img src="https://img02.anheyu.com/adminuploads/1/2023/06/08/648194ac69b4f.webp!blogimg"></p><h2 id="进阶"><a href="#进阶" class="headerlink" title="进阶"></a>进阶</h2><p>自建API以后会发现提供的cover图非常小只有<code>120*120</code>，导致在音乐馆页面的封面图很模糊，可以通过修改<code>src/Meting.php</code>的<code>824行左右</code>代码，将所有调用<code>pic方法</code>的<code>$size</code>都变成<code>300*300</code></p><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="function"><span class="keyword">function</span> <span class="title">pic</span>(<span class="params"><span class="variable">$id</span>, <span class="variable">$size</span> = <span class="number">300</span></span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="keyword">switch</span> (<span class="variable language_">$this</span>-&gt;server) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;netease&#x27;</span>:</span><br><span class="line">        <span class="variable">$size</span> = <span class="number">300</span>;</span><br><span class="line">        <span class="variable">$url</span> = <span class="string">&#x27;https://p3.music.126.net/&#x27;</span>.<span class="variable language_">$this</span>-&gt;<span class="title function_ invoke__">netease_encryptId</span>(<span class="variable">$id</span>).<span class="string">&#x27;/&#x27;</span>.<span class="variable">$id</span>.<span class="string">&#x27;.jpg?param=&#x27;</span>.<span class="variable">$size</span>.<span class="string">&#x27;y&#x27;</span>.<span class="variable">$size</span>;</span><br><span class="line">        <span class="keyword">break</span>;</span><br></pre></td></tr></table></figure><p>弊端就是图片会变大一点点，各有取舍。</p><h2 id="开放API"><a href="#开放API" class="headerlink" title="开放API"></a>开放API</h2><p>在官方的meting api挂掉以后涌现了一大批优秀的公益api</p><ul><li><code>https://api.injahow.cn/meting/</code></li><li><code>https://meting.qjqq.cn/</code></li></ul><p>在安知鱼主题中只需在<code>CDN.option.meting_api</code> 填入下面中的任何一个即可</p><ul><li><code>https://api.injahow.cn/meting/?server=:server&amp;type=:type&amp;id=:id&amp;auth=:auth&amp;r=:r</code></li><li><code>https://meting.qjqq.cn/?server=:server&amp;type=:type&amp;id=:id&amp;auth=:auth&amp;r=:r</code></li></ul>]]></content>
      
      
      
        <tags>
            
            <tag> 教程 </tag>
            
            <tag> 音乐 </tag>
            
            <tag> meting </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>安知鱼主题标签 Tag Plugins</title>
      <link href="/posts/d50a.html"/>
      <url>/posts/d50a.html</url>
      
        <content type="html"><![CDATA[<div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p><code>AnZhiYu主题</code>中大部分标签移植于<a href="https://akilar.top/">店长</a>的<a href="https://www.npmjs.com/package/hexo-butterfly-tag-plugins-plus">hexo-butterfly-tag-plugins-plus</a>，转载请注明来自<a href="https://blog.anheyu.com/posts/d50a.html">安知鱼</a></p></div><h2 id="段落文本-p"><a href="#段落文本-p" class="headerlink" title="段落文本 p"></a>段落文本 p</h2><div class="tabs" id="p"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#p-1">标签语法</button></li><li class="tab"><button type="button" data-href="#p-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#p-3">样式预览</button></li><li class="tab"><button type="button" data-href="#p-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="p-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% p 样式参数(参数以空格划分), 文本内容 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="p-2"><ol><li>字体: logo, code</li><li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li><li>大小: small, h4, h3, h2, h1, large, huge, ultra</li><li>对齐方向: left, center, right</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="p-3"><ul><li>彩色文字<br>在一段话中方便插入各种颜色的标签，包括：<p class='p red'>红色</p>、<p class='p yellow'>黄色</p>、<p class='p green'>绿色</p>、<p class='p cyan'>青色</p>、<p class='p blue'>蓝色</p>、<p class='p gray'>灰色</p>。</li><li>超大号文字<br>文档「开始」页面中的标题部分就是超大号文字。<p class='p center logo large'>Volantis</p><p class='p center small'>A Wonderful Theme for Hexo</p></li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="p-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">  在一段话中方便插入各种颜色的标签，包括：&#123;% p red, 红色 %&#125;、&#123;% p yellow, 黄色 %&#125;、&#123;% p green, 绿色 %&#125;、&#123;% p cyan, 青色 %&#125;、&#123;% p blue, 蓝色 %&#125;、&#123;% p gray, 灰色 %&#125;。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">  文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">  &#123;% p center logo large, Volantis %&#125;</span><br><span class="line">  &#123;% p center small, A Wonderful Theme for Hexo %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="行内文本-span"><a href="#行内文本-span" class="headerlink" title="行内文本 span"></a>行内文本 span</h2><div class="tabs" id="span"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#span-1">标签语法</button></li><li class="tab"><button type="button" data-href="#span-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#span-3">样式预览</button></li><li class="tab"><button type="button" data-href="#span-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="span-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% span 样式参数(参数以空格划分), 文本内容 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="span-2"><ol><li>字体: logo, code</li><li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li><li>大小: small, h4, h3, h2, h1, large, huge, ultra</li><li>对齐方向: left, center, right</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="span-3"><ul><li>彩色文字<br>在一段话中方便插入各种颜色的标签，包括：<span class='p red'>红色</span>、<span class='p yellow'>黄色</span>、<span class='p green'>绿色</span>、<span class='p cyan'>青色</span>、<span class='p blue'>蓝色</span>、<span class='p gray'>灰色</span>。</li><li>超大号文字<br>文档「开始」页面中的标题部分就是超大号文字。<br><span class='p center logo large'>Volantis</span><br><span class='p center small'>A Wonderful Theme for Hexo</span></li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="span-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">  在一段话中方便插入各种颜色的标签，包括：&#123;% span red, 红色 %&#125;、&#123;% span yellow, 黄色 %&#125;、&#123;% span green, 绿色 %&#125;、&#123;% span cyan, 青色 %&#125;、&#123;% span blue, 蓝色 %&#125;、&#123;% span gray, 灰色 %&#125;。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">  文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">  &#123;% span center logo large, Volantis %&#125;</span><br><span class="line">  &#123;% span center small, A Wonderful Theme for Hexo %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="行内文本样式-text"><a href="#行内文本样式-text" class="headerlink" title="行内文本样式 text"></a>行内文本样式 text</h2><div class="tabs" id="text"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#text-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#text-2">样式预览</button></li><li class="tab"><button type="button" data-href="#text-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="text-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;% u 文本内容 %&#125;</span><br><span class="line">&#123;% emp 文本内容 %&#125;</span><br><span class="line">&#123;% wavy 文本内容 %&#125;</span><br><span class="line">&#123;% del 文本内容 %&#125;</span><br><span class="line">&#123;% kbd 文本内容 %&#125;</span><br><span class="line">&#123;% psw 文本内容 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="text-2"><ol><li>带 <u>下划线</u> 的文本</li><li>带 <emp>着重号</emp> 的文本</li><li>带 <wavy>波浪线</wavy> 的文本</li><li>带 <del>删除线</del> 的文本</li><li>键盘样式的文本 <kbd>command</kbd> + <kbd>D</kbd></li><li>密码样式的文本：<psw>这里没有验证码</psw></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="text-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 带 &#123;% u 下划线 %&#125; 的文本</span><br><span class="line"><span class="bullet">2.</span> 带 &#123;% emp 着重号 %&#125; 的文本</span><br><span class="line"><span class="bullet">3.</span> 带 &#123;% wavy 波浪线 %&#125; 的文本</span><br><span class="line"><span class="bullet">4.</span> 带 &#123;% del 删除线 %&#125; 的文本</span><br><span class="line"><span class="bullet">5.</span> 键盘样式的文本 &#123;% kbd command %&#125; + &#123;% kbd D %&#125;</span><br><span class="line"><span class="bullet">6.</span> 密码样式的文本：&#123;% psw 这里没有验证码 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="分栏-tab"><a href="#分栏-tab" class="headerlink" title="分栏 tab"></a>分栏 tab</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>分栏支持内置阿里图标，如果开启了 <code>fontawesome</code>可以使用 fontawesome 的图标，否则只能使用默内置阿里图标</p></div><div class="tabs" id="folding"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#folding-1">标签语法</button></li><li class="tab"><button type="button" data-href="#folding-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#folding-3">样式预览</button></li><li class="tab"><button type="button" data-href="#folding-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="folding-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs Unique name, [index] %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab [Tab caption] [@icon] --&gt;</span><br><span class="line"></span><br><span class="line">Any content (support inline tags too).</span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="folding-2"><ol><li>Unique name :<ul><li>选项卡块标签的唯一名称，不带逗号。</li><li>将在#id 中用作每个标签及其索引号的前缀。</li><li>如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。</li><li>仅当前帖子&#x2F;页面的 URL 必须是唯一的！</li></ul></li><li>[index]:<ul><li>活动选项卡的索引号。</li><li>如果未指定，将选择第一个标签（1）。</li><li>如果 index 为-1，则不会选择任何选项卡。</li><li>可选参数。</li></ul></li><li>[Tab caption]:<ul><li>当前选项卡的标题。</li><li>如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。</li><li>如果未指定标题，但指定了图标，则标题将为空。</li><li>可选参数。</li></ul></li><li>[@icon]: - FontAwesome 图标名称（全名，看起来像“ fas fa-font”） - 可以指定带空格或不带空格； - 例如’Tab caption @icon’ 和 ‘Tab caption@icon’. - 可选参数。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="folding-3"><div class="note primary flat"><p>Demo 1 - 预设选择第一个【默认】</p></div><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" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-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" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-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" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><div class="note primary flat"><p>Demo 2 - 预设选择 tabs</p></div><div class="tabs" id="test2"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#test2-1">test2 1</button></li><li class="tab"><button type="button" data-href="#test2-2">test2 2</button></li><li class="tab active"><button type="button" data-href="#test2-3">test2 3</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="test2-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test2-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="test2-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><div class="note primary flat"><p>Demo 3 - 没有预设值</p></div><div class="tabs" id="test3"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#test3-1">test3 1</button></li><li class="tab"><button type="button" data-href="#test3-2">test3 2</button></li><li class="tab"><button type="button" data-href="#test3-3">test3 3</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="test3-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test3-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test3-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><div class="note primary flat"><p>Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名</p></div><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="anzhiyufont anzhiyu-icon-oranges" style="text-align: center;"></i></button></li><li class="tab"><button type="button" data-href="#test4-3"><i class="anzhiyufont anzhiyu-icon-oranges"></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" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-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" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-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" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="folding-4"><div class="note primary flat"><p>Demo 1 - 预设选择第一个【默认】</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test1 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><div class="note primary flat"><p>Demo 2 - 预设选择 tabs</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test2, 3 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><div class="note primary flat"><p>Demo 3 - 没有预设值</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test3, -1 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><div class="note primary flat"><p>Demo 4 - 自定义 Tab 名 + 只有 icon + icon 和 Tab 名</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test4 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab 第一个Tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**tab 名字为第一个 Tab**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab @fab fa-apple-pay --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**只有图标 没有 Tab 名字**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab 炸弹@fas fa-bomb --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**名字+icon**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="按钮-btns"><a href="#按钮-btns" class="headerlink" title="按钮 btns"></a>按钮 btns</h2><div class="tabs" id="btns"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#btns-1">标签语法</button></li><li class="tab"><button type="button" data-href="#btns-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#btns-3">样式预览</button></li><li class="tab"><button type="button" data-href="#btns-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="btns-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns 样式参数 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="btns-2"><ol><li>圆角样式：rounded, circle</li><li>增加文字样式：可以在容器内增加 <code>&lt;b&gt;标题&lt;/b&gt; </code>和<code> &lt;p&gt;描述文字&lt;/p&gt;</code></li><li>布局方式：<br>默认为自动宽度，适合视野内只有一两个的情况。</li></ol><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">wide</td><td align="left">宽一点的按钮</td></tr><tr><td align="left">fill</td><td align="left">填充布局，自动铺满至少一行，多了会换行</td></tr><tr><td align="left">center</td><td align="left">居中，按钮之间是固定间距</td></tr><tr><td align="left">around</td><td align="left">居中分散</td></tr><tr><td align="left">grid2</td><td align="left">等宽最多 2 列，屏幕变窄会适当减少列数</td></tr><tr><td align="left">grid3</td><td align="left">等宽最多 3 列，屏幕变窄会适当减少列数</td></tr><tr><td align="left">grid4</td><td align="left">等宽最多 4 列，屏幕变窄会适当减少列数</td></tr><tr><td align="left">grid5</td><td align="left">等宽最多 5 列，屏幕变窄会适当减少列数</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="btns-3"><ol><li>如果需要显示类似「团队成员」之类的一组含有头像的链接：</li></ol><div class="btns circle grid5">            <a class="button no-text-decoration" href='https://xaoxuu.com' title='xaoxuu'><img src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a><a class="button no-text-decoration" href='https://xaoxuu.com' title='xaoxuu'><img src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a><a class="button no-text-decoration" href='https://xaoxuu.com' title='xaoxuu'><img src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a><a class="button no-text-decoration" href='https://xaoxuu.com' title='xaoxuu'><img src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a><a class="button no-text-decoration" href='https://xaoxuu.com' title='xaoxuu'><img src='https://bu.dusays.com/2023/06/01/64787e6a5816d.png'>xaoxuu</a>          </div><ol start="2"><li>或者含有图标的按钮：</li></ol><div class="btns rounded grid5">            <a class="button no-text-decoration" href='/' title='下载源码'><i class='anzhiyufont anzhiyu-icon-bolt'></i>下载源码</a><a class="button no-text-decoration" href='/' title='查看文档'><i class='anzhiyufont anzhiyu-icon-book'></i>查看文档</a>          </div><ol start="3"><li>圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中</li></ol><div class="btns circle center grid5">            <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1' class="no-text-decoration"><i class='anzhiyufont anzhiyu-icon-heartbeat'></i><b>心率管家</b><p class='p red'>专业版</p><img src='https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'></a><a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1' class="no-text-decoration"><i class='anzhiyufont anzhiyu-icon-heartbeat'></i><b>心率管家</b><p class='p green'>免费版</p><img src='https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'></a>          </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="btns-4"><ol><li>如果需要显示类似「团队成员」之类的一组含有头像的链接：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns circle grid5 %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>或者含有图标的按钮：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns rounded grid5 %&#125;</span><br><span class="line">&#123;% cell 下载源码, /, anzhiyufont anzhiyu-icon-bolt %&#125;</span><br><span class="line">&#123;% cell 查看文档, /, anzhiyufont anzhiyu-icon-book %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns circle center grid5 %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1&#x27;</span> <span class="attr">class</span>=<span class="string">&quot;no-text-decoration&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&#x27;anzhiyufont anzhiyu-icon-heartbeat&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">b</span>&gt;</span></span>心率管家<span class="language-xml"><span class="tag">&lt;/<span class="name">b</span>&gt;</span></span></span><br><span class="line">&#123;% p red, 专业版 %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2023/06/01/64787e2a1347c.png&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1&#x27;</span> <span class="attr">class</span>=<span class="string">&quot;no-text-decoration&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&#x27;anzhiyufont anzhiyu-icon-heartbeat&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">b</span>&gt;</span></span>心率管家<span class="language-xml"><span class="tag">&lt;/<span class="name">b</span>&gt;</span></span></span><br><span class="line">&#123;% p green, 免费版 %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2023/06/01/64787e515e261.png&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="按钮-btn"><a href="#按钮-btn" class="headerlink" title="按钮 btn"></a>按钮 btn</h2><div class="tabs" id="btn"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#btn-1">标签语法</button></li><li class="tab"><button type="button" data-href="#btn-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#btn-3">样式预览</button></li><li class="tab"><button type="button" data-href="#btn-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="btn-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %&#125;</span><br><span class="line"></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">按钮字体和边框顔色(outline 时)</span><br><span class="line">default/blue/pink/red/purple/orange/green</span><br><span class="line">[style] : [可选] 按钮样式 默认实心</span><br><span class="line">outline/留空</span><br><span class="line">[layout] : [可选] 按钮佈局 默认为 line</span><br><span class="line">block/留空</span><br><span class="line">[position] : [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边</span><br><span class="line">center/right/留空</span><br><span class="line">[size] : [可选] 按钮大小</span><br><span class="line">larger/留空</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="btn-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">url</td><td align="left">链接</td></tr><tr><td align="left">text</td><td align="left">按钮文字</td></tr><tr><td align="left">icon</td><td align="left">[可选] 图标，如果开启了 <code>fontawesome</code>可以使用 fontawesome 的图标，否则只能使用默内置图标</td></tr><tr><td align="left">color</td><td align="left">[可选] 按钮背景顔色(默认 style 时）按钮字体和边框顔色(outline 时)default&#x2F;blue&#x2F;pink&#x2F;red&#x2F;purple&#x2F;orange&#x2F;green</td></tr><tr><td align="left">style</td><td align="left">[可选] 按钮样式 默认实心数，outline&#x2F;留空</td></tr><tr><td align="left">layout</td><td align="left">[可选] 按钮佈局 默认为 line block&#x2F;留空</td></tr><tr><td align="left">position</td><td align="left">[可选] 按钮位置 前提是设置了 layout 为 block 默认为左边 center&#x2F;right&#x2F;留空数</td></tr><tr><td align="left">size</td><td align="left">[可选] 按钮大小 larger&#x2F;留空</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="btn-3"><ol><li>一组按钮</li></ol><p>This is my website, click the button <a class="btn-anzhiyu " href="https://anheyu.com/"   title="AnZhiYu"><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu " href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu outline" href="https://anheyu.com/"   title="AnZhiYu"><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu outline" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></p><ol start="2"><li>调整位置&#x2F;大小</li></ol><p><a class="btn-anzhiyu block" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br><a class="btn-anzhiyu block center larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br><a class="btn-anzhiyu block right outline larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></p><ol start="3"><li>more than one button in center</li></ol><span><a class="btn-anzhiyu larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu blue larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu pink larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu red larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu purple larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu orange larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu green larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></span><ol start="4"><li>居中按钮</li></ol><div class="btn-center"><a class="btn-anzhiyu outline larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu outline blue larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu outline pink larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu outline red larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu outline purple larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu outline orange larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><a class="btn-anzhiyu outline green larger" href="https://anheyu.com/"   title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="btn-4"><ol><li>一组按钮</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,,outline %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>调整位置&#x2F;大小</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block center larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block right outline larger %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>more than one button in center</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,green larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br></pre></td></tr></table></figure><ol start="4"><li>居中按钮</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-center&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline green larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="网站卡片-sites"><a href="#网站卡片-sites" class="headerlink" title="网站卡片 sites"></a>网站卡片 sites</h2><div class="tabs" id="site"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#site-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#site-2">样式预览</button></li><li class="tab"><button type="button" data-href="#site-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="site-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% sitegroup %&#125;</span><br><span class="line">&#123;% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %&#125;</span><br><span class="line">&#123;% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %&#125;</span><br><span class="line">&#123;% endsitegroup %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="site-2"><div class="site-card-group"><a class="site-card" href="https://xaoxuu.com" data-title=简约风格><div class="wrapper cover"><img class="cover fadeIn" src="https://bu.dusays.com/2023/06/01/6478965ce6557.webp"/></div><div class="info"><img class="flink-avatar" src="https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/avatar/avatar.png"/><span class="site-title">xaoxuu</span></div></a><a class="site-card" href="https://colsrch.top" data-title=这是一段关于这个网站的描述文字><div class="wrapper cover"><img class="cover fadeIn" src="https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png"/></div><div class="info"><img class="flink-avatar" src="https://cdn1.tianli0.top/gh/Colsrch/images/Colsrch/avatar.jpg"/><span class="site-title">Colsrch</span></div></a><a class="site-card" href="https://linhk1606.github.io" data-title=这是一段关于这个网站的描述文字><div class="wrapper cover"><img class="cover fadeIn" src="https://bu.dusays.com/2023/06/01/6478963584621.png"/></div><div class="info"><img class="flink-avatar" src="https://bu.dusays.com/2023/06/01/6478968743368.png"/><span class="site-title">Linhk1606</span></div></a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="site-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% sitegroup %&#125;</span><br><span class="line">&#123;% site xaoxuu, url=https://xaoxuu.com, screenshot=https://bu.dusays.com/2023/06/01/6478965ce6557.webp, avatar=https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %&#125;</span><br><span class="line">&#123;% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn1.tianli0.top/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %&#125;</span><br><span class="line">&#123;% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://bu.dusays.com/2023/06/01/6478963584621.png, avatar=https://bu.dusays.com/2023/06/01/6478968743368.png, description=这是一段关于这个网站的描述文字 %&#125;</span><br><span class="line">&#123;% endsitegroup %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="单张图片-image"><a href="#单张图片-image" class="headerlink" title="单张图片 image"></a>单张图片 image</h2><div class="tabs" id="image"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#image-1">标签语法</button></li><li class="tab"><button type="button" data-href="#image-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#image-3">样式预览</button></li><li class="tab"><button type="button" data-href="#image-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="image-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="image-2"><ol><li>图片宽度高度：width&#x3D;300px, height&#x3D;32px</li><li>图片描述：alt&#x3D;图片描述（butterfly 需要在主题配置文件中开启图片描述）</li><li>占位背景色：bg&#x3D;#f2f2f2</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="image-3"><ol start="4"><li>添加描述：</li></ol><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" alt="每天下课回宿舍的路，没有什么故事。"/></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div><ol start="2"><li>指定宽度：</li></ol><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" style="width:400px;"/></div></div><ol start="3"><li>指定宽度并添加描述：</li></ol><div class="img-wrap"><div class="img-bg"><img class="img" src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" alt="每天下课回宿舍的路，没有什么故事。" style="width:400px;"/></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div><ol start="4"><li>设置占位背景色：</li></ol><div class="img-wrap"><div class="img-bg" style="background:#1D0C04"><img class="img" src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" alt="优化不同宽度浏览的观感" style="width:400px;"/></div><span class="image-caption">优化不同宽度浏览的观感</span></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="image-4"><ol><li>添加描述：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, alt=每天下课回宿舍的路，没有什么故事。 %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>指定宽度：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>指定宽度并添加描述：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>设置占位背景色：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="inlineImg-行内图片"><a href="#inlineImg-行内图片" class="headerlink" title="inlineImg 行内图片"></a>inlineImg 行内图片</h2><div class="tabs" id="inlineimg"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#inlineimg-1">标签语法</button></li><li class="tab"><button type="button" data-href="#inlineimg-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#inlineimg-3">样式预览</button></li><li class="tab"><button type="button" data-href="#inlineimg-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="inlineimg-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% inlineImg [src] [height] %&#125;</span><br><span class="line"></span><br><span class="line">[src] : 图片链接</span><br><span class="line">[height] ： 图片高度限制【可选】</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="inlineimg-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">src</td><td align="left">图片链接</td></tr><tr><td align="left">height</td><td align="left">图片高度限制【可选】</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="inlineimg-3"><p>你看我长得漂亮不</p><p><img src="https://bu.dusays.com/2023/06/01/64787ded2ca1c.webp"></p><p>我觉得很漂亮 <img class="inline-img" src="https://bu.dusays.com/2023/06/01/64787da5251b3.png" style="height:150px"/></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="inlineimg-4"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">你看我长得漂亮不</span><br><span class="line"></span><br><span class="line">![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)</span><br><span class="line"></span><br><span class="line">我觉得很漂亮 &#123;% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="行内图片-inlineimage"><a href="#行内图片-inlineimage" class="headerlink" title="行内图片 inlineimage"></a>行内图片 inlineimage</h2><div class="tabs" id="inlineimage"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#inlineimage-1">标签语法</button></li><li class="tab"><button type="button" data-href="#inlineimage-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#inlineimage-3">样式预览</button></li><li class="tab"><button type="button" data-href="#inlineimage-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="inlineimage-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% inlineimage 图片链接, height=高度（可选） %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="inlineimage-2"><ol><li>高度：height&#x3D;20px</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="inlineimage-3"><p>这是 <img no-lazy class="inline" src="https://bu.dusays.com/2023/06/01/647895232e5d5.webp" style="height:1.5em"/> 一段话。</p><p>这又是 <img no-lazy class="inline" src="https://bu.dusays.com/2022/05/19/6285328a83ca7.gif" style="height:40px;"/> 一段话。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="inlineimage-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">这是 &#123;% inlineimage https://bu.dusays.com/2023/06/01/647895232e5d5.webp %&#125; 一段话。</span><br><span class="line"></span><br><span class="line">这又是 &#123;% inlineimage https://bu.dusays.com/2022/05/19/6285328a83ca7.gif, height=40px %&#125; 一段话。</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="label-标签"><a href="#label-标签" class="headerlink" title="label 标签"></a>label 标签</h2><div class="tabs" id="label"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#label-1">标签语法</button></li><li class="tab"><button type="button" data-href="#label-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#label-3">样式预览</button></li><li class="tab"><button type="button" data-href="#label-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="label-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% label text color %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="label-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">text</td><td align="left">文字</td></tr><tr><td align="left">color</td><td align="left">【可选】背景颜色，默认为 default，default&#x2F;blue&#x2F;pink&#x2F;red&#x2F;purple&#x2F;orange&#x2F;green</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="label-3"><p>臣亮言：<mark class="hl-label default">先帝</mark> 创业未半，而<mark class="hl-label blue">中道崩殂</mark> 。今天下三分，<mark class="hl-label pink">益州疲敝</mark> ，此诚<mark class="hl-label red">危急存亡之秋</mark> 也！然侍衞之臣，不懈于内；<mark class="hl-label purple">忠志之士</mark> ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。<br>宫中、府中，俱为一体；陟罚臧否，不宜异同。若有<mark class="hl-label orange">作奸</mark> 、<mark class="hl-label green">犯科</mark> ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="label-4"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">臣亮言：&#123;% label 先帝 %&#125;创业未半，而&#123;% label 中道崩殂 blue %&#125;。今天下三分，&#123;% label 益州疲敝 pink %&#125;，此诚&#123;% label 危急存亡之秋 red %&#125;也！然侍衞之臣，不懈于内；&#123;% label 忠志之士 purple %&#125;，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。</span><br><span class="line">宫中、府中，俱为一体；陟罚臧否，不宜异同。若有&#123;% label 作奸 orange %&#125;、&#123;% label 犯科 green %&#125;，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="timeline"><a href="#timeline" class="headerlink" title="timeline"></a>timeline</h2><div class="tabs" id="timeline"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#timeline-1">标签语法</button></li><li class="tab"><button type="button" data-href="#timeline-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#timeline-3">样式预览</button></li><li class="tab"><button type="button" data-href="#timeline-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="timeline-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline title,color %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line"></span><br><span class="line">xxxxx</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line"></span><br><span class="line">xxxxx</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="timeline-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">title</td><td align="left">标题&#x2F;时间线</td></tr><tr><td align="left">color</td><td align="left">timeline 颜色，default(留空) &#x2F; blue &#x2F; pink &#x2F; red &#x2F; purple &#x2F; orange &#x2F; green</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="timeline-3"><ol><li><p>默认颜色</p><div class="timeline undefined"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>blue</p><div class="timeline blue"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>pink</p><div class="timeline pink"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>red</p><div class="timeline red"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>purple</p><div class="timeline purple"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>orange</p><div class="timeline orange"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li><li><p>green</p><div class="timeline green"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>2022</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>01-02</p></div></div><div class='timeline-item-content'><p>这是测试页面</p></div></div></div></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="timeline-4"><ol><li>默认颜色</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022 %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>blue</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,blue %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>pink</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,pink %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>red</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,red %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li>purple</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,purple %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="6"><li>orange</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,orange %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="7"><li>green</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,green %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="flink-友链标签"><a href="#flink-友链标签" class="headerlink" title="flink 友链标签"></a>flink 友链标签</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>可在任何界面插入类似<code>友情链接</code>列表效果，内容格式与友情链接界面一样，支持 <code>yml 格式</code>,注意<code>yml数据</code>具有格式要求，请注意格式对齐，防止被编辑器格式化导致格式错误从而报错。</p></div><div class="tabs" id="btn"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#btn-1">标签语法</button></li><li class="tab"><button type="button" data-href="#btn-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#btn-3">样式预览</button></li><li class="tab"><button type="button" data-href="#btn-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="btn-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% flink %&#125;</span><br><span class="line">xxxxxx</span><br><span class="line">&#123;% endflink %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="btn-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">class_name</td><td align="left">h2标题</td></tr><tr><td align="left">flink_style</td><td align="left">【可选】友链样式，默认为 flexcard，flexcard&#x2F;anzhiyu</td></tr><tr><td align="left">link_list</td><td align="left">【可选】友链样式，默认为 flexcard，flexcard&#x2F;anzhiyu</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="btn-3"><div class="flink"><div class="flink-name">推荐博客</div> <div class="flink-list"><div class="flexcard-flink-list">              <a href="https://blog.anheyu.com/" title="安知鱼" target="_blank" class="flink-list-card cf-friends-link">                <div class="wrapper cover">                    <img class="no-lightbox cover fadeIn" src="https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="安知鱼" />                </div>                <div class="info">                  <img class="no-lightbox cf-friends-avatar flink-avatar" src="https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="安知鱼"/>                  <span class="flink-sitename cf-friends-name">安知鱼</span>                </div>              </a></div></div><div class="flink-name">网站</div><div class="flink-desc">值得推荐的网站</div> <div class="flink-list"><div class="anzhiyu-flink-list">            <div class="flink-list-item">              <a href="https://www.youtube.com/" title="Youtube" class="cf-friends-link" target="_blank">                <div class="flink-item-icon">                  <img class="no-lightbox cf-friends-avatar" src="https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Youtube" />                </div>                <div class="flink-item-info">                  <div class="flink-item-name">Youtube</div>                  <div class="flink-item-desc" title="视频网站">视频网站</div>                </div>              </a>            </div>            <div class="flink-list-item">              <a href="https://www.weibo.com/" title="Weibo" class="cf-friends-link" target="_blank">                <div class="flink-item-icon">                  <img class="no-lightbox cf-friends-avatar" src="https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Weibo" />                </div>                <div class="flink-item-info">                  <div class="flink-item-name">Weibo</div>                  <div class="flink-item-desc" title="中国最大社交分享平台">中国最大社交分享平台</div>                </div>              </a>            </div>            <div class="flink-list-item">              <a href="https://twitter.com/" title="Twitter" class="cf-friends-link" target="_blank">                <div class="flink-item-icon">                  <img class="no-lightbox cf-friends-avatar" src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="Twitter" />                </div>                <div class="flink-item-info">                  <div class="flink-item-name">Twitter</div>                  <div class="flink-item-desc" title="社交分享平台">社交分享平台</div>                </div>              </a>            </div></div></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="btn-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&#123;% flink %&#125;</span><br><span class="line"><span class="bullet">-</span> class<span class="emphasis">_name: 推荐博客</span></span><br><span class="line"><span class="emphasis">  flink_</span>style: flexcard</span><br><span class="line">  link<span class="emphasis">_list:</span></span><br><span class="line"><span class="emphasis">    - name: 安知鱼</span></span><br><span class="line"><span class="emphasis">      link: https://blog.anheyu.com/</span></span><br><span class="line"><span class="emphasis">      avatar: https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg</span></span><br><span class="line"><span class="emphasis">      descr: 生活明朗，万物可爱</span></span><br><span class="line"><span class="emphasis">      siteshot: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">- class_</span>name: 网站</span><br><span class="line">  class<span class="emphasis">_desc: 值得推荐的网站</span></span><br><span class="line"><span class="emphasis">  flink_</span>style: anzhiyu</span><br><span class="line">  link<span class="emphasis">_list:</span></span><br><span class="line"><span class="emphasis">    - name: Youtube</span></span><br><span class="line"><span class="emphasis">      link: https://www.youtube.com/</span></span><br><span class="line"><span class="emphasis">      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png</span></span><br><span class="line"><span class="emphasis">      descr: 视频网站</span></span><br><span class="line"><span class="emphasis">    - name: Weibo</span></span><br><span class="line"><span class="emphasis">      link: https://www.weibo.com/</span></span><br><span class="line"><span class="emphasis">      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png</span></span><br><span class="line"><span class="emphasis">      descr: 中国最大社交分享平台</span></span><br><span class="line"><span class="emphasis">    - name: Twitter</span></span><br><span class="line"><span class="emphasis">      link: https://twitter.com/</span></span><br><span class="line"><span class="emphasis">      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png</span></span><br><span class="line"><span class="emphasis">      descr: 社交分享平台</span></span><br><span class="line"><span class="emphasis">&#123;% endflink %&#125;</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="mermaid-图"><a href="#mermaid-图" class="headerlink" title="mermaid 图"></a>mermaid 图</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>使用<code>mermaid标签</code>可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看<a href="https://mermaid.js.org/#/">mermaid文档</a></p></div><p>修改 <code>主题配置文件</code></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># mermaid</span></span><br><span class="line"><span class="comment"># see https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># built-in themes: default/forest/dark/neutral</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br></pre></td></tr></table></figure><div class="tabs" id="mermaid"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#mermaid-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#mermaid-2">样式预览</button></li><li class="tab"><button type="button" data-href="#mermaid-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="mermaid-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">内容</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="mermaid-2"><p><img src="https://bu.dusays.com/2023/06/01/647889d3a16f8.png" alt="mermaid"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="mermaid-3"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">pie</span><br><span class="line">    title Key elements in Product X</span><br><span class="line">    &quot;Calcium&quot; : 42.96</span><br><span class="line">    &quot;Potassium&quot; : 50.05</span><br><span class="line">    &quot;Magnesium&quot; : 10.01</span><br><span class="line">    &quot;Iron&quot; :  5</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="复选列表-checkbox"><a href="#复选列表-checkbox" class="headerlink" title="复选列表 checkbox"></a>复选列表 checkbox</h2><div class="tabs" id="checkbox"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#checkbox-1">标签语法</button></li><li class="tab"><button type="button" data-href="#checkbox-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#checkbox-3">样式预览</button></li><li class="tab"><button type="button" data-href="#checkbox-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="checkbox-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 样式参数（可选）, 文本（支持简单md） %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="checkbox-2"><ol><li>样式: plus, minus, times</li><li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li><li>选中状态: checked</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="checkbox-3"><div class='checkbox'><input type="checkbox" />            <p>纯文本测试</p>            </div>   <div class='checkbox checked'><input type="checkbox" checked="checked"/>            <p>支持简单的 <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p>            </div>   <div class='checkbox red'><input type="checkbox" />            <p>支持自定义颜色</p>            </div>   <div class='checkbox green checked'><input type="checkbox" checked="checked"/>            <p>绿色 + 默认选中</p>            </div>   <div class='checkbox yellow checked'><input type="checkbox" checked="checked"/>            <p>黄色 + 默认选中</p>            </div>   <div class='checkbox cyan checked'><input type="checkbox" checked="checked"/>            <p>青色 + 默认选中</p>            </div>   <div class='checkbox blue checked'><input type="checkbox" checked="checked"/>            <p>蓝色 + 默认选中</p>            </div>   <div class='checkbox plus green checked'><input type="checkbox" checked="checked"/>            <p>增加</p>            </div>   <div class='checkbox minus yellow checked'><input type="checkbox" checked="checked"/>            <p>减少</p>            </div>   <div class='checkbox times red checked'><input type="checkbox" checked="checked"/>            <p>叉</p>            </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="checkbox-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 纯文本测试 %&#125;</span><br><span class="line">&#123;% checkbox checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% checkbox red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% checkbox green checked, 绿色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox yellow checked, 黄色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox cyan checked, 青色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox blue checked, 蓝色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox plus green checked, 增加 %&#125;</span><br><span class="line">&#123;% checkbox minus yellow checked, 减少 %&#125;</span><br><span class="line">&#123;% checkbox times red checked, 叉 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="dogeplayer-多吉云播放器"><a href="#dogeplayer-多吉云播放器" class="headerlink" title="dogeplayer 多吉云播放器"></a>dogeplayer 多吉云播放器</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>快捷引入<a href="https://console.dogecloud.com/vod/overview">多吉云视频</a></p></div><div class="tabs" id="label"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#label-1">标签语法</button></li><li class="tab"><button type="button" data-href="#label-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#label-3">样式预览</button></li><li class="tab"><button type="button" data-href="#label-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="label-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% dogeplayer 4945 ebb742fd1f0b5a7b %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="label-2"><p>获取<code>userId</code>与<code>vcode</code></p><p><img src="https://bu.dusays.com/2023/06/01/64788b5bad729.webp"></p><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">userId</td><td align="left">多吉云userId</td></tr><tr><td align="left">vcode</td><td align="left">视频vcode</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="label-3"><p><img src="https://bu.dusays.com/2023/06/01/64788c12883b8.webp"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="label-4"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% dogeplayer 4945 ebb742fd1f0b5a7b %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="折叠框-folding"><a href="#折叠框-folding" class="headerlink" title="折叠框 folding"></a>折叠框 folding</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn disabled"><p>折叠框folding</p></div><div class="tabs" id="folding"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#folding-1">标签语法</button></li><li class="tab"><button type="button" data-href="#folding-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#folding-3">样式预览</button></li><li class="tab"><button type="button" data-href="#folding-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="folding-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% folding 参数（可选）, 标题 %&#125;</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/64788d71c832d.webp</span>)</span><br><span class="line">&#123;% endfolding %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="folding-2"><ol><li>颜色：blue, cyan, green, yellow, red</li><li>状态：状态填写 open 代表默认打开。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="folding-3"><details class="folding-tag" ><summary> 查看图片测试 </summary>              <div class='content'>              <p><img src="https://bu.dusays.com/2023/06/01/64788d71c832d.webp"></p>              </div>            </details><details class="folding-tag" cyan open><summary> 查看默认打开的折叠框 </summary>              <div class='content'>              <p>这是一个默认打开的折叠框。</p>              </div>            </details><details class="folding-tag" green><summary> 查看代码测试 </summary>              <div class='content'>              <figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/64788d71c832d.webp</span>)</span><br></pre></td></tr></table></figure>              </div>            </details><details class="folding-tag" yellow><summary> 查看列表测试 </summary>              <div class='content'>              <ul><li>haha</li><li>hehe</li></ul>              </div>            </details><details class="folding-tag" red><summary> 查看嵌套测试 </summary>              <div class='content'>              <details class="folding-tag" blue><summary> 查看嵌套测试2 </summary>              <div class='content'>              <details class="folding-tag" ><summary> 查看嵌套测试3 </summary>              <div class='content'>              <p>hahaha <span><img src='https://bu.dusays.com/2023/06/01/64788cd5a356b.png' style='height:24px'></span></p>              </div>            </details>              </div>            </details>              </div>            </details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="folding-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&#123;% folding 查看图片测试 %&#125;</span><br><span class="line"></span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/64788d71c832d.webp</span>)</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding cyan open, 查看默认打开的折叠框 %&#125;</span><br><span class="line"></span><br><span class="line">这是一个默认打开的折叠框。</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding green, 查看代码测试 %&#125;</span><br><span class="line">假装这里有代码块（代码块没法嵌套代码块）</span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding yellow, 查看列表测试 %&#125;</span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> haha</span><br><span class="line"><span class="bullet">-</span> hehe</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding red, 查看嵌套测试 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding blue, 查看嵌套测试2 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding 查看嵌套测试3 %&#125;</span><br><span class="line"></span><br><span class="line">hahaha <span class="language-xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2023/06/01/64788cd5a356b.png&#x27;</span> <span class="attr">style</span>=<span class="string">&#x27;height:24px&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="Gallery-相册图库"><a href="#Gallery-相册图库" class="headerlink" title="Gallery 相册图库"></a>Gallery 相册图库</h2><p>一个图库集合。</p><div class="tabs" id="gallery"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#gallery-1">标签语法</button></li><li class="tab"><button type="button" data-href="#gallery-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#gallery-3">样式预览</button></li><li class="tab"><button type="button" data-href="#gallery-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="gallery-1"><ol><li><p>gallerygroup 相册图库</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure></li><li><p>gallery 相册</p></li></ol><div class="tabs" id="gallery相册"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#gallery相册-1">本地</button></li><li class="tab"><button type="button" data-href="#gallery相册-2">远程</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="gallery相册-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery true,220,10 %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery true,,10 %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>lazyload</td><td>【可选】点击按钮加载更多图片，填写 true&#x2F;false。默认为 <code>false</code>。</td></tr><tr><td>rowHeight</td><td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td></tr><tr><td>limit</td><td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="gallery相册-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,[link],[lazyload],[rowHeight],[limit] %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>url</td><td>【必须】 识别词</td></tr><tr><td>link</td><td>【必须】远程的 json 链接</td></tr><tr><td>lazyload</td><td>【可选】点击按钮加载更多图片，填写 true&#x2F;false。默认为 <code>false</code>。</td></tr><tr><td>rowHeight</td><td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td></tr><tr><td>limit</td><td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td></tr></tbody></table><blockquote><p>远程链接 Json 的例子</p></blockquote><p>有三个参数，<code>url</code>是必须存在的，<code>alt</code> 和 <code>title</code> 可有，也可没有。</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;title&quot;</span><span class="punctuation">:</span> <span class="string">&quot;这是title&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0472.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0472.jpg&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0453.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0931.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure><blockquote><p>示例</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,https://xxxx.com/sss.json %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,220,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="gallery-2"><ul><li><p>gallerygroup 相册图库</p><table><thead><tr><th align="left">参数名</th><th align="left">释义</th></tr></thead><tbody><tr><td align="left">name</td><td align="left">图库名字</td></tr><tr><td align="left">description</td><td align="left">图库描述</td></tr><tr><td align="left">link</td><td align="left">链接到对应相册的地址</td></tr><tr><td align="left">img-url</td><td align="left">图库封面</td></tr></tbody></table></li></ul><div class="note info flat"><p>思维拓展一下，相册图库的实质其实就是个快捷方式，可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册，完全可以作为一个链接卡片，链接到视频、QQ、友链都是不错的选择。</p></div><ul><li>gallery 相册<br>区别于旧版的 Gallery 相册,新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。无需再自己配置长宽。<strong>建议在粘贴时故意使用长短、大小、横竖不一的图片</strong>，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）</li></ul><div class="tabs" id="gallery相册参数"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#gallery相册参数-1">本地</button></li><li class="tab"><button type="button" data-href="#gallery相册参数-2">远程</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="gallery相册参数-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery true,220,10 %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery true,,10 %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>lazyload</td><td>【可选】点击按钮加载更多图片，填写 true&#x2F;false。默认为 <code>false</code>。</td></tr><tr><td>rowHeight</td><td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td></tr><tr><td>limit</td><td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="gallery相册参数-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,[link],[lazyload],[rowHeight],[limit] %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>url</td><td>【必须】 识别词</td></tr><tr><td>link</td><td>【必须】远程的 json 链接</td></tr><tr><td>lazyload</td><td>【可选】点击按钮加载更多图片，填写 true&#x2F;false。默认为 <code>false</code>。</td></tr><tr><td>rowHeight</td><td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td></tr><tr><td>limit</td><td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td></tr></tbody></table><blockquote><p>远程链接 Json 的例子</p></blockquote><p>有三个参数，<code>url</code>是必须存在的，<code>alt</code> 和 <code>title</code> 可有，也可没有。</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;title&quot;</span><span class="punctuation">:</span> <span class="string">&quot;这是title&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0472.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0472.jpg&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0453.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0931.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure><blockquote><p>示例</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,https://xxxx.com/sss.json %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,220,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="gallery-3"><ul><li>gallerygroup 相册图库</li></ul><div class="gallery-group-main">  <figure class="gallery-group">  <img class="gallery-group-img no-lightbox" src='https://bu.dusays.com/2023/06/01/64788f24d05bd.webp' alt="Group Image Gallery">  <figcaption>  <div class="gallery-group-name">MC</div>  <p>在Rikkaの六花服务器里留下的足迹</p>  <a href='/wordScenery/'></a>  </figcaption>  </figure>    <figure class="gallery-group">  <img class="gallery-group-img no-lightbox" src='https://bu.dusays.com/2023/06/01/64788f456fc3d.webp' alt="Group Image Gallery">  <figcaption>  <div class="gallery-group-name">Gundam</div>  <p>哦咧哇gundam哒！</p>  <a href='/thousand/'></a>  </figcaption>  </figure>    <figure class="gallery-group">  <img class="gallery-group-img no-lightbox" src='https://bu.dusays.com/2023/06/01/64788f83e5fa1.webp' alt="Group Image Gallery">  <figcaption>  <div class="gallery-group-name">I-am-Akilar</div>  <p>某种意义上也算自拍吧</p>  <a href='/wallpaper/'></a>  </figcaption>  </figure>  </div><ul><li>gallery 相册</li></ul><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="220" data-limit="2">    <span class="gallery-data">[{"url":"https://bu.dusays.com/2023/06/01/647896b15759c.jpg","alt":""},{"url":"https://bu.dusays.com/2023/06/01/647896cabde59.jpg","alt":""},{"url":"https://bu.dusays.com/2023/06/01/647896eb0f3ea.jpg","alt":""},{"url":"https://bu.dusays.com/2023/06/01/647896ed810b3.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="gallery-4"><div class="note info flat"><p>对于很多同学提问的<code>gallerygroup</code>和<code>gallery</code>相册页的链接问题。这里说下我个人的使用习惯。<br>一般使用相册图库的话，可以在导航栏加一个 gallery 的 page(<strong>使用指令<code>hexo new page gallery</code>添加</strong>)，里面放相册图库作为封面。然后在<code>[Blogroot]/source/gallery/</code>下面建立相应的文件夹，例如若按照这里的示例，若欲使用<code>/gallery/MC/</code>路径访问 MC 相册，则需要新建<code>[Blogroot]/source/gallery/MC/index.md</code>，并在里面填入<code>gallery</code>相册内容。</p><p>注意 ⚠️：本站相册集为单独优化，可参考<a href="https://anheyu.com/posts/220c.html">配置相册页面</a>。</p></div><ol><li><p>gallerygroup 相册图库</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span></span><br><span class="line"> &#123;% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 &#x27;/wordScenery/&#x27; https://bu.dusays.com/2023/06/01/64788f24d05bd.webp %&#125;</span><br><span class="line"> &#123;% galleryGroup Gundam 哦咧哇gundam哒！ &#x27;/thousand/&#x27; https://bu.dusays.com/2023/06/01/64788f456fc3d.webp %&#125;</span><br><span class="line"> &#123;% galleryGroup I-am-Akilar 某种意义上也算自拍吧 &#x27;/wallpaper/&#x27; https://bu.dusays.com/2023/06/01/64788f83e5fa1.webp %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure></li><li><p>gallery 相册</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery true,,2 %&#125;</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647896b15759c.jpg</span>)</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647896cabde59.jpg</span>)</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647896eb0f3ea.jpg</span>)</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647890012b1ec.webp</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg</span>)</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="tag-hide"><a href="#tag-hide" class="headerlink" title="tag-hide"></a>tag-hide</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn flat"><p>如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。<br>请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。</p></div><div class="tabs" id="tag-hide"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tag-hide-1">inline</button></li><li class="tab"><button type="button" data-href="#tag-hide-2">Block</button></li><li class="tab"><button type="button" data-href="#tag-hide-3">Toggle</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tag-hide-1"><p><code>inline</code> 在文本里面添加按钮隐藏内容，只限文字</p><p>( content不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideInline content,display,bg,color %&#125;</span><br></pre></td></tr></table></figure><ul><li><p>content: 文本内容</p></li><li><p>display: 按钮显示的文字(可选)</p></li><li><p>bg: 按钮的背景颜色(可选)</p></li><li><p>color: 按钮文字的颜色(可选)</p></li></ul><blockquote><p>Demo</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">哪个英文字母最酷？ &#123;% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %&#125;</span><br><span class="line"></span><br><span class="line">门里站着一个人? &#123;% hideInline 闪 %&#125;</span><br></pre></td></tr></table></figure><p>哪个英文字母最酷？ <span class="hide-inline"><button type="button" class="hide-button" style="background-color: #FF7242;color: #fff">查看答案<br>  </button><span class="hide-content">因为西装裤(C装酷)</span></span></p><p>门里站着一个人? <span class="hide-inline"><button type="button" class="hide-button" style="">Click<br>  </button><span class="hide-content">闪</span></span></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="tag-hide-2"><p><code>block</code>独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等</p><p>( display 不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideBlock display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure><ul><li><p>content: 文本内容</p></li><li><p>display: 按钮显示的文字(可选)</p></li><li><p>bg: 按钮的背景颜色(可选)</p></li><li><p>color: 按钮文字的颜色(可选)</p></li></ul><blockquote><p>Demo</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">查看答案</span><br><span class="line">&#123;% hideBlock 查看答案 %&#125;</span><br><span class="line">傻子，怎么可能有答案</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure><p>查看答案</p><div class="hide-block"><button type="button" class="hide-button" style="">查看答案    </button><div class="hide-content"><p>傻子，怎么可能有答案</p></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="tag-hide-3"><p>如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。</p><p>( display 不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideToggle display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideToggle %&#125;</span><br></pre></td></tr></table></figure><blockquote><p>Demo</p></blockquote><details class="toggle" ><summary class="toggle-button" style="">AnZhiYu主题安装方法</summary><div class="toggle-content"><p>在你的博客根目录里</p><p>git clone -b master <a href="https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git">https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git</a> themes&#x2F;anzhiyu</p><p>如果想要安装比较新的dev分支，可以</p><p>git clone -b dev <a href="https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git">https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git</a> themes&#x2F;anzhiyu</p></div></details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="链接卡片-link"><a href="#链接卡片-link" class="headerlink" title="链接卡片 link"></a>链接卡片 link</h2><div class="tabs" id="link"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#link-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#link-2">样式预览</button></li><li class="tab"><button type="button" data-href="#link-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="link-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% link 标题, 站点描述, 链接, 图片链接（可选） %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="link-2"><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/owen0o0/getFavicon">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/github.com/owen0o0/getFavicon.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">获取网站的Favicon图标并显示在你的网页上</div>            <div class="tag-link-sitename">owen0o0</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="link-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="单选列表-radio"><a href="#单选列表-radio" class="headerlink" title="单选列表 radio"></a>单选列表 radio</h2><div class="tabs" id="radio"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#radio-1">标签语法</button></li><li class="tab"><button type="button" data-href="#radio-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#radio-3">样式预览</button></li><li class="tab"><button type="button" data-href="#radio-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="radio-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% radio 样式参数（可选）, 文本（支持简单md） %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="radio-2"><ol><li>颜色: <span class='p red'>red</span>,<span class='p yellow'>yellow</span>,<span class='p green'>green</span>,<span class='p cyan'>cyan</span>,<span class='p blue'>blue</span>,<span class='p gray'>gray</span></li><li>选中状态: checked</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="radio-3"><div class='checkbox'><input type="radio" />            <p>纯文本测试</p>            </div>   <div class='checkbox checked'><input type="radio" checked="checked"/>            <p>支持简单的 <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p>            </div>   <div class='checkbox red'><input type="radio" />            <p>支持自定义颜色</p>            </div>   <div class='checkbox green'><input type="radio" />            <p>绿色</p>            </div>   <div class='checkbox yellow'><input type="radio" />            <p>黄色</p>            </div>   <div class='checkbox cyan'><input type="radio" />            <p>青色</p>            </div>   <div class='checkbox blue'><input type="radio" />            <p>蓝色</p>            </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="radio-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% radio 纯文本测试 %&#125;</span><br><span class="line">&#123;% radio checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% radio red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% radio green, 绿色 %&#125;</span><br><span class="line">&#123;% radio yellow, 黄色 %&#125;</span><br><span class="line">&#123;% radio cyan, 青色 %&#125;</span><br><span class="line">&#123;% radio blue, 蓝色 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="上标标签-tip"><a href="#上标标签-tip" class="headerlink" title="上标标签 tip"></a>上标标签 tip</h2><div class="tip cogs"><p>主要样式参考自<a href="https://www.antmoe.com/posts/3b43914f/">小康的 butterfly 渐变背景标签</a></p></div><div class="tabs" id="tip"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#tip-1">标签语法</button></li><li class="tab"><button type="button" data-href="#tip-2">配置参数</button></li><li class="tab active"><button type="button" data-href="#tip-3">样式预览</button></li><li class="tab"><button type="button" data-href="#tip-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="tip-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip [参数，可选] %&#125;文本内容&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="tip-2"><ol><li>样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell</li><li>自定义图标: 支持 fontawesome。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="tip-3"><div class="tip "><p>default</p></div><div class="tip info"><p>info</p></div><div class="tip success"><p>success</p></div><div class="tip error"><p>error</p></div><div class="tip warning"><p>warning</p></div><div class="tip bolt"><p>bolt</p></div><div class="tip ban"><p>ban</p></div><div class="tip home"><p>home</p></div><div class="tip sync"><p>sync</p></div><div class="tip cogs"><p>cogs</p></div><div class="tip key"><p>key</p></div><div class="tip bell"><p>bell</p></div><div class="tip fa-atom"><p>自定义 font awesome 图标</p></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="tip-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip %&#125;default&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip info %&#125;info&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip success %&#125;success&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip error %&#125;error&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip warning %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip bolt %&#125;bolt&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban %&#125;ban&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip home %&#125;home&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip sync %&#125;sync&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip cogs %&#125;cogs&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip key %&#125;key&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip bell %&#125;bell&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip fa-atom %&#125;自定义 font awesome 图标&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="Note-Bootstrap-Callout"><a href="#Note-Bootstrap-Callout" class="headerlink" title="Note (Bootstrap Callout)"></a>Note (Bootstrap Callout)</h2><div class="tabs" id="note"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#note-1">通用配置</button></li><li class="tab"><button type="button" data-href="#note-2">语法格式</button></li><li class="tab"><button type="button" data-href="#note-3">配置参数</button></li><li class="tab active"><button type="button" data-href="#note-4">样式预览</button></li><li class="tab"><button type="button" data-href="#note-5">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="note-1"><p>修改主题配置文件</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><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="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line">  <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line">  <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><p><code>Note</code>标签外挂有两种用法。<code>icons</code>和<code>light_bg_offset</code>只对方法一生效。</p><p><code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="note-2"><p><code>方法一</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note [class] [no-icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p><code>方法二</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note [color] [icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="note-3"><p><code>方法一</code></p><table><thead><tr><th align="left">参数</th><th align="left">用法</th></tr></thead><tbody><tr><td align="left">class</td><td align="left">【可选】标识，不同的标识有不同的配色<br>（ default &#x2F; primary &#x2F; success &#x2F; info &#x2F; warning &#x2F; danger ）</td></tr><tr><td align="left">no-icon</td><td align="left">【可选】不显示 icon</td></tr><tr><td align="left">style</td><td align="left">【可选】可以覆盖配置中的 style<br>（simple&#x2F;modern&#x2F;flat&#x2F;disabled）</td></tr></tbody></table><p><code>方法二</code></p><table><thead><tr><th align="left">参数</th><th align="left">用法</th></tr></thead><tbody><tr><td align="left">class</td><td align="left">【可选】标识，不同的标识有不同的配色<br>（ default &#x2F; blue &#x2F; pink &#x2F; red &#x2F; purple &#x2F; orange &#x2F; green ）</td></tr><tr><td align="left">no-icon</td><td align="left">【可选】可配置自定义 icon (支持 fontawesome 图标和主题内置的阿里图标,<code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code>, 也可以配置 no-icon )</td></tr><tr><td align="left">style</td><td align="left">【可选】可以覆盖配置中的 style<br>（simple&#x2F;modern&#x2F;flat&#x2F;disabled）</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="note-4"><p><code>方法一</code></p><ol><li><code>simple</code>样式</li></ol><div class="note simple"><p>默认 提示块标签</p></div><div class="note default simple"><p>default 提示块标签</p></div><div class="note primary simple"><p>primary 提示块标签</p></div><div class="note success simple"><p>success 提示块标签</p></div><div class="note info simple"><p>info 提示块标签</p></div><div class="note warning simple"><p>warning 提示块标签</p></div><div class="note danger simple"><p>danger 提示块标签</p></div><ol start="2"><li><code>modern</code>样式</li></ol><div class="note modern"><p>默认 提示块标签</p></div><div class="note default modern"><p>default 提示块标签</p></div><div class="note primary modern"><p>primary 提示块标签</p></div><div class="note success modern"><p>success 提示块标签</p></div><div class="note info modern"><p>info 提示块标签</p></div><div class="note warning modern"><p>warning 提示块标签</p></div><div class="note danger modern"><p>danger 提示块标签</p></div><ol start="3"><li><code>flat</code>样式</li></ol><div class="note flat"><p>默认 提示块标签</p></div><div class="note default flat"><p>default 提示块标签</p></div><div class="note primary flat"><p>primary 提示块标签</p></div><div class="note success flat"><p>success 提示块标签</p></div><div class="note info flat"><p>info 提示块标签</p></div><div class="note warning flat"><p>warning 提示块标签</p></div><div class="note danger flat"><p>danger 提示块标签</p></div><ol start="4"><li><code>disabled</code>样式</li></ol><div class="note disabled"><p>默认 提示块标签</p></div><div class="note default disabled"><p>default 提示块标签</p></div><div class="note primary disabled"><p>primary 提示块标签</p></div><div class="note success disabled"><p>success 提示块标签</p></div><div class="note info disabled"><p>info 提示块标签</p></div><div class="note warning disabled"><p>warning 提示块标签</p></div><div class="note danger disabled"><p>danger 提示块标签</p></div><ol start="5"><li><code>no-icon</code>样式</li></ol><div class="note no-icon flat"><p>默认 提示块标签</p></div><div class="note default no-icon flat"><p>default 提示块标签</p></div><div class="note primary no-icon flat"><p>primary 提示块标签</p></div><div class="note success no-icon flat"><p>success 提示块标签</p></div><div class="note info no-icon flat"><p>info 提示块标签</p></div><div class="note warning no-icon flat"><p>warning 提示块标签</p></div><div class="note danger no-icon flat"><p>danger 提示块标签</p></div><p><code>方法二</code></p><p>图标支持 <code>fontawesome</code> 和 <code>主题内置的阿里图标</code>，使用方法为加上对应的类名，<code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code>，默认未开启 fontawesome</p><ol><li>simple 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket simple"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram simple"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan simple"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao simple"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi simple"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train simple"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding simple"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p>2022 年快到了….</p></div><div class="note pink icon-padding simple"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan simple"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding simple"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding simple"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding simple"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏器</p></div><ol start="2"><li>modern 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket modern"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn modern"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram modern"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan modern"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao modern"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi modern"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train modern"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding modern"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>2021 年快到了….</p></div><div class="note pink icon-padding modern"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan modern"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding modern"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding modern"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><ol start="3"><li>flat 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn flat"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram flat"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan flat"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi flat"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train flat"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding flat"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding flat"><i class="note-icon fas fa-bullhorn"></i><p>2021 年快到了….</p></div><div class="note pink icon-padding flat"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan flat"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding flat"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding flat"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding flat"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><ol start="4"><li>disabled 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket disabled"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn disabled"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram disabled"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan disabled"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao disabled"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi disabled"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train disabled"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding disabled"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p>2021 年快到了….</p></div><div class="note pink icon-padding disabled"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan disabled"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding disabled"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding disabled"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding disabled"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><ol start="5"><li>no-icon 样式</li></ol><div class="note no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue no-icon flat"><p>2021 年快到了….</p></div><div class="note pink no-icon flat"><p>小心开车 安全至上</p></div><div class="note red no-icon flat"><p>这是三片呢？还是四片？</p></div><div class="note orange no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple no-icon flat"><p>剪刀石头布</p></div><div class="note green no-icon flat"><p>前端最讨厌的浏览器</p></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="note-5"><p><code>方法一</code></p><ol><li><code>simple</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note simple %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default simple %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary simple %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success simple %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info simple %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning simple %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger simple %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li><code>modern</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note modern %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default modern %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary modern %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success modern %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info modern %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning modern %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger modern %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li><code>flat</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note flat %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default flat %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary flat %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success flat %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info flat %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning flat %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger flat %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li><code>disabled</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note disabled %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default disabled %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary disabled %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success disabled %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info disabled %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning disabled %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger disabled %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li><code>no-icon</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default no-icon %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary no-icon %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success no-icon %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info no-icon %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning no-icon %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger no-icon %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p><code>方法二</code></p><p>图标支持 <code>fontawesome</code> 和 <code>主题内置的阿里图标</code>，使用方法为加上对应的类名，<code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code>，默认未开启 fontawesome</p><ol><li><p>simple 样式<br><code>主题内置阿里图标</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;anzhiyufont anzhiyu-icon-rocket&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;anzhiyufont anzhiyu-icon-bullhorn&#x27; simple %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;anzhiyufont anzhiyu-icon-instagram&#x27; simple %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;anzhiyufont anzhiyu-icon-fan&#x27; simple%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;anzhiyufont anzhiyu-icon-dengpao&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;anzhiyufont anzhiyu-icon-sanmingzhi&#x27; simple %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train&#x27; simple %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; simple %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; simple %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;icon-fan&#x27; simple%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; simple %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; simple %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li><li><p>modern 样式<br><code>主题内置阿里图标</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;anzhiyufont anzhiyu-icon-rocket&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;anzhiyufont anzhiyu-icon-bullhorn&#x27; modern %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;anzhiyufont anzhiyu-icon-instagram&#x27; modern %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;anzhiyufont anzhiyu-icon-fan&#x27; modern%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;anzhiyufont anzhiyu-icon-dengpao&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;anzhiyufont anzhiyu-icon-sanmingzhi&#x27; modern %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train&#x27; modern %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; modern %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; modern %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;icon-fan&#x27; modern%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; modern %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; modern %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li><li><p>flat 样式<br><code>主题内置阿里图标</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;anzhiyufont anzhiyu-icon-rocket&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;anzhiyufont anzhiyu-icon-bullhorn&#x27; flat %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;anzhiyufont anzhiyu-icon-instagram&#x27; flat %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;anzhiyufont anzhiyu-icon-fan&#x27; flat%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;anzhiyufont anzhiyu-icon-dengpao&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;anzhiyufont anzhiyu-icon-sanmingzhi&#x27; flat %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train&#x27; flat %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; flat %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; flat %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;icon-fan&#x27; flat%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; flat %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; flat %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li><li><p>disabled 样式<br><code>主题内置阿里图标</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;anzhiyufont anzhiyu-icon-rocket&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;anzhiyufont anzhiyu-icon-bullhorn&#x27; disabled %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;anzhiyufont anzhiyu-icon-instagram&#x27; disabled %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;anzhiyufont anzhiyu-icon-fan&#x27; disabled%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;anzhiyufont anzhiyu-icon-dengpao&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;anzhiyufont anzhiyu-icon-sanmingzhi&#x27; disabled %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train&#x27; disabled %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; disabled %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; disabled %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;icon-fan&#x27; disabled %&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; disabled %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; disabled %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li><li><p>no-icon 样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue no-icon %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink no-icon %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red no-icon %&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange no-icon %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple no-icon %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green no-icon %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="音频-audio"><a href="#音频-audio" class="headerlink" title="音频 audio"></a>音频 audio</h2><div class="tabs" id="audio"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#audio-1">标签语法</button></li><li class="tab active"><button type="button" data-href="#audio-2">样式预览</button></li><li class="tab"><button type="button" data-href="#audio-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="audio-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% audio 音频链接 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="audio-2"><div class="audio"><audio controls preload><source src='https://npm.elemecdn.com/anzhiyu-music@1.0.4/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3' type='audio/mp3'>Your browser does not support the audio tag.</audio></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="audio-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% audio https://npm.elemecdn.com/anzhiyu-music@1.0.4/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h2 id="视频-video"><a href="#视频-video" class="headerlink" title="视频 video"></a>视频 video</h2><div class="tabs" id="video"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#video-1">标签语法</button></li><li class="tab"><button type="button" data-href="#video-2">参数配置</button></li><li class="tab active"><button type="button" data-href="#video-3">样式预览</button></li><li class="tab"><button type="button" data-href="#video-4">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="video-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% video 视频链接 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="video-2"><ol><li>对其方向：left, center, right</li><li>列数：逗号后面直接写列数，支持 1 ～ 4 列。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content active" id="video-3"><ol start="3"><li>100%宽度</li></ol><p><img src="https://bu.dusays.com/2023/06/01/6478a1eeb1386.png" alt="100%宽度"></p><ol start="2"><li>50%宽度</li></ol><p><img src="https://bu.dusays.com/2023/06/01/6478a20a5f242.png" alt="50%宽度"></p><ol start="3"><li>25%宽度</li></ol><p><img src="https://bu.dusays.com/2023/06/01/6478a22b26088.png" alt="25%宽度"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="video-4"><ol><li>100%宽度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br></pre></td></tr></table></figure><ol start="2"><li>50%宽度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;% videos, 2 %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% endvideos %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>25%宽度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% videos, 4 %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% endvideos %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> Tag Plugins </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>hexo博客工作流CI（一键部署的快乐）</title>
      <link href="/posts/b228.html"/>
      <url>/posts/b228.html</url>
      
        <content type="html"><![CDATA[<p>在日常写博客的过程中我常常使用 CI 部署，一开始我是使用<a href="https://www.jenkins.io/">Jenkins</a>，后来觉得很丑且经常拉库失败（设置的 cron 是半小时拉取一次，然而常常 4-5 小时才能更新）</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/02/15/63ec8e5037b2f.png!blogimg"></p><p>就转向了<a href="https://help.aliyun.com/document_detail/159666.htm">阿里的工作流</a>，好看很多且界面操作也简单了许多，缺点就是个人使用实在是没必要，企业的话用起来还是很爽的。</p><p>再后来看到店长的文章以后就开始使用 Github Action，具体可以去看这篇文章</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://anheyu.com/posts/asdx.html">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/anheyu.com/posts/asdx.html.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">使用 Github Action 自动部署</div>            <div class="tag-link-sitename"> 使用 Github Action 自动部署</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><h1 id="Github-Action-优点"><a href="#Github-Action-优点" class="headerlink" title="Github Action 优点"></a>Github Action 优点</h1><ol><li>可以多域名多站点部署</li><li>不会出现从服务器去连接 github 连接不上的情况</li><li>可以一键多处全部部署完成 ✅</li><li>不再需要使用繁杂的前置命令<blockquote><p>hexo clean<br>hexo bangumi -u #bilibili 番剧更新<br>hexo generate<br>hexo algolia<br>gulp</p></blockquote></li></ol><p>比如我自己是在<a href="https://vercel.com/">vercel</a>, <a href="https://netlify.app/">netlify</a>, <a href="https://www.dogecloud.com/?iuid=4945">服务器多吉云加速</a>，三处部署。</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://anzhiyu-c-github-io.vercel.app/">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/anzhiyu-c-github-io.vercel.app/.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">安知鱼博客vercel线路</div>            <div class="tag-link-sitename"> 安知鱼博客vercel线路</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://cheerful-otter-8af915.netlify.app/">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/cheerful-otter-8af915.netlify.app/.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">安知鱼博客netlify线路</div>            <div class="tag-link-sitename"> 安知鱼博客netlify线路</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://anheyu.com/">    <div class="tag-link-tips">站内地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(/img/512.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">安知鱼博客多吉云线路</div>            <div class="tag-link-sitename"> 安知鱼博客多吉云线路</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p>大大提高可用性与速度。</p><h1 id="工作流"><a href="#工作流" class="headerlink" title="工作流"></a>工作流</h1><p>在这里分享一下我的工作流，平时写完文章以后，配合 vscode 左侧的叉子，填写提交信息后，点击提交，立即就可以提交至源码仓库</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/02/15/63ec947ee9897.webp!blogimg"></p><p>通过源码仓库的 github action 推送至服务器与 github page 的仓库，<code>vercel</code>与<code>netlify</code>会自行拉取 github page 的仓库的更新，进而实现所有线路更新。</p><p>并且使用了店长分享的全站提交至 npm，并<code>排除提交html文件</code>大大减小 npm 包体积大小，具体可以去看这篇文章<a href="https://anheyu.com/posts/72ea.html">npm 图床使用</a>。</p><p>这使我可以随时使用静态资源文件（如 js,css,img 等），我只需修改<code>package.json</code>的版本即可实现资源更新，而丰富的 npm 镜像又让我的站点速度大大提升，极大的便利性使我得到了极其舒适的体验。</p><p>以下是该工作流部分代码，注意该工作流已解决使用 CI 更新时，hexo 更新时间不一致的问题。</p><p><code>autodeploy.yml</code></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">name:</span> <span class="string">自动部署</span></span><br><span class="line"><span class="comment"># 当有改动推送到master分支时，启动Action</span></span><br><span class="line"><span class="attr">on:</span></span><br><span class="line">  <span class="attr">push:</span></span><br><span class="line">    <span class="attr">branches:</span></span><br><span class="line">      <span class="bullet">-</span> <span class="string">master</span></span><br><span class="line">      <span class="comment">#2020年10月后github新建仓库默认分支改为main，注意更改</span></span><br><span class="line">  <span class="attr">release:</span></span><br><span class="line">    <span class="attr">types:</span></span><br><span class="line">      <span class="bullet">-</span> <span class="string">published</span></span><br><span class="line"></span><br><span class="line"><span class="attr">jobs:</span></span><br><span class="line">  <span class="attr">deploy:</span></span><br><span class="line">    <span class="attr">runs-on:</span> <span class="string">ubuntu-latest</span></span><br><span class="line">    <span class="attr">steps:</span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">检查分支</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">actions/checkout@v2</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">ref:</span> <span class="string">master</span></span><br><span class="line">          <span class="attr">fetch-depth:</span> <span class="number">0</span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Sync</span> <span class="string">local</span> <span class="string">file</span> <span class="string">timestamps</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string">          git ls-files -z | while read -d &#x27;&#x27; path; do touch -d $(git log -1 --format=&quot;@%ct&quot; &quot;$path&quot;) &quot;$path&quot;; done</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Node</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">actions/setup-node@v1</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">node-version:</span> <span class="string">&quot;16.x&quot;</span></span><br><span class="line"></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Hexo</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string">          export TZ=&#x27;Asia/Shanghai&#x27;</span></span><br><span class="line"><span class="string">          npm install hexo-cli -g</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">缓存</span> <span class="string">Hexo</span></span><br><span class="line">        <span class="attr">id:</span> <span class="string">cache-npm</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">actions/cache@v3</span></span><br><span class="line">        <span class="attr">env:</span></span><br><span class="line">          <span class="attr">cache-name:</span> <span class="string">cache-node-modules</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">path:</span> <span class="string">node_modules</span></span><br><span class="line">          <span class="attr">key:</span> <span class="string">$&#123;&#123;</span> <span class="string">runner.os</span> <span class="string">&#125;&#125;-build-$&#123;&#123;</span> <span class="string">env.cache-name</span> <span class="string">&#125;&#125;-$&#123;&#123;</span> <span class="string">hashFiles(&#x27;**/package-lock.json&#x27;)</span> <span class="string">&#125;&#125;</span></span><br><span class="line">          <span class="attr">restore-keys:</span> <span class="string">|</span></span><br><span class="line"><span class="string">            $&#123;&#123; runner.os &#125;&#125;-build-$&#123;&#123; env.cache-name &#125;&#125;-</span></span><br><span class="line"><span class="string">            $&#123;&#123; runner.os &#125;&#125;-build-</span></span><br><span class="line"><span class="string">            $&#123;&#123; runner.os &#125;&#125;-</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装依赖</span></span><br><span class="line">        <span class="attr">if:</span> <span class="string">$&#123;&#123;</span> <span class="string">steps.cache-npm.outputs.cache-hit</span> <span class="type">!=</span> <span class="string">&#x27;true&#x27;</span> <span class="string">&#125;&#125;</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string">          npm install gulp-cli -g #全局安装gulp</span></span><br><span class="line"><span class="string">          npm install --save</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">生成静态文件</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string">          hexo clean</span></span><br><span class="line"><span class="string">          hexo bangumi -u #bilibili番剧更新</span></span><br><span class="line"><span class="string">          hexo generate</span></span><br><span class="line"><span class="string">          hexo algolia</span></span><br><span class="line"><span class="string">          gulp</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Deploy</span> <span class="string">to</span> <span class="string">Server</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">easingthemes/ssh-deploy@v2</span></span><br><span class="line">        <span class="attr">env:</span></span><br><span class="line">          <span class="attr">SSH_PRIVATE_KEY:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.SSH_PRIVATE_KEY</span> <span class="string">&#125;&#125;</span></span><br><span class="line">          <span class="attr">ARGS:</span> <span class="string">&quot;-rltgoDzvO --delete&quot;</span></span><br><span class="line">          <span class="attr">EXCLUDE:</span> <span class="string">&quot;.well-known&quot;</span></span><br><span class="line">          <span class="attr">SOURCE:</span> <span class="string">&quot;./public/*&quot;</span></span><br><span class="line">          <span class="attr">REMOTE_HOST:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.SERVER_IP</span> <span class="string">&#125;&#125;</span></span><br><span class="line">          <span class="attr">REMOTE_PORT:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.REMOTE_PORT</span> <span class="string">&#125;&#125;</span></span><br><span class="line">          <span class="attr">REMOTE_USER:</span> <span class="string">&quot;你的用户名&quot;</span></span><br><span class="line">          <span class="attr">TARGET:</span> <span class="string">&quot;你的服务器绝对路径&quot;</span></span><br><span class="line"></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">推送百度必应url</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string">          hexo deploy</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">部署到Github</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string">          cd ./public</span></span><br><span class="line"><span class="string">          git init</span></span><br><span class="line"><span class="string">          git config --global user.name &quot;anzhiyu-c&quot;</span></span><br><span class="line"><span class="string">          git config --global user.email &quot;userEmail@gmail.com&quot;</span></span><br><span class="line"><span class="string">          git add .</span></span><br><span class="line"><span class="string">          git commit -m &#x27;$&#123;&#123; github.event.head_commit.message &#125;&#125;&#x27;</span></span><br><span class="line"><span class="string">          git push --force --all https://xxxxxxToken@github.com/anzhiyu-c/anzhiyu-c.github.io</span></span><br></pre></td></tr></table></figure><p><code>npmignore.js</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">hexo.<span class="property">extend</span>.<span class="property">generator</span>.<span class="title function_">register</span>(<span class="string">&quot;npmignore&quot;</span>, <span class="keyword">function</span> (<span class="params">locals</span>) &#123;</span><br><span class="line">  <span class="comment">// Object</span></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&quot;/.npmignore&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: <span class="string">`**/*.html</span></span><br><span class="line"><span class="string">.github/</span></span><br><span class="line"><span class="string">download/</span></span><br><span class="line"><span class="string">ads.txt</span></span><br><span class="line"><span class="string">CNAME</span></span><br><span class="line"><span class="string">robots.txt</span></span><br><span class="line"><span class="string">`</span>,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p><code>npmpublish.js</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * @Description: npm</span></span><br><span class="line"><span class="comment"> * @Author: 安知鱼</span></span><br><span class="line"><span class="comment"> * @Email: 2268025923@qq.com</span></span><br><span class="line"><span class="comment"> * @Date: 2022-02-22 12:13:18</span></span><br><span class="line"><span class="comment"> * @LastEditTime: 2022-08-27 12:29:41</span></span><br><span class="line"><span class="comment"> * @LastEditors: 安知鱼</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">generator</span>.<span class="title function_">register</span>(<span class="string">&quot;npmpush&quot;</span>, <span class="keyword">function</span> (<span class="params">locals</span>) &#123;</span><br><span class="line">  <span class="comment">// Object</span></span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&quot;/.github/workflows/autopublish.yml&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>:</span><br><span class="line">      <span class="string">`name: Node.js Package</span></span><br><span class="line"><span class="string"># 监测分支，2020年10月后github新建仓库默认分支改为main，记得更改</span></span><br><span class="line"><span class="string">on:</span></span><br><span class="line"><span class="string">  push:</span></span><br><span class="line"><span class="string">    branches:</span></span><br><span class="line"><span class="string">      - master</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">jobs:</span></span><br><span class="line"><span class="string">  publish-npm:</span></span><br><span class="line"><span class="string">    runs-on: ubuntu-latest</span></span><br><span class="line"><span class="string">    steps:</span></span><br><span class="line"><span class="string">      - uses: actions/checkout@v2</span></span><br><span class="line"><span class="string">      - uses: actions/setup-node@v1</span></span><br><span class="line"><span class="string">        with:</span></span><br><span class="line"><span class="string">          node-version: &quot;12.x&quot;</span></span><br><span class="line"><span class="string">          registry-url: https://registry.npmjs.org/</span></span><br><span class="line"><span class="string">      - run: npm publish</span></span><br><span class="line"><span class="string">        env:</span></span><br><span class="line"><span class="string">          NODE_AUTH_TOKEN: `</span> + <span class="string">&quot;$&#123;&#123;secrets.npm_token&#125;&#125;&quot;</span>,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> 工作流 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>给你的博客加一个优雅的音乐界面</title>
      <link href="/posts/c3d3.html"/>
      <url>/posts/c3d3.html</url>
      
        <content type="html"><![CDATA[<p>很久之前就想把整个音乐界面好好写一写，不过一直迫于咕咕咕的属性没有去做这件事，以至于悔之不及，没有早点做，对我这种重度音乐控来说真的是太爽了，很快啊，马上就听了一下午。</p><p>前两天看到 <a href="https://blog.yeooe.cn/">叶子</a> 重做了音乐界面于是马上就搞过来了啊，很快啊哈哈哈哈哈，谢谢大叶子的投喂！</p><p>博主思路和叶子有所不同，每个人都有每个人的实现方法，本文仅做分享博主自己的实现思路。</p><h3 id="在线体验"><a href="#在线体验" class="headerlink" title="在线体验"></a>在线体验</h3><p><a href="https://anheyu.com/music/">一个优雅的音乐界面</a></p><h3 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h3><p>整体效果我还是非常满意的 hhh</p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/02/10/63e6004607d39.png"></p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/02/10/63e600366bcc7.png"></p><p><img src="https://img02.anheyu.com/adminuploads/1/2023/02/10/63e60049a1b24.png" alt="移动端"></p><h3 id="魔改步骤"><a href="#魔改步骤" class="headerlink" title="魔改步骤"></a>魔改步骤</h3><p>博主使用的 meting2 的版本，修改主题配置文件 <code>_config.butterfly.yml</code> 最下面 <code>CDN.option.meting_js</code>，有能力的建议自己下载下来并传到自己的 oss 或直接使用本地路径引用。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">meting_js:</span> <span class="string">https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js</span></span><br></pre></td></tr></table></figure><p>创建页面, 新建 <code>source/music/index.md</code> 文件</p><figure class="highlight md"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 音乐馆</span><br><span class="line">date: 2021-04-24 21:41:30</span><br><span class="line">type: music</span><br><span class="line">aplayer: true</span><br><span class="line">top<span class="emphasis">_img: false</span></span><br><span class="line"><span class="emphasis">comments: false</span></span><br><span class="line"><span class="emphasis">aside: false</span></span><br><span class="line"><span class="emphasis">---</span></span><br></pre></td></tr></table></figure><p>创建页面，新建<code>themes/butterfly/layout/includes/page/music.pug</code>，并方便后续可以使用 css 将页面(page)本身的样式给去除。此处可以自行修改<strong>server</strong>和<strong>歌单 id</strong>，我的 id 是 8152976493，歌单 id 是对应的服务商的歌单页面路径最后面的那个数字。</p><p><code>music.pug</code></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">#anMusic-page</span><br><span class="line">  meting-js(id=&quot;8152976493&quot; server=&quot;netease&quot; type=&quot;playlist&quot; mutex=&quot;true&quot; preload=&quot;auto&quot; theme=&quot;var(--anzhiyu-main)&quot; order=&quot;list&quot;)</span><br></pre></td></tr></table></figure><p>修改<code>themes/butterfly/layout/page.pug</code></p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">  #page</span><br><span class="line"><span class="deletion">-   if top_img === false</span></span><br><span class="line"><span class="addition">+   if top_img === false &amp;&amp; page.type != &#x27;music&#x27;</span></span><br><span class="line">      h1.page-title= page.title</span><br><span class="line">    case page.type</span><br><span class="line">      when &#x27;link&#x27;</span><br><span class="line">        include includes/page/flink.pug</span><br><span class="line">      ...</span><br><span class="line"><span class="addition">+     when &#x27;music&#x27;</span></span><br><span class="line"><span class="addition">+       include includes/page/music.pug</span></span><br><span class="line">      default</span><br><span class="line">        include includes/page/default-page.pug</span><br></pre></td></tr></table></figure><p>创建背景元素，修改<code>themes/butterfly/layout/includes/layout.pug</code></p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">  body</span><br><span class="line">    if theme.background</span><br><span class="line">      #web_bg</span><br><span class="line"><span class="addition">+     #an_music_bg</span></span><br></pre></td></tr></table></figure><h4 id="js-部分"><a href="#js-部分" class="headerlink" title="js 部分"></a>js 部分</h4><p>css 部分和 js 部分不会引用的同学可以去看 <a href="https://www.bilibili.com/video/BV1rT411w7gj/?spm_id_from=333.999.0.0">https://www.bilibili.com/video/BV1rT411w7gj/?spm_id_from=333.999.0.0</a></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 自定义js</span></span><br><span class="line"><span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">data-pjax</span> <span class="string">src=&quot;/js/anzhiyu.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p><code>anzhiyu.js</code>,其中有一部分代码是暂停 nav 的音乐的，需要的同学可以打开注释自己实现一下 musicToggle 方法。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> anzhiyu = &#123;</span><br><span class="line">  <span class="comment">// 音乐节目切换背景</span></span><br><span class="line">  <span class="attr">changeMusicBg</span>: <span class="keyword">function</span> (<span class="params">isChangeBg = <span class="literal">true</span></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">location</span>.<span class="property">pathname</span> != <span class="string">&quot;/music/&quot;</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">const</span> anMusicBg = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;an_music_bg&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (isChangeBg) &#123;</span><br><span class="line">      <span class="comment">// player listswitch 会进入此处</span></span><br><span class="line">      <span class="keyword">const</span> musiccover = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#anMusic-page .aplayer-pic&quot;</span>);</span><br><span class="line">      anMusicBg.<span class="property">style</span>.<span class="property">backgroundImage</span> = musiccover.<span class="property">style</span>.<span class="property">backgroundImage</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// 第一次进入，绑定事件，改背景</span></span><br><span class="line">      <span class="keyword">let</span> timer = <span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> musiccover = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#anMusic-page .aplayer-pic&quot;</span>);</span><br><span class="line">        <span class="comment">// 确保player加载完成</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">info</span>(anMusicBg);</span><br><span class="line">        <span class="keyword">if</span> (musiccover) &#123;</span><br><span class="line">          <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">          anMusicBg.<span class="property">style</span>.<span class="property">backgroundImage</span> = musiccover.<span class="property">style</span>.<span class="property">backgroundImage</span>;</span><br><span class="line">          <span class="comment">// 绑定事件</span></span><br><span class="line">          anzhiyu.<span class="title function_">addEventListenerChangeMusicBg</span>();</span><br><span class="line"></span><br><span class="line">          <span class="comment">// 暂停nav的音乐</span></span><br><span class="line">          <span class="keyword">if</span> (</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#nav-music meting-js&quot;</span>).<span class="property">aplayer</span> &amp;&amp;</span><br><span class="line">            !<span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#nav-music meting-js&quot;</span>).<span class="property">aplayer</span>.<span class="property">audio</span>.<span class="property">paused</span></span><br><span class="line">          ) &#123;</span><br><span class="line">            anzhiyu.<span class="title function_">musicToggle</span>();</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;, <span class="number">100</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">addEventListenerChangeMusicBg</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> anMusicPage = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;anMusic-page&quot;</span>);</span><br><span class="line">    <span class="keyword">const</span> aplayerIconMenu = anMusicPage.<span class="title function_">querySelector</span>(<span class="string">&quot;.aplayer-info .aplayer-time .aplayer-icon-menu&quot;</span>);</span><br><span class="line"></span><br><span class="line">    anMusicPage.<span class="title function_">querySelector</span>(<span class="string">&quot;meting-js&quot;</span>).<span class="property">aplayer</span>.<span class="title function_">on</span>(<span class="string">&quot;loadeddata&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      anzhiyu.<span class="title function_">changeMusicBg</span>();</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">info</span>(<span class="string">&quot;player loadeddata&quot;</span>);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    aplayerIconMenu.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;menu-mask&quot;</span>).<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;block&quot;</span>;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;menu-mask&quot;</span>).<span class="property">style</span>.<span class="property">animation</span> = <span class="string">&quot;0.5s ease 0s 1 normal none running to_show&quot;</span>;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;menu-mask&quot;</span>).<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="property">location</span>.<span class="property">pathname</span> != <span class="string">&quot;/music/&quot;</span>) <span class="keyword">return</span>;</span><br><span class="line">      anMusicPage.<span class="title function_">querySelector</span>(<span class="string">&quot;.aplayer-list&quot;</span>).<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;aplayer-list-hide&quot;</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用</span></span><br><span class="line">anzhiyu.<span class="title function_">changeMusicBg</span>(<span class="literal">false</span>);</span><br></pre></td></tr></table></figure><h4 id="css"><a href="#css" class="headerlink" title="css"></a>css</h4><p>css 部分, 自行建立 css 能成功引入即可</p><p><code>music.css</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: none <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#an_music_bg</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">  <span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">63px</span>);</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.6</span>;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">  <span class="attribute">z-index</span>: -<span class="number">999</span>;</span><br><span class="line">  <span class="attribute">background-attachment</span>: local;</span><br><span class="line">  <span class="attribute">background-position</span>: center center;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200%</span>;</span><br><span class="line">  <span class="attribute">top</span>: -<span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">left</span>: -<span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#an_music_bg</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgb</span>(<span class="number">13</span>, <span class="number">13</span>, <span class="number">13</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> meting-js <span class="selector-class">.aplayer</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row-reverse;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attribute">border</span>: none;</span><br><span class="line">  <span class="attribute">box-shadow</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#web_bg</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#footer</span>,</span><br><span class="line"><span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#nav-music</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-body</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">40%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">75vh</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffffff33</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-pic</span> &#123;</span><br><span class="line">  <span class="attribute">float</span>: none;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">180px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">180px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: auto;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">20px</span> <span class="number">0</span> <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> &#123;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">height</span>: auto;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> <span class="selector-class">.aplayer-author</span>,</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> <span class="selector-class">.aplayer-title</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">2rem</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-lrc</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">800%</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">80px</span>;</span><br><span class="line">  <span class="attribute">mask-image</span>: <span class="built_in">linear-gradient</span>(to bottom, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#0000</span>, <span class="number">#0000</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-lrc</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-lrc</span><span class="selector-pseudo">:after</span>,</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-lrc</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 控制器 */</span></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">1500px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: auto;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">160px</span> <span class="number">0</span> <span class="number">150px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-played</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-white) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-thumb</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: none;</span><br><span class="line">  <span class="attribute">transform</span>: none;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#fff</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-back</span>,</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-forward</span>,</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-play</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">21px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: flex-end;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-time-inner</span> &#123;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: -<span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-back</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-play</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">40px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-forward</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">80px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">2rem</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2rem</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-menu</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon</span> path &#123;</span><br><span class="line">  fill: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.8</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-list</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">60%</span>;</span><br><span class="line">  <span class="attribute">max-height</span>: none <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &#123;</span><br><span class="line">  <span class="attribute">max-height</span>: <span class="number">75vh</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">padding-right</span>: <span class="number">25px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span> &#123;</span><br><span class="line">  <span class="attribute">border-top</span>: <span class="number">1px</span> solid transparent;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgb</span>(<span class="number">255</span> <span class="number">255</span> <span class="number">255</span> / <span class="number">20%</span>);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> <span class="selector-class">.aplayer-list-cur</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-author</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.6</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 导航栏 */</span></span><br><span class="line"><span class="selector-class">.page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#nav</span> &#123;</span><br><span class="line">  backdrop-<span class="attribute">filter</span>: none <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">0</span> <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#page-header</span><span class="selector-class">.not-top-img</span> <span class="selector-id">#nav</span> <span class="selector-tag">a</span>,</span><br><span class="line"><span class="selector-class">.page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-class">.back-home-button</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-class">.s-sticker</span> <span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon</span><span class="selector-class">.aplayer-icon-loop</span> &#123;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#page-header</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* **** 移动端样式 ***** */</span></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#rightside</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#content-inner</span>,</span><br><span class="line">  <span class="selector-tag">body</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#anMusic-page</span>) <span class="selector-id">#page</span> &#123;</span><br><span class="line">    <span class="attribute">z-index</span>: auto;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">/* 歌曲列表 */</span></span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-list</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1002</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: -<span class="number">76%</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">var</span>(--sidebar-bg);</span><br><span class="line">    <span class="attribute">height</span>: auto;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">15px</span> <span class="number">15px</span> <span class="number">0px</span> <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">15px</span> <span class="number">0px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-list</span><span class="selector-class">.aplayer-list-hide</span> &#123;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0%</span> <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &#123;</span><br><span class="line">    <span class="attribute">max-height</span>: <span class="number">60vh</span> <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">0px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">10px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-title</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">30%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#33a673</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-title</span> &#123;</span><br><span class="line">    <span class="attribute">max-width</span>: <span class="number">55%</span>;</span><br><span class="line">    <span class="attribute">width</span>: auto;</span><br><span class="line">    <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">    -webkit-line-clamp: <span class="number">1</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    -webkit-box-orient: vertical;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-author</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">width</span>: auto;</span><br><span class="line">    <span class="attribute">max-width</span>: <span class="number">35%</span>;</span><br><span class="line">    <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">    -webkit-line-clamp: <span class="number">1</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    -webkit-box-orient: vertical;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-tag">ol</span> &gt; <span class="selector-tag">li</span><span class="selector-class">.aplayer-list-light</span> <span class="selector-tag">span</span><span class="selector-class">.aplayer-list-author</span> &#123;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">15px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">/* 歌词信息 */</span></span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-body</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"></span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">margin</span>: auto;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">100px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-lrc</span> &#123;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">height</span>: auto;</span><br><span class="line">    <span class="attribute">max-height</span>: <span class="number">200%</span>;</span><br><span class="line">    <span class="attribute">min-height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">mask-image</span>: <span class="built_in">linear-gradient</span>(to bottom, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#000</span>, <span class="number">#0000</span>, <span class="number">#0000</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-lrc</span> <span class="selector-tag">p</span><span class="selector-class">.aplayer-lrc-current</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#33a673</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">/* 控制按键和进度条 */</span></span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">100px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">30px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> &#123;</span><br><span class="line">    <span class="attribute">bottom</span>: -<span class="number">40px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-time-inner</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: -<span class="number">33px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-time-inner</span> <span class="selector-class">.aplayer-dtime</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">30px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-time-inner</span> <span class="selector-class">.aplayer-ptime</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">35px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-back</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: auto;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">110px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-play</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: auto;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-forward</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: auto;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">110px</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-order</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">22px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-loop</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">25px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-time</span> <span class="selector-class">.aplayer-icon-menu</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: inline;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">25px</span>;</span><br><span class="line">    <span class="attribute">top</span>: -<span class="number">90px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer-volume-bar-wrap</span> &#123;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">7px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#anMusic-page</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-volume-wrap</span> &#123;</span><br><span class="line">    <span class="attribute">left</span>: -<span class="number">66px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> 教程 </tag>
            
            <tag> aplayer </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>操作系统复习题</title>
      <link href="/posts/d4d2.html"/>
      <url>/posts/d4d2.html</url>
      
        <content type="html"><![CDATA[<span class='p center logo large'>操作系统</span><details class="folding-tag" open><summary> 选择题 </summary>              <div class='content'>              <ol><li><p>操作系统的最主要设计目标是（ ）。<br>A．方便性和有效性 B．方便性和可扩展性<br>C．有效性和可扩展性 D．有效性和开放性<br>答：<psw>A</psw></p></li><li><p>有甲、乙两道算题，每道需执行 1 小时（其中处理器的工作时间为 12 分钟）。若它们在多道系统中执行，甲、乙两道题总共需执行 80 分钟，则处理器的利用率为（ ）。<br>A．50% B．40% C．30% D．20%<br>答：<psw>C</psw></p></li><li><p>从下面对临界区的论述中，选出一条正确的论述。（ ）<br>A.临界区是指进程中用于实现进程同步的那段代码<br>B.临界区是指进程中用于实现进程通信的那段代码<br>C.临界区是指进程中用于访问共享资源的那段代码<br>D.临界区是指进程中访问临界资源的那段代码<br>答：<psw>D</psw></p></li><li><p>操作系统提供一组特殊的程序，它们不能被系统中断，在操作系统中称为（ ）。<br>A.初始化程序 B.原语 C.子程序 D.控制模块<br>答：<psw>B</psw></p></li><li><p>一种既有利于短小作业又兼顾到长作业的作业调度算法是（ ）。<br>A．先来先服务 B．轮转 C．最高响应比优先 D．均衡调度<br>答：<psw>C</psw></p></li><li><p>操作系统中，资源分配的基本单位是（ ）。<br>A．进程 B．线程 C．作业 D．程序<br>答：<psw>A</psw></p></li><li><p>进程之间的制约关系可以归结为（ ）。<br>A．同步与互斥 B．并发与异步 C．同步与并发 D．同步与异步<br>答：<psw>A</psw></p></li><li><p>产生死锁的原因是（ ）有关。<br>A．与多个进程竞争 CPU<br>B．与多个进程释放资源<br>C．仅由于并发进程的执行速度不当<br>D．除资源分配策略不当外，也与并发进程执行速度不当<br>答：<psw>D</psw></p></li><li><p>死锁的 4 个必要条件中，无法破坏的是（ ）。<br>A.环路等待资源 B.互斥使用资源 C.占有且等待资源 D.非抢夺式分配<br>答：<psw>B</psw></p></li><li><p>页式存储管理中，每次从主存中取指令或取操作数，当读快表失败时，要读（ ）次主存。<br>A．1 B．2 C．3 D．4<br>答：<psw>B</psw></p></li><li><p>中断和通道技术的引入，使得（ ）。<br>A．CPU 与外设能紧密结合 B．CPU 与外设能并行工作<br>C．CPU 速度提高 D．外设速度提高<br>答：<psw>B</psw></p></li><li><p>下列关于进程和线程的叙述中，正确的是（ ）<br>A．不管系统是否支持线程，进程都是资源分配的基本单位<br>B．线程是资源分配的基本单位，进程是调度的基本单位<br>C．系统级线程和用户级线程的切换都需要内核的支持<br>D．同一进程中的各个线程拥有各自不同的地址空间<br>答：<psw>A</psw></p></li><li><p>在下述进程状态的转换中，( ) 是不可能的。<br>A．运行态 → 就绪态 B．运行态 → 等待态 C．等待态 → 就绪态 D．就绪态 → 等待态<br>答：<psw>D</psw></p></li><li><p>若信号量 S 的初值为 2，当前值为-1，则表示有( )个等待进程。<br>A．0 B．1 C．2 D．3<br>答：<psw>B</psw></p></li><li><p>下列选项中，会导致进程从执行态变为就绪态的事件是（ ）。<br>A.执行 P 操作 B.申请内存失败 C.启动 I&#x2F;O 设备 D.被高优先级进程抢占<br>答：<psw>D</psw></p></li><li><p>将主存空闲区按地址顺序从小到大登记在空闲区表中，每次分配时总是顺序查找空闲区表，此种分配算法称为 ( ) 分配算法。<br>A．首次适应 B．最佳适应 C．最坏适应 D．循环首次适应<br>答：<psw>B</psw></p></li><li><p>系统为某进程分配了 4 个页框，该进程已访问的页号序列为 2、0、2、9、3、4、2、8、2、4、8、4、5。若进程要访问的下一页的页号为 7，依据 LRU 算法，应淘汰页的页号是（ ）。<br>A. 2 B. 3 C. 4 D. 8<br>答：<psw>A</psw></p></li><li><p>按文件的组织方式可将文件分成 （ ） 等。<br>A．数据文件，命令文件，文本文件<br>B．命令文件，库文件，索引文件<br>C．顺序文件，索引文件，索引顺序文件<br>D．输入文件，输出文件，随机文件<br>答：<psw>C</psw></p></li><li><p>并发性是指若干事件在（ ）发生。<br>A.同一时刻 B.不同时刻 C.同一时间间隔内 D.不同时间间隔内<br>答：<psw>C</psw></p></li><li><p>设与某资源相关联的信号量初值为 3，当前值为 1，若 M 表示该资源的可用个数，N 表示等待资源的进程数，则 M、N 分别是（ ）。<br>A. 0、1 B. 1、0 C. 1、2 D. 2、0<br>答：<psw>B</psw></p></li><li><p>在对记录型信号量的 P 操作的定义中，当信号量的值（ ）时，执行 P 操作的进程变为阻塞状态。<br>A.大于 0<br>B.小于 0<br>C.等于 0<br>D.小于或等于 0<br>答：<psw>B</psw></p></li><li><p>系统中有 4 个进程都要使用某类资源。若每个进程最多需要 3 个该类资源，为保证系统不发生死锁，系统应提供该类资源至少是（ ）。<br>A.3 个 B.4 个 C.9 个 D.12 个<br>答：<psw>C</psw></p></li><li><p>采用分页存储管理方式进行存储分配时产生的存储碎片，被称为（ ）。<br>A.外零头 B.内零头 C.外零头或内零头 D.A、B、C 都正确<br>答：<psw>D</psw></p></li><li><p>进程和程序的本质区别是（ ）。<br>A.前者是动态的，后者是静态的<br>B.前者存储在内存，后者存储在外存<br>C.前者在一个文件中，后者在多个文件中<br>D.前者分时使用 CPU，后者独占 CPU<br>答：<psw>A</psw></p></li><li><p>分页存储管理系统中，虚拟地址转换成物理地址的工作是由（ ）完成的。<br>A.地址转换程序 B.用户程序 C.硬件 D.装入程序<br>答：<psw>C</psw></p></li><li><p>一个作业 8:00 到达系统，估计运行时间为 1 小时。若 10:00 开始执行该作业，其响应比是（ ）。<br>A.2<br>B.1<br>C.3<br>D.0.5<br>答：<psw>C， 响应比定义为：响应比&#x3D;作业响应时间&#x2F;运行时问的估计值。其中响应时间为作业进入系统后的等待时间加上估计的运行时间。于是响应比&#x3D;1+作业等待时间&#x2F;运行时间的估计值。所以本题计算*: 1+(10-8)&#x2F;1&#x3D;3,</psw></p></li><li><p>具有 3 级页表的系统中，访问内存的次数为（ ）。<br>A.4<br>B.3<br>C.2<br>D.1<br>答：<psw>A</psw></p></li></ol>              </div>            </details><details class="folding-tag" open><summary> 填空题 </summary>              <div class='content'>              <ol><li><p>设有四个作业同时到达，每个作业的执行时间均为 1 小时，它们在一台处理机上按单道方式运行，则平均周转时间为<psw>2.5</psw>小时。</p></li><li><p>在 OS 中，不可中断的操作称为<psw>原语</psw>。</p></li><li><p>如果系统中有 n 个进程，则在等待队列中进程的个数最多为 <psw>n</psw>个。</p></li><li><p>操作系统是一种<psw>系统</psw>软件。</p></li><li><p>一次仅允许一个进程使用的资源称为<psw>临界资源</psw>。</p></li><li><p>操作系统的接口有<psw>命令接口</psw>、程序接口和图形用户接口。</p></li><li><p>操作系统中的 SPOOLing 技术，实质是将<psw>独占</psw>设备转化为共享设备的技术。</p></li><li><p>设备 I&#x2F;O 方式有如下三种：程序方式、中断方式、<psw>询问</psw>和通道工作方式。</p></li><li><p>现代操作系统应当具备的特征为<psw>程序的并发执行</psw>、资源共享、<psw>操作的</psw>异步。</p></li></ol>              </div>            </details><details class="folding-tag" open><summary> 简答题 </summary>              <div class='content'>              <ol><li><p>画出进程的五种状态转换图并注明转换的条件。</p><div class="hide-block"><button type="button" class="hide-button" style="">答案 </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2023/02/07/63e1dd4b3942a.png"></p></div></div></li><li><p>简述分页和分段的主要区别。</p><div class="hide-block"><button type="button" class="hide-button" style="">答案 </button><div class="hide-content"><blockquote><p>主要的区别如下：</p><ol><li>单位：分页是以固定页面大小（通常为 4KB 或 8KB）为单位进行内存分配的，而分段则是以程序段为单位进行内存分配的。</li><li>粒度：分页的粒度较小，适合管理大量小数据块，而分段的粒度较大，适合管理较大的数据段。</li><li>空间利用率：分页可以有效利用内存空间，因为它可以将内存块进行细粒度的分配，而分段则存在内存碎片问题。</li><li>管理方式：分页通常由操作系统自动完成，而分段则需要程序员手动实现。</li><li>总体来说，分页适用于管理大量小数据块，分段适用于管理大块内存。操作系统根据需求选择使用分页或分段，或者两者结合使用。</li></ol></blockquote></div></div></li><li><p>在操作系统中引起进程调度的因素有哪些？</p><div class="hide-block"><button type="button" class="hide-button" style="">答案 </button><div class="hide-content"><blockquote><ol><li>进程状态：当进程进入就绪状态，即可以运行，操作系统就会考虑是否进行调度。</li><li>优先级：操作系统会根据进程的优先级来选择哪个进程先运行。</li><li>CPU 时间片：操作系统通常使用时间片轮转算法，从而选择哪个进程先运行。</li><li>I&#x2F;O 操作：当进程在等待 I&#x2F;O 操作完成时，操作系统可以将 CPU 资源分配给其他进程。</li><li>进程睡眠：当进程处于睡眠状态，操作系统可以将 CPU 资源分配给其他进程。</li></ol></blockquote></div></div></li><li><p>（1）描述访问临界资源的循环进程（2）写出同步机制应遵循的准则</p><div class="hide-block"><button type="button" class="hide-button" style="">答案 </button><div class="hide-content"><blockquote><p>访问临界资源的循环进程是指多个进程同时对一个共享资源进行读写操作。由于多个进程同时竞争这个资源，可能导致数据冲突、不一致等问题。</p></blockquote><blockquote><ul><li>互斥性：在任意时刻，最多只有一个进程可以访问共享资源。</li><li>占有且继续：当一个进程占有共享资源时，它不会释放该资源直到完成对其的操作。</li><li>不死锁：在任意时刻，系统不会发生死锁现象，即多个进程因互相等待对方释放资源而陷入僵局。</li><li>有限等待：系统保证每个进程最多等待一个固定的时间限制，在该时间限制内，如果共享资源仍未被释放，则该进程被强制剥夺其占用资源的权利。</li><li>公平性：系统必须保证每个进程在等待共享资源的同时，都有相同的机会获得资源，不存在某个进程长期占有资源的情况。</li></ul></blockquote></div></div></li><li><p>简述死锁产生的原因及必要条件。</p><div class="hide-block"><button type="button" class="hide-button" style="">答案 </button><div class="hide-content"><blockquote><p>死锁是指两个或更多的进程在执行过程中因竞争资源而造成的一种互相等待的现象，若无外力作用将无法推进下去。死锁产生的必要条件包括：</p><ol><li>互斥条件：一个资源每次只能被一个进程使用。</li><li>请求与保持条件：进程已经占有了至少一个资源，但又提出了新的资源请求，而该资源已被其他进程占有，此时请求进程阻塞。</li><li>不剥夺条件：进程所获得的资源在未使用完之前，不能强行剥夺。</li><li>循环等待条件：存在一个进程等待序列，使得每个进程等待的其他进程正在等待该进程所占有的资源，形成一个环。</li></ol><p>当满足以上四个条件时，就会发生死锁。</p></blockquote></div></div></li></ol>              </div>            </details>]]></content>
      
      
      <categories>
          
          <category> 大学生涯 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 操作系统 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>2022年度总结</title>
      <link href="/posts/4c6a.html"/>
      <url>/posts/4c6a.html</url>
      
        <content type="html"><![CDATA[<div class="note blue anzhiyu-icon-fan flat"><p>眨眼之间一年就过去了，这一年发生了好多好多的事情呐。多图流量警告。</p></div><p>在这一年里有试过在杭州剪过一次新发型。</p><p><img src="https://bu.dusays.com/2023/05/26/6470846f46d88.webp"></p><h3 id="关于工作"><a href="#关于工作" class="headerlink" title="关于工作"></a>关于工作</h3><p>今年年初继续上年在一家很棒的公司做着前端实习工作，虽然工资不高，只有 5k，不过在这里认识的人都特别好，以至于到现在也常有联系。</p><p><img src="https://bu.dusays.com/2023/05/26/6470844b9fc4e.webp"></p><p>工位也很喜欢，每天来到办公室的第一件事就是开中央空调。因为是直播公司的缘故，在这里从来没有缺过零食，除了一开始的单休不太美丽以外，后续也改为了双休（打工人高呼）</p><p><img src="https://bu.dusays.com/2023/05/26/6470848c29c8d.webp"></p><p>临近春节以后给住了半年的小区最后拍了一张清晨的拱墅区。</p><p><img src="https://bu.dusays.com/2023/05/26/64708525ad96a.webp"></p><p>在杭州的日子里，这座城市给我感觉很棒，很魔幻，可惜第一次来到一个陌生的城市，租到了一个离工作地点通勤需要地铁 1 个半小时 ➕ 公交半小时才能抵达滨江实在是令人窒息。也曾试过 6 点半起来然后骑自行车只需要 1 个小时多到达公司楼下，这样 8 点多到，然后吃个早餐就差不多正好（9 点考勤），不过实在是太累了（也有过买小电驴的想法 💡），但是杭州的小电驴管的特别严，给我印象最深刻的就是过斑马线的时候一大堆人和电瓶车一起等红绿灯 🚥 的场景，然后几个人开始抢跑 hhh，这是湘潭这种小县城所不具备的。</p><p>再后来过完年本来打算是离职的，不过出乎意料的是居然被留下来兼职，后来一直在家里准备专升本的考试且 5k 兼职到了 5 月底左右。直到考试结束，挺谢谢老板的啦。</p><h3 id="关于生活"><a href="#关于生活" class="headerlink" title="关于生活"></a>关于生活</h3><p>从杭州回来以后就一直处于备考的状态，说起来老板真的人很好，年假提前了 10 多天放假足足放到了元宵，差不多大半个月。回来以后因为在杭州常常以外卖应付了事，胖了好多好多，于是积极响应女朋友的号召每天跑步跑步锻炼身体，坚持了一个月以后瘦了差不多 10 斤左右。</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="10">    <span class="gallery-data">[{"url":"https://bu.dusays.com/2023/05/26/6470855647fe1.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647085563f966.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/64708ac33e9a2.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/64708adf85f48.png","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><p>在 3 月份开始迷上各种开源项目，看了许许多多的开源项目，从中也偷窥了很多很多大牛 🐮 的思想。</p><p>也是在今年攒下了 10w，买房又进了一步。</p><p>第一次织花花，因为真的没有什么时间，但是又马上要到 520 了的我，只要一个星期就可以织完的线材，前前后后居然用了 20 天才织完，所幸效果很不错，那段时间脑子 🧠 里都是短针，中长针，长针。😵，一共 9 朵，献给了我的宝。</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="10">    <span class="gallery-data">[{"url":"https://bu.dusays.com/2023/05/26/647085e9dbb6f.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647085e80a8ce.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647085e73dcf4.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647085e998856.webp","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><p>还有几件令人高兴的事情，原神我抽出了双黄蛋！，万叶也出来了！</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="10">    <span class="gallery-data">[{"url":"https://bu.dusays.com/2023/05/26/64708643bff02.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/64708646f12b1.webp","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><p>在这一年里我换掉了跟了我 3 年的联想 Y7000 游戏本，换上了现在的 macbook</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="10">    <span class="gallery-data">[{"url":"https://bu.dusays.com/2023/05/26/6470864773efa.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/64708b8532cce.png","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><p>具体使用感受可以去看我的这篇文章</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://anheyu.com/posts/571d.html">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/anheyu.com/posts/571d.html.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">macbook pro 2021真实体验</div>            <div class="tag-link-sitename">https://anheyu.com/posts/571d.html</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><h3 id="关于学业"><a href="#关于学业" class="headerlink" title="关于学业"></a>关于学业</h3><p>在考完后的 1 个月迎来了升本录取通知书</p><p><img src="https://bu.dusays.com/2023/05/26/64708675c577d.webp"></p><h3 id="关于美食"><a href="#关于美食" class="headerlink" title="关于美食"></a>关于美食</h3><p>本年的娱乐活动少的可怜，由于口罩的原因几乎没有外出，但是依然忙里偷闲在 6 月和小伙伴们自己尝试做烧烤吃<del>虽然不是那么好吃，一顿海底捞的钱居然没有吃饱</del>，一定是打开方式不对。</p><p>在湘江边上的烧烤很棒！</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="10">    <span class="gallery-data">[{"url":"https://bu.dusays.com/2023/05/26/647086bac752d.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647086bf3f63d.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647086bc1d1ce.webp","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><p>只不过打开方式不太对，实在是吃不下去，大部分都喂给小狗狗吃了。</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="10">    <span class="gallery-data">[{"url":"https://bu.dusays.com/2023/05/26/647086bc57de5.jpeg","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647086bec3775.webp","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><p>后来还陆陆续续的约了几次麻将 🀄️</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="10">    <span class="gallery-data">[{"url":"https://bu.dusays.com/2023/05/26/6470885b6bcbb.webp","alt":""},{"url":"https://bu.dusays.com/2023/05/26/6470885b6bcba.webp","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><h3 id="关于博客"><a href="#关于博客" class="headerlink" title="关于博客"></a>关于博客</h3><p>这一年把博客改了很多很多，也开始陆陆续续的产出文章，只是没售后 🤡，也开始尝试在 bilbili 发视频，想尝试更多新的内容，认识好多好多有趣的人。</p><div class="gallery">  <div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowHeight="300" data-limit="6">    <span class="gallery-data">[{"url":"https://bu.dusays.com/2023/05/26/647088e803218.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647088eea2024.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647088d9084b8.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647088e0ec431.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/64708973eaafe.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/64708977148c0.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/6470898023622.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/647089803de0c.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/64708983c1695.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/6470898214e65.png","alt":""},{"url":"https://bu.dusays.com/2023/05/26/64708af2a92b5.png","alt":""}]</span>  </div><button class="gallery-load-more" style="opacity:0">  <span>加载更多</span>  <i class="anzhiyufont anzhiyu-icon-arrow-down"></i>  </button></div><h3 id="关于技术"><a href="#关于技术" class="headerlink" title="关于技术"></a>关于技术</h3><div class='checkbox blue checked'><input type="checkbox" checked="checked"/>            <p>vue3+pinia</p>            </div><div class='checkbox blue checked'><input type="checkbox" checked="checked"/>            <p>react18新hook</p>            </div><div class='checkbox blue checked'><input type="checkbox" checked="checked"/>            <p>threeJS，智慧城市</p>            </div><div class='checkbox blue'><input type="checkbox" />            <p>canvas，svg绘制</p>            </div><div class='checkbox blue'><input type="checkbox" />            <p>css奇技淫巧</p>            </div><div class='checkbox blue'><input type="checkbox" />            <p>javascript技巧总结</p>            </div><div class='checkbox blue'><input type="checkbox" />            <p>springboot重提</p>            </div><div class='checkbox blue'><input type="checkbox" />            <p>视频流，音频流，流媒体</p>            </div>]]></content>
      
      
      <categories>
          
          <category> 年度总结 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 年度总结 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[转载]还在用 JS 做节流吗？CSS 也可以防止按钮重复点击</title>
      <link href="/posts/dd9.html"/>
      <url>/posts/dd9.html</url>
      
        <content type="html"><![CDATA[<div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://juejin.cn/post/7165828047520661534">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/juejin.cn/post/7165828047520661534.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">还在用 JS 做节流吗？CSS 也可以防止按钮重复点击</div>            <div class="tag-link-sitename"> https://juejin.cn/post/7165828047520661534</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p>众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。</p><p>举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每<code>300ms</code>提交一次，这时候我想大部分同学都会到网上直接拷贝一段<code>throttle</code>函数，或者直接引用<code>lodash</code>工具库</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, _.<span class="title function_">throttle</span>(save, <span class="number">300</span>));</span><br></pre></td></tr></table></figure><p>其实除了 JS 方式， CSS 也可以非常轻易的实现这样一个功能，无需任何框架库，一起看看吧</p><h2 id="一、CSS-实现思路分析"><a href="#一、CSS-实现思路分析" class="headerlink" title="一、CSS 实现思路分析"></a>一、CSS 实现思路分析</h2><p>CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。</p><p>比如这里的需要对点击事件进行限制，也就是禁用点击事件，想想有什么方式可以禁用事件，没错，就是<code>pointer-events</code>;</p><p>然后是时间的限制，每次点击后需要自动禁用<code>300ms</code>，时间过后重新恢复，那么，有什么特性和时间以及状态恢复有关呢？没错，就是<code>animation</code>;</p><p>除此之外，还需要有触发时机，这里是点击行为，所以必然和伪类<code>:active</code>有关联。</p><p>因此，综合分析，实现这样一个功能需要用到<code>pointer-events</code>、<code>animation</code>以及<code>:active</code>，那么如何将这些思路串联起来呢？</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ddc0830dbf747c6a2f256ff9910a5f0~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp" alt="image-20221112001600031"></p><p>思考 3 秒…</p><p>🤔</p><p>🤔</p><p>🤔</p><p>你想到了吗？💡💡💡</p><p>其实这种场景可以理解成是<strong>对 CSS 动画的控制</strong>，比如有一个动画控制按钮从<strong>禁用</strong>-&gt;<strong>可点击</strong>的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于<strong>禁用</strong>状态，是不是就达到了“节流”的效果了？</p><p>接下来看看具体实现</p><h2 id="二、CSS-动画的精准控制"><a href="#二、CSS-动画的精准控制" class="headerlink" title="二、CSS 动画的精准控制"></a>二、CSS 动画的精准控制</h2><p>假设有一个按钮，绑定了一个点击事件</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">&quot;console.log(&#x27;保存&#x27;)&quot;</span>&gt;</span>保存<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure><p>这时的按钮连续点击就会不断地触发，效果如下</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/598ff1d433dd40e8a828257aa0495140~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp" alt="Kapture 2022-11-12 at 00.17.44"></p><p>下面定义一个关于<code>pointer-events</code>的动画，就叫做 <code>throttle</code> 吧</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@keyframes</span> throttle &#123;</span><br><span class="line">  <span class="selector-tag">from</span> &#123;</span><br><span class="line">    <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">to</span> &#123;</span><br><span class="line">    <span class="attribute">pointer-events</span>: all;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>很简单吧，就是从<strong>禁用</strong>到<strong>可点击</strong>的变化。</p><p>接下来，将这个动画绑定在按钮上，这里为了方便测试，将动画设置成了<code>2s</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">button</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: throttle <span class="number">2s</span> step-end forwards;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>注意，这里动画的缓动函数设置成了阶梯曲线，<code>step-end</code>，它可以很方便的控制<code>pointer-events</code>的变化时间点。</p><blockquote><p>有兴趣的可以参考这篇文章：<a href="https://link.juejin.cn/?target=https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/" title="https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/">CSS3 animation 属性中的 steps 功能符深入介绍 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)</a></p></blockquote><p>如下示意，<code>pointer-events</code>在 0~2 秒内的值都是<code>none</code>，一旦到达 2 秒，就立刻变成了<code>all</code>，由于是<code>forwards</code>，会一直保持<code>all</code>的状态</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49075510ac2d4f058940b2fcdedd8ef7~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp" alt="image-20221112005210875"></p><p>最后，在点击时重新执行一遍动画，只需要在按下时设置动画为<code>none</code>就行了</p><blockquote><p>这个技巧之前在这篇文章中有更详细的介绍： <a href="https://juejin.cn/post/7064404257436336135" title="https://juejin.cn/post/7064404257436336135">CSS 实现按钮点击动效的套路</a></p></blockquote><p>实现如下</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">button</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>为了演示方便，我们暂时把颜色变化也加在动画里</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@keyframes</span> throttle &#123;</span><br><span class="line">  <span class="selector-tag">from</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">to</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: green;</span><br><span class="line">    <span class="attribute">pointer-events</span>: all;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>现在如果文字是<code>red</code>，表示是禁用态，只有是<code>green</code>，才表示可以被点击，非常清晰明了，如下</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/504f0df68b174ec680027204aa68f60a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp" alt="Kapture 2022-11-12 at 10.54.43"></p><p>下面是最终点击对比效果，很好地限制了点击频率</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0149a2bfc61a4bfe9476e4817977b380~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp" alt="Kapture 2022-11-12 at 10.48.13"></p><p>完整代码如下，就这么几行，<strong>如果需要改限制时间，直接改动画时间就行了</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">button</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: throttle <span class="number">2s</span> step-end forwards;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">button</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> throttle &#123;</span><br><span class="line">  <span class="selector-tag">from</span> &#123;</span><br><span class="line">    <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">to</span> &#123;</span><br><span class="line">    <span class="attribute">pointer-events</span>: all;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>你也可以查看以下任意链接：</p><ul><li><a href="https://link.juejin.cn/?target=https://codepen.io/xboxyan/pen/rNKmmVq" title="https://codepen.io/xboxyan/pen/rNKmmVq">CSS throttle (codepen.io)</a></li><li><a href="https://link.juejin.cn/?target=https://runjs.work/projects/47885939389440f4" title="https://runjs.work/projects/47885939389440f4">CSS throttle (runjs.work)</a></li></ul><h2 id="三、CSS-实现的其他思路"><a href="#三、CSS-实现的其他思路" class="headerlink" title="三、CSS 实现的其他思路"></a>三、CSS 实现的其他思路</h2><p>还记得之前这一篇文章吗？</p><blockquote><p><a href="https://juejin.cn/post/7143051955810598926" title="https://juejin.cn/post/7143051955810598926">还在用定时器吗？借助 CSS 来监听事件</a></p></blockquote><p>借用这种思路，也可以很轻松的实现节流的效果。而且为了更好的体验，可以用上真正的按钮禁用</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">btn.<span class="property">disabled</span> = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure><p>具体思路是这样的，通过<code>:active</code>去触发<code>transition</code>变化，然后通过监听<code>transition</code>回调去动态设置按钮的禁用状态，实现如下</p><p>定义一个无关紧要的过渡属性，比如<code>opacity</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">button</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.99</span>;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">2s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">button</span><span class="selector-pseudo">:not</span>(<span class="selector-pseudo">:disabled</span>)<span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0s</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后监听<code>transition</code>的起始回调</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 过渡开始</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;transitionstart&quot;</span>, <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">  ev.<span class="property">target</span>.<span class="property">disabled</span> = <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 过渡结束</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;transitionend&quot;</span>, <span class="keyword">function</span> (<span class="params">ev</span>) &#123;</span><br><span class="line">  ev.<span class="property">target</span>.<span class="property">disabled</span> = <span class="literal">false</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>这样做的最大好处是，<strong>这部分禁用的逻辑是完全和业务逻辑是解耦的</strong>，可以在任意时候，任意场合下无缝接入，也不受框架和环境影响，效果如下</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18d578d705104d84ab32394cd7426bab~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp" alt="Kapture 2022-11-14 at 17.25.49"></p><p>完整代码也可以查看以下任意链接：</p><ul><li><a href="https://link.juejin.cn/?target=https://codepen.io/xboxyan/pen/oNyWwvB" title="https://codepen.io/xboxyan/pen/oNyWwvB">CSS throttle disabled (codepen.io)</a></li><li><a href="https://link.juejin.cn/?target=https://runjs.work/projects/41e8b998624743fc" title="https://runjs.work/projects/41e8b998624743fc">CSS throttle disabled (runjs.work)</a></li></ul><h2 id="四、总结一下"><a href="#四、总结一下" class="headerlink" title="四、总结一下"></a>四、总结一下</h2><p>以上通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制，下面一起总结一下实现要点：</p><ol><li>函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行</li><li>CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性</li><li>CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从<strong>禁用</strong>-&gt;<strong>可点击</strong>的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于<strong>禁用</strong>状态，这样就达到了“节流”的效果</li><li>还可以通过 transition 的回调函数动态设置按钮禁用态</li><li>这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的</li></ol><p>不过，这种实现方式还是比较有局限的，仅限于点击行为，像很多时候，节流可能会用在滚动事件或者键盘事件上，像这些场景就用传统方式实现就行了。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发 ❤❤❤</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 开发 </tag>
            
            <tag> 前端 </tag>
            
            <tag> css3 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>transform 支持单独赋值改变</title>
      <link href="/posts/b019.html"/>
      <url>/posts/b019.html</url>
      
        <content type="html"><![CDATA[<p>在掘金看到一篇文章</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://juejin.cn/post/7152331836578856967">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/juejin.cn/post/7152331836578856967.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">解放生产力！transform 支持单独赋值改变</div>            <div class="tag-link-sitename">https://juejin.cn/post/7152331836578856967</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p>看完以后有感而发<code>transform</code>在制作动画时经常被占用，因为一个元素只能使用一个 transform，所以当我有多属性值需要设置时，我通常的做法是通过添加一个父元素来给它设置 transform 属性。</p><p>比如在魔改博客的过程中希望改变<code>transform</code>中的某一部分, 我必须把前面的部分也照抄一遍才能达到覆盖修改的目的</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">header</span><span class="selector-class">.nav</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.5</span>); <span class="comment">/*这样不行，会丢失translate*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*必须写完整*/</span></span><br><span class="line"><span class="selector-tag">header</span><span class="selector-class">.nav</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>) <span class="built_in">scale</span>(<span class="number">1.5</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>所以<code>transform</code>很需要能够像<code>background</code>那样能够有单独书写的属性以覆盖 transform 中的值。</p><p>但是从<code>Chrome 104</code>开始，浏览器终于正式支持单独赋值了</p><p>比如说</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">header</span><span class="selector-class">.nav</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>) <span class="built_in">scale</span>(<span class="number">1.5</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>可以写成</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">header</span><span class="selector-class">.nav</span> &#123;</span><br><span class="line">  translate: -<span class="number">50%</span> -<span class="number">50%</span>;</span><br><span class="line">  scale: <span class="number">1.5</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这样如果需要改变某一部分，就只需要像普通属性一样覆盖就行了</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">header</span><span class="selector-class">.nav</span> &#123;</span><br><span class="line">  scale: <span class="number">2</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>想了解更多的话可以去看看原文，但是这个写法实在是太新了，不建议这么玩。</p><p>基于此我们可以发散思维想一想还有什么办法可以解决<code>transform占用</code>的问题，没错就是 css 变量</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>) <span class="built_in">scale</span>(<span class="number">1.5</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>通过 CSS 变量，将 transform 拆分</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attr">--translate</span>: -<span class="number">50%</span>, -<span class="number">50%</span>;</span><br><span class="line">  <span class="attr">--scale</span>: <span class="number">1.5</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="built_in">var</span>(--translate)) <span class="built_in">scale</span>(<span class="built_in">var</span>(--scale));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>经过这样拆分以后，CSS 变量就成了独立属性，如果需要覆盖，只需要修改其中一个就行了，而无需关注–translate 是什么样的，这样变化的部分就可以单独作为一个公共的样式了，如下</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.div1</span> &#123;</span><br><span class="line">  <span class="attr">--translate</span>: -<span class="number">50%</span>, -<span class="number">50%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.div1</span> &#123;</span><br><span class="line">  <span class="attr">--translate</span>: <span class="number">10px</span>, <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.scale</span> &#123;</span><br><span class="line">  <span class="attr">--scale</span>: <span class="number">2</span>; <span class="comment">/*无需关注其他transform，可以作为公共的样式*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这么做如果是单纯的状态变化是没有问题的，只需要使用<code>transition: .3s;</code>就可以实现过渡动画，不过当在做 <code>animation</code> 的时候,<br>会发现过渡不了，此时需要下面的代码来实现过渡<code>@property</code>属性可以让我们的自定义属性<code>--scale</code>的变化像 <code>transition: .3s</code> 那样来实现过渡效果。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@property</span> --scale &#123;</span><br><span class="line">  syntax: <span class="string">&quot;&lt;number&gt;&quot;</span>;</span><br><span class="line">  inherits: false;</span><br><span class="line">  initial-value: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 开发 </tag>
            
            <tag> 前端 </tag>
            
            <tag> css3 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>css模糊羽化</title>
      <link href="/posts/fd57.html"/>
      <url>/posts/fd57.html</url>
      
        <content type="html"><![CDATA[<p>在逛 codepen 的时候发现一个有意思的 css 羽化项目</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://codepen.io/xboxyan/pen/ZERZrQw">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://img02.anheyu.com/adminuploads/1/2022/12/24/63a6a601154d7.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">css羽化</div>            <div class="tag-link-sitename">css 羽化</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p>原理是使用了 svg 中的 <code>foreignObject</code> 将 dom 转化为图片来创建一个边缘模糊的遮罩</p><p>让原本有<code>backdrop-filter: blur(10px);</code>的元素产生了羽化的效果</p><p>核心代码</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.name</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">30px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">15px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  backdrop-<span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">10px</span>);</span><br><span class="line">  -webkit-<span class="attribute">mask</span>: <span class="built_in">url</span>(<span class="string">&quot;data:image/svg+xml,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27;%3E%3CforeignObject width=&#x27;100%25&#x27; height=&#x27;100%25&#x27;%3E%3Cbody class=&#x27;wrap&#x27; xmlns=&#x27;http://www.w3.org/1999/xhtml&#x27;%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:15px%7D.shadow%7Bheight:100%25;background:black;border-radius:10px;box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black %7D%3C/style%3E%3Cdiv class=&#x27;shadow&#x27;/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>且这么创建出来的羽化效果可以达到自适应。当然我觉得或许可以用 box-shadow 也可以实现，只不过觉得这种实现方式思路新奇，特此记录 📝。</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 开发 </tag>
            
            <tag> 前端 </tag>
            
            <tag> css3 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>butterfly文章顶部添加波浪效果</title>
      <link href="/posts/98c4.html"/>
      <url>/posts/98c4.html</url>
      
        <content type="html"><![CDATA[<div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/21/63a2dcb4d781a.png"></p></div></div></div><h1 id="魔改"><a href="#魔改" class="headerlink" title="魔改"></a>魔改</h1><p>修改 <code>themes/butterfly/layout/includes/header/index.pug</code> 大概第 33 行左右</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">if top_img !== false</span><br><span class="line">  if is_post()</span><br><span class="line">    include ./post-info.pug</span><br><span class="line"><span class="addition">+   section.main-hero-waves-area.waves-area</span></span><br><span class="line"><span class="addition">+     svg.waves-svg(xmlns=&#x27;http://www.w3.org/2000/svg&#x27;, xlink=&#x27;http://www.w3.org/1999/xlink&#x27;, viewBox=&#x27;0 24 150 28&#x27;, preserveAspectRatio=&#x27;none&#x27;, shape-rendering=&#x27;auto&#x27;)</span></span><br><span class="line"><span class="addition">+       defs</span></span><br><span class="line"><span class="addition">+         path#gentle-wave(d=&#x27;M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z&#x27;)</span></span><br><span class="line"><span class="addition">+       g.parallax</span></span><br><span class="line"><span class="addition">+         use(href=&#x27;#gentle-wave&#x27;, x=&#x27;48&#x27;, y=&#x27;0&#x27;)</span></span><br><span class="line"><span class="addition">+         use(href=&#x27;#gentle-wave&#x27;, x=&#x27;48&#x27;, y=&#x27;3&#x27;)</span></span><br><span class="line"><span class="addition">+         use(href=&#x27;#gentle-wave&#x27;, x=&#x27;48&#x27;, y=&#x27;5&#x27;)</span></span><br><span class="line"><span class="addition">+         use(href=&#x27;#gentle-wave&#x27;, x=&#x27;48&#x27;, y=&#x27;7&#x27;)</span></span><br><span class="line">    #post-top-cover</span><br><span class="line">      img#post-top-bg(class=&#x27;nolazyload&#x27; src=bg_img)</span><br><span class="line">  else if is_home()</span><br><span class="line">    #site-info</span><br><span class="line">      h1#site-title=site_title</span><br><span class="line">      if theme.subtitle.enable</span><br></pre></td></tr></table></figure><p>为了方便复制，提供一份需要修改的部分:</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">section.main-hero-waves-area.waves-area</span><br><span class="line">  svg.waves-svg(xmlns=<span class="string">&#x27;http://www.w3.org/2000/svg&#x27;</span>, xlink=<span class="string">&#x27;http://www.w3.org/1999/xlink&#x27;</span>, viewBox=<span class="string">&#x27;0 24 150 28&#x27;</span>, preserveAspectRatio=<span class="string">&#x27;none&#x27;</span>, shape-rendering=<span class="string">&#x27;auto&#x27;</span>)</span><br><span class="line">    defs</span><br><span class="line">      path<span class="comment">#gentle-wave(d=&#x27;M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z&#x27;)</span></span><br><span class="line">    g.parallax</span><br><span class="line">      use(href=<span class="string">&#x27;#gentle-wave&#x27;</span>, x=<span class="string">&#x27;48&#x27;</span>, y=<span class="string">&#x27;0&#x27;</span>)</span><br><span class="line">      use(href=<span class="string">&#x27;#gentle-wave&#x27;</span>, x=<span class="string">&#x27;48&#x27;</span>, y=<span class="string">&#x27;3&#x27;</span>)</span><br><span class="line">      use(href=<span class="string">&#x27;#gentle-wave&#x27;</span>, x=<span class="string">&#x27;48&#x27;</span>, y=<span class="string">&#x27;5&#x27;</span>)</span><br><span class="line">      use(href=<span class="string">&#x27;#gentle-wave&#x27;</span>, x=<span class="string">&#x27;48&#x27;</span>, y=<span class="string">&#x27;7&#x27;</span>)</span><br></pre></td></tr></table></figure><p>然后在<code>_config.butterfly.yml</code>的 <code>[inject.head]</code> 或者自定义 css 中 引入以下 css, 不会的同学参考<a href="https://blog.leonus.cn/2022/custom.html">Hexo 博客添加自定义 css 和 js 文件</a></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 波浪css */</span></span><br><span class="line"><span class="selector-class">.main-hero-waves-area</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: -<span class="number">11px</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">5</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.waves-area</span> <span class="selector-class">.waves-svg</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* Animation */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.parallax</span> &gt; use &#123;</span><br><span class="line">  <span class="attribute">animation</span>: move-forever <span class="number">25s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.55</span>, <span class="number">0.5</span>, <span class="number">0.45</span>, <span class="number">0.5</span>) infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.parallax</span> &gt; use<span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>) &#123;</span><br><span class="line">  <span class="attribute">animation-delay</span>: -<span class="number">2s</span>;</span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">7s</span>;</span><br><span class="line">  fill: <span class="number">#f7f9febd</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.parallax</span> &gt; use<span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>) &#123;</span><br><span class="line">  <span class="attribute">animation-delay</span>: -<span class="number">3s</span>;</span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">10s</span>;</span><br><span class="line">  fill: <span class="number">#f7f9fe82</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.parallax</span> &gt; use<span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>) &#123;</span><br><span class="line">  <span class="attribute">animation-delay</span>: -<span class="number">4s</span>;</span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">13s</span>;</span><br><span class="line">  fill: <span class="number">#f7f9fe36</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.parallax</span> &gt; use<span class="selector-pseudo">:nth-child</span>(<span class="number">4</span>) &#123;</span><br><span class="line">  <span class="attribute">animation-delay</span>: -<span class="number">5s</span>;</span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">20s</span>;</span><br><span class="line">  fill: <span class="number">#f7f9fe</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 黑色模式背景 */</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.parallax</span> &gt; use<span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>) &#123;</span><br><span class="line">  <span class="attribute">animation-delay</span>: -<span class="number">2s</span>;</span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">7s</span>;</span><br><span class="line">  fill: <span class="number">#18171dc8</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.parallax</span> &gt; use<span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>) &#123;</span><br><span class="line">  <span class="attribute">animation-delay</span>: -<span class="number">3s</span>;</span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">10s</span>;</span><br><span class="line">  fill: <span class="number">#18171d80</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.parallax</span> &gt; use<span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>) &#123;</span><br><span class="line">  <span class="attribute">animation-delay</span>: -<span class="number">4s</span>;</span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">13s</span>;</span><br><span class="line">  fill: <span class="number">#18171d3e</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.parallax</span> &gt; use<span class="selector-pseudo">:nth-child</span>(<span class="number">4</span>) &#123;</span><br><span class="line">  <span class="attribute">animation-delay</span>: -<span class="number">5s</span>;</span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">20s</span>;</span><br><span class="line">  fill: <span class="number">#18171d</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> move-forever &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(-<span class="number">90px</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">85px</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*Shrinking for mobile*/</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.waves-area</span> <span class="selector-class">.waves-svg</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">min-height</span>: <span class="number">40px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>大功告成，需要注意的是 css 中<code>fill属性</code>可以控制波浪颜色，最好使其中一个颜色与背景颜色一致，否则会显的有点奇怪。</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> butterfly </tag>
            
            <tag> 教程 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Chrome 发布新的 CSS 视口单位：svh、lvh、dvh！！！</title>
      <link href="/posts/e644.html"/>
      <url>/posts/e644.html</url>
      
        <content type="html"><![CDATA[<div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://web.dev/viewport-units/">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/web.dev/viewport-units/.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">原文链接</div>            <div class="tag-link-sitename"> The large， small， and dynamic viewport units</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://mp.weixin.qq.com/s/sbdXOo1GUBOxQw_HC7arwQ">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/mp.weixin.qq.com/s/sbdXOo1GUBOxQw_HC7arwQ.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">原文翻译</div>            <div class="tag-link-sitename"> Chrome 发布新的 CSS 视口单位：svh、lvh、dvh！！！</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p><code>CSS</code> 的 <code>Viewport</code>单位听起来很棒。</p><p>如果你想将一个元素设置成<code>全屏高度</code>，你可以设置高度:<code>100vh</code>，这样你就有了一个完美的<code>全屏元素</code>，它会随着视口的改变而改变大小！！！!</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/19/639fe5a920d2b.png" alt="图片"></p><p>遗憾的是，事实并非如此！！！</p><h2 id="vw、vh-的问题"><a href="#vw、vh-的问题" class="headerlink" title="vw、vh 的问题"></a>vw、vh 的问题</h2><p>要调整<code>视口大小</code>，可以使用 <code>vw</code> 和 <code>vh</code> 单位。<code>vw</code>=视口大小<code>宽度</code>的 <code>1%</code>。<code>vh</code>=视口大小<code>高度</code>的 <code>1%</code>。给一个元素 <code>100vw</code>的宽度和 <code>100vh</code> 的高度，它将完全<code>覆盖视口</code>。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/19/639fe465a02d2.png!blogimg" alt="图片"></p><p>虽然现有的设备在桌面上运行良好，但在<code>移动设备</code>上则不同。在那里，视口大小受动态<code>工具栏</code>的存在或不存在的影响。这些是用户界面，如<code>地址栏</code>和<code>选项卡</code>栏。虽然视口大小可以更改，但 <code>vw</code> 和 <code>vh</code> 大小不会更改。因此，大小为 <code>100vh</code> 的元素将从视口中<code>溢出</code>。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/19/639fe4657093c.png!blogimg" alt="图片"></p><p>向下滚动时，这些动态<code>工具栏</code>将<code>缩回</code>。在此状态下，大小为 <code>100vh</code> 的元素将<code>覆盖</code>整个视口。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/19/639fe46573c9c.png!blogimg" alt="图片"></p><p>为了解决这个问题，在 <code>CSS</code> 中指定了视口的各种状态。</p><h2 id="新的视口单位"><a href="#新的视口单位" class="headerlink" title="新的视口单位"></a>新的视口单位</h2><p><code>小视口</code>：这些动态工具栏是展开的<code>大视口</code>：这些动态工具栏是缩回的</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/19/639fe465823eb.png!blogimg" alt="图片"></p><p>表示<code>大视口</code>的单位具有 <code>lv</code> 前缀。单位为 <code>lvw</code>、<code>lvh</code>、<code>lvi</code>、<code>lvb</code>、<code>lvmin</code> 和 <code>lvmax</code>。表示<code>小视口</code>的单位具有 <code>sv</code> 前缀。单位为 <code>svw</code>、<code>svh</code>、<code>svi</code>、<code>svb</code>、<code>svmin</code> 和 <code>svmax</code>。除非调整视口本身的大小，否则这些视口百分比单位的大小是固定的（因此是稳定的）。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/19/639fe46595ae8.png!blogimg" alt="图片"></p><h2 id="动态视口"><a href="#动态视口" class="headerlink" title="动态视口"></a>动态视口</h2><p>除了<code>大视口</code>和<code>小视口</code>，还有一个<code>动态视口</code>，它动态考虑了动态工具栏。展开动态工具栏时，动态视口等于小视口的大小。当动态工具栏缩回时，动态视口等于大视口的大小。其附带的单位具有 <code>dv</code> 前缀：<code>dvw</code>、<code>dvh</code>、<code>dvi</code>、<code>dvb</code>、<code>dvmin</code> 和 <code>dvmax</code>。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/19/639fe46598faa.png!blogimg" alt="图片"></p><p>这些单位在 <code>Chrome108</code> 中发布，加入了已经支持的 <code>Safari</code> 和 <code>Firefox</code>。</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
            <tag> css3 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>bilibili动态背景</title>
      <link href="/posts/8d2b.html"/>
      <url>/posts/8d2b.html</url>
      
        <content type="html"><![CDATA[<p>bilibili 动态背景 winter || autumn || spring，刷新随机顶部 cover，本篇不做教程，仅作为记录艰辛的过程 📝</p><p>本来集成成了好几个 pug 结果发现并不能结构化引入，最后还是变成了 js 操作，难受难受，果然写习惯了 vue， react 再回来就不熟练了</p><details class="folding-tag" blue><summary> 坎坷的失败品 </summary>              <div class='content'>              <p>本来拆分出来了了以下几个 pug，<del>结果发现完全用不了</del></p><p>autumn.pug</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">.blqbanner.mobile-hidden</span><br><span class="line">  div</span><br><span class="line">    img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-1.webp&#x27;</span>)</span><br><span class="line">  div</span><br><span class="line">    img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-2.png&#x27;</span>)</span><br><span class="line">  div</span><br><span class="line">    img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-3.png&#x27;</span>)</span><br><span class="line">  div</span><br><span class="line">    img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-4.png&#x27;</span>)</span><br><span class="line">  div</span><br><span class="line">    img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-5.png&#x27;</span>)</span><br><span class="line">  div</span><br><span class="line">    img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-6.png&#x27;</span>)</span><br><span class="line"></span><br><span class="line">link(rel=<span class="string">&quot;stylesheet&quot;</span>, href=url_for(<span class="string">&quot;/css/biliBg/autumn/autumn.css&quot;</span>))</span><br><span class="line">script(src=url_for(<span class="string">&quot;/js/biliBg/autumn/autumn.js&quot;</span>))</span><br></pre></td></tr></table></figure><p>spring.pug</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line">.bili-banner</span><br><span class="line">  .animated-banner</span><br><span class="line">    //-  背景</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg1.png&#x27;</span>, data-height=<span class="string">&#x27;360&#x27;</span>, data-width=<span class="string">&#x27;9666&#x27;</span>, height=<span class="string">&#x27;180&#x27;</span>, width=<span class="string">&#x27;4833&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(0px, -15px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  左山</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg2.png&#x27;</span>, data-height=<span class="string">&#x27;360&#x27;</span>, data-width=<span class="string">&#x27;9666&#x27;</span>, height=<span class="string">&#x27;180&#x27;</span>, width=<span class="string">&#x27;4833&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(1100px, 0px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  右山</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg3.png&#x27;</span>, data-height=<span class="string">&#x27;360&#x27;</span>, data-width=<span class="string">&#x27;3523&#x27;</span>, height=<span class="string">&#x27;162&#x27;</span>, width=<span class="string">&#x27;1585&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(675px, 0px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  左桥</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg4.png&#x27;</span>, data-height=<span class="string">&#x27;360&#x27;</span>, data-width=<span class="string">&#x27;2938&#x27;</span>, height=<span class="string">&#x27;176&#x27;</span>, width=<span class="string">&#x27;1439&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(-637px, 0px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  右船</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg5.png&#x27;</span>, data-height=<span class="string">&#x27;139&#x27;</span>, data-width=<span class="string">&#x27;556&#x27;</span>, height=<span class="string">&#x27;62&#x27;</span>, width=<span class="string">&#x27;250&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(607.5px, 45px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  开船人物</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/p4.png&#x27;</span>, data-height=<span class="string">&#x27;302&#x27;</span>, data-width=<span class="string">&#x27;734&#x27;</span>, height=<span class="string">&#x27;84&#x27;</span>, width=<span class="string">&#x27;205&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(252px, 36.4px) rotate(0deg); opacity: 0;&#x27;</span>)</span><br><span class="line">    //-  中草坪+树</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg6.png&#x27;</span>, data-height=<span class="string">&#x27;180&#x27;</span>, data-width=<span class="string">&#x27;1757&#x27;</span>, height=<span class="string">&#x27;125&#x27;</span>, width=<span class="string">&#x27;1229&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(112px, 25px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  中草坪+风筝</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg7.png&#x27;</span>, data-height=<span class="string">&#x27;116&#x27;</span>, data-width=<span class="string">&#x27;1757&#x27;</span>, height=<span class="string">&#x27;81&#x27;</span>, width=<span class="string">&#x27;1229&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(-350px, 49px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  人物</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/p2.png&#x27;</span>, data-height=<span class="string">&#x27;346&#x27;</span>, data-width=<span class="string">&#x27;497&#x27;</span>, height=<span class="string">&#x27;138&#x27;</span>, width=<span class="string">&#x27;198&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(-240px, 16px) rotate(0deg); opacity: 0;&#x27;</span>)</span><br><span class="line">    //-  人物</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/p1.png&#x27;</span>, data-height=<span class="string">&#x27;256&#x27;</span>, data-width=<span class="string">&#x27;146&#x27;</span>, height=<span class="string">&#x27;102&#x27;</span>, width=<span class="string">&#x27;58&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(-340px, 32px) rotate(0deg); opacity: 0;&#x27;</span>)</span><br><span class="line">    //-  中树</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/t1.png&#x27;</span>, data-height=<span class="string">&#x27;254&#x27;</span>, data-width=<span class="string">&#x27;602&#x27;</span>, height=<span class="string">&#x27;114&#x27;</span>, width=<span class="string">&#x27;270&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(-90px, 13.5px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  中草坪+树</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg8.png&#x27;</span>, data-height=<span class="string">&#x27;360&#x27;</span>, data-width=<span class="string">&#x27;4277&#x27;</span>, height=<span class="string">&#x27;180&#x27;</span>, width=<span class="string">&#x27;2138&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(100px, 0px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  中人物</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/p3.png&#x27;</span>, data-height=<span class="string">&#x27;327&#x27;</span>, data-width=<span class="string">&#x27;933&#x27;</span>, height=<span class="string">&#x27;147&#x27;</span>, width=<span class="string">&#x27;419&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(216px, 13.5px) rotate(0deg); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  右树</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/t3.png&#x27;</span>, data-height=<span class="string">&#x27;353&#x27;</span>, data-width=<span class="string">&#x27;740&#x27;</span>, height=<span class="string">&#x27;211&#x27;</span>, width=<span class="string">&#x27;444&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(2100px, 0px) rotate(0deg); filter: blur(2px); opacity: 1;&#x27;</span>)</span><br><span class="line">    //-  左树</span><br><span class="line">    .layer</span><br><span class="line">      img(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/t2.png&#x27;</span>, data-height=<span class="string">&#x27;360&#x27;</span>, data-width=<span class="string">&#x27;1916&#x27;</span>, height=<span class="string">&#x27;180&#x27;</span>, width=<span class="string">&#x27;958&#x27;</span>, style=<span class="string">&#x27;transform: scale(1) translate(-1000px, 0px) rotate(0deg); filter: blur(1px); opacity: 1;&#x27;</span>)</span><br><span class="line">    canvas<span class="comment">#springCanvas(width=&#x27;1519&#x27;, height=&#x27;155&#x27;, style=&#x27;position: absolute; top: 0px; left: 0px;    width: 100%;&#x27;)</span></span><br><span class="line"></span><br><span class="line">link(rel=<span class="string">&quot;stylesheet&quot;</span>, href=url_for(<span class="string">&quot;/css/biliBg/spring/spring.css&quot;</span>))</span><br><span class="line">script(src=url_for(<span class="string">&quot;/js/biliBg/spring/spring.js&quot;</span>) data-pjax)</span><br></pre></td></tr></table></figure><p>winter.pug</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">.bldbanner</span><br><span class="line">  .bldview</span><br><span class="line">    img.morning(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-view-1.webp&#x27;</span>)</span><br><span class="line">    img.afternoon(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-view-2.webp&#x27;</span>)</span><br><span class="line">    img.ball(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-ball.png&#x27;</span>)</span><br><span class="line">    video.evening(autoplay, loop, muted)</span><br><span class="line">      source(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-view-3.webm&#x27;</span>, <span class="built_in">type</span>=<span class="string">&#x27;video/webm&#x27;</span>)</span><br><span class="line">    img.window-cover(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-view-3-snow.png&#x27;</span>)</span><br><span class="line">  .tree</span><br><span class="line">    img.morning(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-tree-1.png&#x27;</span>)</span><br><span class="line">    img.afternoon(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-tree-2.png&#x27;</span>)</span><br><span class="line">    img.evening(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-tree-3.png&#x27;</span>)</span><br><span class="line"></span><br><span class="line">link(rel=<span class="string">&quot;stylesheet&quot;</span>, href=url_for(<span class="string">&quot;/css/biliBg/winter/winter.css&quot;</span>))</span><br><span class="line">script(src=url_for(<span class="string">&quot;/js/biliBg/winter/winter.js&quot;</span>))</span><br></pre></td></tr></table></figure><p>然后发现 pug 居然不能动态引入组件化，因为在编译的时候就已经确定 html 结构了，然而我还是在已经上线后才知道，还曾一度怀疑是 cdn 的缓存 🤡。</p>              </div>            </details><p>最后修改改改还是磕磕绊绊的完成了春秋冬的集成，就是这 js 代码我真的觉得好难受。</p><h2 id="魔改记录"><a href="#魔改记录" class="headerlink" title="魔改记录"></a>魔改记录</h2><p>判断文章是否需要随机 banner</p><p>修改 <code>themes/butterfly/layout/includes/header/index.pug</code>，引入我们的 bili-banner，首先判断文章顶部是否有 bilibili_bg，如果有就引入 bilibili 随机 banner</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">header#page-header(class=`$&#123;isHomeClass&#125;`)</span><br><span class="line">  !=partial(&#x27;includes/header/nav&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span><br><span class="line">  if top_img !== false</span><br><span class="line">    if is_post()</span><br><span class="line">      include ./post-info.pug</span><br><span class="line"><span class="addition">+     if page.bilibili_bg</span></span><br><span class="line"><span class="addition">+       !=partial(&#x27;includes/bili-banner/index&#x27;)</span></span><br></pre></td></tr></table></figure><p>新建 <code>themes/butterfly/layout/includes/bili-banner/index.pug</code>,这段直接引入所需要的 js</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">//- 随机背景</span><br><span class="line">script(src=url_for(<span class="string">&quot;/js/biliBg/biliBg.js&quot;</span>), data-pjax)</span><br></pre></td></tr></table></figure><p>新建<code>source/js/biliBg/biliBg.js</code>, 动态插入节点</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> biliBannerIndex = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">3</span>);</span><br><span class="line"><span class="keyword">var</span> $biliBannerParentsEl = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;page-header&quot;</span>);</span><br><span class="line"><span class="comment">//- 创建脚本节点</span></span><br><span class="line"><span class="keyword">var</span> biliBannerScript = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;script&quot;</span>);</span><br><span class="line">biliBannerScript.<span class="property">type</span> = <span class="string">&quot;text/javascript&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">info</span>(biliBannerIndex);</span><br><span class="line"><span class="keyword">if</span> (biliBannerIndex === <span class="number">0</span>) &#123;</span><br><span class="line">  <span class="comment">//- autumn</span></span><br><span class="line">  $biliBannerParentsEl.<span class="title function_">insertAdjacentHTML</span>(</span><br><span class="line">    <span class="string">&quot;beforeend&quot;</span>,</span><br><span class="line">    <span class="string">`</span></span><br><span class="line"><span class="string">      &lt;div class=&quot;blqbanner mobile-hidden&quot;&gt;</span></span><br><span class="line"><span class="string">        &lt;div&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-1.webp&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">        &lt;div&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-2.png&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">        &lt;div&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-3.png&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">        &lt;div&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-4.png&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">        &lt;div&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-5.png&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">        &lt;div&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-6.png&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">      &lt;/div&gt;</span></span><br><span class="line"><span class="string">      &lt;link rel=&quot;stylesheet&quot;, href=&quot;/css/biliBg/autumn/autumn.css&quot; /&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">  );</span><br><span class="line"></span><br><span class="line">  <span class="comment">//- 插入js节点</span></span><br><span class="line">  biliBannerScript.<span class="property">src</span> = <span class="string">&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/js/biliBg/autumn/autumn.js&quot;</span>;</span><br><span class="line">  $biliBannerParentsEl.<span class="title function_">appendChild</span>(biliBannerScript);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (biliBannerIndex === <span class="number">1</span>) &#123;</span><br><span class="line">  <span class="comment">//- spring</span></span><br><span class="line">  $biliBannerParentsEl.<span class="title function_">insertAdjacentHTML</span>(</span><br><span class="line">    <span class="string">&quot;beforeend&quot;</span>,</span><br><span class="line">    <span class="string">`</span></span><br><span class="line"><span class="string">      &lt;div class=&quot;bili-banner&quot;&gt;</span></span><br><span class="line"><span class="string">        &lt;div class=&quot;animated-banner&quot;&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg1.png&quot; data-height=&quot;360&quot; data-width=&quot;9666&quot; height=&quot;180&quot; width=&quot;4833&quot; style=&quot;transform: scale(1) translate(0px, -15px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg2.png&quot; data-height=&quot;360&quot; data-width=&quot;9666&quot; height=&quot;180&quot; width=&quot;4833&quot; style=&quot;transform: scale(1) translate(1100px, 0px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg3.png&quot; data-height=&quot;360&quot; data-width=&quot;3523&quot; height=&quot;162&quot; width=&quot;1585&quot; style=&quot;transform: scale(1) translate(675px, 0px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg4.png&quot; data-height=&quot;360&quot; data-width=&quot;2938&quot; height=&quot;176&quot; width=&quot;1439&quot; style=&quot;transform: scale(1) translate(-637px, 0px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg5.png&quot; data-height=&quot;139&quot; data-width=&quot;556&quot; height=&quot;62&quot; width=&quot;250&quot; style=&quot;transform: scale(1) translate(607.5px, 45px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/p4.png&quot; data-height=&quot;302&quot; data-width=&quot;734&quot; height=&quot;84&quot; width=&quot;205&quot; style=&quot;transform: scale(1) translate(252px, 36.4px) rotate(0deg); opacity: 0;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg6.png&quot; data-height=&quot;180&quot; data-width=&quot;1757&quot; height=&quot;125&quot; width=&quot;1229&quot; style=&quot;transform: scale(1) translate(112px, 25px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg7.png&quot; data-height=&quot;116&quot; data-width=&quot;1757&quot; height=&quot;81&quot; width=&quot;1229&quot; style=&quot;transform: scale(1) translate(-350px, 49px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/p2.png&quot; data-height=&quot;346&quot; data-width=&quot;497&quot; height=&quot;138&quot; width=&quot;198&quot; style=&quot;transform: scale(1) translate(-240px, 16px) rotate(0deg); opacity: 0;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/p1.png&quot; data-height=&quot;256&quot; data-width=&quot;146&quot; height=&quot;102&quot; width=&quot;58&quot; style=&quot;transform: scale(1) translate(-340px, 32px) rotate(0deg); opacity: 0;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/t1.png&quot; data-height=&quot;254&quot; data-width=&quot;602&quot; height=&quot;114&quot; width=&quot;270&quot; style=&quot;transform: scale(1) translate(-90px, 13.5px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/bg8.png&quot; data-height=&quot;360&quot; data-width=&quot;4277&quot; height=&quot;180&quot; width=&quot;2138&quot; style=&quot;transform: scale(1) translate(100px, 0px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/p3.png&quot; data-height=&quot;327&quot; data-width=&quot;933&quot; height=&quot;147&quot; width=&quot;419&quot; style=&quot;transform: scale(1) translate(216px, 13.5px) rotate(0deg); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/t3.png&quot; data-height=&quot;353&quot; data-width=&quot;740&quot; height=&quot;211&quot; width=&quot;444&quot; style=&quot;transform: scale(1) translate(2100px, 0px) rotate(0deg); filter: blur(2px); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;div class=&quot;layer&quot;&gt;&lt;img src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/spring/t2.png&quot; data-height=&quot;360&quot; data-width=&quot;1916&quot; height=&quot;180&quot; width=&quot;958&quot; style=&quot;transform: scale(1) translate(-1000px, 0px) rotate(0deg); filter: blur(1px); opacity: 1;&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">            &lt;canvas id=&quot;springCanvas&quot; width=&quot;1519&quot; height=&quot;155&quot; style=&quot;position: absolute; top: 0px; left: 0px;width: 100%;&quot;&gt;&lt;/canvas&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">      &lt;/div&gt;</span></span><br><span class="line"><span class="string">      &lt;link rel=&quot;stylesheet&quot;, href=&quot;/css/biliBg/spring/spring.css&quot; /&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">  );</span><br><span class="line"></span><br><span class="line">  <span class="comment">//- 插入js节点</span></span><br><span class="line">  biliBannerScript.<span class="property">src</span> = <span class="string">&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/js/biliBg/spring/spring.js&quot;</span>;</span><br><span class="line">  $biliBannerParentsEl.<span class="title function_">appendChild</span>(biliBannerScript);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (biliBannerIndex === <span class="number">2</span>) &#123;</span><br><span class="line">  <span class="comment">//- winter</span></span><br><span class="line">  $biliBannerParentsEl.<span class="title function_">insertAdjacentHTML</span>(</span><br><span class="line">    <span class="string">&quot;beforeend&quot;</span>,</span><br><span class="line">    <span class="string">`</span></span><br><span class="line"><span class="string">      &lt;div class=&quot;bldbanner&quot;&gt;</span></span><br><span class="line"><span class="string">        &lt;div class=&quot;bldview&quot;&gt;&lt;img class=&quot;morning&quot; src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-view-1.webp&quot;/&gt;&lt;img class=&quot;afternoon&quot; src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-view-2.webp&quot;/&gt;&lt;img class=&quot;ball&quot; src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-ball.png&quot;/&gt;</span></span><br><span class="line"><span class="string">          &lt;video class=&quot;evening&quot; autoplay=&quot;autoplay&quot; loop=&quot;loop&quot; muted=&quot;muted&quot;&gt;</span></span><br><span class="line"><span class="string">            &lt;source src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-view-3.webm&quot; type=&quot;video/webm&quot;/&gt;</span></span><br><span class="line"><span class="string">          &lt;/video&gt;&lt;img class=&quot;window-cover&quot; src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-view-3-snow.png&quot;/&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">        &lt;div class=&quot;tree&quot;&gt;&lt;img class=&quot;morning&quot; src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-tree-1.png&quot;/&gt;&lt;img class=&quot;afternoon&quot; src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-tree-2.png&quot;/&gt;&lt;img class=&quot;evening&quot; src=&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/winter/bilibili-winter-tree-3.png&quot;/&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">      &lt;/div&gt;</span></span><br><span class="line"><span class="string">      &lt;link rel=&quot;stylesheet&quot;, href=&quot;/css/biliBg/winter/winter.css&quot; /&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">  );</span><br><span class="line"></span><br><span class="line">  <span class="comment">//- 插入js节点</span></span><br><span class="line">  biliBannerScript.<span class="property">src</span> = <span class="string">&quot;https://npm.elemecdn.com/anzhiyu-blog@2.1.7/js/biliBg/winter/winter.js&quot;</span>;</span><br><span class="line">  $biliBannerParentsEl.<span class="title function_">appendChild</span>(biliBannerScript);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>部分适配 css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.bldbanner</span>) <span class="selector-id">#post-info</span><span class="selector-pseudo">:after</span>,</span><br><span class="line"><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.bili-banner</span>) <span class="selector-id">#post-info</span><span class="selector-pseudo">:after</span>,</span><br><span class="line"><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.blqbanner</span>) <span class="selector-id">#post-info</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0px</span> -<span class="number">214px</span> <span class="number">287px</span> <span class="number">45px</span> <span class="built_in">var</span>(--anzhiyu-black-op) inset;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.bldbanner</span>) <span class="selector-id">#post-info</span> <span class="selector-class">.post-meta</span>,</span><br><span class="line"><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.bili-banner</span>) <span class="selector-id">#post-info</span> <span class="selector-class">.post-meta</span>,</span><br><span class="line"><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.blqbanner</span>) <span class="selector-id">#post-info</span> <span class="selector-class">.post-meta</span> &#123;</span><br><span class="line">  <span class="attribute">pointer-events</span>: all;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.bldbanner</span>) <span class="selector-id">#post-info</span>,</span><br><span class="line"><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.bili-banner</span>) <span class="selector-id">#post-info</span>,</span><br><span class="line"><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.blqbanner</span>) <span class="selector-id">#post-info</span> &#123;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.bldbanner</span>),</span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.bili-banner</span>),</span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-class">.post-bg</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.blqbanner</span>) &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">15rem</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>春 spring.css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bili-banner</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">11rem</span>;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">155px</span>;</span><br><span class="line">  <span class="attribute">min-width</span>: <span class="number">999px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#f9f9f9</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">60px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bili-banner</span> <span class="selector-class">.animated-banner</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">margin</span>: auto;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bili-banner</span> <span class="selector-class">.layer</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bili-banner</span> <span class="selector-class">.layer</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">0.2s</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>秋 autumn.css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.blqbanner</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">15rem</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.blqbanner</span> &gt; <span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="comment">/*    将图片上下左右居中*/</span></span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attr">--offset</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attr">--blur</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.blqbanner</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">110%</span>;</span><br><span class="line">  <span class="comment">/*    图片需要左右移动，预先设置的宽一些*/</span></span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">object-fit</span>: cover;</span><br><span class="line">  <span class="comment">/*    将图片按照比例填满容器*/</span></span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="built_in">var</span>(--offset));</span><br><span class="line">  <span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="built_in">var</span>(--blur));</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.blqbanner</span> &gt; <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>) &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attr">--offset</span>: <span class="number">1.38426px</span>;</span><br><span class="line">  <span class="attr">--blur</span>: <span class="number">0.226766px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.blqbanner</span> &gt; <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>) &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attr">--offset</span>: <span class="number">1.79954px</span>;</span><br><span class="line">  <span class="attr">--blur</span>: <span class="number">0.0724451px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.blqbanner</span> &gt; <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>) &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attr">--offset</span>: <span class="number">2.3394px</span>;</span><br><span class="line">  <span class="attr">--blur</span>: <span class="number">1.02924px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.blqbanner</span> &gt; <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">4</span>) &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attr">--offset</span>: <span class="number">3.04122px</span>;</span><br><span class="line">  <span class="attr">--blur</span>: <span class="number">3.09714px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.blqbanner</span> &gt; <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">5</span>) &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attr">--offset</span>: <span class="number">3.95358px</span>;</span><br><span class="line">  <span class="attr">--blur</span>: <span class="number">6.27615px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.blqbanner</span> &gt; <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child</span>(<span class="number">6</span>) &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attr">--offset</span>: <span class="number">5.13966px</span>;</span><br><span class="line">  <span class="attr">--blur</span>: <span class="number">10.5663px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>冬 winter.css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bldbanner</span> &#123;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">155px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">20rem</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attr">--percentage</span>: <span class="number">0.5</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-class">.tree</span>,</span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-class">.bldview</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">  <span class="attribute">display</span>: -ms-flexbox;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  -webkit-box-pack: center;</span><br><span class="line">  -ms-<span class="attribute">flex</span>-pack: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  -webkit-box-align: center;</span><br><span class="line">  -ms-<span class="attribute">flex</span>-align: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-in;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-in;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-class">.bldview</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: <span class="built_in">translatex</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--percentage) * <span class="number">100px</span>));</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translatex</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--percentage) * <span class="number">100px</span>));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-class">.tree</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: <span class="built_in">translatex</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--percentage) * <span class="number">150px</span> - <span class="number">25px</span>));</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translatex</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--percentage) * <span class="number">150px</span> - <span class="number">25px</span>));</span><br><span class="line">  -webkit-<span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">3px</span>);</span><br><span class="line">  <span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">3px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-tag">video</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">max-width</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-class">.evening</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-in;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-in;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">20</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">calc</span>((<span class="number">0.5</span> - <span class="built_in">var</span>(--percentage)) / <span class="number">0.5</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-class">.afternoon</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-in;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-in;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">10</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">calc</span>(<span class="number">1</span> - (<span class="built_in">var</span>(--percentage) - <span class="number">0.5</span>) / <span class="number">0.5</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bldbanner</span><span class="selector-class">.moving</span> <span class="selector-class">.afternoon</span>,</span><br><span class="line"><span class="selector-class">.bldbanner</span><span class="selector-class">.moving</span> <span class="selector-class">.ball</span>,</span><br><span class="line"><span class="selector-class">.bldbanner</span><span class="selector-class">.moving</span> <span class="selector-class">.evening</span>,</span><br><span class="line"><span class="selector-class">.bldbanner</span><span class="selector-class">.moving</span> <span class="selector-class">.tree</span>,</span><br><span class="line"><span class="selector-class">.bldbanner</span><span class="selector-class">.moving</span> <span class="selector-class">.bldview</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: none;</span><br><span class="line">  <span class="attribute">transition</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-class">.ball</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-in;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.2s</span> ease-in;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">10</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">calc</span>(<span class="number">1.5</span> - (<span class="built_in">var</span>(--percentage) - <span class="number">0.5</span>) / <span class="number">0.5</span>);</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="built_in">calc</span>(<span class="number">100px</span> * <span class="built_in">var</span>(--percentage)), <span class="number">22px</span>) <span class="built_in">rotate</span>(<span class="built_in">calc</span>(<span class="number">10deg</span> * <span class="built_in">var</span>(--percentage) + <span class="number">5deg</span>));</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="built_in">calc</span>(<span class="number">100px</span> * <span class="built_in">var</span>(--percentage)), <span class="number">22px</span>) <span class="built_in">rotate</span>(<span class="built_in">calc</span>(<span class="number">10deg</span> * <span class="built_in">var</span>(--percentage) + <span class="number">5deg</span>));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bldbanner</span> <span class="selector-class">.window-cover</span> &#123;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">20</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">calc</span>(<span class="built_in">var</span>(--percentage) * -<span class="number">2</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>总的来说还不错，巩固了我对于 canvas 的知识与 css 视差绘制。</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> bilibili动态背景 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>React组件之间的通信</title>
      <link href="/posts/c939.html"/>
      <url>/posts/c939.html</url>
      
        <content type="html"><![CDATA[<p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/09/639336e44611e.jpg!blogimg"></p><p>React 的组件相对于 Vue 更加的灵活和多样，按照不同的方式可以分成很多类组件：</p><ul><li><code>根据组件的定义方式</code>，可以分为：<code>函数组件(Functional Component )</code>和<code>类组件(Class Component)</code>；</li><li><code>根据组件内部是否有状态需要维护</code>，可以分成：<code>无状态组件(Stateless Component )</code>和<code>有状态组件(Stateful Component)</code>；</li><li><code>根据组件的不同职责</code>，可以分成：<code>展示型组件(Presentational Component)</code>和<code>容器型组件(Container Component)</code>；</li></ul><p>React 中的组件之间的通信方法。</p><h1 id="父子组件通信"><a href="#父子组件通信" class="headerlink" title="父子组件通信"></a>父子组件通信</h1><blockquote><p>下面这个案例演示了<code>子传父</code>与<code>父传子</code>通过 props 传递。</p></blockquote><p>父组件</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; <span class="title class_">Component</span> &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Header</span> <span class="keyword">from</span> <span class="string">&quot;./Header&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Footer</span> <span class="keyword">from</span> <span class="string">&quot;./Footer&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Main</span> <span class="keyword">from</span> <span class="string">&quot;./Main&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">App</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">super</span>();</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">state</span> = &#123;</span><br><span class="line">      <span class="attr">title</span>: <span class="string">&quot;Header的标题&quot;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">headerClick</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;----&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; title &#125; = <span class="variable language_">this</span>.<span class="property">state</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">Header</span> <span class="attr">title</span>=<span class="string">&#123;title&#125;</span> <span class="attr">headerClick</span>=<span class="string">&#123;()</span> =&gt;</span> this.headerClick()&#125; /&gt;</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">Main</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">Footer</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure><p>子组件</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; <span class="title class_">Component</span> &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> <span class="title class_">Header</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> &#123;</span><br><span class="line">  <span class="comment">// constructor(props) &#123;</span></span><br><span class="line">  <span class="comment">//   super(props)</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//   this.state = &#123;&#125;</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; title, headerClick &#125; = <span class="variable language_">this</span>.<span class="property">props</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">onClick</span>=<span class="string">&#123;headerClick&#125;</span>&gt;</span>Header: &#123;title&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Header</span>;</span><br></pre></td></tr></table></figure><h1 id="非父子组件通信"><a href="#非父子组件通信" class="headerlink" title="非父子组件通信"></a>非父子组件通信</h1><blockquote><p>非父子组件数据的共享<br>在开发中，比较常见的数据传递方式是通过 props 属性自上而下（由父到子）进行传递。<br>但是对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI 主题、用户登录状态、用户信息等）。<br>如果我们在顶层的 App 中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。</p></blockquote><p>React 提供了一个 API：<code>Context</code>；<br>Context 提供了一种在<code>组件之间共享此类值的方式</code>，而<code>不必显式地通过组件树的逐层传递 props</code>；<br>Context 设计目的是为了<code>共享那些对于一个组件树而言是“全局”的数据</code>，例如当前认证的用户、主题或首选语言；</p><p>可以使用<code>Context</code>或者<code>eventBus</code></p><h2 id="React-createContext"><a href="#React-createContext" class="headerlink" title="React.createContext"></a>React.createContext</h2><p>创建一个需要共享的 Context 对象：</p><p>如果一个组件订阅了 Context，那么这个组件会从离自身最近的那个匹配的  Provider  中读取到当前的 context 值；<br>defaultValue 是组件在顶层查找过程中没有找到对应的 Provider，那么就使用默认值</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">MyContext</span> = <span class="title class_">React</span>.<span class="title function_">createContext</span>(defaultValue);</span><br></pre></td></tr></table></figure><h2 id="Context-Provider"><a href="#Context-Provider" class="headerlink" title="Context.Provider"></a>Context.Provider</h2><p>每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：</p><p>Provider 接收一个  value  属性，传递给消费组件；<br>一个 Provider 可以和多个消费组件有对应关系；<br>多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据；<br>当 Provider 的  value  值发生变化时，它内部的所有消费组件都会重新渲染；</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="title class_">MyContext</span>.<span class="property">Provider</span> value=&#123;<span class="comment">/* 某个值 */</span>&#125; /&gt;</span><br></pre></td></tr></table></figure><h2 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h2><p>以下案例同时演示<code>Context</code>与<code>eventBus</code></p><p>context.jsx</p><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title class_">UserContext</span> = <span class="title class_">React</span>.<span class="title function_">createContext</span>(&#123; <span class="attr">name</span>: <span class="string">&quot;kobe&quot;</span>, <span class="attr">age</span>: <span class="number">30</span> &#125;);</span><br></pre></td></tr></table></figure><p>app.jsx</p><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; <span class="title class_">Component</span> &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&quot;./Home&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Recommend</span> <span class="keyword">from</span> <span class="string">&quot;./Recommend&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">UserContext</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./context&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> eventBus <span class="keyword">from</span> <span class="string">&quot;./event/event_bus&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">App</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">super</span>();</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">state</span> = &#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&quot;anzhiyu&quot;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">componentDidMount</span>(<span class="params"></span>) &#123;</span><br><span class="line">    eventBus.<span class="title function_">on</span>(<span class="string">&quot;changeName&quot;</span>, <span class="variable language_">this</span>.<span class="property">productClick</span>, <span class="variable language_">this</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">componentWillUnmount</span>(<span class="params"></span>) &#123;</span><br><span class="line">    eventBus.<span class="title function_">off</span>(<span class="string">&quot;changeName&quot;</span>, <span class="variable language_">this</span>.<span class="property">productClick</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">productClick</span>(<span class="params">name, age</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;productClick&quot;</span>, name, age, <span class="variable language_">this</span>);</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setState</span>(&#123; <span class="attr">name</span>: name &#125;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">UserContext.Provider</span> <span class="attr">value</span>=<span class="string">&#123;&#123;</span> <span class="attr">name:</span> &quot;<span class="attr">安知鱼</span>&quot;, <span class="attr">level:</span> <span class="attr">100</span> &#125;&#125;&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">Home</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">Recommend</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">UserContext.Provider</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;this.state.name&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure><p>Home.jsx</p><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; <span class="title class_">Component</span> &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">HomeProduct</span> <span class="keyword">from</span> <span class="string">&quot;./HomeProduct&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Home</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> &#123;</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">HomeProduct</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Home</span>;</span><br></pre></td></tr></table></figure><p>HomeProduct.jsx</p><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; <span class="title class_">Component</span> &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">UserContext</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./context&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> eventBus <span class="keyword">from</span> <span class="string">&quot;./event/event_bus&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">HomeProduct</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> &#123;</span><br><span class="line">  <span class="title function_">productClick</span>(<span class="params"></span>) &#123;</span><br><span class="line">    eventBus.<span class="title function_">emit</span>(<span class="string">&quot;changeName&quot;</span>, <span class="string">&quot;安知鱼变帅&quot;</span>, <span class="number">18</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">context</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">div</span>&gt;</span>HomeProduct<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;e</span> =&gt;</span> this.productClick()&#125;&gt;product<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">HomeProduct</span>.<span class="property">contextType</span> = <span class="title class_">UserContext</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">HomeProduct</span>;</span><br></pre></td></tr></table></figure><p>Recommend.jsx 演示 函数式组件 <code>Consumer</code></p><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">UserContext</span> &#125; <span class="keyword">from</span> <span class="string">&quot;./context&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Recommend</span>(<span class="params">props</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>Recommend<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      &#123;/* 函数式组件中使用Context共享的数据 */&#125;</span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">UserContext.Consumer</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        &#123;value =&gt; &#123;</span></span><br><span class="line"><span class="language-xml">          return <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;value.name&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span>;</span></span><br><span class="line"><span class="language-xml">        &#125;&#125;</span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">UserContext.Consumer</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Recommend</span>;</span><br></pre></td></tr></table></figure><p>如果需要使用多个 context 可以使用<code>Consumer</code>共享</p><p>theme-context.js</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建一个Context</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">ThemeContext</span> = <span class="title class_">React</span>.<span class="title function_">createContext</span>(&#123; <span class="attr">color</span>: <span class="string">&quot;blue&quot;</span>, <span class="attr">size</span>: <span class="number">10</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">ThemeContext</span>;</span><br></pre></td></tr></table></figure><p>user-context.js</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建一个Context</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">UserContext</span> = <span class="title class_">React</span>.<span class="title function_">createContext</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">UserContext</span>;</span><br></pre></td></tr></table></figure><p>HomeInfo.jsx</p><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; <span class="title class_">Component</span> &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ThemeContext</span> <span class="keyword">from</span> <span class="string">&quot;./context/theme-context&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">UserContext</span> <span class="keyword">from</span> <span class="string">&quot;./context/user-context&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> <span class="title class_">HomeInfo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> &#123;</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 4.第四步操作: 获取数据, 并且使用数据</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">context</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>HomeInfo: &#123;this.context.color&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">UserContext.Consumer</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          &#123;value =&gt; &#123;</span></span><br><span class="line"><span class="language-xml">            return <span class="tag">&lt;<span class="name">h2</span>&gt;</span>Info User: &#123;value.nickname&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span>;</span></span><br><span class="line"><span class="language-xml">          &#125;&#125;</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">UserContext.Consumer</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3.第三步操作: 设置组件的contextType为某一个Context</span></span><br><span class="line"><span class="title class_">HomeInfo</span>.<span class="property">contextType</span> = <span class="title class_">ThemeContext</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">HomeInfo</span>;</span><br></pre></td></tr></table></figure><h2 id="context-默认数据"><a href="#context-默认数据" class="headerlink" title="context 默认数据"></a>context 默认数据</h2><p>当没有被 context 组件包裹时就会使用到默认数据</p><p>theme-context.js</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.创建一个Context</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">ThemeContext</span> = <span class="title class_">React</span>.<span class="title function_">createContext</span>(&#123; <span class="attr">color</span>: <span class="string">&quot;blue&quot;</span>, <span class="attr">size</span>: <span class="number">10</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">ThemeContext</span>;</span><br></pre></td></tr></table></figure><p>App.jsx</p><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; <span class="title class_">Component</span> &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&quot;./Home&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ThemeContext</span> <span class="keyword">from</span> <span class="string">&quot;./context/theme-context&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">UserContext</span> <span class="keyword">from</span> <span class="string">&quot;./context/user-context&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Profile</span> <span class="keyword">from</span> <span class="string">&quot;./Profile&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> <span class="title class_">App</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">super</span>();</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">state</span> = &#123;</span><br><span class="line">      <span class="attr">info</span>: &#123; <span class="attr">name</span>: <span class="string">&quot;kobe&quot;</span>, <span class="attr">age</span>: <span class="number">30</span> &#125;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; info &#125; = <span class="variable language_">this</span>.<span class="property">state</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>App<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">UserContext.Provider</span> <span class="attr">value</span>=<span class="string">&#123;&#123;</span> <span class="attr">nickname:</span> &quot;<span class="attr">kobe</span>&quot;, <span class="attr">age:</span> <span class="attr">30</span> &#125;&#125;&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">ThemeContext.Provider</span> <span class="attr">value</span>=<span class="string">&#123;&#123;</span> <span class="attr">color:</span> &quot;<span class="attr">red</span>&quot;, <span class="attr">size:</span> &quot;<span class="attr">30</span>&quot; &#125;&#125;&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Home</span> &#123;<span class="attr">...info</span>&#125; /&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">ThemeContext.Provider</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">UserContext.Provider</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">Profile</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span>;</span><br></pre></td></tr></table></figure><p>Profile.jsx</p><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; <span class="title class_">Component</span> &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ThemeContext</span> <span class="keyword">from</span> <span class="string">&quot;./context/theme-context&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> <span class="title class_">Profile</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> &#123;</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">context</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Profile<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Profile</span>.<span class="property">contextType</span> = <span class="title class_">ThemeContext</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">Profile</span>;</span><br></pre></td></tr></table></figure>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
            <tag> React </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>为什么 react 的 setState 要设计成异步的</title>
      <link href="/posts/6fd4.html"/>
      <url>/posts/6fd4.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>在使用 <a href="https://react.docschina.org/">React</a> 的类组件时候我们常常会使用 setState 来更新状态，那么 setState 到底是同步的还是异步的呢？</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">changeMessage</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="title function_">setState</span>(&#123;<span class="attr">message</span>: <span class="string">&quot;你好哇, 安知鱼&quot;</span>&#125;)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">state</span>.<span class="property">message</span>); <span class="comment">// hello world</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这段代码最终打印结果是 hello world，可见 setState 是异步的操作，我们并不能在执行完 setState 之后立马拿到最新的 state 的结果，那么 setState 一定是异步的吗？</p><h1 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h1><p>那么 setState 一定是异步的吗？实际上在 React18 之前分为两种情况</p><ol><li>在组件生命周期或者 <code>React合成事件</code>中，setState 是异步的。</li><li>在 setTimeout 或者原生 dom 事件中（promise 之类的），setState 是同步的。</li></ol><p>React18 之前的同步情况</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">changeMessage</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setState</span>(&#123;<span class="attr">message</span>: <span class="string">&quot;你好哇, 安知鱼&quot;</span>&#125;)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">state</span>.<span class="property">message</span>); <span class="comment">// 你好哇, 安知鱼</span></span><br><span class="line">  &#125;, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>但是在 <code>React18</code> 之后默认所有的操作都被放到了批处理中（异步处理），即使你像上面那样操作依旧会是异步更新。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/09/6392c48276234.jpg!blogimg"></p><p>如果想要实现同步更新状态并 <code>render</code> 需要使用 <code>flushSync</code> 方法</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; flushSync &#125; <span class="keyword">from</span> <span class="string">&quot;react-dom&quot;</span>;</span><br><span class="line"><span class="title function_">changeMessage</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title function_">flushSync</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setState</span>(&#123;<span class="attr">message</span>: <span class="string">&quot;你好哇, 安知鱼&quot;</span>&#125;)</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">state</span>.<span class="property">message</span>); <span class="comment">// 你好哇, 安知鱼</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>另外依旧可以传入第二个参数 callback 来获取更新完的状态。</p><h1 id="探索"><a href="#探索" class="headerlink" title="探索"></a>探索</h1><p>setState 设计为异步其实在 Github 上也有很多相关讨论：<a href="https://github.com/facebook/react/issues/11527">RFClarification: why is setState asynchronous?</a></p><p>其中 React 的核心成员(Redux 作者)<a href="https://github.com/gaearon">Dan Abramov</a> 也有对应的回复。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/09/63929c92662af.jpg!blogimg"></p><h1 id="思考"><a href="#思考" class="headerlink" title="思考"></a>思考</h1><p>总的看下来以后大概可以总结为以下几点</p><blockquote><p>setState 设计为异步，可以<code>显著的提升性能</code></p></blockquote><p>如果每次调用 setState 都进行一次更新，那么意味着 render 函数会被频繁调用，界面重新渲染，这样效率是很低的。</p><p>最好的办法应该是获取到多个更新之后进行批量更新。</p><blockquote><p>如果同步更新了 state，但是还没有执行 render 函数，那么 <code>state 和 props 不能保持同步</code>！</p></blockquote><p>state 和 props 不能保持一致性，会在开发中产生很多的问题。所以 React 采用了异步更新，并在 React18 中完全控制。</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
            <tag> React </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>butterfly控制特定图片懒加载</title>
      <link href="/posts/192f.html"/>
      <url>/posts/192f.html</url>
      
        <content type="html"><![CDATA[<p>经常看我博客的同学应该不难发现我的文章顶图偶尔进来以后还要等一会才能出现，还有加载动画的图片偶尔加载不出来，后来经过我一系列的排查发现居然是懒加载的缘故。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/03/638ac112cfd48.webp!blogimg"></p><p>观察 network 选项卡可以发现我们需要让启动器改变，不让<code>lazyload.iife.min.js</code>来加载我们的顶图与加载动画的头像。</p><h1 id="方案一"><a href="#方案一" class="headerlink" title="方案一"></a>方案一</h1><p>可以使用 css 的<code>background</code>属性而不使用 img 标签，就可以做到启动器变成对应的 css，从此排除懒加载的影响。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.loading-img</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;&quot;</span>) no-repeat center center;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="方案二（推荐）"><a href="#方案二（推荐）" class="headerlink" title="方案二（推荐）"></a>方案二（推荐）</h1><p>虽然 css 的方式可以做到排除但是这并不是我们所预期的，部分情况为了 seo 我们需要 img 标签且如果有多个特定图片需要指定不太好写 css，于是就产生了方案二。</p><p>我们观察<code>butterfly</code>对懒加载的实现可以发现，在<code>themes/butterfly/scripts/filters/post_lazyload.js</code>中<code>第11行左右</code>的<code>lazyload方法</code>中替换了所有的<code>img标签</code>的<code>src属性</code>，所以我们可以通过修改正则表达式来匹配，以达到我们的目的</p><p>预期：给图片添加上 class 为<code>nolazyload</code>时不使用懒加载</p><p>代码修改<code>themes/butterfly/scripts/filters/post_lazyload.js</code>，将 lazyload 方法修改</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">lazyload</span>(<span class="params">htmlContent</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> bg = hexo.<span class="property">theme</span>.<span class="property">config</span>.<span class="property">lazyload</span>.<span class="property">placeholder</span></span><br><span class="line">    ? <span class="title function_">urlFor</span>(hexo.<span class="property">theme</span>.<span class="property">config</span>.<span class="property">lazyload</span>.<span class="property">placeholder</span>)</span><br><span class="line">    : <span class="string">&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot;</span>;</span><br><span class="line">  <span class="keyword">return</span> htmlContent.<span class="title function_">replace</span>(</span><br><span class="line">    <span class="regexp">/(&lt;img(?!.*?class[\t]*=[\t]*[&#x27;&quot;].*?nolazyload.*?[&#x27;&quot;]).*? src=)/gi</span>,</span><br><span class="line">    <span class="string">`$1 &quot;<span class="subst">$&#123;bg&#125;</span>&quot; data-lazy-src=`</span></span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>给对应的图片添加 class, 修改<code>themes/butterfly/layout/includes/header/index.pug</code>， 注意 ⚠️，butterfly 默认顶图是使用的 background 属性设置，为了 seo 我改为了 img 标签。</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> top_img !== false</span><br><span class="line">  <span class="keyword">if</span> is_post()</span><br><span class="line">    include ./post-info.pug</span><br><span class="line">    img<span class="comment">#post-top-bg(src=bg_img class=&#x27;nolazyload&#x27;)</span></span><br></pre></td></tr></table></figure><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/03/638ac112cfd7e.webp!blogimg"></p><p>大功告成！</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> butterfly </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>为你的博客安装上便携小空调</title>
      <link href="/posts/d335.html"/>
      <url>/posts/d335.html</url>
      
        <content type="html"><![CDATA[<p>star 了 2 年 <a href="https://www.yunyoujun.cn/">云游君</a> 的<code>小空调项目</code> 我终于在两年后习得真传归来花费了 大概一个下午的时间完成 ✅ 了该项目的 VUE3 重构。</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://anheyu.com/air-conditioner/">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://img02.anheyu.com/adminuploads/1/2022/09/05/6315ec9737ac4.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">云空调，便携小空调</div>            <div class="tag-link-sitename">云空调，便携小空调</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p>项目地址，欢迎大家 Star</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/anzhiyu-c/air-conditioner-vue">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/github.com/anzhiyu-c/air-conditioner-vue.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">云空调，便携小空调项目地址</div>            <div class="tag-link-sitename">云空调，便携小空调项目地址</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p>相对原项目比起来优势大概就是没有使用任何 UI 框架, 极少的依赖, 这能够让我打包后的体积也仅只有<code>84kb</code>的<code>js</code>, 做到了<code>all in js</code>，且兼容至 ie8。</p><h1 id="部署方案"><a href="#部署方案" class="headerlink" title="部署方案"></a>部署方案</h1><p>如果你和我一样是使用 hexo 的话，那么将变的极其简单。</p><p>在你的博客根目录执行以下命令:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page air-conditioner</span><br></pre></td></tr></table></figure><p>然后在会生成<code>source/air-conditioner/index.md</code>, 将以下内容替换原内容</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 便携小空调 - 为你的夏日带去清凉!</span><br><span class="line">date: 2022-10-20 22:06:17</span><br><span class="line">comments: true</span><br><span class="line">aside: false</span><br><span class="line"><span class="section">top<span class="emphasis">_img: false</span></span></span><br><span class="line"><span class="emphasis"><span class="section">---</span></span></span><br><span class="line"><span class="emphasis"><span class="section"></span></span></span><br><span class="line"><span class="emphasis"><span class="section">&gt; 终于为博客安装上了便携小空调</span></span></span><br><span class="line"><span class="emphasis"><span class="section"></span></span></span><br><span class="line"><span class="emphasis"><span class="section"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="section">.copyright-box a &#123;</span></span></span><br><span class="line"><span class="emphasis"><span class="section">  border-bottom: none !important;</span></span></span><br><span class="line"><span class="emphasis"><span class="section">  padding: 0 !important;</span></span></span><br><span class="line"><span class="emphasis"><span class="section">&#125;</span></span></span><br><span class="line"><span class="emphasis"><span class="section"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="section"></span></span></span><br><span class="line"><span class="emphasis"><span class="section"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;air-conditioner-vue&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="section"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">defer</span> <span class="attr">data-pjax</span> <span class="attr">src</span>=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-air-conditioner@1.0.1/index.3f125bc6.js&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span></span></span><br></pre></td></tr></table></figure><p>然后访问<code>https://你的博客域名/air-conditioner</code>就可以得到一个没有风的空调 ❄️</p><h1 id="其他部署方案"><a href="#其他部署方案" class="headerlink" title="其他部署方案"></a>其他部署方案</h1><p>如果你使用的是其他的，部署也一样简单，只需加入以下代码嵌入网站即可</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">iframe</span> <span class="attr">height</span>=<span class="string">&quot;740&quot;</span> <span class="attr">src</span>=<span class="string">&quot;https://loquacious-bienenstitch-58539b.netlify.app/&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="自行构建部署"><a href="#自行构建部署" class="headerlink" title="自行构建部署"></a>自行构建部署</h1><ol><li><p>进入 <a href="https://github.com/anzhiyu-c/air-conditioner-vue">https://github.com/anzhiyu-c/air-conditioner-vue</a></p></li><li><p>点击项目右上角的 <code>fork 叉子</code></p></li><li><p>进入 <a href="https://vercel.com/">vercel</a> 或 <a href="https://app.netlify.com/">netlify</a></p></li><li><p>部署项目 选择仓库时选择刚刚 fork 的仓库然后 点击 <code>deploy</code> 即可。</p></li></ol>]]></content>
      
      
      
        <tags>
            
            <tag> 小空调 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>我的图床方案</title>
      <link href="/posts/2785.html"/>
      <url>/posts/2785.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>自从写博客以来就一直面临着图床问题，各种各样的图片该存放在哪里，又该如何管理，在我经过不断的探索以后写下了这篇博客</p></blockquote><h1 id="初识图床"><a href="#初识图床" class="headerlink" title="初识图床"></a>初识图床</h1><p>图床图床，就是用来存放图片的温床，博客内有大量的图片，大量的地方需要使用到图片，优化博客加载方便管理的除了压缩图片的大小之外，首选就是多处使用图片链接，到不同的资源地址去进行加载来完成图片的加载。</p><h1 id="网络免费图床"><a href="#网络免费图床" class="headerlink" title="网络免费图床"></a>网络免费图床</h1><p>可以通过百度图床搜索 🔍 到很多很多各种各样的图床, 在此不做介绍如 SMMS 等图床.</p><table><thead><tr><th align="center">特点</th></tr></thead><tbody><tr><td align="center">无配置，仅需注册，有些甚至不用注册 ✅</td></tr><tr><td align="center">方便上传，方便管理 ✅</td></tr><tr><td align="center">免费 ✅</td></tr><tr><td align="center">容易跑路 ❌</td></tr><tr><td align="center">图像处理：如裁剪，压缩等 ❌</td></tr><tr><td align="center">图片加载速度不够快 ❌</td></tr><tr><td align="center">稳定性差 ❌</td></tr></tbody></table><h1 id="Github-图床"><a href="#Github-图床" class="headerlink" title="Github 图床"></a>Github 图床</h1><p>大部分同学是没有服务器的，那么就很需要图床来优化自己的仓库内容，毕竟 github 一个仓库大小只能在 1G 左右，一个比较成熟的方案是使用 <a href="https://github.com/">github</a> + <a href="https://www.jsdelivr.com/">jsd</a> + <a href="https://picgo.github.io/PicGo-Doc/zh/guide/">PicGo</a></p><table><thead><tr><th align="center">特点</th></tr></thead><tbody><tr><td align="center">配置较为简单 ✅</td></tr><tr><td align="center">方便上传 ✅</td></tr><tr><td align="center">免费 ✅</td></tr><tr><td align="center">多个仓库可无限容量 ✅</td></tr><tr><td align="center">图像处理：如裁剪，压缩等 ❌</td></tr><tr><td align="center">一个仓库只能 1G❌</td></tr><tr><td align="center">图片加载速度不够快 ❌</td></tr><tr><td align="center">github 做图床有封号封仓库风险 ❌</td></tr><tr><td align="center">稳定性差 ❌</td></tr></tbody></table><h1 id="npm-图床"><a href="#npm-图床" class="headerlink" title="npm 图床"></a>npm 图床</h1><p>具体配置方法可以去参考我的这篇文章</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://anheyu.com/posts/72ea.html">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/anheyu.com/posts/72ea.html.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">npm图床</div>            <div class="tag-link-sitename">npm图床配置教程</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><table><thead><tr><th align="center">特点</th></tr></thead><tbody><tr><td align="center">配置较为简 ✅</td></tr><tr><td align="center">免费 ✅</td></tr><tr><td align="center">镜像资源多，也可以自建，选对了镜像加载较快 ✅</td></tr><tr><td align="center">多个包或使用多个版本控制可无限容量 ✅</td></tr><tr><td align="center">方便上传，每次新加资源都需要重新发布版本 ❌</td></tr><tr><td align="center">图像处理：如裁剪，压缩等 ❌</td></tr><tr><td align="center">一个版本只能 100M-200M❌</td></tr><tr><td align="center">配置较为复杂 ❌</td></tr><tr><td align="center">高度依赖镜像，镜像寄就寄了 ❌</td></tr></tbody></table><h1 id="腾讯云或阿里云等各大平台的云存储-CDN-方案"><a href="#腾讯云或阿里云等各大平台的云存储-CDN-方案" class="headerlink" title="腾讯云或阿里云等各大平台的云存储+CDN 方案"></a>腾讯云或阿里云等各大平台的云存储+CDN 方案</h1><p>这个方案比较好，缺点是需要付费，大概为每年 20 元的存储费用 ➕ CDN 费用，CDN 为流量加速费用，具体得看站点流量大小。又拍云与七牛云都有免费的存储与 CDN 额度可以自行申请。</p><table><thead><tr><th align="center">特点</th></tr></thead><tbody><tr><td align="center">稳定性好 ✅</td></tr><tr><td align="center">方便管理图片，上传方便，有 API ✅</td></tr><tr><td align="center">容量取决于服务器 ✅</td></tr><tr><td align="center">图像处理：如裁剪，压缩等 ✅</td></tr><tr><td align="center">配置较为复杂 ❌</td></tr><tr><td align="center">需要额外费用 ❌</td></tr><tr><td align="center">容易被刷爆 ❌</td></tr></tbody></table><h1 id="自建图床"><a href="#自建图床" class="headerlink" title="自建图床"></a>自建图床</h1><p>如果你有一台服务器，那么你就可以自建自己的图床，以达到稳定性与速度兼备，可以自建<a href="https://www.lsky.pro/">兰空图床</a>，缺点大概就是需要一台服务器的费用。</p><table><thead><tr><th align="center">特点</th></tr></thead><tbody><tr><td align="center">稳定性好 ✅</td></tr><tr><td align="center">方便管理图片，上传方便，有 API ✅</td></tr><tr><td align="center">容量取决于服务器 ✅</td></tr><tr><td align="center">图像处理：如裁剪，压缩等 ✅</td></tr><tr><td align="center">配置较为复杂 ❌</td></tr><tr><td align="center">需要服务器费用 ❌</td></tr></tbody></table><h1 id="付费图床"><a href="#付费图床" class="headerlink" title="付费图床"></a>付费图床</h1><p>目前我比较推荐的是杜老师的<a href="https://7bu.top/">去不图床</a>, 10 元 1G, 容量收费。</p><table><thead><tr><th align="center">特点</th></tr></thead><tbody><tr><td align="center">稳定性好 ✅</td></tr><tr><td align="center">方便管理图片，上传方便，有 API ✅</td></tr><tr><td align="center">容量取决于服务器 ✅</td></tr><tr><td align="center">图像处理：如裁剪，压缩等 ✅</td></tr><tr><td align="center">配置简单 ✅</td></tr><tr><td align="center">需要一定费用 ❌</td></tr></tbody></table><h1 id="博主目前的方案"><a href="#博主目前的方案" class="headerlink" title="博主目前的方案"></a>博主目前的方案</h1><p>博主目前的方案为自建图床 ➕npm 图床 ➕ 云存储，三种方式都有使用，后续应该会逐渐迁移至云存储的方式。</p><p>目前为云存储 ➕cdn 来处理 js 等文件，搭建了 <a href="https://alist.nn.ci/zh/">alist</a>来管理文件。</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://pan.anheyu.com/">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/pan.anheyu.com/.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">安知鱼alist</div>            <div class="tag-link-sitename">安知鱼alist</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p>图片搭建了兰空图床企业版来使用。</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://image.anheyu.com">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://img02.anheyu.com/adminuploads/1/2022/04/27/6268e7d9de532.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">安知鱼图床</div>            <div class="tag-link-sitename">安知鱼图床</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> 教程 </tag>
            
            <tag> 图床 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>butterfly魔改本地搜索预览图</title>
      <link href="/posts/968f.html"/>
      <url>/posts/968f.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>butterfly 自带的本地搜索配置方便所以便一直使用至今，不过有一个痛点就是没有搜索预览图，于是为了解决这个问题做了如下尝试。</p></blockquote><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-search --save</span><br></pre></td></tr></table></figure><p>修改<code>_config.yml</code>, 添加以下内容</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="attr">content:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><h1 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h1><p>在<code>_config.butterfly.yml</code>中开启本地搜索</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Local search</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">preload:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">CDN:</span></span><br></pre></td></tr></table></figure><p>修改<code>local_search</code>依赖 cdn 项, 修改文件<code>_config.butterfly.yml</code>中最下面 <code>CDN.option.local_search</code>的值为 <a href="https://npm.elemecdn.com/anzhiyu-blog@2.1.2/js/search/local-search.js">https://npm.elemecdn.com/anzhiyu-blog@2.1.2/js/search/local-search.js</a></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">CDN:</span></span><br><span class="line">  <span class="string">...</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">    <span class="comment"># main_css:</span></span><br><span class="line">    <span class="comment"># translate:</span></span><br><span class="line">    <span class="attr">local_search:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-blog@2.1.2/js/search/local-search.js</span></span><br></pre></td></tr></table></figure><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>目前存在的问题是, 搜索出来的图片不能懒加载, 不过问题不大, 因为有开启本地搜索的预加载, 所以图片会从本地缓存中取, 再加上本来就不大的图片, 加载也不是很慢了, 另外再加之搜索文件也可以使用 cdn 地址了也就问题不大了, 当然很大可能是我的文章数量还不够多 hhhh</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> butterfly </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>解决vite模块化打包</title>
      <link href="/posts/1ed1.html"/>
      <url>/posts/1ed1.html</url>
      
        <content type="html"><![CDATA[<p>在 vite 环境下开发时，默认是试用 ESM 打包，但是当我开发一个嵌入式应用就需要能做到闭包以防止变量冲突等问题，这个时候就要切换打包方式了，经过我不断的翻看文档，发现只需要在<code>build.rollupOptions.output.format</code> 配置<code>iife</code>即可，因为 vite 底层试用 rollup 构建，所以我们需要告诉 rollup 我们需要使用什么方式来构建。</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://rollupjs.org/guide/en/">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/rollupjs.org/guide/en/.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">roolup官方文档</div>            <div class="tag-link-sitename">roolup官方文档</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><h1 id="output-format"><a href="#output-format" class="headerlink" title="output.format"></a>output.format</h1><p>Type: string<br>CLI: -f&#x2F;–format <formatspecifier><br>Default: “es”</p><p>Specifies the format of the generated bundle. One of the following:</p><ul><li><p>amd</p><p>Asynchronous Module Definition, used with module loaders like RequireJS</p></li><li><p>cjs</p><p>CommonJS, suitable for Node and other bundlers (alias: commonjs)</p></li><li><p>es</p><p>Keep the bundle as an ES module file, suitable for other bundlers and inclusion as a <code>&lt;script type=module&gt;</code> tag in modern browsers (alias: <code>esm</code>, <code>module</code>)</p></li><li><p><code>iife</code> – A self-executing function, suitable for inclusion as a <code>&lt;script&gt;</code> tag. (If you want to create a bundle for your application, you probably want to use this.). “iife” stands for “immediately-invoked <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">Function Expression</a>“</p></li><li><p><code>umd</code> – Universal Module Definition, works as <code>amd</code>, <code>cjs</code> and <code>iife</code> all in one</p></li><li><p><code>system</code> – Native format of the SystemJS loader (alias: <code>systemjs</code>)</p></li></ul><p>当我们设置为<code>iife</code>后还需要为其指定一个模块名称, 也就是 name。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  ...,</span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">    <span class="attr">format</span>: <span class="string">&#x27;iife&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;MyBundle&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h1 id="elmentPlus-命名空间"><a href="#elmentPlus-命名空间" class="headerlink" title="elmentPlus 命名空间"></a>elmentPlus 命名空间</h1><p>打包以后可能会与原本存在的 element 的样式存在冲突, 所以我们可以给 element 样式添加命名空间, 在<code>app.vue</code>中使用<code>el-config-provider</code>组建包裹住所有组件。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 命名空间防止elment样式冲突 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">el-config-provider</span> <span class="attr">namespace</span>=<span class="string">&quot;anzhiyu&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">main</span> <span class="attr">class</span>=<span class="string">&quot;fcircle_page&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">FishPond</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">Transition</span> <span class="attr">name</span>=<span class="string">&quot;anzhiyu&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ManagePanel</span> <span class="attr">v-if</span>=<span class="string">&quot;managePanelShow&quot;</span> /&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">Transition</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">el-config-provider</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure><p>由于<code>elmentPlus</code>采用<code>sass</code>作为 css 预处理器，所以打包的时候要使用 sass 预处理，所以需要安装有 sass,</p><p>新建<code>src/assets/el.scss</code></p><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// we can add this to custom namespace, default is &#x27;el&#x27;</span></span><br><span class="line"><span class="keyword">@forward</span> <span class="string">&quot;element-plus/theme-chalk/src/mixins/config.scss&quot;</span> with (</span><br><span class="line">  <span class="variable">$namespace</span>: <span class="string">&quot;anzhiyu&quot;</span></span><br><span class="line">);</span><br></pre></td></tr></table></figure><p>修改 <code>vite.config.ts</code>的配置，</p><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>(&#123;</span><br><span class="line">  <span class="attr">css</span>: &#123;</span><br><span class="line">    <span class="attr">preprocessorOptions</span>: &#123;</span><br><span class="line">      <span class="attr">scss</span>: &#123;</span><br><span class="line">        <span class="attr">additionalData</span>: <span class="string">`@use &quot;./src/assets/el.scss&quot; as *;`</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="title function_">vue</span>(),</span><br><span class="line">    <span class="title class_">AutoImport</span>(&#123;</span><br><span class="line">      <span class="attr">resolvers</span>: [<span class="title class_">ElementPlusResolver</span>()],</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="title class_">Components</span>(&#123;</span><br><span class="line">      <span class="attr">resolvers</span>: [<span class="title class_">ElementPlusResolver</span>(&#123; <span class="attr">importStyle</span>: <span class="string">&quot;sass&quot;</span> &#125;)],</span><br><span class="line">    &#125;),</span><br><span class="line">  ],</span><br><span class="line">  ....</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h1 id="完整配置"><a href="#完整配置" class="headerlink" title="完整配置"></a>完整配置</h1><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * @Description: vite配置文件</span></span><br><span class="line"><span class="comment"> * @Author: 安知鱼</span></span><br><span class="line"><span class="comment"> * @Email: anzhiyu-c@qq.com</span></span><br><span class="line"><span class="comment"> * @Date: 2022-10-31 13:27:51</span></span><br><span class="line"><span class="comment"> * @LastEditTime: 2022-11-10 21:08:52</span></span><br><span class="line"><span class="comment"> * @LastEditors: 安知鱼</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">import</span> &#123; fileURLToPath, <span class="variable constant_">URL</span> &#125; <span class="keyword">from</span> <span class="string">&quot;node:url&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; defineConfig &#125; <span class="keyword">from</span> <span class="string">&quot;vite&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">&quot;@vitejs/plugin-vue&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">AutoImport</span> <span class="keyword">from</span> <span class="string">&quot;unplugin-auto-import/vite&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Components</span> <span class="keyword">from</span> <span class="string">&quot;unplugin-vue-components/vite&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">ElementPlusResolver</span> &#125; <span class="keyword">from</span> <span class="string">&quot;unplugin-vue-components/resolvers&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// https://vitejs.dev/config/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineConfig</span>(&#123;</span><br><span class="line">  <span class="attr">css</span>: &#123;</span><br><span class="line">    <span class="attr">preprocessorOptions</span>: &#123;</span><br><span class="line">      <span class="attr">scss</span>: &#123;</span><br><span class="line">        <span class="attr">additionalData</span>: <span class="string">`@use &quot;./src/assets/el.scss&quot; as *;`</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [</span><br><span class="line">    <span class="title function_">vue</span>(),</span><br><span class="line">    <span class="title class_">AutoImport</span>(&#123;</span><br><span class="line">      <span class="attr">resolvers</span>: [<span class="title class_">ElementPlusResolver</span>()],</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="title class_">Components</span>(&#123;</span><br><span class="line">      <span class="attr">resolvers</span>: [<span class="title class_">ElementPlusResolver</span>(&#123; <span class="attr">importStyle</span>: <span class="string">&quot;sass&quot;</span> &#125;)],</span><br><span class="line">    &#125;),</span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">resolve</span>: &#123;</span><br><span class="line">    <span class="attr">alias</span>: &#123;</span><br><span class="line">      <span class="string">&quot;@&quot;</span>: <span class="title function_">fileURLToPath</span>(<span class="keyword">new</span> <span class="title function_">URL</span>(<span class="string">&quot;./src&quot;</span>, <span class="keyword">import</span>.<span class="property">meta</span>.<span class="property">url</span>)),</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">build</span>: &#123;</span><br><span class="line">    <span class="attr">target</span>: [<span class="string">&quot;chrome58&quot;</span>],</span><br><span class="line">    <span class="attr">minify</span>: <span class="string">&quot;terser&quot;</span>,</span><br><span class="line">    <span class="attr">rollupOptions</span>: &#123;</span><br><span class="line">      <span class="attr">output</span>: &#123;</span><br><span class="line">        <span class="attr">format</span>: <span class="string">&quot;iife&quot;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;output.js&quot;</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">sourcemap</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">assetsInlineLimit</span>: <span class="number">4096</span>,</span><br><span class="line">    <span class="attr">terserOptions</span>: &#123;</span><br><span class="line">      <span class="attr">compress</span>: &#123;</span><br><span class="line">        <span class="comment">// 打包自动删除console</span></span><br><span class="line">        <span class="attr">drop_console</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">drop_debugger</span>: <span class="literal">true</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">keep_classnames</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="attr">toplevel</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="attr">ie8</span>: <span class="literal">true</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 开发 </tag>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>butterfly魔改aplayer音乐</title>
      <link href="/posts/6c69.html"/>
      <url>/posts/6c69.html</url>
      
        <content type="html"><![CDATA[<div class="tip warning faa-horizontal animated"><p>魔改有风险, 魔改前注意备份。此篇魔改需一定代码能力。</p></div><h1 id="魔改效果预览"><a href="#魔改效果预览" class="headerlink" title="魔改效果预览"></a>魔改效果预览</h1><div id="player_ebb742fd1f0b5a7b"></div><div class="js-pjax"><script type="text/javascript" src="https://player.dogecloud.com/js/loader"></script><script type="text/javascript" defer>  setTimeout(() => {    var dogePlayer = new DogePlayer({        container: document.getElementById("player_ebb742fd1f0b5a7b"),        userId: 4945,        vcode: "ebb742fd1f0b5a7b",        autoPlay: false    });  }, 300);</script></div><h1 id="更改-aplayer-依赖"><a href="#更改-aplayer-依赖" class="headerlink" title="更改 aplayer 依赖"></a>更改 aplayer 依赖</h1><p>修改<code>_config.butterfly.yml</code>中</p><ol><li><code>CDN.option.aplayer_js</code></li><li><code>CDN.option.aplayer_css</code></li><li><code>CDN.option.meting_js</code></li></ol><p>建议将其下载至本地再引入, 博主不保证其可访问性。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">aplayer_css:</span> <span class="string">https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css</span></span><br><span class="line"><span class="attr">aplayer_js:</span> <span class="string">https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js</span></span><br><span class="line"><span class="attr">meting_js:</span> <span class="string">https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js</span></span><br></pre></td></tr></table></figure><p><code>meting_js</code> 内容如下</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_objectSpread</span>(<span class="params">a</span>) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> b = <span class="number">1</span>; b &lt; <span class="variable language_">arguments</span>.<span class="property">length</span>; b++) &#123;</span><br><span class="line">    <span class="keyword">var</span> c = <span class="literal">null</span> == <span class="variable language_">arguments</span>[b] ? &#123;&#125; : <span class="variable language_">arguments</span>[b],</span><br><span class="line">      d = <span class="title class_">Object</span>.<span class="title function_">keys</span>(c);</span><br><span class="line">    <span class="string">&quot;function&quot;</span> == <span class="keyword">typeof</span> <span class="title class_">Object</span>.<span class="property">getOwnPropertySymbols</span> &amp;&amp;</span><br><span class="line">      (d = d.<span class="title function_">concat</span>(</span><br><span class="line">        <span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(c).<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">a</span>) &#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="title class_">Object</span>.<span class="title function_">getOwnPropertyDescriptor</span>(c, a).<span class="property">enumerable</span>;</span><br><span class="line">        &#125;)</span><br><span class="line">      )),</span><br><span class="line">      d.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">b</span>) &#123;</span><br><span class="line">        <span class="title function_">_defineProperty</span>(a, b, c[b]);</span><br><span class="line">      &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> a;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_defineProperty</span>(<span class="params">a, b, c</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    b <span class="keyword">in</span> a ? <span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(a, b, &#123; <span class="attr">value</span>: c, <span class="attr">enumerable</span>: !<span class="number">0</span>, <span class="attr">configurable</span>: !<span class="number">0</span>, <span class="attr">writable</span>: !<span class="number">0</span> &#125;) : (a[b] = c), a</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">MetingJSElement</span> <span class="keyword">extends</span> <span class="title class_ inherited__">HTMLElement</span> &#123;</span><br><span class="line">  <span class="title function_">connectedCallback</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">APlayer</span> &amp;&amp; <span class="variable language_">window</span>.<span class="property">fetch</span> &amp;&amp; (<span class="variable language_">this</span>.<span class="title function_">_init</span>(), <span class="variable language_">this</span>.<span class="title function_">_parse</span>());</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">disconnectedCallback</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">lock</span> || <span class="variable language_">this</span>.<span class="property">aplayer</span>.<span class="title function_">destroy</span>();</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">_camelize</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a</span><br><span class="line">      .<span class="title function_">replace</span>(<span class="regexp">/^[_.\- ]+/</span>, <span class="string">&quot;&quot;</span>)</span><br><span class="line">      .<span class="title function_">toLowerCase</span>()</span><br><span class="line">      .<span class="title function_">replace</span>(<span class="regexp">/[_.\- ]+(\w|$)/g</span>, <span class="function">(<span class="params">a, b</span>) =&gt;</span> b.<span class="title function_">toUpperCase</span>());</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">_init</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> a = &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> b = <span class="number">0</span>; b &lt; <span class="variable language_">this</span>.<span class="property">attributes</span>.<span class="property">length</span>; b += <span class="number">1</span>)</span><br><span class="line">      a[<span class="variable language_">this</span>.<span class="title function_">_camelize</span>(<span class="variable language_">this</span>.<span class="property">attributes</span>[b].<span class="property">name</span>)] = <span class="variable language_">this</span>.<span class="property">attributes</span>[b].<span class="property">value</span>;</span><br><span class="line">    <span class="keyword">let</span> b = [</span><br><span class="line">      <span class="string">&quot;server&quot;</span>,</span><br><span class="line">      <span class="string">&quot;type&quot;</span>,</span><br><span class="line">      <span class="string">&quot;id&quot;</span>,</span><br><span class="line">      <span class="string">&quot;api&quot;</span>,</span><br><span class="line">      <span class="string">&quot;auth&quot;</span>,</span><br><span class="line">      <span class="string">&quot;auto&quot;</span>,</span><br><span class="line">      <span class="string">&quot;lock&quot;</span>,</span><br><span class="line">      <span class="string">&quot;name&quot;</span>,</span><br><span class="line">      <span class="string">&quot;title&quot;</span>,</span><br><span class="line">      <span class="string">&quot;artist&quot;</span>,</span><br><span class="line">      <span class="string">&quot;author&quot;</span>,</span><br><span class="line">      <span class="string">&quot;url&quot;</span>,</span><br><span class="line">      <span class="string">&quot;cover&quot;</span>,</span><br><span class="line">      <span class="string">&quot;pic&quot;</span>,</span><br><span class="line">      <span class="string">&quot;lyric&quot;</span>,</span><br><span class="line">      <span class="string">&quot;lrc&quot;</span>,</span><br><span class="line">    ];</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">meta</span> = &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> c = <span class="number">0</span>; c &lt; b.<span class="property">length</span>; c++) &#123;</span><br><span class="line">      <span class="keyword">let</span> d = b[c];</span><br><span class="line">      (<span class="variable language_">this</span>.<span class="property">meta</span>[d] = a[d]), <span class="keyword">delete</span> a[d];</span><br><span class="line">    &#125;</span><br><span class="line">    (<span class="variable language_">this</span>.<span class="property">config</span> = a),</span><br><span class="line">      (<span class="variable language_">this</span>.<span class="property">api</span> =</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">api</span> ||</span><br><span class="line">        <span class="variable language_">window</span>.<span class="property">meting_api</span> ||</span><br><span class="line">        <span class="string">&quot;https://api.i-meto.com/meting/api?server=:server&amp;type=:type&amp;id=:id&amp;r=:r&quot;</span>),</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">auto</span> &amp;&amp; <span class="variable language_">this</span>.<span class="title function_">_parse_link</span>();</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">_parse_link</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> a = [</span><br><span class="line">      [<span class="string">&quot;music.163.com.*song.*id=(\\d+)&quot;</span>, <span class="string">&quot;netease&quot;</span>, <span class="string">&quot;song&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;music.163.com.*album.*id=(\\d+)&quot;</span>, <span class="string">&quot;netease&quot;</span>, <span class="string">&quot;album&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;music.163.com.*artist.*id=(\\d+)&quot;</span>, <span class="string">&quot;netease&quot;</span>, <span class="string">&quot;artist&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;music.163.com.*playlist.*id=(\\d+)&quot;</span>, <span class="string">&quot;netease&quot;</span>, <span class="string">&quot;playlist&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;music.163.com.*discover/toplist.*id=(\\d+)&quot;</span>, <span class="string">&quot;netease&quot;</span>, <span class="string">&quot;playlist&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;y.qq.com.*song/(\\w+).html&quot;</span>, <span class="string">&quot;tencent&quot;</span>, <span class="string">&quot;song&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;y.qq.com.*album/(\\w+).html&quot;</span>, <span class="string">&quot;tencent&quot;</span>, <span class="string">&quot;album&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;y.qq.com.*singer/(\\w+).html&quot;</span>, <span class="string">&quot;tencent&quot;</span>, <span class="string">&quot;artist&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;y.qq.com.*playsquare/(\\w+).html&quot;</span>, <span class="string">&quot;tencent&quot;</span>, <span class="string">&quot;playlist&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;y.qq.com.*playlist/(\\w+).html&quot;</span>, <span class="string">&quot;tencent&quot;</span>, <span class="string">&quot;playlist&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;xiami.com.*song/(\\w+)&quot;</span>, <span class="string">&quot;xiami&quot;</span>, <span class="string">&quot;song&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;xiami.com.*album/(\\w+)&quot;</span>, <span class="string">&quot;xiami&quot;</span>, <span class="string">&quot;album&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;xiami.com.*artist/(\\w+)&quot;</span>, <span class="string">&quot;xiami&quot;</span>, <span class="string">&quot;artist&quot;</span>],</span><br><span class="line">      [<span class="string">&quot;xiami.com.*collect/(\\w+)&quot;</span>, <span class="string">&quot;xiami&quot;</span>, <span class="string">&quot;playlist&quot;</span>],</span><br><span class="line">    ];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> b = <span class="number">0</span>; b &lt; a.<span class="property">length</span>; b++) &#123;</span><br><span class="line">      <span class="keyword">let</span> c = a[b],</span><br><span class="line">        d = <span class="keyword">new</span> <span class="title class_">RegExp</span>(c[<span class="number">0</span>]),</span><br><span class="line">        e = d.<span class="title function_">exec</span>(<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">auto</span>);</span><br><span class="line">      <span class="keyword">if</span> (<span class="literal">null</span> !== e) <span class="keyword">return</span> (<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">server</span> = c[<span class="number">1</span>]), (<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">type</span> = c[<span class="number">2</span>]), <span class="keyword">void</span> (<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">id</span> = e[<span class="number">1</span>]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">_parse</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">url</span>) &#123;</span><br><span class="line">      <span class="keyword">let</span> a = &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">name</span> || <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">title</span> || <span class="string">&quot;Audio name&quot;</span>,</span><br><span class="line">        <span class="attr">artist</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">artist</span> || <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">author</span> || <span class="string">&quot;Audio artist&quot;</span>,</span><br><span class="line">        <span class="attr">url</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">url</span>,</span><br><span class="line">        <span class="attr">cover</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">cover</span> || <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">pic</span>,</span><br><span class="line">        <span class="attr">lrc</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lrc</span> || <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lyric</span> || <span class="string">&quot;&quot;</span>,</span><br><span class="line">        <span class="attr">type</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">type</span> || <span class="string">&quot;auto&quot;</span>,</span><br><span class="line">      &#125;;</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">        a.<span class="property">lrc</span> || (<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lrcType</span> = <span class="number">0</span>),</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">innerText</span> &amp;&amp; ((a.<span class="property">lrc</span> = <span class="variable language_">this</span>.<span class="property">innerText</span>), (<span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lrcType</span> = <span class="number">2</span>)),</span><br><span class="line">        <span class="keyword">void</span> <span class="variable language_">this</span>.<span class="title function_">_loadPlayer</span>([a])</span><br><span class="line">      );</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">let</span> a = <span class="variable language_">this</span>.<span class="property">api</span></span><br><span class="line">      .<span class="title function_">replace</span>(<span class="string">&quot;:server&quot;</span>, <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">server</span>)</span><br><span class="line">      .<span class="title function_">replace</span>(<span class="string">&quot;:type&quot;</span>, <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">type</span>)</span><br><span class="line">      .<span class="title function_">replace</span>(<span class="string">&quot;:id&quot;</span>, <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">id</span>)</span><br><span class="line">      .<span class="title function_">replace</span>(<span class="string">&quot;:auth&quot;</span>, <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">auth</span>)</span><br><span class="line">      .<span class="title function_">replace</span>(<span class="string">&quot;:r&quot;</span>, <span class="title class_">Math</span>.<span class="title function_">random</span>());</span><br><span class="line">    <span class="title function_">fetch</span>(a)</span><br><span class="line">      .<span class="title function_">then</span>(<span class="function"><span class="params">a</span> =&gt;</span> a.<span class="title function_">json</span>())</span><br><span class="line">      .<span class="title function_">then</span>(<span class="function"><span class="params">a</span> =&gt;</span> <span class="variable language_">this</span>.<span class="title function_">_loadPlayer</span>(a));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">_loadPlayer</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> b = &#123; <span class="attr">audio</span>: a, <span class="attr">mutex</span>: !<span class="number">0</span>, <span class="attr">lrcType</span>: <span class="variable language_">this</span>.<span class="property">meta</span>.<span class="property">lrcType</span> || <span class="number">3</span>, <span class="attr">storageName</span>: <span class="string">&quot;metingjs&quot;</span> &#125;;</span><br><span class="line">    <span class="keyword">if</span> (a.<span class="property">length</span>) &#123;</span><br><span class="line">      <span class="keyword">let</span> a = <span class="title function_">_objectSpread</span>(&#123;&#125;, b, <span class="variable language_">this</span>.<span class="property">config</span>);</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> b <span class="keyword">in</span> a) (<span class="string">&quot;true&quot;</span> === a[b] || <span class="string">&quot;false&quot;</span> === a[b]) &amp;&amp; (a[b] = <span class="string">&quot;true&quot;</span> === a[b]);</span><br><span class="line">      <span class="keyword">let</span> c = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">      (a.<span class="property">container</span> = c), <span class="variable language_">this</span>.<span class="title function_">appendChild</span>(c), (<span class="variable language_">this</span>.<span class="property">aplayer</span> = <span class="keyword">new</span> <span class="title class_">APlayer</span>(a));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  <span class="string">&quot;\n %c MetingJS v2.0.1 %c https://github.com/metowolf/MetingJS \n&quot;</span>,</span><br><span class="line">  <span class="string">&quot;color: #fadfa3; background: #030307; padding:5px 0;&quot;</span>,</span><br><span class="line">  <span class="string">&quot;background: #fadfa3; padding:5px 0;&quot;</span></span><br><span class="line">),</span><br><span class="line">  <span class="variable language_">window</span>.<span class="property">customElements</span> &amp;&amp;</span><br><span class="line">    !<span class="variable language_">window</span>.<span class="property">customElements</span>.<span class="title function_">get</span>(<span class="string">&quot;meting-js&quot;</span>) &amp;&amp;</span><br><span class="line">    ((<span class="variable language_">window</span>.<span class="property">MetingJSElement</span> = <span class="title class_">MetingJSElement</span>), <span class="variable language_">window</span>.<span class="property">customElements</span>.<span class="title function_">define</span>(<span class="string">&quot;meting-js&quot;</span>, <span class="title class_">MetingJSElement</span>));</span><br></pre></td></tr></table></figure><h1 id="开启主题音乐支持"><a href="#开启主题音乐支持" class="headerlink" title="开启主题音乐支持"></a>开启主题音乐支持</h1><p>修改 <code>_config.yml</code> 中<code>aplayer</code>选项</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">aplayer:</span></span><br><span class="line">  <span class="attr">meting:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">asset_inject:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>修改 <code>_config.butterfly.yml</code> 中 <code>aplayerInject</code></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Inject the css and script (aplayer/meting)</span></span><br><span class="line"><span class="attr">aplayerInject:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>如果需要音乐切换界面不断则需要开启 <code>pjax</code></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Pjax</span></span><br><span class="line"><span class="comment"># It may contain bugs and unstable, give feedback when you find the bugs.</span></span><br><span class="line"><span class="comment"># https://github.com/MoOx/pjax</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="comment"># - xxxx</span></span><br><span class="line">    <span class="comment"># - xxxx</span></span><br></pre></td></tr></table></figure><h1 id="新建-pug-结构"><a href="#新建-pug-结构" class="headerlink" title="新建 pug 结构"></a>新建 pug 结构</h1><p>新建 <code>themes/butterfly/layout/includes/music.pug</code></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">#nav-music</span><br><span class="line">  #nav-music-hoverTips(onclick=&#x27;anzhiyu.musicToggle()&#x27;) 播放音乐</span><br><span class="line">  meting-js#8152976493(server=&quot;netease&quot; type=&quot;playlist&quot; mutex=&quot;true&quot; preload=&quot;none&quot; theme=&quot;var(--anzhiyu-main)&quot; data-lrctype=&quot;0&quot; order=&quot;random&quot;)</span><br></pre></td></tr></table></figure><p>在 <code>themes/butterfly/layout/includes/layout.pug</code> 底部中引入<code>music.pug</code></p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+ include ./music.pug</span></span><br><span class="line">  !=partial(&#x27;includes/third-party/search/index&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span><br><span class="line">  include ./additional-js.pug</span><br></pre></td></tr></table></figure><h1 id="添加-css"><a href="#添加-css" class="headerlink" title="添加 css"></a>添加 css</h1><p>不会的同学参考<a href="https://blog.leonus.cn/2022/custom.html">Hexo 博客添加自定义 css 和 js 文件</a></p><p>css 中存在大量变量 博主全部的变量如下, 将如下 <code>css</code>在合适的位置 引入即可。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 颜色 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg-none</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-main-op-deep</span>: <span class="built_in">var</span>(--anzhiyu-theme-op-deep) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-gray-op</span>: <span class="number">#9999992b</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-top</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-white</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white-op</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-black</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-op</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-none</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-gray</span>: <span class="number">#999999</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-yellow</span>: <span class="number">#ffc93e</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-orange</span>: <span class="number">#e38100</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-main</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-main-op</span>: <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-theme</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-main</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-main-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-blue</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">40</span>, <span class="number">109</span>, <span class="number">234</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-white</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-black</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">12px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-yellow</span>: <span class="number">0px</span> <span class="number">38px</span> <span class="number">77px</span> -<span class="number">26px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">201</span>, <span class="number">62</span>, <span class="number">0.12</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-red</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#ee7d7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-green</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#87ee7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-border</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">16px</span> -<span class="number">4px</span> <span class="number">#2c2d300c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-blackdeep</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">16px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-logo-color</span>: <span class="built_in">linear-gradient</span>(<span class="number">215deg</span>, <span class="number">#4584ff</span> <span class="number">30%</span>, <span class="number">#ff7676</span> <span class="number">70%</span>);</span><br><span class="line">  <span class="attr">--style-border</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--anzhiyu-blue-main</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--style-border-hover</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--style-border-dashed</span>: <span class="number">1px</span> dashed <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--style-border-avatar</span>: <span class="number">4px</span> solid <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">  <span class="attr">--style-border-always</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--style-border-none</span>: <span class="number">1px</span> solid transparent;</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic1</span>: <span class="number">#fefeff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic2</span>: <span class="number">#fcfdff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic2</span>: <span class="number">#08080a</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic1</span>: <span class="number">#0b0b0e</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-main-none</span>: <span class="number">#b8b8b800</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;light&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op-deep</span>: <span class="number">#4259efdd</span>;</span><br><span class="line">  <span class="attr">--global-bg</span>: <span class="number">#f7f9fe</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-deep</span>: <span class="number">#1856fb</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#d8213c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#363636</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#f7f9fe</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#edf0f7</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#fafcff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#f2f5f8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#f1f3f8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#e3e8f7</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op-deep</span>: <span class="number">#0084ffdd</span>;</span><br><span class="line">  <span class="attr">--global-bg</span>: <span class="number">#18171d</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-deep</span>: <span class="number">#0076e5</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#0084ff23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#ff3842</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#18171d</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="number">#0a84ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="number">#f2b94b</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="number">#a1a2b8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">200</span>, <span class="number">200</span>, <span class="number">223</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#121212</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">20px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">28</span>, <span class="number">28</span>, <span class="number">28</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#1d1b26</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#42444a</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>新建 <code>themes/butterfly/source/css/_custom/aplayer/aplayer.css</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 音乐播放器 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-narrow</span> <span class="selector-class">.aplayer-body</span>,</span><br><span class="line"><span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-narrow</span> <span class="selector-class">.aplayer-pic</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">66px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">66px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.aplayer</span>)<span class="selector-pseudo">:has</span>(<span class="selector-class">.aplayer-body</span>)<span class="selector-pseudo">:has</span>(<span class="selector-class">.aplayer-list</span>) <span class="selector-id">#post-comment</span> <span class="selector-class">.tk-comments-container</span> &gt; <span class="selector-class">.tk-comment</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: none;</span><br><span class="line">  <span class="attribute">box-shadow</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 导航栏音乐 */</span></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1300px</span>) &#123;</span><br><span class="line">  <span class="selector-id">#nav-music</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">9</span>;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.5s</span>;</span><br><span class="line">  <span class="attribute">transform-origin</span>: left bottom;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-border);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0.97</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-class">.playing</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-none);</span><br><span class="line">  <span class="attribute">animation</span>: playingShadow <span class="number">5s</span> linear infinite;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> playingShadow &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-none);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="number">50%</span> &#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0px</span> <span class="number">12px</span> <span class="number">0px</span> <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-none);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-pic</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>) <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-always);</span><br><span class="line">  <span class="attribute">animation</span>: changeright <span class="number">24s</span> linear infinite;</span><br><span class="line">  <span class="attribute">animation-play-state</span>: paused;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-class">.playing</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-pic</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">14px</span> <span class="number">#ffffffa6</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>) <span class="built_in">scale</span>(<span class="number">1.1</span>);</span><br><span class="line">  <span class="attribute">border-color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">animation-play-state</span>: running;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> changeright &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>) <span class="built_in">scale</span>(<span class="number">1.1</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">2px</span> <span class="number">#ffffff00</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="number">25%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">90deg</span>) <span class="built_in">scale</span>(<span class="number">1.1</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">14px</span> <span class="number">#ffffff</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="number">50%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">180deg</span>) <span class="built_in">scale</span>(<span class="number">1.1</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">2px</span> <span class="number">#ffffff00</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="number">75%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">270deg</span>) <span class="built_in">scale</span>(<span class="number">1.1</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">14px</span> <span class="number">#ffffff</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">360deg</span>) <span class="built_in">scale</span>(<span class="number">1.1</span>);</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">2px</span> <span class="number">#ffffff00</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-info</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-class">.playing</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-info</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-class">.playing</span> <span class="selector-id">#nav-music-hoverTips</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-id">#nav-music-hoverTips</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.playing</span>) <span class="selector-id">#nav-music-hoverTips</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span></span><br><span class="line">  <span class="selector-class">.aplayer</span></span><br><span class="line">  <span class="selector-class">.aplayer-info</span></span><br><span class="line">  <span class="selector-class">.aplayer-controller</span></span><br><span class="line">  <span class="selector-class">.aplayer-bar-wrap</span><span class="selector-pseudo">:hover</span></span><br><span class="line">  <span class="selector-class">.aplayer-bar</span></span><br><span class="line">  <span class="selector-class">.aplayer-played</span></span><br><span class="line">  <span class="selector-class">.aplayer-thumb</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--card-bg);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">60px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">41px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border);</span><br><span class="line">  <span class="attribute">box-shadow</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-class">.playing</span> <span class="selector-class">.aplayer</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-main-op-deep);</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-hover);</span><br><span class="line">  backdrop-<span class="attribute">filter</span>: <span class="built_in">saturate</span>(<span class="number">180%</span>) <span class="built_in">blur</span>(<span class="number">20px</span>);</span><br><span class="line">  backdrop-<span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">20px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-notice</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-miniswitcher</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-body</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer-list</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">12px</span> <span class="number">0</span> <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-time</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> <span class="selector-class">.aplayer-author</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlist</span> <span class="selector-class">.aplayer-info</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-pic</span> <span class="selector-class">.aplayer-button</span> &#123;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">50%</span>, <span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-pic</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.aplayer-button</span><span class="selector-class">.aplayer-play</span>) &#123;</span><br><span class="line">  <span class="attribute">animation-play-state</span>: paused;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>) <span class="built_in">scale</span>(<span class="number">1</span>) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-pic</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> <span class="selector-class">.aplayer-title</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">120px</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  user-select: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> <span class="selector-class">.aplayer-bar</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> <span class="selector-class">.aplayer-bar</span> <span class="selector-class">.aplayer-loaded</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> <span class="selector-class">.aplayer-bar</span> <span class="selector-class">.aplayer-played</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.1</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">var</span>(--anzhiyu-white) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">animation</span>: lightBar <span class="number">5s</span> ease infinite;</span><br><span class="line">  <span class="attribute">animation-play-state</span>: paused;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-class">.playing</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> <span class="selector-class">.aplayer-bar</span> <span class="selector-class">.aplayer-played</span> &#123;</span><br><span class="line">  <span class="attribute">animation-play-state</span>: running;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> lightBar &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0.1</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="number">60%</span> &#123;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0.3</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0.1</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 歌词 */</span></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-lrc</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: -<span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-class">.stretch</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-lrc</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-music</span><span class="selector-class">.stretch</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-lrc</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-lrc</span> <span class="selector-tag">p</span><span class="selector-class">.aplayer-lrc-current</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">border</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-lrc</span><span class="selector-pseudo">:after</span>,</span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-lrc</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-lrc</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ffffffb3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-pic</span> &#123;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-music</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-pic</span> <span class="selector-class">.aplayer-button</span> &#123;</span><br><span class="line">  <span class="attribute">pointer-events</span>: all;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="js-处理"><a href="#js-处理" class="headerlink" title="js 处理"></a>js 处理</h1><p>不会的同学参考<a href="https://blog.leonus.cn/2022/custom.html">Hexo 博客添加自定义 css 和 js 文件</a></p><p>在 <code>_config.butterfly.yml</code> 中我引入了两个 js，一个是大量工具方法的函数的 js，一个是存储了很多状态处理的 js，而音乐的状态处理是在<code>anzhiyu.js</code>中处理的, 注入绑定函数是在<code>anzhiyufunction.js</code>中处理的。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 自定义js</span></span><br><span class="line"><span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">data-pjax</span> <span class="string">src=&quot;/js/anzhiyu.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">data-pjax</span> <span class="string">src=&quot;/js/anzhiyufunction.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">src=&quot;/js/anzhiyuOnlyOne.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p><code>anzhiyuOnlyOne.js</code> 为任意一个未添加<code>data-pjax</code>属性的 js 即可，目的是防止变量在 pjax 重载时被恢复到初始值。</p><p><code>anzhiyuOnlyOne.js</code> 内容如下</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> anzhiyu_musicPlaying = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">var</span> anzhiyu_musicFirst = <span class="literal">false</span>;</span><br></pre></td></tr></table></figure><p><code>anzhiyu.js</code> 内容如下, 感谢<a href="https://blog.buretuzi.online/">李文若</a> 发现的右键 bug, 已修复</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> navMusicEl = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;nav-music&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> anzhiyu = &#123;</span><br><span class="line">  <span class="comment">//切换音乐播放状态</span></span><br><span class="line">  <span class="attr">musicToggle</span>: <span class="keyword">function</span> (<span class="params">changePaly = <span class="literal">true</span></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!anzhiyu_musicFirst) &#123;</span><br><span class="line">      <span class="title function_">musicBindEvent</span>();</span><br><span class="line">      anzhiyu_musicFirst = <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">let</span> msgPlay = <span class="string">&#x27;&lt;i class=&quot;fa-solid fa-play&quot;&gt;&lt;/i&gt;&lt;span&gt;播放音乐&lt;/span&gt;&#x27;</span>; <span class="comment">// 此處可以更改為你想要顯示的文字</span></span><br><span class="line">    <span class="keyword">let</span> msgPause = <span class="string">&#x27;&lt;i class=&quot;fa-solid fa-pause&quot;&gt;&lt;/i&gt;&lt;span&gt;暂停音乐&lt;/span&gt;&#x27;</span>; <span class="comment">// 同上，但兩處均不建議更改</span></span><br><span class="line">    <span class="keyword">if</span> (anzhiyu_musicPlaying) &#123;</span><br><span class="line">      navMusicEl.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;playing&quot;</span>);</span><br><span class="line">      <span class="comment">// 修改右键菜单文案为播放</span></span><br><span class="line">      <span class="comment">// document.getElementById(&quot;menu-music-toggle&quot;).innerHTML = msgPlay;</span></span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;nav-music-hoverTips&quot;</span>).<span class="property">innerHTML</span> = <span class="string">&quot;音乐已暂停&quot;</span>;</span><br><span class="line">      <span class="comment">// document.querySelector(&quot;#consoleMusic&quot;).classList.remove(&quot;on&quot;);</span></span><br><span class="line">      anzhiyu_musicPlaying = <span class="literal">false</span>;</span><br><span class="line">      navMusicEl.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;stretch&quot;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      navMusicEl.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;playing&quot;</span>);</span><br><span class="line">      <span class="comment">// 修改右键菜单文案为暂停</span></span><br><span class="line">      <span class="comment">// document.getElementById(&quot;menu-music-toggle&quot;).innerHTML = msgPause;</span></span><br><span class="line">      <span class="comment">// document.querySelector(&quot;#consoleMusic&quot;).classList.add(&quot;on&quot;);</span></span><br><span class="line">      anzhiyu_musicPlaying = <span class="literal">true</span>;</span><br><span class="line">      navMusicEl.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;stretch&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (changePaly) <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#nav-music meting-js&quot;</span>).<span class="property">aplayer</span>.<span class="title function_">toggle</span>();</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 音乐伸缩</span></span><br><span class="line">  <span class="attr">musicTelescopic</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (navMusicEl.<span class="property">classList</span>.<span class="title function_">contains</span>(<span class="string">&quot;stretch&quot;</span>)) &#123;</span><br><span class="line">      navMusicEl.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;stretch&quot;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      navMusicEl.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;stretch&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">//音乐上一曲</span></span><br><span class="line">  <span class="attr">musicSkipBack</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#nav-music meting-js&quot;</span>).<span class="property">aplayer</span>.<span class="title function_">skipBack</span>();</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">//音乐下一曲</span></span><br><span class="line">  <span class="attr">musicSkipForward</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#nav-music meting-js&quot;</span>).<span class="property">aplayer</span>.<span class="title function_">skipForward</span>();</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">//获取音乐中的名称</span></span><br><span class="line">  <span class="attr">musicGetName</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> x = $(<span class="string">&quot;.aplayer-title&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> arr = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = x.<span class="property">length</span> - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span><br><span class="line">      arr[i] = x[i].<span class="property">innerText</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr[<span class="number">0</span>];</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果有右键事件 可以在这里写。</span></span><br><span class="line"><span class="comment">// addRightMenuClickEvent();</span></span><br></pre></td></tr></table></figure><p><code>anzhiyufunction.js</code>内容如下</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 音乐绑定事件</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">musicBindEvent</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#nav-music .aplayer-music&quot;</span>).<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    anzhiyu.<span class="title function_">musicTelescopic</span>();</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#nav-music .aplayer-button&quot;</span>).<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    anzhiyu.<span class="title function_">musicToggle</span>(<span class="literal">false</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="进阶"><a href="#进阶" class="headerlink" title="进阶"></a>进阶</h1><p>如果有魔改右键菜单的同学, 可以尝试加入以下方法来判断是否点击的为音乐以控制右键可以下一曲, 上一曲, 暂停音乐</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> metingJs = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#nav-music meting-js&quot;</span>);</span><br><span class="line"><span class="comment">//判断是否是音乐</span></span><br><span class="line"><span class="keyword">if</span> (metingJs.<span class="title function_">contains</span>(event.<span class="property">target</span>)) &#123;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>做完以后大致的逻辑就是第一次只能点播放, 点完第一次的播放后, 右键可以控制上一曲和下一曲, 然后点击名称可以缩回去, 歌词部分胶囊控制进度，但是目前有个 bug 就是因为 <code>aplayer</code> 给控制条绑定的事件是鼠标抬起事件, 导致点击也可以切换进度, 但这不是我所期望的, 如果可以做成歌词部分点击不触发, 仅拖拽触发就好了 QWQ。</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> butterfly </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>butterfly魔改关于页面</title>
      <link href="/posts/e62b.html"/>
      <url>/posts/e62b.html</url>
      
        <content type="html"><![CDATA[<details class="folding-tag" ><summary> 点击查看参考站点 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">张洪 Heo</td><td align="left"><a href="https://blog.zhheo.com/about">张洪 Heo</a></td></tr></tbody></table>              </div>            </details><h3 id="实际效果"><a href="#实际效果" class="headerlink" title="实际效果"></a>实际效果</h3><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://anheyu.com/about/">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://img02.anheyu.com/adminuploads/1/2022/09/05/6315ec9737ac4.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">butterfly关于页面魔改实际效果</div>            <div class="tag-link-sitename">butterfly关于页面魔改实际效果</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p>魔改有风险，魔改前注意备份。</p><h3 id="添加-about-页面"><a href="#添加-about-页面" class="headerlink" title="添加 about 页面"></a>添加 about 页面</h3><p>新建 <code>source/about/index.md</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 关于</span><br><span class="line">date: 2021-03-30 15:57:51</span><br><span class="line">aside: false</span><br><span class="line">top<span class="emphasis">_img: false</span></span><br><span class="line"><span class="emphasis">background: &quot;#f8f9fe&quot;</span></span><br><span class="line"><span class="emphasis">comments: false</span></span><br><span class="line"><span class="emphasis">type: &quot;about&quot;</span></span><br><span class="line"><span class="emphasis">---</span></span><br></pre></td></tr></table></figure><h3 id="添加-html-结构"><a href="#添加-html-结构" class="headerlink" title="添加 html 结构"></a>添加 html 结构</h3><p>新建 <code>themes/butterfly/layout/includes/page/about.pug</code></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#about-page</span></span><br><span class="line">  .author-box</span><br><span class="line">    .author-img</span><br><span class="line">      img.no-lightbox(src=<span class="string">&#x27;https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg&#x27;</span>)</span><br><span class="line">    .image-dot</span><br><span class="line">  p.p.center.logo.large 关于我</span><br><span class="line">  p.p.center.small 生活明朗，万物可爱✨</span><br><span class="line">  .author-content</span><br><span class="line">    .author-content-item.myInfoAndSayHello</span><br><span class="line">      .title1 你好，很高兴认识你👋</span><br><span class="line">      .title2</span><br><span class="line">        | 我叫</span><br><span class="line">        span.inline-word 陈志伟</span><br><span class="line">      .title1</span><br><span class="line">        | 是一名 前端工程师、学生、独立开发者、</span><br><span class="line">        span.inline-word 博主</span><br><span class="line">    .aboutsiteTips.author-content-item</span><br><span class="line">      .author-content-item-tips 追求</span><br><span class="line">      h2</span><br><span class="line">        | 源于</span><br><span class="line">        br</span><br><span class="line">        | 热爱而去</span><br><span class="line">        span.inline-word 感受</span><br><span class="line">        .mask</span><br><span class="line">          span.first-tips 学习</span><br><span class="line">          |</span><br><span class="line">          span 生活</span><br><span class="line">          |</span><br><span class="line">          span(data-up) 程序</span><br><span class="line">          |</span><br><span class="line">          span(data-show) 体验</span><br><span class="line"></span><br><span class="line">  .hello-about</span><br><span class="line">    .cursor(style=<span class="string">&#x27;translate:none;rotate:none;scale:none;transform:translate(721px,180px)&#x27;</span>)</span><br><span class="line">    .shapes</span><br><span class="line">      .shape.shape-<span class="number">1</span>(style=<span class="string">&#x27;translate:none;rotate:none;scale:none;transform:translate(721px,180px)&#x27;</span>)</span><br><span class="line">      .shape.shape-<span class="number">2</span>(style=<span class="string">&#x27;translate:none;rotate:none;scale:none;transform:translate(721px,180px)&#x27;</span>)</span><br><span class="line">      .shape.shape-<span class="number">3</span>(style=<span class="string">&#x27;translate:none;rotate:none;scale:none;transform:translate(721px,180px)&#x27;</span>)</span><br><span class="line">    .content</span><br><span class="line">      h1 Hello there!</span><br><span class="line"></span><br><span class="line">  .author-content</span><br><span class="line">    .author-content-item.skills</span><br><span class="line">      .card-content</span><br><span class="line">        .author-content-item-tips 技能</span><br><span class="line">        span.author-content-item-title 开启创造力</span><br><span class="line">        .skills-style-group</span><br><span class="line">          .tags-group-<span class="built_in">all</span></span><br><span class="line">            .tags-group-wrapper</span><br><span class="line">              each i <span class="keyword">in</span> site.data.creativity</span><br><span class="line">                - const evenNum = i.creativity_list.<span class="built_in">filter</span>((x, index) =&gt; index % <span class="number">2</span> === <span class="number">0</span>);</span><br><span class="line">                - const oddNum = i.creativity_list.<span class="built_in">filter</span>((x, index) =&gt; index % <span class="number">2</span> === <span class="number">1</span>);</span><br><span class="line">                each item, index <span class="keyword">in</span> i.creativity_list</span><br><span class="line">                  <span class="keyword">if</span> ((index+<span class="number">1</span> &lt;= evenNum.length) &amp;&amp; (index+<span class="number">1</span> &lt;= oddNum.length))</span><br><span class="line">                    .tags-group-icon-pair</span><br><span class="line">                      .tags-group-icon(style=`background: $&#123;evenNum[index].color&#125;`)</span><br><span class="line">                        img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon)</span><br><span class="line">                      .tags-group-icon(style=`background: $&#123;oddNum[index].color&#125;`)</span><br><span class="line">                        img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon)</span><br><span class="line">          .skills-<span class="built_in">list</span></span><br><span class="line">            each i <span class="keyword">in</span> site.data.creativity</span><br><span class="line">              each item, index <span class="keyword">in</span> i.creativity_list</span><br><span class="line">                .skill-info</span><br><span class="line">                  .skill-icon(style=`background: $&#123;item.color&#125;`)</span><br><span class="line">                    img.no-lightbox(title=item.name, src=item.icon)</span><br><span class="line">                  .skill-name</span><br><span class="line">                    span=item.name</span><br><span class="line">            .etc ...</span><br><span class="line">    .author-content-item.careers</span><br><span class="line">      .card-content</span><br><span class="line">        .author-content-item-tips 生涯</span><br><span class="line">        span.author-content-item-title 无限进步</span><br><span class="line">        .careers-group</span><br><span class="line">          .careers-item</span><br><span class="line">            .circle(style=<span class="string">&#x27;background:#357ef5&#x27;</span>)</span><br><span class="line">            .name EDU,软件工程专业</span><br><span class="line">        img.author-content-img.no-lightbox(alt=<span class="string">&#x27;生涯&#x27;</span>, src=<span class="string">&#x27;https://img02.anheyu.com/adminuploads/1/2022/09/26/6330e9bcc39cc.png&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  .author-content</span><br><span class="line">    .about-statistic.author-content-item</span><br><span class="line">      .card-content</span><br><span class="line">        .author-content-item-tips 数据</span><br><span class="line">        span.author-content-item-title 访问统计</span><br><span class="line">        <span class="comment">#statistic</span></span><br><span class="line">        .post-tips</span><br><span class="line">          | 统计信息来自</span><br><span class="line">          a(href=<span class="string">&#x27;https://invite.51.la/1NzKqTeb?target=V6&#x27;</span>, target=<span class="string">&#x27;_blank&#x27;</span>, rel=<span class="string">&#x27;noopener nofollow&#x27;</span>) 51la网站统计</span><br><span class="line">        .banner-button-group</span><br><span class="line">          a.banner-button(onclick=<span class="string">&#x27;pjax.loadUrl(&quot;/archives/&quot;)&#x27;</span>, data-pjax-state)</span><br><span class="line">            i.fas.fa-circle-right</span><br><span class="line">            |</span><br><span class="line">            span.banner-button-text 文章隧道</span><br><span class="line">    .author-content-item-group.column.mapAndInfo</span><br><span class="line">      .author-content-item.<span class="built_in">map</span>.single</span><br><span class="line">        span.<span class="built_in">map</span>-title</span><br><span class="line">          | 我现在住在</span><br><span class="line">          b 中国，长沙市</span><br><span class="line">      .author-content-item.selfInfo.single</span><br><span class="line">        div</span><br><span class="line">          span.selfInfo-title 生于</span><br><span class="line">          |</span><br><span class="line">          span.selfInfo-content<span class="comment">#selfInfo-content-year(style=&#x27;color:#43a6c6&#x27;) 2002</span></span><br><span class="line">        div</span><br><span class="line">          span.selfInfo-title 湖南信息学院</span><br><span class="line">          |</span><br><span class="line">          span.selfInfo-content(style=<span class="string">&#x27;color:#c69043&#x27;</span>) 软件工程</span><br><span class="line">        div</span><br><span class="line">          span.selfInfo-title 现在职业</span><br><span class="line">          |</span><br><span class="line">          span.selfInfo-content(style=<span class="string">&#x27;color:#b04fe6&#x27;</span>) 大三学生👨‍🎓</span><br><span class="line"></span><br><span class="line">  .author-content</span><br><span class="line">    .author-content-item.personalities</span><br><span class="line">      .author-content-item-tips 性格</span><br><span class="line">      span.author-content-item-title 执政官</span><br><span class="line">      .title2(style=<span class="string">&#x27;color:#ac899c&#x27;</span>) ESFJ-A</span><br><span class="line">      .post-tips</span><br><span class="line">        | 在</span><br><span class="line">        a(href=<span class="string">&#x27;https://www.16personalities.com/&#x27;</span>, target=<span class="string">&#x27;_blank&#x27;</span>, rel=<span class="string">&#x27;noopener nofollow&#x27;</span>) 16personalities</span><br><span class="line">        |  了解更多关于</span><br><span class="line">        a(target=<span class="string">&#x27;_blank&#x27;</span>, rel=<span class="string">&#x27;noopener external nofollow&#x27;</span>, href=<span class="string">&#x27;https://www.16personalities.com/ch/esfj-%E4%BA%BA%E6%A0%BC&#x27;</span>) 执政官</span><br><span class="line">      .image</span><br><span class="line">        img.no-lightbox(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/ESFJ-A.svg&#x27;</span>)</span><br><span class="line">    .author-content-item.myphoto</span><br><span class="line">      img.author-content-img.no-lightbox(alt=<span class="string">&#x27;自拍&#x27;</span>, src=<span class="string">&#x27;https://img02.anheyu.com/adminuploads/1/2022/09/24/632e9643611ec.jpg&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  .author-content</span><br><span class="line">    .author-content-item.maxim</span><br><span class="line">      .author-content-item-tips 座右铭</span><br><span class="line">      span.maxim-title</span><br><span class="line">        span(style=<span class="string">&#x27;opacity:.6;margin-bottom:8px&#x27;</span>) 生活明朗，</span><br><span class="line">        |</span><br><span class="line">        span 万物可爱。</span><br><span class="line">    .author-content-item.buff</span><br><span class="line">      .card-content</span><br><span class="line">        .author-content-item-tips 特长</span><br><span class="line">        span.buff-title</span><br><span class="line">          span(style=<span class="string">&#x27;opacity:.6;margin-bottom:8px&#x27;</span>)</span><br><span class="line">            | 脑回路新奇的</span><br><span class="line">            span.inline-word 酸菜鱼</span><br><span class="line">          |</span><br><span class="line">          span</span><br><span class="line">            | 二次元指数</span><br><span class="line">            span.inline-word MAX</span><br><span class="line">      .card-background-icon</span><br><span class="line">        i.fas.fa-dice-d20</span><br><span class="line"></span><br><span class="line">  .author-content</span><br><span class="line">    .author-content-item.game-yuanshen</span><br><span class="line">      .card-content</span><br><span class="line">        .author-content-item-tips 爱好游戏</span><br><span class="line">        span.author-content-item-title 原神</span><br><span class="line">        .content-bottom</span><br><span class="line">          .icon-group</span><br><span class="line">            .loading-bar(role=<span class="string">&#x27;presentation&#x27;</span>, aria-hidden=<span class="string">&#x27;true&#x27;</span>)</span><br><span class="line">              img.no-lightbox(src=<span class="string">&#x27;https://yuanshen.site/imgs/loading-bar.png&#x27;</span>, alt=<span class="string">&#x27;Loading...&#x27;</span>, longdesc=<span class="string">&#x27;https://ys.mihoyo.com/main/&#x27;</span>)</span><br><span class="line">          .tips.game-yuanshen-uid UID: <span class="number">125766904</span></span><br><span class="line">    .author-content-item.comic-content</span><br><span class="line">      .card-content</span><br><span class="line">        .author-content-item-tips 爱好番剧</span><br><span class="line">        span.author-content-item-title 紫罗兰的永恒花园</span><br><span class="line">        .content-bottom</span><br><span class="line">          .banner-button-group</span><br><span class="line">            a.banner-button(onclick=<span class="string">&#x27;window.open(&quot;https://www.bilibili.com/bangumi/play/ep173286?from=search&amp;seid=10927182858100936967&amp;from_spmid=666.25.episode.0&quot;)&#x27;</span>, data-pjax-state)</span><br><span class="line">              i.fas.fa-circle-right</span><br><span class="line">              |</span><br><span class="line">              span.banner-button-text 立即追番</span><br><span class="line"></span><br><span class="line">  .author-content</span><br><span class="line">    .author-content-item.like-technology</span><br><span class="line">      .card-content</span><br><span class="line">        .author-content-item-tips 关注偏好</span><br><span class="line">        span.author-content-item-title 数码科技</span><br><span class="line">        .content-bottom</span><br><span class="line">          .tips 手机、电脑软硬件</span><br><span class="line">    .author-content-item.like-music</span><br><span class="line">      .card-content</span><br><span class="line">        .author-content-item-tips 音乐偏好</span><br><span class="line">        span.author-content-item-title 许嵩、民谣、</span><br><span class="line">        |</span><br><span class="line">        span.author-content-item-title 华语流行</span><br><span class="line">        .content-bottom</span><br><span class="line">          .tips 跟 安知鱼 一起欣赏更多音乐</span><br><span class="line">        .banner-button-group</span><br><span class="line">          a.banner-button(onclick=<span class="string">&#x27;pjax.loadUrl(&quot;/music/&quot;)&#x27;</span>, data-pjax-state)</span><br><span class="line">            i.fas.fa-circle-right</span><br><span class="line">            |</span><br><span class="line">            span.banner-button-text 更多推荐</span><br><span class="line"></span><br><span class="line">  .author-content</span><br><span class="line">    .create-site-post.author-content-item.single</span><br><span class="line">      .author-content-item-tips 心路历程</span><br><span class="line">      | 欢迎来到我的博客 😝，这里是我记笔记的地方 🙌，目前就读于长沙</span><br><span class="line">      strong 湖南信息学院</span><br><span class="line">      | 的</span><br><span class="line">      strong 软件工程</span><br><span class="line">      | 专业，虽然有时候常常会忘记更新笔记，咕咕 ✋~ 但是记笔记真的是一个很棒的习惯 💪，能把学下来的知识进行积累，沉淀，有一句话说的好，能教给别人的知识，才是真正学会了的知识 ⚡ 每周我都会尽量进行更新 ☁️，如果没更的话，可能是我忘了，也可能是我在钻研某个东西的时候太入迷了</span><br><span class="line">      psw 肯定又熬夜了</span><br><span class="line">      <span class="keyword">del</span> 同学们不要学我，老是熬夜会长痘</span><br><span class="line">      |  给大家推荐一部番：</span><br><span class="line">      .site-card-group</span><br><span class="line">        a.site-card(target=<span class="string">&#x27;_blank&#x27;</span>, href=<span class="string">&#x27;https://www.bilibili.com/bangumi/play/ss21542/?from=search&amp;seid=10927182858100936967&#x27;</span>, data-title=<span class="string">&#x27;紫罗兰的永恒花园&#x27;</span>)</span><br><span class="line">          .wrapper.cover</span><br><span class="line">            img.cover.fadeIn(src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/violet.jpg&#x27;</span>)</span><br><span class="line">          .info</span><br><span class="line">            img.flink-avatar(src=<span class="string">&#x27;https://static.hdslb.com/images/favicon.ico&#x27;</span>, style=<span class="string">&#x27;top: 19px&#x27;</span>)</span><br><span class="line">            span.site-title 紫罗兰的永恒花园</span><br><span class="line">      | 因为这部番，<span class="number">2018</span> 年的一个夏天我看完以后心情久久不能释怀，为薇尔莉特与爱感到一种说不上来的味道，多年以后在看这部番，才明白原来这就是爱，喜欢这部番不仅仅是因为它制作的用心，不论是人物细节还是场景细节，不管是 op 还是 ed 都非常好听，最后的结局或许才是让我不能忘怀的原因，薇尔莉特，希望收到来自家人，朋友，恋人的那封 <span class="string">&quot;信&quot;</span> ~</span><br><span class="line">      .checkbox.blue.checked</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>, checked)</span><br><span class="line">        p</span><br><span class="line">          | 致力于成为一个前端小姥🐷</span><br><span class="line">          img.inline-img(src=<span class="string">&#x27;https://cdn1.tianli0.top/gh/volantis-x/cdn-emoji/aru-l/0000.gif/&#x27;</span> data-fancybox=<span class="string">&#x27;gallery&#x27;</span>, style=<span class="string">&#x27;display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;&#x27;</span>)</span><br><span class="line">      .checkbox.blue.checked</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>, checked)</span><br><span class="line">        p</span><br><span class="line">          | 又菜又爱玩🎮</span><br><span class="line">          kbd ctrl</span><br><span class="line">          |  +</span><br><span class="line">          kbd C</span><br><span class="line">          | 、</span><br><span class="line">          kbd ctrl</span><br><span class="line">          |  +</span><br><span class="line">          kbd V</span><br><span class="line">          | 高级CV工程师🏆</span><br><span class="line">      .checkbox.times.red.checked</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>, checked)</span><br><span class="line">        p 擅长PS、Pr、Ae、Au、Ai、Dw、An、Id等软件的安装与卸载🎃</span><br><span class="line">      .checkbox.times.red.checked</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>, checked)</span><br><span class="line">        p 精通Html、CSS、JavaScript、Vue、React、PHP、Java、Python、C、C++、C<span class="comment">#、Go、TypeScript等单词的拼写🎲</span></span><br><span class="line">      .checkbox.times.red.checked</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>, checked)</span><br><span class="line">        p 熟悉Windows、Linux、Mac、Android、IOS等系统的开关机👻</span><br><span class="line">      span.p.h3 todoList</span><br><span class="line">      .checkbox.checked</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>, checked)</span><br><span class="line">        p 原生微信小程序</span><br><span class="line">      .checkbox.checked</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>, checked)</span><br><span class="line">        p vue3、vite、 pinia</span><br><span class="line">      .checkbox.checked</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>, checked)</span><br><span class="line">        p 重装文档重写</span><br><span class="line">      .checkbox</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p Electron</span><br><span class="line">      .checkbox</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p 操作系统</span><br><span class="line">      .checkbox.canvas</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p svg绘制</span><br><span class="line">      .checkbox</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p threeJS</span><br><span class="line">      .checkbox.Nuxt</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p Next</span><br><span class="line">      .checkbox</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p Flutter</span><br><span class="line">      .checkbox</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p 智慧城市大前端</span><br><span class="line">      .checkbox</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p react18系统学习</span><br><span class="line">      .checkbox</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p 工业企业生产管理</span><br><span class="line">      .checkbox</span><br><span class="line">        <span class="built_in">input</span>(<span class="built_in">type</span>=<span class="string">&#x27;checkbox&#x27;</span>)</span><br><span class="line">        p 语言的魅力</span><br><span class="line"></span><br><span class="line">  .author-content</span><br><span class="line">    .author-content-item.single.reward</span><br><span class="line">      .author-content-item-tips 致谢</span><br><span class="line">      span.author-content-item-title 赞赏名单</span><br><span class="line">      .author-content-item-description 感谢因为有你们，让我更加有创作的动力。</span><br><span class="line">        each i <span class="keyword">in</span> site.data.reward</span><br><span class="line">          - let rawData = [...i.reward_list]</span><br><span class="line">          .reward-<span class="built_in">list</span>-<span class="built_in">all</span></span><br><span class="line">            - let reward_list_amount = i.reward_list.sort((a,b)=&gt;b.amount -  a.amount)</span><br><span class="line">            each item, index <span class="keyword">in</span> reward_list_amount</span><br><span class="line">              .reward-<span class="built_in">list</span>-item</span><br><span class="line">                .reward-<span class="built_in">list</span>-item-name=item.name</span><br><span class="line">                .reward-<span class="built_in">list</span>-bottom-group</span><br><span class="line">                  <span class="keyword">if</span> item.amount &gt;= <span class="number">50</span></span><br><span class="line">                    .reward-<span class="built_in">list</span>-item-money(style=<span class="string">&#x27;background:var(--anzhiyu-yellow)&#x27;</span>)=`¥$&#123;item.amount&#125;`</span><br><span class="line">                  <span class="keyword">else</span></span><br><span class="line">                    .reward-<span class="built_in">list</span>-item-money=`¥$&#123;item.amount + (item.suffix ? item.suffix : <span class="string">&quot;&quot;</span>)&#125;`</span><br><span class="line">                  .datatime.reward-<span class="built_in">list</span>-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().<span class="built_in">slice</span>(<span class="number">0</span>, -<span class="number">14</span>)</span><br><span class="line">          .reward-<span class="built_in">list</span>-updateDate</span><br><span class="line">            | 最新更新时间：</span><br><span class="line">            time.datatime.reward-<span class="built_in">list</span>-updateDate-time(datatime=rawData[<span class="number">0</span>].datatime)=new Date(rawData[<span class="number">0</span>].datatime).toISOString().<span class="built_in">slice</span>(<span class="number">0</span>, -<span class="number">14</span>)</span><br><span class="line">      .post-reward</span><br><span class="line">        button.tip-button.reward-button</span><br><span class="line">          span.tip-button__text 不给糖果就捣蛋</span><br><span class="line">          .coin-wrapper</span><br><span class="line">            .coin</span><br><span class="line">              .coin__middle</span><br><span class="line">              .coin__back</span><br><span class="line">              .coin__front</span><br><span class="line">          .reward-main</span><br><span class="line">            ul.reward-<span class="built_in">all</span></span><br><span class="line">              li.reward-item</span><br><span class="line">                a(href=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-weichat.png&#x27;</span>, target=<span class="string">&#x27;_blank&#x27;</span>)</span><br><span class="line">                  img.post-qr-code-img(alt=<span class="string">&#x27;wechat&#x27;</span>, src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-weichat.png&#x27;</span>)</span><br><span class="line">                .post-qr-code-desc wechat</span><br><span class="line">              li.reward-item</span><br><span class="line">                a(href=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-alipay.png&#x27;</span>, target=<span class="string">&#x27;_blank&#x27;</span>)</span><br><span class="line">                  img.post-qr-code-img(alt=<span class="string">&#x27;alipay&#x27;</span>, src=<span class="string">&#x27;https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-alipay.png&#x27;</span>)</span><br><span class="line">                .post-qr-code-desc alipay</span><br><span class="line"></span><br><span class="line">script(src=url_for(theme.CDN.option.countup_js))</span><br><span class="line">script.</span><br><span class="line">  (() =&gt; &#123;</span><br><span class="line">    function isInViewPortOfOne(el) &#123;</span><br><span class="line">      <span class="keyword">if</span> (!el) <span class="keyword">return</span>;</span><br><span class="line">      const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;</span><br><span class="line">      const offsetTop = el.offsetTop;</span><br><span class="line">      const scrollTop = document.documentElement.scrollTop;</span><br><span class="line">      const top = offsetTop - scrollTop;</span><br><span class="line">      <span class="keyword">return</span> top &lt;= viewPortHeight;</span><br><span class="line">    &#125;</span><br><span class="line">    fetch(<span class="string">&#x27;https://v6-widget.51.la/v6/&#123;掩码ID&#125;/quote.js&#x27;</span>).then(res =&gt; res.text()).then((data) =&gt; &#123;</span><br><span class="line">        let title = [<span class="string">&#x27;最近活跃&#x27;</span>, <span class="string">&#x27;今日人数&#x27;</span>, <span class="string">&#x27;今日访问&#x27;</span>, <span class="string">&#x27;昨日人数&#x27;</span>, <span class="string">&#x27;昨日访问&#x27;</span>, <span class="string">&#x27;本月访问&#x27;</span>, <span class="string">&#x27;总访问量&#x27;</span>]</span><br><span class="line">        let num = data.<span class="keyword">match</span>(/(&lt;\/span&gt;&lt;span&gt;).*?(\/span&gt;&lt;\/p&gt;)/g)</span><br><span class="line"></span><br><span class="line">        num = num.<span class="built_in">map</span>((el) =&gt; &#123;</span><br><span class="line">          let val = el.replace(/(&lt;\/span&gt;&lt;span&gt;)/g, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">          let <span class="built_in">str</span> = val.replace(/(&lt;\/span&gt;&lt;\/p&gt;)/g, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">          <span class="keyword">return</span> <span class="built_in">str</span></span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        let statisticEl = document.getElementById(<span class="string">&#x27;statistic&#x27;</span>)</span><br><span class="line"></span><br><span class="line">        // 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量</span><br><span class="line">        let statistic = []</span><br><span class="line">        <span class="keyword">for</span> (let i = <span class="number">0</span>; i &lt; num.length; i++) &#123;</span><br><span class="line">            <span class="keyword">if</span> (!statisticEl) <span class="keyword">return</span></span><br><span class="line">            <span class="keyword">if</span> (i == <span class="number">0</span> || i == num.length - <span class="number">1</span>) <span class="keyword">continue</span>;</span><br><span class="line">            statisticEl.innerHTML += <span class="string">&#x27;&lt;div&gt;&lt;span&gt;&#x27;</span> + title[i] + <span class="string">&#x27;&lt;/span&gt;&lt;span id=&#x27;</span>+ title[i] + <span class="string">&#x27;&gt;&#x27;</span> + num[i] + <span class="string">&#x27;&lt;/span&gt;&lt;/div&gt;&#x27;</span></span><br><span class="line">            queueMicrotask(()=&gt; &#123;</span><br><span class="line">              statistic.push(new CountUp(title[i], <span class="number">0</span>, num[i], <span class="number">0</span>, <span class="number">2</span>, &#123;</span><br><span class="line">                  useEasing: true,</span><br><span class="line">                  useGrouping: true,</span><br><span class="line">                  separator: <span class="string">&#x27;,&#x27;</span>,</span><br><span class="line">                  decimal: <span class="string">&#x27;.&#x27;</span>,</span><br><span class="line">                  prefix: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">                  suffix: <span class="string">&#x27;&#x27;</span></span><br><span class="line">              &#125;))</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        function statisticUP () &#123;</span><br><span class="line">          let statisticElment = document.querySelector(<span class="string">&#x27;.about-statistic.author-content-item&#x27;</span>);</span><br><span class="line">          <span class="keyword">if</span>(isInViewPortOfOne(statisticElment)) &#123;</span><br><span class="line">            <span class="keyword">for</span> (let i = <span class="number">0</span>; i &lt; num.length; i++) &#123;</span><br><span class="line">              <span class="keyword">if</span> (i == <span class="number">0</span> || i == num.length - <span class="number">1</span>) <span class="keyword">continue</span>;</span><br><span class="line">              statistic[i-<span class="number">1</span>].start();</span><br><span class="line">            &#125;</span><br><span class="line">            document.removeEventListener(<span class="string">&#x27;scroll&#x27;</span>, throttleStatisticUP);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        const selfInfoContentYear = new CountUp(<span class="string">&#x27;selfInfo-content-year&#x27;</span>, <span class="number">0</span>, <span class="number">2002</span>, <span class="number">0</span>, <span class="number">2</span>, &#123;</span><br><span class="line">          useEasing: true,</span><br><span class="line">          useGrouping: false,</span><br><span class="line">          separator: <span class="string">&#x27;,&#x27;</span>,</span><br><span class="line">          decimal: <span class="string">&#x27;.&#x27;</span>,</span><br><span class="line">          prefix: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">          suffix: <span class="string">&#x27;&#x27;</span></span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        function scrollSelfInfoContentYear() &#123;</span><br><span class="line">          let selfInfoContentYearElment = document.querySelector(<span class="string">&#x27;.author-content-item.selfInfo.single&#x27;</span>);</span><br><span class="line">          <span class="keyword">if</span> (selfInfoContentYearElment &amp;&amp; isInViewPortOfOne(selfInfoContentYearElment)) &#123;</span><br><span class="line">            selfInfoContentYear.start()</span><br><span class="line">            document.removeEventListener(<span class="string">&#x27;scroll&#x27;</span>, throttleScrollSelfInfoContentYear);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        const throttleStatisticUP = btf.throttle(statisticUP, <span class="number">200</span>)</span><br><span class="line">        document.addEventListener(<span class="string">&#x27;scroll&#x27;</span>, throttleStatisticUP, &#123;passive: true&#125;)</span><br><span class="line"></span><br><span class="line">        const throttleScrollSelfInfoContentYear = btf.throttle(scrollSelfInfoContentYear, <span class="number">200</span>)</span><br><span class="line">        document.addEventListener(<span class="string">&#x27;scroll&#x27;</span>, throttleScrollSelfInfoContentYear, &#123;passive: true&#125;)</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    var pursuitInterval = null;</span><br><span class="line">      pursuitInterval = setInterval(function () &#123;</span><br><span class="line">        const show = document.querySelector(<span class="string">&#x27;span[data-show]&#x27;</span>)</span><br><span class="line">        const <span class="built_in">next</span> = show.nextElementSibling || document.querySelector(<span class="string">&#x27;.first-tips&#x27;</span>)</span><br><span class="line">        const up = document.querySelector(<span class="string">&#x27;span[data-up]&#x27;</span>)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (up) &#123;</span><br><span class="line">          up.removeAttribute(<span class="string">&#x27;data-up&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        show.removeAttribute(<span class="string">&#x27;data-show&#x27;</span>)</span><br><span class="line">        show.setAttribute(<span class="string">&#x27;data-up&#x27;</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line"></span><br><span class="line">        <span class="built_in">next</span>.setAttribute(<span class="string">&#x27;data-show&#x27;</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">      &#125;, <span class="number">2000</span>)</span><br><span class="line"></span><br><span class="line">      document.addEventListener(<span class="string">&#x27;pjax:send&#x27;</span>, function()&#123;</span><br><span class="line">        clearInterval(pursuitInterval);</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      var helloAboutEl = document.querySelector(<span class="string">&#x27;.hello-about&#x27;</span>)</span><br><span class="line">      helloAboutEl.addEventListener(<span class="string">&quot;mousemove&quot;</span>, evt =&gt; &#123;</span><br><span class="line">        const mouseX = evt.offsetX;</span><br><span class="line">        const mouseY = evt.offsetY;</span><br><span class="line">        gsap.<span class="built_in">set</span>(<span class="string">&quot;.cursor&quot;</span>, &#123;</span><br><span class="line">          x: mouseX,</span><br><span class="line">          y: mouseY,</span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        gsap.to(<span class="string">&quot;.shape&quot;</span>, &#123;</span><br><span class="line">          x: mouseX,</span><br><span class="line">          y: mouseY,</span><br><span class="line">          stagger: -<span class="number">0.1</span></span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;)()</span><br></pre></td></tr></table></figure><p>其中<code>第 319 行</code> 的 <code>&#123;掩码ID&#125;</code> 为 <a href="https://v6.51.la/">51a 统计</a>所提供, 掩码 ID 在 51la 的配置-&gt;参数设置-&gt;统计代码-&gt;普通安装,里面有个 id，那个 id 就是你的掩码 id.</p><p>数据统计来源为<a href="https://v6.51.la/">51a 统计</a>, 所以需要引入统计代码, 在<code>_config.butterfly.yml</code>的<code>inject</code>选项中添加以下统计代码。(记得修改为你自己的 id), 另外感谢<a href="pochacco.top">鹿啵包</a>的提醒 ⏰, 需要在 51a 统计中打开数据挂件功能才能正常访问接口。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">bottom:</span></span><br><span class="line">  <span class="comment"># 51la统计&amp;灵雀统计</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">charset=&quot;UTF-8&quot;</span> <span class="string">id=&quot;LA_COLLECT&quot;</span> <span class="string">src=&quot;https://sdk.51.la/js-sdk-pro.min.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;https://sdk.51.la/perf/js-sdk-perf.min.js&quot;</span> <span class="string">crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">&lt;script&gt;</span> <span class="string">LA.init(&#123;id:&quot;&#123;YOU</span> <span class="string">ID&#125;&quot;,ck:&quot;&#123;YOU</span> <span class="string">CK&#125;&quot;&#125;)&lt;/script&gt;</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">&lt;script&gt;new</span> <span class="string">LingQue.Monitor().init(&#123;id:&quot;YOU</span> <span class="string">ID&quot;,sendSuspicious:true&#125;);&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p>如果没有引入过 <code>gsap 需要引入 gsap</code> 来让 hello-about 的部分动起来, 需要在<code>第316行</code> 添加</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">script(src=url_for(theme.CDN.option.countup_js))</span><br><span class="line"><span class="addition">+script(src=&quot;https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js&quot;)</span></span><br><span class="line">script.</span><br></pre></td></tr></table></figure><h3 id="加入-countup-js-cdn-选项"><a href="#加入-countup-js-cdn-选项" class="headerlink" title="加入 countup_js cdn 选项"></a>加入 countup_js cdn 选项</h3><p>使用的 countupJs 来实现数字递增滚动效果，如不需要可不做这一步，并去除 <code>about.pug</code> 中 js 的监听</p><p>修改<code>_config.butterfly.yml</code>, 注意缩进</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">  CDN:</span><br><span class="line">    option:</span><br><span class="line">      # main_css:</span><br><span class="line">      .....</span><br><span class="line"><span class="addition">+     # countupJS</span></span><br><span class="line"><span class="addition">+     countup_js: /js/countup.js</span></span><br></pre></td></tr></table></figure><p>新建 <code>source/js/countup.js</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="title class_">CountUp</span> = <span class="keyword">function</span> (<span class="params">target, startVal, endVal, decimals, duration, options</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> self = <span class="variable language_">this</span>;</span><br><span class="line">  self.<span class="property">version</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;1.9.2&quot;</span>;</span><br><span class="line">  &#125;;</span><br><span class="line">  self.<span class="property">options</span> = &#123;</span><br><span class="line">    <span class="attr">useEasing</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">useGrouping</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">separator</span>: <span class="string">&quot;,&quot;</span>,</span><br><span class="line">    <span class="attr">decimal</span>: <span class="string">&quot;.&quot;</span>,</span><br><span class="line">    <span class="attr">easingFn</span>: easeOutExpo,</span><br><span class="line">    <span class="attr">formattingFn</span>: formatNumber,</span><br><span class="line">    <span class="attr">prefix</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">    <span class="attr">suffix</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">    <span class="attr">numerals</span>: [],</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="keyword">if</span> (options &amp;&amp; <span class="keyword">typeof</span> options === <span class="string">&quot;object&quot;</span>) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> self.<span class="property">options</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (options.<span class="title function_">hasOwnProperty</span>(key) &amp;&amp; options[key] !== <span class="literal">null</span>) &#123;</span><br><span class="line">        self.<span class="property">options</span>[key] = options[key];</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (self.<span class="property">options</span>.<span class="property">separator</span> === <span class="string">&quot;&quot;</span>) &#123;</span><br><span class="line">    self.<span class="property">options</span>.<span class="property">useGrouping</span> = <span class="literal">false</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    self.<span class="property">options</span>.<span class="property">separator</span> = <span class="string">&quot;&quot;</span> + self.<span class="property">options</span>.<span class="property">separator</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> lastTime = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">var</span> vendors = [<span class="string">&quot;webkit&quot;</span>, <span class="string">&quot;moz&quot;</span>, <span class="string">&quot;ms&quot;</span>, <span class="string">&quot;o&quot;</span>];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> x = <span class="number">0</span>; x &lt; vendors.<span class="property">length</span> &amp;&amp; !<span class="variable language_">window</span>.<span class="property">requestAnimationFrame</span>; ++x) &#123;</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">requestAnimationFrame</span> = <span class="variable language_">window</span>[vendors[x] + <span class="string">&quot;RequestAnimationFrame&quot;</span>];</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">cancelAnimationFrame</span> =</span><br><span class="line">      <span class="variable language_">window</span>[vendors[x] + <span class="string">&quot;CancelAnimationFrame&quot;</span>] || <span class="variable language_">window</span>[vendors[x] + <span class="string">&quot;CancelRequestAnimationFrame&quot;</span>];</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (!<span class="variable language_">window</span>.<span class="property">requestAnimationFrame</span>) &#123;</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">requestAnimationFrame</span> = <span class="keyword">function</span> (<span class="params">callback, element</span>) &#123;</span><br><span class="line">      <span class="keyword">var</span> currTime = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>();</span><br><span class="line">      <span class="keyword">var</span> timeToCall = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, <span class="number">16</span> - (currTime - lastTime));</span><br><span class="line">      <span class="keyword">var</span> id = <span class="variable language_">window</span>.<span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="title function_">callback</span>(currTime + timeToCall);</span><br><span class="line">      &#125;, timeToCall);</span><br><span class="line">      lastTime = currTime + timeToCall;</span><br><span class="line">      <span class="keyword">return</span> id;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (!<span class="variable language_">window</span>.<span class="property">cancelAnimationFrame</span>) &#123;</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">cancelAnimationFrame</span> = <span class="keyword">function</span> (<span class="params">id</span>) &#123;</span><br><span class="line">      <span class="built_in">clearTimeout</span>(id);</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">formatNumber</span>(<span class="params">num</span>) &#123;</span><br><span class="line">    num = num.<span class="title function_">toFixed</span>(self.<span class="property">decimals</span>);</span><br><span class="line">    num += <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="keyword">var</span> x, x1, x2, x3, i, l;</span><br><span class="line">    x = num.<span class="title function_">split</span>(<span class="string">&quot;.&quot;</span>);</span><br><span class="line">    x1 = x[<span class="number">0</span>];</span><br><span class="line">    x2 = x.<span class="property">length</span> &gt; <span class="number">1</span> ? self.<span class="property">options</span>.<span class="property">decimal</span> + x[<span class="number">1</span>] : <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="keyword">if</span> (self.<span class="property">options</span>.<span class="property">useGrouping</span>) &#123;</span><br><span class="line">      x3 = <span class="string">&quot;&quot;</span>;</span><br><span class="line">      <span class="keyword">for</span> (i = <span class="number">0</span>, l = x1.<span class="property">length</span>; i &lt; l; ++i) &#123;</span><br><span class="line">        <span class="keyword">if</span> (i !== <span class="number">0</span> &amp;&amp; i % <span class="number">3</span> === <span class="number">0</span>) &#123;</span><br><span class="line">          x3 = self.<span class="property">options</span>.<span class="property">separator</span> + x3;</span><br><span class="line">        &#125;</span><br><span class="line">        x3 = x1[l - i - <span class="number">1</span>] + x3;</span><br><span class="line">      &#125;</span><br><span class="line">      x1 = x3;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (self.<span class="property">options</span>.<span class="property">numerals</span>.<span class="property">length</span>) &#123;</span><br><span class="line">      x1 = x1.<span class="title function_">replace</span>(<span class="regexp">/[0-9]/g</span>, <span class="keyword">function</span> (<span class="params">w</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> self.<span class="property">options</span>.<span class="property">numerals</span>[+w];</span><br><span class="line">      &#125;);</span><br><span class="line">      x2 = x2.<span class="title function_">replace</span>(<span class="regexp">/[0-9]/g</span>, <span class="keyword">function</span> (<span class="params">w</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> self.<span class="property">options</span>.<span class="property">numerals</span>[+w];</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> self.<span class="property">options</span>.<span class="property">prefix</span> + x1 + x2 + self.<span class="property">options</span>.<span class="property">suffix</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">easeOutExpo</span>(<span class="params">t, b, c, d</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> (c * (-<span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">2</span>, (-<span class="number">10</span> * t) / d) + <span class="number">1</span>) * <span class="number">1024</span>) / <span class="number">1023</span> + b;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">ensureNumber</span>(<span class="params">n</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">typeof</span> n === <span class="string">&quot;number&quot;</span> &amp;&amp; !<span class="built_in">isNaN</span>(n);</span><br><span class="line">  &#125;</span><br><span class="line">  self.<span class="property">initialize</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (self.<span class="property">initialized</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    self.<span class="property">error</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    self.<span class="property">d</span> = <span class="keyword">typeof</span> target === <span class="string">&quot;string&quot;</span> ? <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(target) : target;</span><br><span class="line">    <span class="keyword">if</span> (!self.<span class="property">d</span>) &#123;</span><br><span class="line">      self.<span class="property">error</span> = <span class="string">&quot;[CountUp] target is null or undefined&quot;</span>;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    self.<span class="property">startVal</span> = <span class="title class_">Number</span>(startVal);</span><br><span class="line">    self.<span class="property">endVal</span> = <span class="title class_">Number</span>(endVal);</span><br><span class="line">    <span class="keyword">if</span> (<span class="title function_">ensureNumber</span>(self.<span class="property">startVal</span>) &amp;&amp; <span class="title function_">ensureNumber</span>(self.<span class="property">endVal</span>)) &#123;</span><br><span class="line">      self.<span class="property">decimals</span> = <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="number">0</span>, decimals || <span class="number">0</span>);</span><br><span class="line">      self.<span class="property">dec</span> = <span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">10</span>, self.<span class="property">decimals</span>);</span><br><span class="line">      self.<span class="property">duration</span> = <span class="title class_">Number</span>(duration) * <span class="number">1000</span> || <span class="number">2000</span>;</span><br><span class="line">      self.<span class="property">countDown</span> = self.<span class="property">startVal</span> &gt; self.<span class="property">endVal</span>;</span><br><span class="line">      self.<span class="property">frameVal</span> = self.<span class="property">startVal</span>;</span><br><span class="line">      self.<span class="property">initialized</span> = <span class="literal">true</span>;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      self.<span class="property">error</span> = <span class="string">&quot;[CountUp] startVal (&quot;</span> + startVal + <span class="string">&quot;) or endVal (&quot;</span> + endVal + <span class="string">&quot;) is not a number&quot;</span>;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  self.<span class="property">printValue</span> = <span class="keyword">function</span> (<span class="params">value</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> result = self.<span class="property">options</span>.<span class="title function_">formattingFn</span>(value);</span><br><span class="line">    <span class="keyword">if</span> (self.<span class="property">d</span>.<span class="property">tagName</span> === <span class="string">&quot;INPUT&quot;</span>) &#123;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">d</span>.<span class="property">value</span> = result;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (self.<span class="property">d</span>.<span class="property">tagName</span> === <span class="string">&quot;text&quot;</span> || self.<span class="property">d</span>.<span class="property">tagName</span> === <span class="string">&quot;tspan&quot;</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">d</span>.<span class="property">textContent</span> = result;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">d</span>.<span class="property">innerHTML</span> = result;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  self.<span class="property">count</span> = <span class="keyword">function</span> (<span class="params">timestamp</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!self.<span class="property">startTime</span>) &#123;</span><br><span class="line">      self.<span class="property">startTime</span> = timestamp;</span><br><span class="line">    &#125;</span><br><span class="line">    self.<span class="property">timestamp</span> = timestamp;</span><br><span class="line">    <span class="keyword">var</span> progress = timestamp - self.<span class="property">startTime</span>;</span><br><span class="line">    self.<span class="property">remaining</span> = self.<span class="property">duration</span> - progress;</span><br><span class="line">    <span class="keyword">if</span> (self.<span class="property">options</span>.<span class="property">useEasing</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (self.<span class="property">countDown</span>) &#123;</span><br><span class="line">        self.<span class="property">frameVal</span> = self.<span class="property">startVal</span> - self.<span class="property">options</span>.<span class="title function_">easingFn</span>(progress, <span class="number">0</span>, self.<span class="property">startVal</span> - self.<span class="property">endVal</span>, self.<span class="property">duration</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        self.<span class="property">frameVal</span> = self.<span class="property">options</span>.<span class="title function_">easingFn</span>(progress, self.<span class="property">startVal</span>, self.<span class="property">endVal</span> - self.<span class="property">startVal</span>, self.<span class="property">duration</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (self.<span class="property">countDown</span>) &#123;</span><br><span class="line">        self.<span class="property">frameVal</span> = self.<span class="property">startVal</span> - (self.<span class="property">startVal</span> - self.<span class="property">endVal</span>) * (progress / self.<span class="property">duration</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        self.<span class="property">frameVal</span> = self.<span class="property">startVal</span> + (self.<span class="property">endVal</span> - self.<span class="property">startVal</span>) * (progress / self.<span class="property">duration</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (self.<span class="property">countDown</span>) &#123;</span><br><span class="line">      self.<span class="property">frameVal</span> = self.<span class="property">frameVal</span> &lt; self.<span class="property">endVal</span> ? self.<span class="property">endVal</span> : self.<span class="property">frameVal</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      self.<span class="property">frameVal</span> = self.<span class="property">frameVal</span> &gt; self.<span class="property">endVal</span> ? self.<span class="property">endVal</span> : self.<span class="property">frameVal</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    self.<span class="property">frameVal</span> = <span class="title class_">Math</span>.<span class="title function_">round</span>(self.<span class="property">frameVal</span> * self.<span class="property">dec</span>) / self.<span class="property">dec</span>;</span><br><span class="line">    self.<span class="title function_">printValue</span>(self.<span class="property">frameVal</span>);</span><br><span class="line">    <span class="keyword">if</span> (progress &lt; self.<span class="property">duration</span>) &#123;</span><br><span class="line">      self.<span class="property">rAF</span> = <span class="title function_">requestAnimationFrame</span>(self.<span class="property">count</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (self.<span class="property">callback</span>) &#123;</span><br><span class="line">        self.<span class="title function_">callback</span>();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  self.<span class="property">start</span> = <span class="keyword">function</span> (<span class="params">callback</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!self.<span class="title function_">initialize</span>()) &#123;</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    self.<span class="property">callback</span> = callback;</span><br><span class="line">    self.<span class="property">rAF</span> = <span class="title function_">requestAnimationFrame</span>(self.<span class="property">count</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">  self.<span class="property">pauseResume</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!self.<span class="property">paused</span>) &#123;</span><br><span class="line">      self.<span class="property">paused</span> = <span class="literal">true</span>;</span><br><span class="line">      <span class="title function_">cancelAnimationFrame</span>(self.<span class="property">rAF</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      self.<span class="property">paused</span> = <span class="literal">false</span>;</span><br><span class="line">      <span class="keyword">delete</span> self.<span class="property">startTime</span>;</span><br><span class="line">      self.<span class="property">duration</span> = self.<span class="property">remaining</span>;</span><br><span class="line">      self.<span class="property">startVal</span> = self.<span class="property">frameVal</span>;</span><br><span class="line">      <span class="title function_">requestAnimationFrame</span>(self.<span class="property">count</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  self.<span class="property">reset</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    self.<span class="property">paused</span> = <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">delete</span> self.<span class="property">startTime</span>;</span><br><span class="line">    self.<span class="property">initialized</span> = <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">if</span> (self.<span class="title function_">initialize</span>()) &#123;</span><br><span class="line">      <span class="title function_">cancelAnimationFrame</span>(self.<span class="property">rAF</span>);</span><br><span class="line">      self.<span class="title function_">printValue</span>(self.<span class="property">startVal</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  self.<span class="property">update</span> = <span class="keyword">function</span> (<span class="params">newEndVal</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!self.<span class="title function_">initialize</span>()) &#123;</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    newEndVal = <span class="title class_">Number</span>(newEndVal);</span><br><span class="line">    <span class="keyword">if</span> (!<span class="title function_">ensureNumber</span>(newEndVal)) &#123;</span><br><span class="line">      self.<span class="property">error</span> = <span class="string">&quot;[CountUp] update() - new endVal is not a number: &quot;</span> + newEndVal;</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    self.<span class="property">error</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="keyword">if</span> (newEndVal === self.<span class="property">frameVal</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">cancelAnimationFrame</span>(self.<span class="property">rAF</span>);</span><br><span class="line">    self.<span class="property">paused</span> = <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">delete</span> self.<span class="property">startTime</span>;</span><br><span class="line">    self.<span class="property">startVal</span> = self.<span class="property">frameVal</span>;</span><br><span class="line">    self.<span class="property">endVal</span> = newEndVal;</span><br><span class="line">    self.<span class="property">countDown</span> = self.<span class="property">startVal</span> &gt; self.<span class="property">endVal</span>;</span><br><span class="line">    self.<span class="property">rAF</span> = <span class="title function_">requestAnimationFrame</span>(self.<span class="property">count</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="keyword">if</span> (self.<span class="title function_">initialize</span>()) &#123;</span><br><span class="line">    self.<span class="title function_">printValue</span>(self.<span class="property">startVal</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h3 id="判断-type-x3D-’about’-引入结构"><a href="#判断-type-x3D-’about’-引入结构" class="headerlink" title="判断 type&#x3D;’about’ 引入结构"></a>判断 type&#x3D;’about’ 引入结构</h3><p>修改<code>themes/butterfly/layout/page.pug</code>, 在 case 中加入判断, 注意缩进</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">    case page.type</span><br><span class="line">      when &#x27;tags&#x27;</span><br><span class="line">        include includes/page/tags.pug</span><br><span class="line"><span class="addition">+     when &#x27;about&#x27;</span></span><br><span class="line"><span class="addition">+       include includes/page/about.pug</span></span><br></pre></td></tr></table></figure><h3 id="添加-css"><a href="#添加-css" class="headerlink" title="添加 css"></a>添加 css</h3><p>新建以下<code>6个css</code>。</p><p>注意博主已在 <code>themes/butterfly/source/css/index.styl</code> 中整合了 css, 未整合的需自行一个一个引入, 如需整合可以在<code>themes/butterfly/source/css/index.styl</code>中加入以下代码：</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">// project</span><br><span class="line">@import &#x27;var&#x27;</span><br><span class="line">@import &#x27;_global/*&#x27;</span><br><span class="line">@import &#x27;_highlight/highlight&#x27;</span><br><span class="line">@import &#x27;_page/*&#x27;</span><br><span class="line">@import &#x27;_layout/*&#x27;</span><br><span class="line">@import &#x27;_tags/*&#x27;</span><br><span class="line">@import &#x27;_mode/*&#x27;</span><br><span class="line"><span class="addition">+@import &#x27;_custom/**/*.css&#x27;</span></span><br><span class="line"></span><br><span class="line">// search</span><br><span class="line">if hexo-config(&#x27;algolia_search.enable&#x27;)</span><br><span class="line">  @import &#x27;_search/index&#x27;</span><br><span class="line">  @import &#x27;_search/algolia&#x27;</span><br></pre></td></tr></table></figure><p>新建<code>themes/butterfly/source/css/_custom/about/about.css</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br><span class="line">494</span><br><span class="line">495</span><br><span class="line">496</span><br><span class="line">497</span><br><span class="line">498</span><br><span class="line">499</span><br><span class="line">500</span><br><span class="line">501</span><br><span class="line">502</span><br><span class="line">503</span><br><span class="line">504</span><br><span class="line">505</span><br><span class="line">506</span><br><span class="line">507</span><br><span class="line">508</span><br><span class="line">509</span><br><span class="line">510</span><br><span class="line">511</span><br><span class="line">512</span><br><span class="line">513</span><br><span class="line">514</span><br><span class="line">515</span><br><span class="line">516</span><br><span class="line">517</span><br><span class="line">518</span><br><span class="line">519</span><br><span class="line">520</span><br><span class="line">521</span><br><span class="line">522</span><br><span class="line">523</span><br><span class="line">524</span><br><span class="line">525</span><br><span class="line">526</span><br><span class="line">527</span><br><span class="line">528</span><br><span class="line">529</span><br><span class="line">530</span><br><span class="line">531</span><br><span class="line">532</span><br><span class="line">533</span><br><span class="line">534</span><br><span class="line">535</span><br><span class="line">536</span><br><span class="line">537</span><br><span class="line">538</span><br><span class="line">539</span><br><span class="line">540</span><br><span class="line">541</span><br><span class="line">542</span><br><span class="line">543</span><br><span class="line">544</span><br><span class="line">545</span><br><span class="line">546</span><br><span class="line">547</span><br><span class="line">548</span><br><span class="line">549</span><br><span class="line">550</span><br><span class="line">551</span><br><span class="line">552</span><br><span class="line">553</span><br><span class="line">554</span><br><span class="line">555</span><br><span class="line">556</span><br><span class="line">557</span><br><span class="line">558</span><br><span class="line">559</span><br><span class="line">560</span><br><span class="line">561</span><br><span class="line">562</span><br><span class="line">563</span><br><span class="line">564</span><br><span class="line">565</span><br><span class="line">566</span><br><span class="line">567</span><br><span class="line">568</span><br><span class="line">569</span><br><span class="line">570</span><br><span class="line">571</span><br><span class="line">572</span><br><span class="line">573</span><br><span class="line">574</span><br><span class="line">575</span><br><span class="line">576</span><br><span class="line">577</span><br><span class="line">578</span><br><span class="line">579</span><br><span class="line">580</span><br><span class="line">581</span><br><span class="line">582</span><br><span class="line">583</span><br><span class="line">584</span><br><span class="line">585</span><br><span class="line">586</span><br><span class="line">587</span><br><span class="line">588</span><br><span class="line">589</span><br><span class="line">590</span><br><span class="line">591</span><br><span class="line">592</span><br><span class="line">593</span><br><span class="line">594</span><br><span class="line">595</span><br><span class="line">596</span><br><span class="line">597</span><br><span class="line">598</span><br><span class="line">599</span><br><span class="line">600</span><br><span class="line">601</span><br><span class="line">602</span><br><span class="line">603</span><br><span class="line">604</span><br><span class="line">605</span><br><span class="line">606</span><br><span class="line">607</span><br><span class="line">608</span><br><span class="line">609</span><br><span class="line">610</span><br><span class="line">611</span><br><span class="line">612</span><br><span class="line">613</span><br><span class="line">614</span><br><span class="line">615</span><br><span class="line">616</span><br><span class="line">617</span><br><span class="line">618</span><br><span class="line">619</span><br><span class="line">620</span><br><span class="line">621</span><br><span class="line">622</span><br><span class="line">623</span><br><span class="line">624</span><br><span class="line">625</span><br><span class="line">626</span><br><span class="line">627</span><br><span class="line">628</span><br><span class="line">629</span><br><span class="line">630</span><br><span class="line">631</span><br><span class="line">632</span><br><span class="line">633</span><br><span class="line">634</span><br><span class="line">635</span><br><span class="line">636</span><br><span class="line">637</span><br><span class="line">638</span><br><span class="line">639</span><br><span class="line">640</span><br><span class="line">641</span><br><span class="line">642</span><br><span class="line">643</span><br><span class="line">644</span><br><span class="line">645</span><br><span class="line">646</span><br><span class="line">647</span><br><span class="line">648</span><br><span class="line">649</span><br><span class="line">650</span><br><span class="line">651</span><br><span class="line">652</span><br><span class="line">653</span><br><span class="line">654</span><br><span class="line">655</span><br><span class="line">656</span><br><span class="line">657</span><br><span class="line">658</span><br><span class="line">659</span><br><span class="line">660</span><br><span class="line">661</span><br><span class="line">662</span><br><span class="line">663</span><br><span class="line">664</span><br><span class="line">665</span><br><span class="line">666</span><br><span class="line">667</span><br><span class="line">668</span><br><span class="line">669</span><br><span class="line">670</span><br><span class="line">671</span><br><span class="line">672</span><br><span class="line">673</span><br><span class="line">674</span><br><span class="line">675</span><br><span class="line">676</span><br><span class="line">677</span><br><span class="line">678</span><br><span class="line">679</span><br><span class="line">680</span><br><span class="line">681</span><br><span class="line">682</span><br><span class="line">683</span><br><span class="line">684</span><br><span class="line">685</span><br><span class="line">686</span><br><span class="line">687</span><br><span class="line">688</span><br><span class="line">689</span><br><span class="line">690</span><br><span class="line">691</span><br><span class="line">692</span><br><span class="line">693</span><br><span class="line">694</span><br><span class="line">695</span><br><span class="line">696</span><br><span class="line">697</span><br><span class="line">698</span><br><span class="line">699</span><br><span class="line">700</span><br><span class="line">701</span><br><span class="line">702</span><br><span class="line">703</span><br><span class="line">704</span><br><span class="line">705</span><br><span class="line">706</span><br><span class="line">707</span><br><span class="line">708</span><br><span class="line">709</span><br><span class="line">710</span><br><span class="line">711</span><br><span class="line">712</span><br><span class="line">713</span><br><span class="line">714</span><br><span class="line">715</span><br><span class="line">716</span><br><span class="line">717</span><br><span class="line">718</span><br><span class="line">719</span><br><span class="line">720</span><br><span class="line">721</span><br><span class="line">722</span><br><span class="line">723</span><br><span class="line">724</span><br><span class="line">725</span><br><span class="line">726</span><br><span class="line">727</span><br><span class="line">728</span><br><span class="line">729</span><br><span class="line">730</span><br><span class="line">731</span><br><span class="line">732</span><br><span class="line">733</span><br><span class="line">734</span><br><span class="line">735</span><br><span class="line">736</span><br><span class="line">737</span><br><span class="line">738</span><br><span class="line">739</span><br><span class="line">740</span><br><span class="line">741</span><br><span class="line">742</span><br><span class="line">743</span><br><span class="line">744</span><br><span class="line">745</span><br><span class="line">746</span><br><span class="line">747</span><br><span class="line">748</span><br><span class="line">749</span><br><span class="line">750</span><br><span class="line">751</span><br><span class="line">752</span><br><span class="line">753</span><br><span class="line">754</span><br><span class="line">755</span><br><span class="line">756</span><br><span class="line">757</span><br><span class="line">758</span><br><span class="line">759</span><br><span class="line">760</span><br><span class="line">761</span><br><span class="line">762</span><br><span class="line">763</span><br><span class="line">764</span><br><span class="line">765</span><br><span class="line">766</span><br><span class="line">767</span><br><span class="line">768</span><br><span class="line">769</span><br><span class="line">770</span><br><span class="line">771</span><br><span class="line">772</span><br><span class="line">773</span><br><span class="line">774</span><br><span class="line">775</span><br><span class="line">776</span><br><span class="line">777</span><br><span class="line">778</span><br><span class="line">779</span><br><span class="line">780</span><br><span class="line">781</span><br><span class="line">782</span><br><span class="line">783</span><br><span class="line">784</span><br><span class="line">785</span><br><span class="line">786</span><br><span class="line">787</span><br><span class="line">788</span><br><span class="line">789</span><br><span class="line">790</span><br><span class="line">791</span><br><span class="line">792</span><br><span class="line">793</span><br><span class="line">794</span><br><span class="line">795</span><br><span class="line">796</span><br><span class="line">797</span><br><span class="line">798</span><br><span class="line">799</span><br><span class="line">800</span><br><span class="line">801</span><br><span class="line">802</span><br><span class="line">803</span><br><span class="line">804</span><br><span class="line">805</span><br><span class="line">806</span><br><span class="line">807</span><br><span class="line">808</span><br><span class="line">809</span><br><span class="line">810</span><br><span class="line">811</span><br><span class="line">812</span><br><span class="line">813</span><br><span class="line">814</span><br><span class="line">815</span><br><span class="line">816</span><br><span class="line">817</span><br><span class="line">818</span><br><span class="line">819</span><br><span class="line">820</span><br><span class="line">821</span><br><span class="line">822</span><br><span class="line">823</span><br><span class="line">824</span><br><span class="line">825</span><br><span class="line">826</span><br><span class="line">827</span><br><span class="line">828</span><br><span class="line">829</span><br><span class="line">830</span><br><span class="line">831</span><br><span class="line">832</span><br><span class="line">833</span><br><span class="line">834</span><br><span class="line">835</span><br><span class="line">836</span><br><span class="line">837</span><br><span class="line">838</span><br><span class="line">839</span><br><span class="line">840</span><br><span class="line">841</span><br><span class="line">842</span><br><span class="line">843</span><br><span class="line">844</span><br><span class="line">845</span><br><span class="line">846</span><br><span class="line">847</span><br><span class="line">848</span><br><span class="line">849</span><br><span class="line">850</span><br><span class="line">851</span><br><span class="line">852</span><br><span class="line">853</span><br><span class="line">854</span><br><span class="line">855</span><br><span class="line">856</span><br><span class="line">857</span><br><span class="line">858</span><br><span class="line">859</span><br><span class="line">860</span><br><span class="line">861</span><br><span class="line">862</span><br><span class="line">863</span><br><span class="line">864</span><br><span class="line">865</span><br><span class="line">866</span><br><span class="line">867</span><br><span class="line">868</span><br><span class="line">869</span><br><span class="line">870</span><br><span class="line">871</span><br><span class="line">872</span><br><span class="line">873</span><br><span class="line">874</span><br><span class="line">875</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#gitcalendar</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-always);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-border);</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1rem</span> <span class="number">2rem</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#about-page</span>) &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: none <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#about-page</span>) <span class="selector-class">.page-title</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#about-page</span>) <span class="selector-id">#footer-wrap</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: visible;</span><br><span class="line">  <span class="attribute">height</span>: auto <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#web_bg</span> ~ <span class="selector-class">.page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#about-page</span>) &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.author-box</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.author-box</span> <span class="selector-class">.author-img</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: auto;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">180px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">180px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.author-box</span> <span class="selector-class">.author-img</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">180px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">180px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.author-box</span> <span class="selector-class">.image-dot</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#6bdf8f</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">6px</span> solid <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">35px</span>, <span class="number">45px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">1rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.myInfoAndSayHello</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">120deg</span>, <span class="number">#5b27ff</span> <span class="number">0</span>, <span class="number">#00d4ff</span> <span class="number">100%</span>);</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">200%</span>;</span><br><span class="line">  <span class="attribute">animation</span>: gradient <span class="number">15s</span> ease infinite;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">59%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">49%</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-always);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-border);</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1rem</span> <span class="number">2rem</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.myInfoAndSayHello</span> <span class="selector-class">.title1</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.8</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.myInfoAndSayHello</span> <span class="selector-class">.title2</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">36px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.1</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0.5rem</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.inline-word</span> &#123;</span><br><span class="line">  <span class="attribute">word-break</span>: keep-all;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.myInfoAndSayHello</span> <span class="selector-class">.title1</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.8</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.aboutsiteTips</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: flex-start;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">39%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aboutsiteTips</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">  <span class="attribute">margin-right</span>: auto;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">36px</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: Helvetica;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.06</span>;</span><br><span class="line">  <span class="attribute">letter-spacing</span>: -<span class="number">0.02em</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aboutsiteTips</span> <span class="selector-class">.mask</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">36px</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aboutsiteTips</span> <span class="selector-class">.mask</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">36px</span>;</span><br><span class="line">  <span class="attribute">padding-bottom</span>: <span class="built_in">var</span>(--offset);</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">  -webkit-<span class="attribute">background-clip</span>: text;</span><br><span class="line">  <span class="attribute">background-clip</span>: text;</span><br><span class="line">  -webkit-text-fill-<span class="attribute">color</span>: transparent;</span><br><span class="line">  <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aboutsiteTips</span> <span class="selector-class">.mask</span> <span class="selector-tag">span</span><span class="selector-attr">[data-show]</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">100%</span>);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.5s</span> transform ease-in-out;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aboutsiteTips</span> <span class="selector-class">.mask</span> <span class="selector-tag">span</span><span class="selector-attr">[data-up]</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">200%</span>);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.5s</span> transform ease-in-out;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aboutsiteTips</span> <span class="selector-class">.mask</span> <span class="selector-tag">span</span><span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>) &#123;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(<span class="number">45deg</span>, <span class="number">#0ecffe</span> <span class="number">50%</span>, <span class="number">#07a6f1</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aboutsiteTips</span> <span class="selector-class">.mask</span> <span class="selector-tag">span</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>) &#123;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(<span class="number">45deg</span>, <span class="number">#18e198</span> <span class="number">50%</span>, <span class="number">#0ec15d</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aboutsiteTips</span> <span class="selector-class">.mask</span> <span class="selector-tag">span</span><span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>) &#123;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(<span class="number">45deg</span>, <span class="number">#8a7cfb</span> <span class="number">50%</span>, <span class="number">#633e9c</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aboutsiteTips</span> <span class="selector-class">.mask</span> <span class="selector-tag">span</span><span class="selector-pseudo">:nth-child</span>(<span class="number">4</span>) &#123;</span><br><span class="line">  <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(<span class="number">45deg</span>, <span class="number">#fa7671</span> <span class="number">50%</span>, <span class="number">#f45f7f</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.author-content-item</span><span class="selector-class">.map</span> &#123;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.about-statistic</span> &#123;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">380px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">39%</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/23/632d634f8376d.jpg</span>) no-repeat top;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.about-statistic</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> -<span class="number">159px</span> <span class="number">173px</span> <span class="number">71px</span> <span class="number">#0c1c2c</span> inset;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1rem</span> <span class="number">2rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.author-content-item-title</span> &#123;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.author-content-item-title</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">36px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#statistic</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">15px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">2rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#statistic</span> <span class="selector-tag">div</span> <span class="selector-tag">span</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.8</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.6rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#statistic</span> <span class="selector-tag">div</span> <span class="selector-tag">span</span><span class="selector-pseudo">:last-child</span> &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">34px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#statistic</span> <span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.post-tips</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-gray);</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">2rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.post-tips</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-gray) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">border</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">1.5rem</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">2rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">124px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">20px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.personalities</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">59%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.personalities</span> <span class="selector-class">.image</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">30px</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">220px</span>;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">2s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.13</span>, <span class="number">0.45</span>, <span class="number">0.21</span>, <span class="number">1.02</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.personalities</span> <span class="selector-class">.image</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: filter <span class="number">375ms</span> ease-in <span class="number">0.2s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.personalities</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.image</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">10deg</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.myphoto</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">60%</span>;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">240px</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">39%</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.myphoto</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">min-width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">object-fit</span>: cover;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.6s</span>;</span><br><span class="line">  <span class="attribute">animation</span>: coverIn <span class="number">2s</span> ease-out forwards;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">2s</span> ease-out <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.myphoto</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.1</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.card-background-icon</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">20deg</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.personalities</span> <span class="selector-class">.title2</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">36px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.map</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/24/632e6f48981d8.jpg</span>) no-repeat center;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">160px</span>;</span><br><span class="line">  <span class="attribute">max-height</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">60%</span>;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">1s</span> ease-in-out;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.author-content-item</span><span class="selector-class">.map</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/26/6330ebf1f3e65.jpg</span>) no-repeat center;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.single</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.map</span> <span class="selector-class">.map-title</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-maskbg);</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.5rem</span> <span class="number">2rem</span>;</span><br><span class="line">  backdrop-<span class="attribute">filter</span>: <span class="built_in">saturate</span>(<span class="number">180%</span>) <span class="built_in">blur</span>(<span class="number">20px</span>);</span><br><span class="line">  -webkit-backdrop-<span class="attribute">filter</span>: <span class="built_in">blur</span>(<span class="number">20px</span>);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">1s</span> ease-in-out;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.map</span> <span class="selector-class">.map-title</span> <span class="selector-tag">b</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.selfInfo</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">max-height</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">  <span class="attribute">height</span>: -webkit-fill-available;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">40%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.selfInfo</span> <span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0.5rem</span> <span class="number">2rem</span> <span class="number">0.5rem</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.selfInfo</span> <span class="selector-class">.selfInfo-title</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.8</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.6rem</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.selfInfo</span> <span class="selector-class">.selfInfo-content</span> &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">34px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item-group</span><span class="selector-class">.column</span><span class="selector-class">.mapAndInfo</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">59%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.map</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">120%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">4s</span> ease-in-out;</span><br><span class="line">  <span class="attribute">background-position</span>-x: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">background-position</span>-y: <span class="number">36%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.map</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.map-title</span> &#123;</span><br><span class="line">  <span class="attribute">bottom</span>: -<span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item-group</span><span class="selector-class">.column</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">49%</span>;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.post-tips</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-main) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">background</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.single</span><span class="selector-class">.reward</span> <span class="selector-class">.reward-list-updateDate</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-gray);</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.single</span><span class="selector-class">.reward</span> <span class="selector-class">.post-reward</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">width</span>: auto;</span><br><span class="line">  <span class="attribute">text-align</span>: none;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">2rem</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">2rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">2.25rem</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">600</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2.6rem</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: -<span class="number">4rem</span>;</span><br><span class="line">  <span class="attribute">outline</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform-origin</span>: <span class="number">0</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">50ms</span> ease-in-out;</span><br><span class="line">  <span class="attribute">width</span>: auto;</span><br><span class="line">  -webkit-tap-highlight-<span class="attribute">color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-class">.coin__back</span>,</span><br><span class="line"><span class="selector-class">.coin__back</span><span class="selector-pseudo">::after</span>,</span><br><span class="line"><span class="selector-class">.coin__front</span>,</span><br><span class="line"><span class="selector-class">.coin__front</span><span class="selector-pseudo">::after</span>,</span><br><span class="line"><span class="selector-class">.coin__middle</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin-wrapper</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">18rem</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">transform</span>: none;</span><br><span class="line">  <span class="attribute">transform-origin</span>: <span class="number">50%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">0.2s</span> linear <span class="number">0.1s</span>, transform <span class="number">0.3s</span> ease-out;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__front</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">var</span>(--front-y-multiplier);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__back</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">var</span>(--back-y-multiplier);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__middle</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#737c99</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--middle-y-multiplier) * <span class="number">0.3181818182rem</span> / <span class="number">2</span>)) <span class="built_in">scaleY</span>(<span class="built_in">var</span>(--middle-scale-multiplier));</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(circle at <span class="number">25%</span> <span class="number">65%</span>, transparent <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.9</span>) <span class="number">90%</span>), <span class="built_in">linear-gradient</span>(<span class="number">55deg</span>, transparent</span><br><span class="line">        <span class="built_in">calc</span>(<span class="built_in">var</span>(--shine-bg-multiplier) + <span class="number">0</span>), <span class="number">#e9f4ff</span> <span class="built_in">calc</span>(<span class="built_in">var</span>(--shine-bg-multiplier) + <span class="number">0</span>), transparent <span class="built_in">calc</span>(<span class="built_in">var</span>(</span><br><span class="line">              --shine-bg-multiplier</span><br><span class="line">            ) + <span class="number">50%</span>));</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">var</span>(--shine-opacity-multiplier);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--middle-y-multiplier) * <span class="number">0.3181818182rem</span> / -<span class="number">2</span>)) <span class="built_in">scaleY</span>(<span class="built_in">var</span>(--middle-scale-multiplier))</span><br><span class="line">    <span class="built_in">rotate</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--coin-rotation-multiplier) * <span class="number">1deg</span>));</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">10</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.coin</span> &#123;</span><br><span class="line">  <span class="attr">--front-y-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--back-y-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--coin-y-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--coin-x-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--coin-scale-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--coin-rotation-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--shine-opacity-multiplier</span>: <span class="number">0.4</span>;</span><br><span class="line">  <span class="attr">--shine-bg-multiplier</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="built_in">calc</span>(<span class="built_in">var</span>(--coin-y-multiplier) * <span class="number">1rem</span> - <span class="number">3.5rem</span>);</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">3.5rem</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">3.05rem</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">right</span>: <span class="built_in">calc</span>(<span class="built_in">var</span>(--coin-x-multiplier) * <span class="number">34%</span> + <span class="number">16%</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">50%</span>) <span class="built_in">scale</span>(<span class="built_in">calc</span>(<span class="number">0.4</span> + <span class="built_in">var</span>(--coin-scale-multiplier))) <span class="built_in">rotate</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(</span><br><span class="line">            --coin-rotation-multiplier</span><br><span class="line">          ) * -<span class="number">1deg</span>));</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">0.1s</span> linear <span class="number">0.2s</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">3.5rem</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.coin__back</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(circle at <span class="number">50%</span> <span class="number">50%</span>, transparent <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">115</span>, <span class="number">124</span>, <span class="number">153</span>, <span class="number">0.4</span>) <span class="number">54%</span>, <span class="number">#c2cadf</span> <span class="number">54%</span>),</span><br><span class="line">    <span class="built_in">radial-gradient</span>(circle at <span class="number">50%</span> <span class="number">40%</span>, <span class="number">#fcfaf9</span> <span class="number">23%</span>, transparent <span class="number">23%</span>), <span class="built_in">radial-gradient</span>(circle at <span class="number">50%</span> <span class="number">100%</span>, <span class="number">#fcfaf9</span> <span class="number">35%</span>, transparent</span><br><span class="line">        <span class="number">35%</span>);</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#8590b3</span>;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--back-y-multiplier) * <span class="number">0.3181818182rem</span> / <span class="number">2</span>)) <span class="built_in">scaleY</span>(<span class="built_in">var</span>(--back-scale-multiplier));</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__front</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(circle at <span class="number">50%</span> <span class="number">50%</span>, transparent <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">115</span>, <span class="number">124</span>, <span class="number">153</span>, <span class="number">0.4</span>) <span class="number">54%</span>, <span class="number">#c2cadf</span> <span class="number">54%</span>),</span><br><span class="line">    <span class="built_in">linear-gradient</span>(<span class="number">210deg</span>, <span class="number">#8590b3</span> <span class="number">32%</span>, transparent <span class="number">32%</span>), <span class="built_in">linear-gradient</span>(<span class="number">150deg</span>, <span class="number">#8590b3</span> <span class="number">32%</span>, transparent <span class="number">32%</span>),</span><br><span class="line">    <span class="built_in">linear-gradient</span>(to right, <span class="number">#8590b3</span> <span class="number">22%</span>, transparent <span class="number">22%</span>, transparent <span class="number">78%</span>, <span class="number">#8590b3</span> <span class="number">78%</span>), <span class="built_in">linear-gradient</span>(</span><br><span class="line">      to bottom,</span><br><span class="line">      <span class="number">#fcfaf9</span> <span class="number">44%</span>,</span><br><span class="line">      transparent <span class="number">44%</span>,</span><br><span class="line">      transparent <span class="number">65%</span>,</span><br><span class="line">      <span class="number">#fcfaf9</span> <span class="number">65%</span>,</span><br><span class="line">      <span class="number">#fcfaf9</span> <span class="number">71%</span>,</span><br><span class="line">      <span class="number">#8590b3</span> <span class="number">71%</span></span><br><span class="line">    ), <span class="built_in">linear-gradient</span>(to right, transparent <span class="number">28%</span>, <span class="number">#fcfaf9</span> <span class="number">28%</span>, <span class="number">#fcfaf9</span> <span class="number">34%</span>, <span class="number">#8590b3</span> <span class="number">34%</span>, <span class="number">#8590b3</span> <span class="number">40%</span>, <span class="number">#fcfaf9</span> <span class="number">40%</span>, <span class="number">#fcfaf9</span></span><br><span class="line">        <span class="number">47%</span>, <span class="number">#8590b3</span> <span class="number">47%</span>, <span class="number">#8590b3</span> <span class="number">53%</span>, <span class="number">#fcfaf9</span> <span class="number">53%</span>, <span class="number">#fcfaf9</span> <span class="number">60%</span>, <span class="number">#8590b3</span> <span class="number">60%</span>, <span class="number">#8590b3</span> <span class="number">66%</span>, <span class="number">#fcfaf9</span> <span class="number">66%</span>, <span class="number">#fcfaf9</span> <span class="number">72%</span>, transparent</span><br><span class="line">        <span class="number">72%</span>);</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#8590b3</span>;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--front-y-multiplier) * <span class="number">0.3181818182rem</span> / <span class="number">2</span>)) <span class="built_in">scaleY</span>(<span class="built_in">var</span>(--front-scale-multiplier));</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button__text</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">1.8rem</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">0.1s</span> linear <span class="number">0.5s</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content</span> <span class="selector-class">.post-reward</span> <span class="selector-class">.reward-main</span> &#123;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">left</span>: auto;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content</span> <span class="selector-class">.post-reward</span> <span class="selector-class">.reward-main</span> <span class="selector-class">.reward-all</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">top</span>: -<span class="number">11px</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.post-reward</span> <span class="selector-class">.reward-item</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.post-reward</span> <span class="selector-class">.reward-item</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">border-bottom</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.post-reward</span> <span class="selector-class">.reward-item</span> <span class="selector-tag">a</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#about-page</span> <span class="selector-class">.post-reward</span> <span class="selector-class">.reward-main</span> <span class="selector-class">.reward-all</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">20px</span> <span class="number">10px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.post-reward</span> <span class="selector-class">.reward-main</span> <span class="selector-class">.reward-all</span> <span class="selector-class">.reward-item</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">8px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.post-reward</span> <span class="selector-class">.reward-main</span> <span class="selector-class">.reward-all</span> <span class="selector-tag">li</span><span class="selector-class">.reward-item</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.post-reward</span> <span class="selector-class">.reward-main</span> <span class="selector-class">.reward-all</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.maxim</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">36px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.1</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: flex-start;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">39%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.author-content-item-tips</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.8</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.6rem</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.maxim</span> <span class="selector-class">.maxim-title</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.buff</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">36px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.1</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: flex-start;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(<span class="number">120deg</span>, <span class="number">#ff27e8</span> <span class="number">0</span>, <span class="number">#ff8000</span> <span class="number">100%</span>);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">200%</span>;</span><br><span class="line">  <span class="attribute">animation</span>: gradient <span class="number">15s</span> ease infinite;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">height</span>: fit-content;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">59%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.buff</span> <span class="selector-class">.card-content</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.buff</span> <span class="selector-class">.buff-title</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.card-background-icon</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">12rem</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.2</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: -<span class="number">40%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">30deg</span>);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">2s</span> ease-in-out;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.game-yuanshen</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://img02.anheyu.com/adminuploads/1/2022/12/19/63a079ca63c8a.webp</span>) no-repeat top;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">59%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.content-bottom</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: auto;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.content-bottom</span> <span class="selector-class">.icon-group</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.content-bottom</span> <span class="selector-class">.icon-group</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">143px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">0.5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.icon-pos-mid</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/632fb9cecfc8c.png</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.game-yuanshen</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> -<span class="number">69px</span> <span class="number">203px</span> <span class="number">11px</span> <span class="number">#575d8b</span> inset;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.comic-content</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">39%</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/violet.jpg</span>) no-repeat top;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">color</span>: violet;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.comic-content</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> -<span class="number">48px</span> <span class="number">203px</span> <span class="number">11px</span> <span class="number">#fbe9b8</span> inset;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.like-technology</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/24/632f0dd8f33c6.webp</span>) no-repeat;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">230px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.like-music</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://p2.music.126.net/Mrg1i7DwcwjWBvQPIMt_Mg==/79164837213438.jpg</span>) no-repeat top;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">1.5rem</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">2rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.like-music</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> -<span class="number">69px</span> <span class="number">203px</span> <span class="number">11px</span> <span class="number">#453e38</span> inset;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-id">#gitcalendar</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-black) <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: none <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span><span class="selector-class">.game-yuanshen</span> <span class="selector-class">.content-bottom</span> &#123;</span><br><span class="line">    <span class="attribute">padding-bottom</span>: <span class="number">10px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span><span class="selector-class">.game-yuanshen</span> <span class="selector-class">.game-yuanshen-uid</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content</span> &#123;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span> <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">1rem</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">1rem</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span><span class="selector-class">.map</span> &#123;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item-group</span><span class="selector-class">.column</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span> <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span><span class="selector-class">.selfInfo</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">95%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span><span class="selector-class">.personalities</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">170px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.post-tips</span> &#123;</span><br><span class="line">    <span class="attribute">left</span>: auto;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span><span class="selector-class">.personalities</span> <span class="selector-class">.image</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">90px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span> <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.post-reward</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.reward-list-item</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span> <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.layout</span> &gt; <span class="selector-tag">div</span><span class="selector-pseudo">:first</span>-child<span class="selector-pseudo">:not</span>(<span class="selector-class">.recent-posts</span>) &#123;</span><br><span class="line">    <span class="comment">/* border-radius: 0; */</span></span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">1rem</span> <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: none <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button-text</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> &#123;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">1rem</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">1rem</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">1.5rem</span>;</span><br><span class="line">    <span class="attribute">background</span>: white;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">6px</span>;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">80px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-background) <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#selfInfo-content-year</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">90px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">896px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.author-content-item</span><span class="selector-class">.like-music</span> <span class="selector-class">.content-bottom</span> <span class="selector-class">.tips</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 赞赏的css */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.reward-list-all</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">0.25rem</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: -<span class="number">0.25rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.reward-list-item</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-always);</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>((<span class="number">100%</span> / <span class="number">3</span>) - <span class="number">0.5rem</span>);</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">0.25rem</span> <span class="number">0.5rem</span> <span class="number">0.25rem</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-border);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.reward-list-item</span> <span class="selector-class">.reward-list-item-name</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.reward-list-item</span> <span class="selector-class">.reward-list-bottom-group</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.reward-list-item</span> <span class="selector-class">.reward-list-item-money</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">4px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--card-bg);</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">4px</span>;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.reward-list-item</span> <span class="selector-class">.reward-list-item-time</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-secondtext);</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>新建<code>themes/butterfly/source/css/_custom/about/careers.css</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.careers</span> &#123;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">400px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.careers</span> <span class="selector-class">.careers-group</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">12px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.careers</span> <span class="selector-class">.careers-item</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.careers</span> <span class="selector-class">.careers-item</span> <span class="selector-class">.circle</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">16px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.careers</span> <span class="selector-class">.careers-item</span> <span class="selector-class">.name</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-secondtext);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.careers</span> <span class="selector-class">.careers-item</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.careers</span> <span class="selector-class">.careers-item</span> <span class="selector-class">.circle</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">16px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.careers</span> <span class="selector-class">.careers-item</span> <span class="selector-class">.name</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-secondtext);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.careers</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.6s</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>新建<code>themes/butterfly/source/css/_custom/about/genshinimpact.css</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">  <span class="attr">--loadingbar-background-color</span>: <span class="number">#2c2b30</span>;</span><br><span class="line">  <span class="attr">--loadingbar-prospect-color</span>: <span class="number">#ece5d8</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* html.dark body &#123;</span></span><br><span class="line"><span class="comment">  background-color: #161d22;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.loading-bar</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">62.5px</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">25%</span>, -<span class="number">50%</span>) <span class="built_in">scale</span>(<span class="number">0.5</span>);</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.5s</span>;</span><br><span class="line">  user-select: none;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.loading-bar</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">filter</span>: <span class="built_in">drop-shadow</span>(<span class="number">0</span> -<span class="number">500px</span> <span class="number">0</span> <span class="built_in">var</span>(--loadingbar-background-color));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.loading-bar</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">filter</span>: <span class="built_in">drop-shadow</span>(<span class="number">0</span> -<span class="number">500px</span> <span class="number">0</span> <span class="built_in">var</span>(--loadingbar-prospect-color));</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">62.5px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;https://yuanshen.site/imgs/loading-bar.png&quot;</span>) no-repeat left <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">500px</span> <span class="number">62.5px</span>;</span><br><span class="line">  <span class="attribute">background-position</span>-x: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.game-yuanshen</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.loading-bar</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: loading-bar <span class="number">3.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.28</span>, <span class="number">0.11</span>, <span class="number">0.32</span>, <span class="number">1</span>) infinite forwards;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">719px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.loading-bar</span> <span class="selector-class">.loading-bar</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">719px</span>) <span class="keyword">and</span> (<span class="attribute">orientation</span>: landscape) &#123;</span><br><span class="line">  <span class="selector-class">.loading-bar</span> <span class="selector-class">.loading-bar</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>) <span class="built_in">scale</span>(<span class="number">0.7</span>) <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@supports</span> <span class="keyword">not</span> (<span class="attribute">filter</span>: drop-shadow(<span class="number">0</span> <span class="number">0</span> <span class="number">0</span> #fff)) &#123;</span><br><span class="line">  <span class="selector-class">.loading-bar</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;Your browser does not support the animation&quot;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> loading-bar &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">background-size</span>: <span class="number">500px</span> <span class="number">62.5px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">16.6%</span> &#123;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">33.2%</span> &#123;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">49.8%</span> &#123;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">66.4%</span> &#123;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83.1%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83.2%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83.3%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83.4%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83.5%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83.6%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83.7%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83.8%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">83.9%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">84%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">85%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">86%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">87%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">475px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>新建<code>themes/butterfly/source/css/_custom/about/hello-about.css</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.hello-about</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">20px</span> auto;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-always);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-border);</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  user-select: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shapes</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">315px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#2128bd</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shape</span> &#123;</span><br><span class="line">  <span class="attribute">will-change</span>: transform;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shape</span><span class="selector-class">.shape-1</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#005ffe</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">650px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">650px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: -<span class="number">325px</span> <span class="number">0</span> <span class="number">0</span> -<span class="number">325px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shape</span><span class="selector-class">.shape-2</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffe5e3</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">440px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">440px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: -<span class="number">220px</span> <span class="number">0</span> <span class="number">0</span> -<span class="number">220px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shape</span><span class="selector-class">.shape-3</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffcc57</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">270px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">270px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: -<span class="number">135px</span> <span class="number">0</span> <span class="number">0</span> -<span class="number">135px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hello-about</span> <span class="selector-class">.content</span> &#123;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">315px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">mix-blend-mode</span>: screen;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.hello-about</span> <span class="selector-class">.content</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.hello-about</span> <span class="selector-tag">h1</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hello-about</span> <span class="selector-tag">h1</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">font</span>: inherit;</span><br><span class="line">  <span class="attribute">vertical-align</span>: baseline;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="built_in">calc</span>((<span class="number">0.0989119683</span> * <span class="number">100vw</span> + (<span class="number">58.5558852621px</span>)));</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">419px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.hello-about</span> <span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="built_in">calc</span>((<span class="number">0.0989119683</span> * <span class="number">100vw</span> + (<span class="number">58.5558852621px</span>)));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.cursor</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#2128bd</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: -<span class="number">10px</span> <span class="number">0</span> <span class="number">0</span> -<span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">will-change</span>: transform;</span><br><span class="line">  user-select: none;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::selection</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#2128bd</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>新建<code>themes/butterfly/source/css/_custom/about/skills.css</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: flex-start;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">450px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span> <span class="selector-class">.skills-style-group</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span> <span class="selector-class">.tags-group-all</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0</span>);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span> <span class="selector-class">.tags-group-wrapper</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: nowrap;</span><br><span class="line">  <span class="attribute">animation</span>: rowup <span class="number">60s</span> linear infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tags-group-icon-pair</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">1rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tags-group-icon</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">66px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-blackdeep);</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">120px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">120px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tags-group-icon</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">60%</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tags-group-icon-pair</span> <span class="selector-class">.tags-group-icon</span><span class="selector-pseudo">:nth-child</span>(even) &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">60px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span> <span class="selector-class">.skills-list</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span> <span class="selector-class">.skill-info</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">4px</span> <span class="number">12px</span> <span class="number">4px</span> <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-border);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span> <span class="selector-class">.skill-icon</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">32px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">32px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">32px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span> <span class="selector-class">.skill-icon</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span> <span class="selector-class">.etc</span> &#123;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> rowup &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">0</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50%</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.skills-style-group</span> <span class="selector-class">.tags-group-all</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.author-content-item</span><span class="selector-class">.skills</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.skills-style-group</span> <span class="selector-class">.skills-list</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>新建<code>themes/butterfly/source/css/_custom/about/site.css</code>, 这部分为 site 卡片的 css, 如不需要 site 卡片可自行去除。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.site-card-group</span> <span class="selector-class">.site-card</span> <span class="selector-class">.info</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">4</span> - <span class="number">0.5rem</span>);</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0.5rem</span> <span class="number">0.25rem</span>;</span><br><span class="line">  <span class="attribute">float</span>: left;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>, -webkit-transform <span class="number">0.6s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>, -moz-transform <span class="number">0.6s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">  -o-<span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>, -o-transform <span class="number">0.6s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">  -ms-<span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>, -ms-transform <span class="number">0.6s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>, transform <span class="number">0.6s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">  -webkit-<span class="attribute">box-shadow</span>: none;</span><br><span class="line">  <span class="attribute">box-shadow</span>: none;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.wrapper</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.cover</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: -webkit-transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: -moz-transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">  -o-<span class="attribute">transition</span>: -o-transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">  -ms-<span class="attribute">transition</span>: -ms-transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.info</span>,</span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.wrapper</span> <span class="selector-class">.cover</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.info</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">  <span class="attribute">display</span>: -moz-box;</span><br><span class="line">  <span class="attribute">display</span>: -webkit-flex;</span><br><span class="line">  <span class="attribute">display</span>: -ms-flexbox;</span><br><span class="line">  <span class="attribute">display</span>: box;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  -webkit-box-orient: vertical;</span><br><span class="line">  -moz-box-orient: vertical;</span><br><span class="line">  -o-box-orient: vertical;</span><br><span class="line">  -webkit-<span class="attribute">flex-direction</span>: column;</span><br><span class="line">  -ms-<span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  -webkit-box-pack: center;</span><br><span class="line">  -moz-box-pack: center;</span><br><span class="line">  -o-box-pack: center;</span><br><span class="line">  -ms-<span class="attribute">flex</span>-pack: center;</span><br><span class="line">  -webkit-<span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  -webkit-box-align: center;</span><br><span class="line">  -moz-box-align: center;</span><br><span class="line">  -o-box-align: center;</span><br><span class="line">  -ms-<span class="attribute">flex</span>-align: center;</span><br><span class="line">  -webkit-<span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.7</span>);</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: -webkit-transform <span class="number">0.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: -moz-transform <span class="number">0.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">  -o-<span class="attribute">transition</span>: -o-transform <span class="number">0.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">  -ms-<span class="attribute">transition</span>: -ms-transform <span class="number">0.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">0.5s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.6</span>, <span class="number">0.2</span>, <span class="number">0.1</span>, <span class="number">1</span>) <span class="number">0s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.info</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">45px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">80px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  -webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="built_in">rgb</span>(<span class="number">0</span> <span class="number">0</span> <span class="number">0</span> / <span class="number">30%</span>);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="built_in">rgb</span>(<span class="number">0</span> <span class="number">0</span> <span class="number">0</span> / <span class="number">30%</span>);</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.info</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">20px</span> <span class="number">10%</span> <span class="number">60px</span> <span class="number">10%</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  -webkit-<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="built_in">rgb</span>(<span class="number">0</span> <span class="number">0</span> <span class="number">0</span> / <span class="number">30%</span>);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="built_in">rgb</span>(<span class="number">0</span> <span class="number">0</span> <span class="number">0</span> / <span class="number">30%</span>);</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.7</span>);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  -o-<span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">  <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> <span class="selector-class">.site-card</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">border-color</span>: <span class="built_in">var</span>(--anzhiyu-main) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">var</span>(--anzhiyu-main) <span class="meta">!important</span>;</span><br><span class="line">  -webkit-<span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-theme) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-theme) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.wrapper</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.2</span>);</span><br><span class="line">  -moz-<span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.2</span>);</span><br><span class="line">  -o-<span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.2</span>);</span><br><span class="line">  -ms-<span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.2</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.2</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.cover</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: -webkit-transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: -moz-transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">  -o-<span class="attribute">transition</span>: -o-transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">  -ms-<span class="attribute">transition</span>: -ms-transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">0.5s</span> ease-out;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.wrapper</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.site-card-group</span> <span class="selector-class">.site-card</span> <span class="selector-class">.wrapper</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: -webkit-transform <span class="number">0.5s</span> ease-out <span class="meta">!important</span>;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: -moz-transform <span class="number">0.5s</span> ease-out <span class="meta">!important</span>;</span><br><span class="line">  -o-<span class="attribute">transition</span>: -o-transform <span class="number">0.5s</span> ease-out <span class="meta">!important</span>;</span><br><span class="line">  -ms-<span class="attribute">transition</span>: -ms-transform <span class="number">0.5s</span> ease-out <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">0.5s</span> ease-out <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.wrapper</span> <span class="selector-class">.fadeIn</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">animation</span>: coverIn <span class="number">0.8s</span> ease-out forwards;</span><br><span class="line">  -moz-<span class="attribute">animation</span>: coverIn <span class="number">0.8s</span> ease-out forwards;</span><br><span class="line">  -o-<span class="attribute">animation</span>: coverIn <span class="number">0.8s</span> ease-out forwards;</span><br><span class="line">  -ms-<span class="attribute">animation</span>: coverIn <span class="number">0.8s</span> ease-out forwards;</span><br><span class="line">  <span class="attribute">animation</span>: coverIn <span class="number">0.8s</span> ease-out forwards;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.site-card-group</span> &gt; <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.info</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">100%</span>);</span><br><span class="line">  -moz-<span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">100%</span>);</span><br><span class="line">  -o-<span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">100%</span>);</span><br><span class="line">  -ms-<span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">100%</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">100%</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="添加赞赏数据"><a href="#添加赞赏数据" class="headerlink" title="添加赞赏数据"></a>添加赞赏数据</h3><p>感谢<a href="https://blog.zhheo.com/">heo</a> 提供的方案。赞赏数据通过静态数据读取出来, 填写时需要注意最新时间在上, 更新时间获取第一条的时间, vip 判断为是否大于 50, 后缀可自行填写。 新建<code>source/_data/reward.yml</code>, 以下为示例数据：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><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">reward_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">鹿啵包</span></span><br><span class="line">      <span class="attr">amount:</span> <span class="number">10</span></span><br><span class="line">      <span class="attr">datatime:</span> <span class="number">2022-11-08</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">疾速k</span></span><br><span class="line">      <span class="attr">amount:</span> <span class="number">50</span></span><br><span class="line">      <span class="attr">datatime:</span> <span class="number">2022-09-20</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">伴舟先生大霖子</span></span><br><span class="line">      <span class="attr">amount:</span> <span class="number">4.03</span></span><br><span class="line">      <span class="attr">datatime:</span> <span class="number">2022-10-27</span></span><br><span class="line">      <span class="attr">suffix:</span> <span class="string">贝壳</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Magica_0x0</span></span><br><span class="line">      <span class="attr">amount:</span> <span class="number">3.36</span></span><br><span class="line">      <span class="attr">datatime:</span> <span class="number">2022-10-07</span></span><br><span class="line">      <span class="attr">suffix:</span> <span class="string">贝壳</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">名字就是要短像这样</span></span><br><span class="line">      <span class="attr">amount:</span> <span class="number">3.36</span></span><br><span class="line">      <span class="attr">datatime:</span> <span class="number">2022-08-25</span></span><br><span class="line">      <span class="attr">suffix:</span> <span class="string">贝壳</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Leviathan520</span></span><br><span class="line">      <span class="attr">amount:</span> <span class="number">1.34</span></span><br><span class="line">      <span class="attr">datatime:</span> <span class="number">2022-08-23</span></span><br><span class="line">      <span class="attr">suffix:</span> <span class="string">贝壳</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">托马斯</span></span><br><span class="line">      <span class="attr">amount:</span> <span class="number">10</span></span><br><span class="line">      <span class="attr">datatime:</span> <span class="number">2022-08-19</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">哇是猫猫欸</span></span><br><span class="line">      <span class="attr">amount:</span> <span class="number">1.34</span></span><br><span class="line">      <span class="attr">datatime:</span> <span class="number">2022-08-19</span></span><br><span class="line">      <span class="attr">suffix:</span> <span class="string">贝壳</span></span><br></pre></td></tr></table></figure><h3 id="添加创造力数据"><a href="#添加创造力数据" class="headerlink" title="添加创造力数据"></a>添加创造力数据</h3><p>创造力数据通过静态数据读出来, 新建<code>source/_data/creativity.yml</code></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><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">creativity_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Vue</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#b8f0ae&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/633001374747b.png</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">React</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#222&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Docker</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#57b6e6&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647df7fa.png</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Photoshop</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#4082c3&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647e1f10.png</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Node</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#333&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Webpack</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#2e3a41&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/26/6330ff27e5c9b.png</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Pinia</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#fff&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/pinia-logo.svg</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Python</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#fff&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647dea51.png</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Vite</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#937df7&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/vite-logo.svg</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Flutter</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#4499e4&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/633004063ff15.png</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Java</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#fff&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/633005bf0fd1e.jpg</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">CSS3</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#2c51db&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/633006cc55e07.png</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">JS</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#f7cb4f&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/633006eee047b.png</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">HTML</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#e9572b&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/633006f9ab27d.png</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Git</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#df5b40&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/633006e37c7fd.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Apifox</span></span><br><span class="line">      <span class="attr">color:</span> <span class="string">&quot;#e65164&quot;</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/25/633007087a4dc.webp</span></span><br></pre></td></tr></table></figure><h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>到这里就差不多了, 地图的图片可以在 iphone 的自带地图中截图, 如有错误欢迎指正。耶, 吃烧烤咯。</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> butterfly </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>解决 元素隐式具有 &quot;any&quot; 类型，因为类型为 &quot;string&quot; 的表达式不能用于索引类型 &quot;Object&quot;。 在类型 &quot;Object&quot; 上找不到具有类型为 &quot;string&quot; 的参数的索引签名</title>
      <link href="/posts/b590.html"/>
      <url>/posts/b590.html</url>
      
        <content type="html"><![CDATA[<p><strong>问题：</strong> 解决 元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型 “Object”。 在类型 “Object”<br>上找不到具有类型为 “string” 的参数的索引签名</p><p><strong>描述：</strong> 在写代码的时候，对一个对象做了一个 forEach 循环，然后取到了其每一个 key 对应的 value 值，但是写完之后发现<br><code>Typescript</code> 报错了，错误内容就是如题，有点奇怪，特此去了解一下</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Object</span>.<span class="title function_">keys</span>(obejct).<span class="title function_">forEach</span>(<span class="function">(<span class="params">key</span>) =&gt;</span> &#123;</span><br><span class="line">  obejct[key]</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 或者</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> obejct) &#123;</span><br><span class="line"><span class="comment">// 处理...</span></span><br><span class="line">obejct[key]</span><br><span class="line">....</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="解决过程"><a href="#解决过程" class="headerlink" title="解决过程"></a>解决过程</h1><p>原谅我报错都没有看明白，查了一下之后才知道，原来 key 值的类型不是 string，在 javascript 中是默认给你转好的，而在 Typescript 中则不是，因此要么转，要么声明，要么忽略…</p><h2 id="方案一：忽略"><a href="#方案一：忽略" class="headerlink" title="方案一：忽略"></a>方案一：忽略</h2><p>在 <code>tsconfig.json</code> 中 <code>compilerOptions</code> 里面新增忽略的代码，如下所示，添加后则不会报错</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;suppressImplicitAnyIndexErrors&quot;</span>: <span class="literal">true</span></span><br></pre></td></tr></table></figure><h2 id="方案二：声明"><a href="#方案二：声明" class="headerlink" title="方案二：声明"></a>方案二：声明</h2><p>在定义的 <code>Interface</code> 里对其进行声明，如下所示，声明过后，也不会再报错</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">interface <span class="variable constant_">DAMNU_ENABLE</span> &#123;</span><br><span class="line">    ....</span><br><span class="line">    [<span class="attr">key</span>: string]: boolean, <span class="comment">// 字段扩展声明</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">[<span class="attr">key</span>: string]: boolean, <span class="comment">// 字段扩展声明 声明之后可以用方括号的方式去对象里边的值</span></span><br></pre></td></tr></table></figure><h2 id="方案三：对其使用-keyof-进行判断"><a href="#方案三：对其使用-keyof-进行判断" class="headerlink" title="方案三：对其使用 keyof 进行判断"></a>方案三：对其使用 keyof 进行判断</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">isValidKey</span>(<span class="params"></span></span><br><span class="line"><span class="params">    key: string | number | symbol,</span></span><br><span class="line"><span class="params">    object: object</span></span><br><span class="line"><span class="params"></span>): key is keyof <span class="keyword">typeof</span> object &#123;</span><br><span class="line">    <span class="keyword">return</span> key <span class="keyword">in</span> object;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure><p>定义一个函数：<code>isValidKey()</code>，然后对需要使用到的地方进行一次判断</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> obejct) &#123;</span><br><span class="line"><span class="keyword">if</span>(<span class="title function_">isValidKey</span>(key,obejct))&#123;</span><br><span class="line"><span class="comment">// 处理...</span></span><br><span class="line">obejct[key]</span><br><span class="line">....</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure><p>这三种方式都可以解决如题的报错信息，但是个人比较倾向于第二种或者第三种，并不是第一种不好，只是说，写第一种有一点点写 any 的感觉，不到万不得已不这么弄；</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 开发 </tag>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>即刻短文（瀑布流）部署方案</title>
      <link href="/posts/c248.html"/>
      <url>/posts/c248.html</url>
      
        <content type="html"><![CDATA[<p>butterfly 即刻短文（瀑布流）部署方案。希望能给各位看客提供魔改思路。</p><table><thead><tr><th align="left">todolist</th><th align="left">支持度</th></tr></thead><tbody><tr><td align="left">图片灯箱</td><td align="left">✅</td></tr><tr><td align="left">多图片多行显示</td><td align="left">✅</td></tr><tr><td align="left">外部链接</td><td align="left">✅</td></tr><tr><td align="left">瀑布流</td><td align="left">✅</td></tr><tr><td align="left">首页滚动</td><td align="left">✅</td></tr><tr><td align="left">快速评论</td><td align="left">✅</td></tr><tr><td align="left">本地修改 yml 发布</td><td align="left">✅</td></tr><tr><td align="left">aplayer 单曲音乐</td><td align="left">✅</td></tr><tr><td align="left">插件版本</td><td align="left">❌</td></tr></tbody></table><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>参考洪哥的即刻短文修改而来。</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">heo</td><td align="left"><a href="https://blog.zhheo.com/p/557c9e72.html">Hexo 的 Butterfly 魔改：即刻短文静态部署版</a></td></tr></tbody></table>              </div>            </details><p>注意 ⚠️ 该教程仅为博主目前使用的方法, 如需移植还需自行修改 css 变量, 以下为博主自用 css 变量, 可自行修改为自己喜欢的颜色。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 颜色 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-gray-op</span>: <span class="number">#9999992b</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-top</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-white</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white-op</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-black</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-op</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-none</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-gray</span>: <span class="number">#999999</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-yellow</span>: <span class="number">#ffc93e</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-main</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-main-op</span>: <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-theme</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-main</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-main-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-blue</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">40</span>, <span class="number">109</span>, <span class="number">234</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-white</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-black</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">12px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-yellow</span>: <span class="number">0px</span> <span class="number">38px</span> <span class="number">77px</span> -<span class="number">26px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">201</span>, <span class="number">62</span>, <span class="number">0.12</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-red</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#ee7d7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-green</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#87ee7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-border</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">16px</span> -<span class="number">4px</span> <span class="number">#2c2d300c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-blackdeep</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">16px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-logo-color</span>: <span class="built_in">linear-gradient</span>(<span class="number">215deg</span>, <span class="number">#4584ff</span> <span class="number">30%</span>, <span class="number">#ff7676</span> <span class="number">70%</span>);</span><br><span class="line">  <span class="attr">--style-border</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--anzhiyu-blue-main</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--style-border-hover</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--style-border-dashed</span>: <span class="number">1px</span> dashed <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--style-border-avatar</span>: <span class="number">4px</span> solid <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">  <span class="attr">--style-border-always</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--style-border-none</span>: <span class="number">1px</span> solid transparent;</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic1</span>: <span class="number">#fefeff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic2</span>: <span class="number">#fcfdff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic2</span>: <span class="number">#08080a</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic1</span>: <span class="number">#0b0b0e</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-main-none</span>: <span class="number">#b8b8b800</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;light&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-deep</span>: <span class="number">#1856fb</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#d8213c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#363636</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#f7f9fe</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#edf0f7</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#fafcff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#f2f5f8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#f1f3f8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#e3e8f7</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--global-bg</span>: <span class="number">#191919</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-deep</span>: <span class="number">#0076e5</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#0084ff23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#ff3842</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#18171d</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="number">#0a84ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="number">#f2b94b</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="number">#a1a2b8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">200</span>, <span class="number">200</span>, <span class="number">223</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#121212</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">20px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">28</span>, <span class="number">28</span>, <span class="number">28</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#1d1b26</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#42444a</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="预览"><a href="#预览" class="headerlink" title="预览"></a>预览</h1><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/26/635928f495dad.webp"></p></div></div></div><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="/essay">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://anheyu.com/img/favicon.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">即刻短文</div>            <div class="tag-link-sitename"> 随便聊聊https://anheyu.com/essay/</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><div class="tip warning faa-horizontal animated"><p>魔改有风险, 魔改前注意备份。此篇魔改需一定代码能力。</p></div><h1 id="创建数据"><a href="#创建数据" class="headerlink" title="创建数据"></a>创建数据</h1><p>创建 <code>source/_data/essay.yml</code></p><p>下面是我的演示数据</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><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">essay_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">content:</span> <span class="string">终于把相册集搞定了,</span> <span class="string">耶✌️,</span> <span class="string">瀑布流在滑动滚动条一个视口范围上下100的情况执行一次,</span> <span class="string">到底部停止监听让性能高了好多，再也不会布局混乱🤪了</span></span><br><span class="line">      <span class="attr">date:</span> <span class="number">2022</span><span class="string">/10/25</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://blog.anheyu.com/album/</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">content:</span> <span class="string">搜索🔍支持缩略图显示啦（默认获取文章内容的第一张图片）</span></span><br><span class="line">      <span class="attr">date:</span> <span class="number">2022</span><span class="string">/10/23</span> <span class="number">08</span><span class="string">:00:00</span></span><br><span class="line">      <span class="attr">from:</span> <span class="string">安知鱼</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">content:</span> <span class="string">遇见彩虹🌈吃定彩虹</span></span><br><span class="line">      <span class="attr">date:</span> <span class="number">2022</span><span class="string">/10/23</span> <span class="number">10</span><span class="string">:00:00</span></span><br><span class="line">      <span class="attr">image:</span></span><br><span class="line">        <span class="bullet">-</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/10/23/6354ea92960ef.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">content:</span> <span class="string">ThreeJs</span> <span class="string">API真多丫</span></span><br><span class="line">      <span class="attr">date:</span> <span class="number">2022</span><span class="string">/10/19</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">content:</span> <span class="string">歌曲推荐</span></span><br><span class="line">      <span class="attr">date:</span> <span class="number">2022</span><span class="string">/09/25</span></span><br><span class="line">      <span class="attr">aplayer:</span></span><br><span class="line">        <span class="attr">server:</span> <span class="string">tencent</span></span><br><span class="line">        <span class="attr">id:</span> <span class="string">001FGQba3i10mw</span></span><br></pre></td></tr></table></figure><h1 id="数据参数释义"><a href="#数据参数释义" class="headerlink" title="数据参数释义"></a>数据参数释义</h1><table><thead><tr><th align="center">参数</th><th align="center">备选值&#x2F;类型</th><th align="center">释义</th></tr></thead><tbody><tr><td align="center">class_name</td><td align="center">String</td><td align="center">【可选】标识符，无实际意义，选填</td></tr><tr><td align="center">essay_list</td><td align="center">Array</td><td align="center">【必选】即刻短文数据列表</td></tr><tr><td align="center">essay_list.content</td><td align="center">String</td><td align="center">【必选】短文 文字内容</td></tr><tr><td align="center">essay_list.date</td><td align="center">Time</td><td align="center">【必选】短文发布时间 格式建议为 <code>2022/10/26 08:00:00</code></td></tr><tr><td align="center">essay_list.image</td><td align="center">Array</td><td align="center">【可选】短文图片内容, 可填写多张图片</td></tr><tr><td align="center">essay_list.from</td><td align="center">String</td><td align="center">【可选】短文 来自何处, 当然也可以填任何你想填写的标识</td></tr><tr><td align="center">essay_list.link</td><td align="center">String</td><td align="center">【可选】外部链接</td></tr><tr><td align="center">essay_list.aplayer</td><td align="center">Array</td><td align="center">【可选】aplayer 播放器的单曲音乐, 需 aplayer 支持</td></tr><tr><td align="center">essay_list.aplayer.server</td><td align="center">String</td><td align="center">【essay_list.aplayer 后必选】aplayer 服务商</td></tr><tr><td align="center">essay_list.aplayer.id</td><td align="center">String</td><td align="center">【essay_list.aplayer 后必选】单曲 id</td></tr></tbody></table><h1 id="创建-md-页面文件"><a href="#创建-md-页面文件" class="headerlink" title="创建 md 页面文件"></a>创建 md 页面文件</h1><p>创建<code>source/essay/index.md</code> 来生成页面 page</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 即刻短文</span><br><span class="line">date: 2020-07-22 22:06:17</span><br><span class="line">comments: true</span><br><span class="line">aside: false</span><br><span class="line">top<span class="emphasis">_img: false</span></span><br><span class="line"><span class="emphasis">type: essay</span></span><br><span class="line"><span class="emphasis">---</span></span><br></pre></td></tr></table></figure><h1 id="创建-dom-文件"><a href="#创建-dom-文件" class="headerlink" title="创建 dom 文件"></a>创建 dom 文件</h1><p>创建<code>themes/butterfly/layout/includes/page/essay.pug</code>, 页面内容, 注意该页面中可能存在部分<code>fontawesome 图标</code>需要自行替换。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">#essay_page</span><br><span class="line">  .author-content.author-content-item.essayPage.single</span><br><span class="line">    .card-content</span><br><span class="line">      .author-content-item-tips 即刻短文</span><br><span class="line">      span.author-content-item-title 咸鱼的日常生活。</span><br><span class="line">      .content-bottom</span><br><span class="line">        .tips 使用 即刻短文静态部署版 构建</span><br><span class="line">      .banner-button-group</span><br><span class="line">        a.banner-button(onclick=&#x27;pjax.loadUrl(&quot;/about/&quot;)&#x27;, data-pjax-state)</span><br><span class="line">          i.fas.fa-circle-right(style=&#x27;font-size: 1.5rem&#x27;)</span><br><span class="line">          span.banner-button-text 关于我</span><br><span class="line">  #bber</span><br><span class="line">    section.timeline.page-1</span><br><span class="line">      ul#waterfall.list</span><br><span class="line">        each i in site.data.essay</span><br><span class="line">          each item, index in i.essay_list</span><br><span class="line">            if index &lt; 30</span><br><span class="line">              li.bber-item</span><br><span class="line">                .bber-content</span><br><span class="line">                  p.datacont= item.content</span><br><span class="line">                    if item.image</span><br><span class="line">                      .bber-container-img</span><br><span class="line">                        each iten, indey in item.image</span><br><span class="line">                          a.bber-content-img(href=item.image[indey], target=&quot;_blank&quot;, data-fancybox=&quot;gallery&quot;, data-caption=&quot;&quot;)</span><br><span class="line">                            img(src=item.image[indey])</span><br><span class="line">                        .bber-content-noimg</span><br><span class="line">                        .bber-content-noimg</span><br><span class="line">                        .bber-content-noimg</span><br><span class="line">                    if item.aplayer</span><br><span class="line">                      .bber-music</span><br><span class="line">                        .aplayer.no-destroy(data-id=item.aplayer.id data-server=item.aplayer.server data-type=&quot;song&quot;  data-order=&quot;list&quot; data-preload=&quot;none&quot; data-autoplay=&quot;false&quot; data-mutex=&quot;true&quot; data-theme=&#x27;var(--anzhiyu-main)&#x27;)</span><br><span class="line">                hr</span><br><span class="line">                .bber-bottom</span><br><span class="line">                  .bber-info</span><br><span class="line">                    .bber-info-time</span><br><span class="line">                      - var datedata = new Date(item.date).toISOString()</span><br><span class="line">                      i.far.fa-clock</span><br><span class="line">                      time.datatime(datetime= item.date)= datedata</span><br><span class="line">                    if item.link</span><br><span class="line">                      a.bber-content-link(target=&quot;_blank&quot;, title=&quot;跳转到短文指引的链接&quot;, href=item.link, rel=&quot;external nofollow&quot;)</span><br><span class="line">                        i.fas.fa-link</span><br><span class="line">                        | 链接</span><br><span class="line">                    if item.from</span><br><span class="line">                      .bber-info-from</span><br><span class="line">                        i.fas.fa-fire</span><br><span class="line">                        span=item.from</span><br><span class="line">                  .bber-reply(onclick=&quot;anzhiyu.commentText(&quot; + `&#x27;$&#123;item.content&#125;&#x27;` + &quot;)&quot;)</span><br><span class="line">                    i.fa-solid.fa-message</span><br><span class="line">  #bber-tips(style=&#x27;color: var(--anzhiyu-secondtext);&#x27;)</span><br><span class="line">    | - 只展示最近30条短文 -</span><br></pre></td></tr></table></figure><h1 id="修改-Page-文件"><a href="#修改-Page-文件" class="headerlink" title="修改 Page 文件"></a>修改 Page 文件</h1><p>修改<code>themes/butterfly/layout/page.pug</code> 来使页面内容匹配</p><p>在 <code>case page.type</code> 子项里面添加, 注意缩进</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">    case page.type</span><br><span class="line"><span class="addition">+     when &#x27;essay&#x27;</span></span><br><span class="line"><span class="addition">+       include includes/page/essay.pug</span></span><br><span class="line">      when &#x27;tags&#x27;</span><br><span class="line">        include includes/page/tags.pug</span><br><span class="line">      when &#x27;link&#x27;</span><br><span class="line">        include includes/page/flink.pug</span><br><span class="line">      when &#x27;categories&#x27;</span><br><span class="line">        include includes/page/categories.pug</span><br></pre></td></tr></table></figure><h1 id="加入-css"><a href="#加入-css" class="headerlink" title="加入 css"></a>加入 css</h1><p>此处不在赘述如何创建<code>自定义css</code>, 不会的可以去看 <a href="https://www.bilibili.com/video/BV1rT411w7gj/?spm_id_from=333.999.0.0">https://www.bilibili.com/video/BV1rT411w7gj/?spm_id_from=333.999.0.0</a> 创建<code>source/css/essay_page/essay_page.css</code>, 然后在<code>_config.butterfly.yml</code>中的<code>inject</code>下的<code>head</code>引入, 注意缩进</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><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">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/css/essay_page/essay_page.css&quot;&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#essay_page</span>) &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: none <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#essay_page</span>) <span class="selector-class">.page-title</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#web_bg</span> ~ <span class="selector-class">.page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#essay_page</span>) &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-container-img</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-around;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.3rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-container-img</span> <span class="selector-class">.bber-content-noimg</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">4</span> - <span class="number">5px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-content-img</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">object-fit</span>: cover;</span><br><span class="line">  <span class="attribute">max-height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-content-img</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">4</span> - <span class="number">5px</span>);</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-content</span> <span class="selector-class">.datacont</span> &#123;</span><br><span class="line">  <span class="attribute">order</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.8rem</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.38</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">text-align</span>: justify;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-tag">div</span><span class="selector-class">.bber-content</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-flow</span>: wrap;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.timeline</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-class">.bber-item</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">32%</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-always);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1rem</span> <span class="number">1rem</span> <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-flow</span>: column nowrap;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">  <span class="attribute">align-items</span>: flex-start;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-border);</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">2%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.timeline</span> <span class="selector-id">#waterfall</span><span class="selector-class">.show</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.timeline</span> <span class="selector-id">#waterfall</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-tag">ul</span><span class="selector-class">.list</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-flow</span>: row wrap;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> &gt; <span class="selector-tag">section</span> &gt; <span class="selector-tag">ul</span> &gt; <span class="selector-tag">li</span><span class="selector-class">.bber-item</span> &#123;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">1rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber-tips</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">1rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.timeline</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-class">.bber-item</span> hr &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">8px</span> <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> dashed <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-info</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> &gt; <span class="selector-tag">section</span> &gt; <span class="selector-tag">ul</span> &gt; <span class="selector-tag">li</span> &gt; <span class="selector-tag">div</span> <span class="selector-class">.bber-info-time</span>,</span><br><span class="line"><span class="selector-id">#bber</span> &gt; <span class="selector-tag">section</span> &gt; <span class="selector-tag">ul</span> &gt; <span class="selector-tag">li</span> &gt; <span class="selector-tag">div</span> <span class="selector-class">.bber-info-from</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.7rem</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">var</span>(--anzhiyu-gray-op);</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: default;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-info</span> <span class="selector-class">.far</span><span class="selector-class">.fa-clock</span> &#123;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> &gt; <span class="selector-tag">section</span> &gt; <span class="selector-tag">ul</span> &gt; <span class="selector-tag">li</span> &gt; <span class="selector-tag">div</span> <span class="selector-class">.bber-info-from</span> <span class="selector-tag">span</span>,</span><br><span class="line"><span class="selector-id">#bber</span> &gt; <span class="selector-tag">section</span> &gt; <span class="selector-tag">ul</span> &gt; <span class="selector-tag">li</span> &gt; <span class="selector-tag">div</span> <span class="selector-class">.bber-info-from</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-bottom</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-bottom</span> <span class="selector-class">.bber-reply</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.timeline</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-class">.bber-item</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-hover);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-content-link</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.7rem</span>;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">245</span>, <span class="number">108</span>, <span class="number">108</span>, <span class="number">0.13</span>);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">rgb</span>(<span class="number">245</span>, <span class="number">108</span>, <span class="number">108</span>);</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-content-link</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">3px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-content-link</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.bber-music</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">90px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0.5rem</span> <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-always);</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-secondbg);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-pic</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">82px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">82px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">4px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bber-music</span> <span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-withlrc</span> <span class="selector-class">.aplayer-info</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">7px</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">23px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-music</span> <span class="selector-class">.aplayer-title</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.8rem</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> &#123;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-time</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: initial;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> <span class="selector-class">.aplayer-bar</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-gray);</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> <span class="selector-class">.aplayer-bar</span> <span class="selector-class">.aplayer-loaded</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> <span class="selector-class">.aplayer-bar</span> <span class="selector-class">.aplayer-played</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-bar-wrap</span> <span class="selector-class">.aplayer-bar</span> <span class="selector-class">.aplayer-played</span> <span class="selector-class">.aplayer-thumb</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> <span class="selector-class">.aplayer-controller</span> <span class="selector-class">.aplayer-time</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: initial;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 顶部样式 */</span></span><br><span class="line"><span class="selector-class">.author-content</span><span class="selector-class">.author-content-item</span><span class="selector-class">.essayPage</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">19rem</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://img02.anheyu.com/adminuploads/1/2022/08/21/630249e2df20f.jpg</span>) left <span class="number">28%</span> / cover no-repeat;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page</span><span class="selector-pseudo">:has</span>(<span class="selector-id">#essay_page</span>) <span class="selector-class">.author-content-item</span> <span class="selector-class">.card-content</span> <span class="selector-class">.banner-button-group</span> <span class="selector-class">.banner-button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">20px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 响应式 */</span></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">1300px</span>) &#123;</span><br><span class="line">  <span class="selector-id">#bber</span> <span class="selector-class">.timeline</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-class">.bber-item</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">49%</span>;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">1%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-id">#bber</span> <span class="selector-class">.timeline</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-class">.bber-item</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">0px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-id">#bber</span> <span class="selector-class">.bber-music</span> <span class="selector-class">.aplayer</span>,</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-lrc</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-lrc</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber</span> <span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-lrc</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="js-处理"><a href="#js-处理" class="headerlink" title="js 处理"></a>js 处理</h1><p>新建一个 js 文件用来处理即刻短文的逻辑, 或者写在公共 js 中也可以, 博主写在公共 js 中, 即<code>custom.js</code>, 该 js 在<code>_config.butterfly.yml</code>中的<code>inject</code>使用如下方式引入, 加入了<code>data-pjax</code>, 并且开启了站点的<code>pjax</code>, 然后再引入<code>waterfall.js</code>用于处理瀑布流。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">data-pjax</span> <span class="string">src=&quot;/js/custom.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line">    <span class="comment"># 即刻依赖waterfall</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">data-pjax</span> <span class="string">src=&quot;/js/waterfall/waterfall.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Pjax</span></span><br><span class="line"><span class="comment"># It may contain bugs and unstable, give feedback when you find the bugs.</span></span><br><span class="line"><span class="comment"># https://github.com/MoOx/pjax</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></pre></td></tr></table></figure><p>新建 <code>source/js/waterfall/waterfall.js</code> 内容如下</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">waterfall</span>(<span class="params">a</span>) &#123;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">b</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> c = <span class="variable language_">window</span>.<span class="title function_">getComputedStyle</span>(b);</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">parseFloat</span>(c[<span class="string">&quot;margin&quot;</span> + a]) || <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">c</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">d</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">parseFloat</span>(a.<span class="property">style</span>.<span class="property">top</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">e</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">parseFloat</span>(a.<span class="property">style</span>.<span class="property">left</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a.<span class="property">clientWidth</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">g</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a.<span class="property">clientHeight</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">h</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">d</span>(a) + <span class="title function_">g</span>(a) + <span class="title function_">b</span>(<span class="string">&quot;Bottom&quot;</span>, a);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">i</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">e</span>(a) + <span class="title function_">f</span>(a) + <span class="title function_">b</span>(<span class="string">&quot;Right&quot;</span>, a);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">j</span>(<span class="params">a</span>) &#123;</span><br><span class="line">    a = a.<span class="title function_">sort</span>(<span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="title function_">h</span>(a) === <span class="title function_">h</span>(b) ? <span class="title function_">e</span>(b) - <span class="title function_">e</span>(a) : <span class="title function_">h</span>(b) - <span class="title function_">h</span>(a);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">k</span>(<span class="params">b</span>) &#123;</span><br><span class="line">    <span class="title function_">f</span>(a) != t &amp;&amp; (b.<span class="property">target</span>.<span class="title function_">removeEventListener</span>(b.<span class="property">type</span>, <span class="variable language_">arguments</span>.<span class="property">callee</span>), <span class="title function_">waterfall</span>(a));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="string">&quot;string&quot;</span> == <span class="keyword">typeof</span> a &amp;&amp; (a = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(a));</span><br><span class="line">  <span class="keyword">var</span> l = [].<span class="property">map</span>.<span class="title function_">call</span>(a.<span class="property">children</span>, <span class="keyword">function</span> (<span class="params">a</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> (a.<span class="property">style</span>.<span class="property">position</span> = <span class="string">&quot;absolute&quot;</span>), a;</span><br><span class="line">  &#125;);</span><br><span class="line">  a.<span class="property">style</span>.<span class="property">position</span> = <span class="string">&quot;relative&quot;</span>;</span><br><span class="line">  <span class="keyword">var</span> m = [];</span><br><span class="line">  l.<span class="property">length</span> &amp;&amp; ((l[<span class="number">0</span>].<span class="property">style</span>.<span class="property">top</span> = <span class="string">&quot;0px&quot;</span>), (l[<span class="number">0</span>].<span class="property">style</span>.<span class="property">left</span> = <span class="title function_">c</span>(<span class="title function_">b</span>(<span class="string">&quot;Left&quot;</span>, l[<span class="number">0</span>]))), m.<span class="title function_">push</span>(l[<span class="number">0</span>]));</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> n = <span class="number">1</span>; n &lt; l.<span class="property">length</span>; n++) &#123;</span><br><span class="line">    <span class="keyword">var</span> o = l[n - <span class="number">1</span>],</span><br><span class="line">      p = l[n],</span><br><span class="line">      q = <span class="title function_">i</span>(o) + <span class="title function_">f</span>(p) &lt;= <span class="title function_">f</span>(a);</span><br><span class="line">    <span class="keyword">if</span> (!q) <span class="keyword">break</span>;</span><br><span class="line">    (p.<span class="property">style</span>.<span class="property">top</span> = o.<span class="property">style</span>.<span class="property">top</span>), (p.<span class="property">style</span>.<span class="property">left</span> = <span class="title function_">c</span>(<span class="title function_">i</span>(o) + <span class="title function_">b</span>(<span class="string">&quot;Left&quot;</span>, p))), m.<span class="title function_">push</span>(p);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (; n &lt; l.<span class="property">length</span>; n++) &#123;</span><br><span class="line">    <span class="title function_">j</span>(m);</span><br><span class="line">    <span class="keyword">var</span> p = l[n],</span><br><span class="line">      r = m.<span class="title function_">pop</span>();</span><br><span class="line">    (p.<span class="property">style</span>.<span class="property">top</span> = <span class="title function_">c</span>(<span class="title function_">h</span>(r) + <span class="title function_">b</span>(<span class="string">&quot;Top&quot;</span>, p))), (p.<span class="property">style</span>.<span class="property">left</span> = <span class="title function_">c</span>(<span class="title function_">e</span>(r))), m.<span class="title function_">push</span>(p);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">j</span>(m);</span><br><span class="line">  <span class="keyword">var</span> s = m[<span class="number">0</span>];</span><br><span class="line">  a.<span class="property">style</span>.<span class="property">height</span> = <span class="title function_">c</span>(<span class="title function_">h</span>(s) + <span class="title function_">b</span>(<span class="string">&quot;Bottom&quot;</span>, s));</span><br><span class="line">  <span class="keyword">var</span> t = <span class="title function_">f</span>(a);</span><br><span class="line">  <span class="variable language_">window</span>.<span class="property">addEventListener</span> ? <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;resize&quot;</span>, k) : (<span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">onresize</span> = k);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><code>custom.js</code>内容如下</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> percentFlag = <span class="literal">false</span>; <span class="comment">// 节流阀</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">essayScroll</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> a = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">window</span>.<span class="property">pageYOffset</span>; <span class="comment">// 卷去高度</span></span><br><span class="line">  <span class="keyword">const</span> waterfallResult = a % <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>; <span class="comment">// 卷去一个视口</span></span><br><span class="line">  result &lt;= <span class="number">99</span> || (result = <span class="number">99</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (</span><br><span class="line">    !percentFlag &amp;&amp;</span><br><span class="line">    waterfallResult + <span class="number">100</span> &gt;= <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span> &amp;&amp;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#waterfall&quot;</span>)</span><br><span class="line">  ) &#123;</span><br><span class="line">    <span class="comment">// console.info(waterfallResult, document.documentElement.clientHeight);</span></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="title function_">waterfall</span>(<span class="string">&quot;#waterfall&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">500</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#waterfall&quot;</span>) &amp;&amp; <span class="title function_">waterfall</span>(<span class="string">&quot;#waterfall&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">500</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> r = <span class="variable language_">window</span>.<span class="property">scrollY</span> + <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> p = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;post-comment&quot;</span>) || <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;footer&quot;</span>);</span><br><span class="line"></span><br><span class="line">  (p.<span class="property">offsetTop</span> + p.<span class="property">offsetHeight</span> / <span class="number">2</span> &lt; r || <span class="number">90</span> &lt; result) &amp;&amp; (percentFlag = <span class="literal">true</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">replaceAll</span>(<span class="params">e, n, t</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> e.<span class="title function_">split</span>(n).<span class="title function_">join</span>(t);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> anzhiyu = &#123;</span><br><span class="line">  <span class="attr">diffDate</span>: <span class="keyword">function</span> (<span class="params">d, more = <span class="literal">false</span></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> dateNow = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">    <span class="keyword">const</span> datePost = <span class="keyword">new</span> <span class="title class_">Date</span>(d);</span><br><span class="line">    <span class="keyword">const</span> dateDiff = dateNow.<span class="title function_">getTime</span>() - datePost.<span class="title function_">getTime</span>();</span><br><span class="line">    <span class="keyword">const</span> minute = <span class="number">1000</span> * <span class="number">60</span>;</span><br><span class="line">    <span class="keyword">const</span> hour = minute * <span class="number">60</span>;</span><br><span class="line">    <span class="keyword">const</span> day = hour * <span class="number">24</span>;</span><br><span class="line">    <span class="keyword">const</span> month = day * <span class="number">30</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> result;</span><br><span class="line">    <span class="keyword">if</span> (more) &#123;</span><br><span class="line">      <span class="keyword">const</span> monthCount = dateDiff / month;</span><br><span class="line">      <span class="keyword">const</span> dayCount = dateDiff / day;</span><br><span class="line">      <span class="keyword">const</span> hourCount = dateDiff / hour;</span><br><span class="line">      <span class="keyword">const</span> minuteCount = dateDiff / minute;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">if</span> (monthCount &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">        result = datePost.<span class="title function_">toLocaleDateString</span>().<span class="title function_">replace</span>(<span class="regexp">/\//g</span>, <span class="string">&quot;-&quot;</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (dayCount &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">        result = <span class="built_in">parseInt</span>(dayCount) + <span class="string">&quot; &quot;</span> + <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">date_suffix</span>.<span class="property">day</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (hourCount &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">        result = <span class="built_in">parseInt</span>(hourCount) + <span class="string">&quot; &quot;</span> + <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">date_suffix</span>.<span class="property">hour</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (minuteCount &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">        result = <span class="built_in">parseInt</span>(minuteCount) + <span class="string">&quot; &quot;</span> + <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">date_suffix</span>.<span class="property">min</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        result = <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">date_suffix</span>.<span class="property">just</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      result = <span class="built_in">parseInt</span>(dateDiff / day);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">changeTimeInEssay</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#bber&quot;</span>) &amp;&amp;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;#bber time&quot;</span>).<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">e</span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> t = e,</span><br><span class="line">          datetime = t.<span class="title function_">getAttribute</span>(<span class="string">&quot;datetime&quot;</span>);</span><br><span class="line">        (t.<span class="property">innerText</span> = anzhiyu.<span class="title function_">diffDate</span>(datetime, <span class="literal">true</span>)), (t.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;inline&quot;</span>);</span><br><span class="line">      &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">reflashEssayWaterFall</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#waterfall&quot;</span>) &amp;&amp;</span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="title function_">waterfall</span>(<span class="string">&quot;#waterfall&quot;</span>);</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;waterfall&quot;</span>).<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;show&quot;</span>);</span><br><span class="line">      &#125;, <span class="number">500</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">commentText</span>: <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (e == <span class="string">&quot;undefined&quot;</span> || e == <span class="string">&quot;null&quot;</span>) e = <span class="string">&quot;好棒！&quot;</span>;</span><br><span class="line">    <span class="keyword">var</span> n = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;el-textarea__inner&quot;</span>)[<span class="number">0</span>],</span><br><span class="line">      t = <span class="variable language_">document</span>.<span class="title function_">createEvent</span>(<span class="string">&quot;HTMLEvents&quot;</span>);</span><br><span class="line">    <span class="keyword">if</span> (!n) <span class="keyword">return</span>;</span><br><span class="line">    t.<span class="title function_">initEvent</span>(<span class="string">&quot;input&quot;</span>, !<span class="number">0</span>, !<span class="number">0</span>);</span><br><span class="line">    <span class="keyword">var</span> o = <span class="title function_">replaceAll</span>(e, <span class="string">&quot;\n&quot;</span>, <span class="string">&quot;\n&gt; &quot;</span>);</span><br><span class="line">    (n.<span class="property">value</span> = <span class="string">&quot;&gt; &quot;</span> + o + <span class="string">&quot;\n\n&quot;</span>), n.<span class="title function_">dispatchEvent</span>(t);</span><br><span class="line">    <span class="keyword">var</span> i = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#post-comment&quot;</span>).<span class="property">offsetTop</span>;</span><br><span class="line">    <span class="variable language_">window</span>.<span class="title function_">scrollTo</span>(<span class="number">0</span>, i - <span class="number">80</span>),</span><br><span class="line">      n.<span class="title function_">focus</span>(),</span><br><span class="line">      n.<span class="title function_">setSelectionRange</span>(-<span class="number">1</span>, -<span class="number">1</span>),</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;comment-tips&quot;</span>) &amp;&amp; <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;comment-tips&quot;</span>).<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;show&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">anzhiyu.<span class="title function_">changeTimeInEssay</span>();</span><br><span class="line">anzhiyu.<span class="title function_">reflashEssayWaterFall</span>();</span><br></pre></td></tr></table></figure><p>其中<code>anzhiyu</code>变量中存储的四个方法</p><ol><li><code>diffDate</code>为处理时间的方法,其实 btf 中也有,只是不太喜欢那个的显示方式,就改成现在这个了。</li><li><code>changeTimeInEssay</code> 初始化即刻时间</li><li><code>reflashEssayWaterFall</code> 处理瀑布流显示</li><li><code>commentText</code> 处理点击跳转评论并添加评论</li></ol><p>方法<code>essayScroll</code>为检查滚动条卷去一个视口高度的 100 范围内执行一次, 滑动到底部或评论区取消监听执行。此处博主未做 else 处理取消监听, 如果有写<code>percent</code>函数监听滑动可以一起写在同一个方法里面。<del>（博主就是写在同一个方法里面）</del>, 如果即刻文章很少的话其实是可以不监听滑动的, 即只显示近 30 条, 因为进入页面后会执行一次瀑布流, 页面不会乱, 但是如果您把 <code>essay.pug</code> 中 17 行左右修改后可以达到无限的效果就会出现 dom 结构还没渲染瀑布流就已经执行完了的情况就需要监听滚动来再次执行瀑布流以完成布局。</p><h1 id="首页滚动显示即刻-可选"><a href="#首页滚动显示即刻-可选" class="headerlink" title="首页滚动显示即刻(可选)"></a>首页滚动显示即刻(可选)</h1><p>创建 <code>themes/butterfly/layout/includes/bbTimeList.pug</code>, 部分<code>fontawesome图标</code>可能需要您自行修改。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">#bbTimeList.bbTimeList.container</span><br><span class="line">    svg.icon.bber-logo.iconfont.icon-chrome(onclick=`pjax.loadUrl(&quot;/essay/&quot;)`,title=&quot;即刻短文&quot;,aria-hidden=&quot;true&quot;)</span><br><span class="line">      use(xlink:href=&quot;#icon-chrome&quot;)</span><br><span class="line">    #bbtalk.swiper-container.swiper-no-swiping.essay_bar_swiper_container(tabindex=&quot;-1&quot;)</span><br><span class="line">      #bber-talk.swiper-wrapper(onclick=`pjax.loadUrl(&quot;/essay/&quot;)`)</span><br><span class="line">        each i in site.data.essay</span><br><span class="line">          each item, index in i.essay_list</span><br><span class="line">            if index &lt; 10</span><br><span class="line">              - var contentText = item.image ? item.content + &#x27; [图片]&#x27; : item.content</span><br><span class="line">              .li-style.swiper-slide= contentText</span><br><span class="line"></span><br><span class="line">    i.bber-gotobb.fas.fa-arrow-circle-right(onclick=`pjax.loadUrl(&quot;/essay/&quot;)`,title=&quot;查看全文&quot;)</span><br></pre></td></tr></table></figure><h1 id="引入到主页"><a href="#引入到主页" class="headerlink" title="引入到主页"></a>引入到主页</h1><p>修改<code>themes/butterfly/layout/index.pug</code>, 注意缩进</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">block content</span><br><span class="line">  include ./includes/mixins/post-ui.pug</span><br><span class="line">  #recent-posts.recent-posts</span><br><span class="line">    include includes/categoryList.pug</span><br><span class="line"><span class="addition">+   include includes/bbTimeList.pug</span></span><br><span class="line">    +postUI</span><br><span class="line">    include includes/pagination.pug</span><br></pre></td></tr></table></figure><p>如果需要像本站一样在整个顶部引入的话可以参考下面的代码，修改<code>themes/butterfly/layout/includes/layout.pug</code></p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">if page.type !== &#x27;404&#x27;</span><br><span class="line">  #body-wrap(class=pageType)</span><br><span class="line">    include ./header/index.pug</span><br><span class="line"><span class="addition">+   if (is_home())</span></span><br><span class="line"><span class="addition">+     include ./bbTimeList.pug</span></span><br></pre></td></tr></table></figure><h1 id="引入-swiper-依赖"><a href="#引入-swiper-依赖" class="headerlink" title="引入 swiper 依赖"></a>引入 swiper 依赖</h1><p>在<code>_config.butterfly.yml</code>引入依赖, 如果有使用轮播图插件的话此处无需引入</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><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">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">data-pjax</span> <span class="string">src=&quot;https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><h1 id="添加自定义-css"><a href="#添加自定义-css" class="headerlink" title="添加自定义 css"></a>添加自定义 css</h1><p>创建<code>source/css/essay_page/home_essay_bar.css</code>, 然后在<code>_config.butterfly.yml</code>中的<code>inject</code>下的<code>head</code>引入, 注意缩进</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><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">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/css/essay_page/home_essay_bar.css&quot;&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#bbTimeList</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.5rem</span> <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">30px</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-lightblack);</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">1rem</span> auto <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border);</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-id">#bbTimeList</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#000</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bbtalk</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#bber-talk</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bber-logo</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.5rem</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">22px</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.bber-gotobb</span> &#123;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span> ease <span class="number">0s</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bber-talk</span> <span class="selector-class">.li-style</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">margin</span>: auto;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#bbTimeList</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-hover);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-main);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 文章页H1-H6图标样式效果 */</span></span><br><span class="line"><span class="selector-class">.bbTimeList</span> <span class="selector-class">.bber-logo</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">animation</span>: rotate <span class="number">1.6s</span> linear infinite;</span><br><span class="line">  <span class="attribute">animation</span>: rotate <span class="number">1.6s</span> linear infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@-webkit-keyframes</span> rotate &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">to</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">1turn</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">1turn</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> rotate &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">to</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">1turn</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">1turn</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="修改自定义-js"><a href="#修改自定义-js" class="headerlink" title="修改自定义 js"></a>修改自定义 js</h1><p>修改<code>custom.js</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> percentFlag = <span class="literal">false</span>; <span class="comment">// 节流阀</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">essayScroll</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> a = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">window</span>.<span class="property">pageYOffset</span>; <span class="comment">// 卷去高度</span></span><br><span class="line">  <span class="keyword">const</span> waterfallResult = a % <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>; <span class="comment">// 卷去一个视口</span></span><br><span class="line">  result &lt;= <span class="number">99</span> || (result = <span class="number">99</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (</span><br><span class="line">    !percentFlag &amp;&amp;</span><br><span class="line">    waterfallResult + <span class="number">100</span> &gt;= <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span> &amp;&amp;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#waterfall&quot;</span>)</span><br><span class="line">  ) &#123;</span><br><span class="line">    <span class="comment">// console.info(waterfallResult, document.documentElement.clientHeight);</span></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="title function_">waterfall</span>(<span class="string">&quot;#waterfall&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">500</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#waterfall&quot;</span>) &amp;&amp; <span class="title function_">waterfall</span>(<span class="string">&quot;#waterfall&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">500</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> r = <span class="variable language_">window</span>.<span class="property">scrollY</span> + <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> p = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;post-comment&quot;</span>) || <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;footer&quot;</span>);</span><br><span class="line"></span><br><span class="line">  (p.<span class="property">offsetTop</span> + p.<span class="property">offsetHeight</span> / <span class="number">2</span> &lt; r || <span class="number">90</span> &lt; result) &amp;&amp; (percentFlag = <span class="literal">true</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">replaceAll</span>(<span class="params">e, n, t</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> e.<span class="title function_">split</span>(n).<span class="title function_">join</span>(t);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> anzhiyu = &#123;</span><br><span class="line">  <span class="attr">diffDate</span>: <span class="keyword">function</span> (<span class="params">d, more = <span class="literal">false</span></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> dateNow = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">    <span class="keyword">const</span> datePost = <span class="keyword">new</span> <span class="title class_">Date</span>(d);</span><br><span class="line">    <span class="keyword">const</span> dateDiff = dateNow.<span class="title function_">getTime</span>() - datePost.<span class="title function_">getTime</span>();</span><br><span class="line">    <span class="keyword">const</span> minute = <span class="number">1000</span> * <span class="number">60</span>;</span><br><span class="line">    <span class="keyword">const</span> hour = minute * <span class="number">60</span>;</span><br><span class="line">    <span class="keyword">const</span> day = hour * <span class="number">24</span>;</span><br><span class="line">    <span class="keyword">const</span> month = day * <span class="number">30</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> result;</span><br><span class="line">    <span class="keyword">if</span> (more) &#123;</span><br><span class="line">      <span class="keyword">const</span> monthCount = dateDiff / month;</span><br><span class="line">      <span class="keyword">const</span> dayCount = dateDiff / day;</span><br><span class="line">      <span class="keyword">const</span> hourCount = dateDiff / hour;</span><br><span class="line">      <span class="keyword">const</span> minuteCount = dateDiff / minute;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">if</span> (monthCount &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">        result = datePost.<span class="title function_">toLocaleDateString</span>().<span class="title function_">replace</span>(<span class="regexp">/\//g</span>, <span class="string">&quot;-&quot;</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (dayCount &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">        result = <span class="built_in">parseInt</span>(dayCount) + <span class="string">&quot; &quot;</span> + <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">date_suffix</span>.<span class="property">day</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (hourCount &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">        result = <span class="built_in">parseInt</span>(hourCount) + <span class="string">&quot; &quot;</span> + <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">date_suffix</span>.<span class="property">hour</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (minuteCount &gt;= <span class="number">1</span>) &#123;</span><br><span class="line">        result = <span class="built_in">parseInt</span>(minuteCount) + <span class="string">&quot; &quot;</span> + <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">date_suffix</span>.<span class="property">min</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        result = <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">date_suffix</span>.<span class="property">just</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      result = <span class="built_in">parseInt</span>(dateDiff / day);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">changeTimeInEssay</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#bber&quot;</span>) &amp;&amp;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;#bber time&quot;</span>).<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">e</span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> t = e,</span><br><span class="line">          datetime = t.<span class="title function_">getAttribute</span>(<span class="string">&quot;datetime&quot;</span>);</span><br><span class="line">        (t.<span class="property">innerText</span> = anzhiyu.<span class="title function_">diffDate</span>(datetime, <span class="literal">true</span>)), (t.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&quot;inline&quot;</span>);</span><br><span class="line">      &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">reflashEssayWaterFall</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#waterfall&quot;</span>) &amp;&amp;</span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="title function_">waterfall</span>(<span class="string">&quot;#waterfall&quot;</span>);</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;waterfall&quot;</span>).<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;show&quot;</span>);</span><br><span class="line">      &#125;, <span class="number">500</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">commentText</span>: <span class="keyword">function</span> (<span class="params">txt</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> postCommentDom = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#post-comment&quot;</span>);</span><br><span class="line">    <span class="keyword">var</span> domTop = postCommentDom.<span class="property">offsetTop</span>;</span><br><span class="line">    <span class="variable language_">window</span>.<span class="title function_">scrollTo</span>(<span class="number">0</span>, domTop - <span class="number">80</span>);</span><br><span class="line">    <span class="keyword">if</span> (txt == <span class="string">&quot;undefined&quot;</span> || txt == <span class="string">&quot;null&quot;</span>) txt = <span class="string">&quot;好棒！&quot;</span>;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">setText</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">var</span> input = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;el-textarea__inner&quot;</span>)[<span class="number">0</span>];</span><br><span class="line">        <span class="keyword">if</span> (!input) <span class="title function_">setText</span>();</span><br><span class="line">        <span class="keyword">let</span> evt = <span class="variable language_">document</span>.<span class="title function_">createEvent</span>(<span class="string">&quot;HTMLEvents&quot;</span>);</span><br><span class="line">        evt.<span class="title function_">initEvent</span>(<span class="string">&quot;input&quot;</span>, <span class="literal">true</span>, <span class="literal">true</span>);</span><br><span class="line">        <span class="keyword">let</span> inputValue = <span class="title function_">replaceAll</span>(txt, <span class="string">&quot;\n&quot;</span>, <span class="string">&quot;\n&gt; &quot;</span>);</span><br><span class="line">        input.<span class="property">value</span> = <span class="string">&quot;&gt; &quot;</span> + inputValue + <span class="string">&quot;\n\n&quot;</span>;</span><br><span class="line">        input.<span class="title function_">dispatchEvent</span>(evt);</span><br><span class="line">        input.<span class="title function_">focus</span>();</span><br><span class="line">        input.<span class="title function_">setSelectionRange</span>(-<span class="number">1</span>, -<span class="number">1</span>);</span><br><span class="line">        <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;comment-tips&quot;</span>)) &#123;</span><br><span class="line">          <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;comment-tips&quot;</span>).<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;show&quot;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;, <span class="number">100</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">setText</span>();</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">initIndexEssay</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">let</span> essay_bar_swiper = <span class="keyword">new</span> <span class="title class_">Swiper</span>(<span class="string">&quot;.essay_bar_swiper_container&quot;</span>, &#123;</span><br><span class="line">        <span class="attr">passiveListeners</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">direction</span>: <span class="string">&quot;vertical&quot;</span>,</span><br><span class="line">        <span class="attr">loop</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">autoplay</span>: &#123;</span><br><span class="line">          <span class="attr">disableOnInteraction</span>: <span class="literal">true</span>,</span><br><span class="line">          <span class="attr">delay</span>: <span class="number">3000</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">mousewheel</span>: <span class="literal">true</span>,</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">let</span> essay_bar_comtainer = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;bbtalk&quot;</span>);</span><br><span class="line">      <span class="keyword">if</span> (essay_bar_comtainer !== <span class="literal">null</span>) &#123;</span><br><span class="line">        essay_bar_comtainer.<span class="property">onmouseenter</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">          essay_bar_swiper.<span class="property">autoplay</span>.<span class="title function_">stop</span>();</span><br><span class="line">        &#125;;</span><br><span class="line">        essay_bar_comtainer.<span class="property">onmouseleave</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">          essay_bar_swiper.<span class="property">autoplay</span>.<span class="title function_">start</span>();</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;, <span class="number">100</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">anzhiyu.<span class="title function_">initIndexEssay</span>();</span><br><span class="line">anzhiyu.<span class="title function_">changeTimeInEssay</span>();</span><br><span class="line">anzhiyu.<span class="title function_">reflashEssayWaterFall</span>();</span><br></pre></td></tr></table></figure><p>主要是新增了在<code>anzhiyu</code>变量中的<code>initIndexEssay</code>方法, 该方法用于初始化 swiper 轮播。</p><p>教程就到这里啦～, 相册集也是同理所做, 可以自行魔改。</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> 教程 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Safari浏览器兼容正则表达式零宽断言</title>
      <link href="/posts/4190.html"/>
      <url>/posts/4190.html</url>
      
        <content type="html"><![CDATA[<p>最近在做关于界面的数据统计模块过程中要使用到正则表达式匹配 <code>span 元素开头</code> 和 <code>p 标签结尾</code>的字符</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/19/634f9685b65de.webp!blogimg" alt="数据统计模块"></p><p>于是开心的下了如下正则表达式匹配这串数据</p><h2 id="数据内容"><a href="#数据内容" class="headerlink" title="数据内容"></a>数据内容</h2><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;网站数据概况&lt;/p&gt;&lt;p&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;4&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;33&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;2&lt;/span&gt;&lt;span&gt;95&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;3&lt;/span&gt;&lt;span&gt;103&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;4&lt;/span&gt;&lt;span&gt;269&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;5&lt;/span&gt;&lt;span&gt;5523&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;6&lt;/span&gt;&lt;span&gt;7601&lt;/span&gt;&lt;/p&gt;</span><br></pre></td></tr></table></figure><h2 id="正则匹配"><a href="#正则匹配" class="headerlink" title="正则匹配"></a>正则匹配</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> num = data.<span class="title function_">match</span>(<span class="regexp">/(?&lt;=&lt;\/span&gt;&lt;span&gt;).*?(?=&lt;\/span&gt;&lt;\/p&gt;)/g</span>);</span><br></pre></td></tr></table></figure><p>谷歌浏览器表现完美, 然而一到 Safari 浏览器里面就 g 了, 然后查了一下兼容性发现 Safari 居然不支持零宽断言</p><p>即不支持使用如<code>?&lt;=</code> 或 <code>?=</code>, 这么一来就难受了哇.</p><p>随即我立马去除了零宽断言转而使用了替换的方法来使 Safari 兼容</p><p>先使用普通正则匹配</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> num = data.<span class="title function_">match</span>(<span class="regexp">/(&lt;\/span&gt;&lt;span&gt;).*?(\/span&gt;&lt;\/p&gt;)/g</span>);</span><br></pre></td></tr></table></figure><p>匹配出来的为 <code>&lt;/span&gt;&lt;span&gt;4&lt;/span&gt;&lt;/p&gt;</code> 这种字符串</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/19/634f96a6e8053.jpg!blogimg" alt="正则匹配"></p><p>然后再使用 map ➕ replace 去除前后多余的内容即可获取到正常的内容数字</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">num = num.<span class="title function_">map</span>(<span class="function"><span class="params">el</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">let</span> val = el.<span class="title function_">replace</span>(<span class="regexp">/(&lt;\/span&gt;&lt;span&gt;)/g</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">  <span class="keyword">let</span> str = val.<span class="title function_">replace</span>(<span class="regexp">/(&lt;\/span&gt;&lt;\/p&gt;)/g</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">  <span class="keyword">return</span> str;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><h2 id="完整代码"><a href="#完整代码" class="headerlink" title="完整代码"></a>完整代码</h2><blockquote><p>注意以下代码的掩码 ID 是 51LA 统计代码中普通安装中的 动态掩码 id 值<br><img src="https://img02.anheyu.com/adminuploads/1/2022/10/20/635094ab05c59.jpg!blogimg" alt="掩码id"></p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">fetch</span>(<span class="string">&quot;https://v6-widget.51.la/v6/&#123;动态掩码ID&#125;/quote.js&quot;</span>)</span><br><span class="line">  .<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> res.<span class="title function_">text</span>())</span><br><span class="line">  .<span class="title function_">then</span>(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> title = [<span class="string">&quot;最近活跃&quot;</span>, <span class="string">&quot;今日人数&quot;</span>, <span class="string">&quot;今日访问&quot;</span>, <span class="string">&quot;昨日人数&quot;</span>, <span class="string">&quot;昨日访问&quot;</span>, <span class="string">&quot;本月访问&quot;</span>, <span class="string">&quot;总访问量&quot;</span>];</span><br><span class="line">    <span class="comment">// let num = data.match(/(?&lt;=&lt;\/span&gt;&lt;span&gt;).*?(?=&lt;\/span&gt;&lt;\/p&gt;)/g)</span></span><br><span class="line">    <span class="keyword">let</span> num = data.<span class="title function_">match</span>(<span class="regexp">/(&lt;\/span&gt;&lt;span&gt;).*?(\/span&gt;&lt;\/p&gt;)/g</span>);</span><br><span class="line"></span><br><span class="line">    num = num.<span class="title function_">map</span>(<span class="function"><span class="params">el</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">let</span> val = el.<span class="title function_">replace</span>(<span class="regexp">/(&lt;\/span&gt;&lt;span&gt;)/g</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">      <span class="keyword">let</span> str = val.<span class="title function_">replace</span>(<span class="regexp">/(&lt;\/span&gt;&lt;\/p&gt;)/g</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">      <span class="keyword">return</span> str;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> s = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;statistic&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量</span></span><br><span class="line">    <span class="keyword">let</span> statistic = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; num.<span class="property">length</span>; i++) &#123;</span><br><span class="line">      <span class="keyword">if</span> (i == <span class="number">0</span> || i == num.<span class="property">length</span> - <span class="number">1</span>) <span class="keyword">continue</span>;</span><br><span class="line">      s.<span class="property">innerHTML</span> += <span class="string">&quot;&lt;div&gt;&lt;span&gt;&quot;</span> + title[i] + <span class="string">&quot;&lt;/span&gt;&lt;span id=&quot;</span> + title[i] + <span class="string">&quot;&gt;&quot;</span> + num[i] + <span class="string">&quot;&lt;/span&gt;&lt;/div&gt;&quot;</span>;</span><br><span class="line">      <span class="title function_">queueMicrotask</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        statistic.<span class="title function_">push</span>(<span class="keyword">new</span> <span class="title class_">CountUp</span>(title[i], <span class="number">0</span>, num[i], <span class="number">0</span>, <span class="number">2</span>, <span class="title class_">CountUpOptions</span>));</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure><p>如有错误, 欢迎指正。😶‍🌫️</p>]]></content>
      
      
      
        <tags>
            
            <tag> 开发日记 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>vue朝花夕拾04</title>
      <link href="/posts/4a9f.html"/>
      <url>/posts/4a9f.html</url>
      
        <content type="html"><![CDATA[<h1 id="什么是响应式"><a href="#什么是响应式" class="headerlink" title="什么是响应式?"></a>什么是响应式?</h1><blockquote><p>我们先来看一下响应式意味着什么?我们来看一段代码:</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> m = <span class="number">20</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(m * <span class="number">2</span>);</span><br></pre></td></tr></table></figure><p>m 有一个初始化的值，有一段代码使用了这个值;<br>那么在 m 有一个新的值时，这段代码可以自动重新执行;</p><blockquote><p>上面的这样一种可以自动响应数据变量的代码机制，我们就称之为是响应式的。</p></blockquote><p>那么我们再来看一下对象的响应式:</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e056283319.jpg" alt="什么是响应式.jpg"></p><h1 id="响应式函数设计"><a href="#响应式函数设计" class="headerlink" title="响应式函数设计"></a>响应式函数设计</h1><blockquote><p>首先，执行的代码中可能不止一行代码，所以我们可以将这些代码放到一个函数中:</p></blockquote><p>那么我们的问题就变成了，当数据发生变化时，自动去执行某一个函数;<br><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e00df96aef.jpg" alt="响应式函数设计.jpg"></p><blockquote><p>但是有一个问题:在开发中我们是有很多的函数的，我们如何区分一个函数需要响应式，还是不需要响应式呢?</p></blockquote><p>很明显，下面的函数中 foo 需要在 obj 的 name 发生变化时，重新执行，做出相应;</p><p>bar 函数是一个完全独立于 obj 的函数，它不需要执行任何响应式的操作;<br><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e00df99ea2.jpg" alt="响应式函数设计1.jpg"></p><h1 id="响应式函数的实现-watchFn"><a href="#响应式函数的实现-watchFn" class="headerlink" title="响应式函数的实现 watchFn"></a>响应式函数的实现 watchFn</h1><blockquote><p>但是我们怎么区分呢?</p></blockquote><p>这个时候我们封装一个新的函数 watchFn;<br>凡是传入到 watchFn 的函数，就是需要响应式的;<br>其他默认定义的函数都是不需要响应式的;</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e03c60d5d9.webp" alt="响应式函数的实现watchFn.webp"></p><h1 id="响应式依赖的收集"><a href="#响应式依赖的收集" class="headerlink" title="响应式依赖的收集"></a>响应式依赖的收集</h1><blockquote><p>目前我们收集的依赖是放到一个数组中来保存的，但是这里会存在数据管理的问题:</p></blockquote><p>我们在实际开发中需要监听很多对象的响应式;<br>这些对象需要监听的不只是一个属性，它们很多属性的变化，都会有对应的响应式函数;<br>我们不可能在全局维护一大堆的数组来保存这些响应函数;</p><blockquote><p>所以我们要设计一个类，这个类用于管理某一个对象的某一个属性的所有响应式函数:</p></blockquote><p>相当于替代了原来的简单 reactiveFns 的数组;</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e03c5f01e8.webp" alt="响应式依赖的收集.webp"></p><h1 id="监听对象的变化"><a href="#监听对象的变化" class="headerlink" title="监听对象的变化"></a>监听对象的变化</h1><blockquote><p>那么我们接下来就可以通过之前学习的方式来监听对象的变量:</p></blockquote><ol><li><p>方式一:通过 Object.defineProperty 的方式(vue2 采用的方式);</p></li><li><p>方式二:通过 new Proxy 的方式(vue3 采用的方式);</p></li></ol><blockquote><p>我们这里先以 Proxy 的方式来监听:</p></blockquote><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e03c605ab7.webp" alt="监听对象的变化.webp"></p><h1 id="对象的依赖管理"><a href="#对象的依赖管理" class="headerlink" title="对象的依赖管理"></a>对象的依赖管理</h1><blockquote><p>我们目前是创建了一个 Depend 对象，用来管理对于 name 变化需要监听的响应函数:</p></blockquote><p>但是实际开发中我们会有不同的对象，另外会有不同的属性需要管理;</p><blockquote><p>我们如何可以使用一种数据结构来管理不同对象的不同依赖关系呢?</p></blockquote><p>答案是 <code>WeakMap</code></p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e03c5abf99.webp" alt="对象的依赖管理.webp"></p><h1 id="对象依赖管理的实现"><a href="#对象依赖管理的实现" class="headerlink" title="对象依赖管理的实现"></a>对象依赖管理的实现</h1><p>我们可以写一个 getDepend 函数专门来管理这种依赖关系:</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e03c5b7b30.webp" alt="对象依赖管理的实现.webp"></p><h1 id="正确的依赖收集"><a href="#正确的依赖收集" class="headerlink" title="正确的依赖收集"></a>正确的依赖收集</h1><blockquote><p>我们之前收集依赖的地方是在 watchFn 中:</p></blockquote><p>但是这种收集依赖的方式我们根本不知道是哪一个 key 的哪一个 depend 需要收集依赖;<br>你只能针对一个单独的 depend 对象来添加你的依赖对象;</p><blockquote><p>那么正确的应该是在哪里收集呢?应该在我们调用了 Proxy 的 get 捕获器时</p></blockquote><p>因为如果一个函数中使用了某个对象的 key，那么它应该被收集依赖;</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e03c618d38.webp" alt="正确的依赖收集.webp"></p><h1 id="对-Depend-重构"><a href="#对-Depend-重构" class="headerlink" title="对 Depend 重构"></a>对 Depend 重构</h1><blockquote><p>但是这里有两个问题:</p></blockquote><ol><li>问题一:如果函数中有用到两次 key，比如 name，那么这个函数会被收集两次;</li><li>问题二:我们并不希望将添加 reactiveFn 放到 get 中，以为它是属于 Dep 的行为;</li></ol><blockquote><p>所以我们需要对 Depend 类进行重构:</p></blockquote><p>解决问题一的方法:不使用数组，而是使用 Set;<br>解决问题二的方法:添加一个新的方法，用于收集依赖;</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e03c5b6976.webp" alt="对Depend重构.webp"></p><h1 id="创建响应式对象"><a href="#创建响应式对象" class="headerlink" title="创建响应式对象"></a>创建响应式对象</h1><p>我们目前的响应式是针对于 obj 一个对象的，我们可以创建出来一个函数，针对所有的对象都可以变成响应式对象:</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e03c5b2c8e.webp" alt="创建响应式对象.webp"></p><h1 id="Vue2-响应式原理"><a href="#Vue2-响应式原理" class="headerlink" title="Vue2 响应式原理"></a>Vue2 响应式原理</h1><p>我们前面所实现的响应式的代码，其实就是 Vue3 中的响应 式原理:</p><ul><li>Vue3 主要是通过 Proxy 来监听数据的变化以及收集相关 的依赖的;</li><li>Vue2 中通过我们前面学习过的 Object.defineProerty 的方式来实现对象属性的监听;</li></ul><p>我们可以将 reactive 函数进行如下的重构:</p><ul><li>在传入对象时，我们可以遍历所有的 key，并且通过属性存储描述符来监听属性的获取和修改;</li><li>在 setter 和 getter 方法中的逻辑和前面的 Proxy 是一致 的;</li></ul><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/18/634e03c609ee3.webp" alt="vue2响应式原理.webp"></p><h1 id="完整代码"><a href="#完整代码" class="headerlink" title="完整代码"></a>完整代码</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 保存当前需要收集的响应式函数</span></span><br><span class="line"><span class="keyword">let</span> activeReactiveFn = <span class="literal">null</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Depend优化:</span></span><br><span class="line"><span class="comment"> *  1&gt; depend方法</span></span><br><span class="line"><span class="comment"> *  2&gt; 使用Set来保存依赖函数, 而不是数组[]</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Depend</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">reactiveFns</span> = <span class="keyword">new</span> <span class="title class_">Set</span>();</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// addDepend(reactiveFn) &#123;</span></span><br><span class="line">  <span class="comment">//   this.reactiveFns.add(reactiveFn)</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line">  <span class="title function_">depend</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (activeReactiveFn) &#123;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">reactiveFns</span>.<span class="title function_">add</span>(activeReactiveFn);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">notify</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">reactiveFns</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">fn</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="title function_">fn</span>();</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 封装一个响应式的函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">watchFn</span>(<span class="params">fn</span>) &#123;</span><br><span class="line">  activeReactiveFn = fn;</span><br><span class="line">  <span class="title function_">fn</span>();</span><br><span class="line">  activeReactiveFn = <span class="literal">null</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 封装一个获取depend函数</span></span><br><span class="line"><span class="keyword">const</span> targetMap = <span class="keyword">new</span> <span class="title class_">WeakMap</span>();</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getDepend</span>(<span class="params">target, key</span>) &#123;</span><br><span class="line">  <span class="comment">// 根据target对象获取map的过程</span></span><br><span class="line">  <span class="keyword">let</span> map = targetMap.<span class="title function_">get</span>(target);</span><br><span class="line">  <span class="keyword">if</span> (!map) &#123;</span><br><span class="line">    map = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line">    targetMap.<span class="title function_">set</span>(target, map);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 根据key获取depend对象</span></span><br><span class="line">  <span class="keyword">let</span> depend = map.<span class="title function_">get</span>(key);</span><br><span class="line">  <span class="keyword">if</span> (!depend) &#123;</span><br><span class="line">    depend = <span class="keyword">new</span> <span class="title class_">Depend</span>();</span><br><span class="line">    map.<span class="title function_">set</span>(key, depend);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> depend;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">reactive</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">  <span class="comment">// &#123;name: &quot;anzhiyu&quot;, age: 18&#125;</span></span><br><span class="line">  <span class="comment">// ES6之前, 使用Object.defineProperty</span></span><br><span class="line">  <span class="title class_">Object</span>.<span class="title function_">keys</span>(obj).<span class="title function_">forEach</span>(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> value = obj[key];</span><br><span class="line">    <span class="title class_">Object</span>.<span class="title function_">defineProperty</span>(obj, key, &#123;</span><br><span class="line">      <span class="attr">get</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> depend = <span class="title function_">getDepend</span>(obj, key);</span><br><span class="line">        depend.<span class="title function_">depend</span>();</span><br><span class="line">        <span class="keyword">return</span> value;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">set</span>: <span class="keyword">function</span> (<span class="params">newValue</span>) &#123;</span><br><span class="line">        value = newValue;</span><br><span class="line">        <span class="keyword">const</span> depend = <span class="title function_">getDepend</span>(obj, key);</span><br><span class="line">        depend.<span class="title function_">notify</span>();</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> obj;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 监听对象的属性变量: Proxy(vue3)/Object.defineProperty(vue2)</span></span><br><span class="line"><span class="keyword">const</span> objProxy = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;anzhiyu&quot;</span>, <span class="comment">// depend对象</span></span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>, <span class="comment">// depend对象</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> infoProxy = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">  <span class="attr">address</span>: <span class="string">&quot;长沙市&quot;</span>,</span><br><span class="line">  <span class="attr">height</span>: <span class="number">1.88</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="title function_">watchFn</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(infoProxy.<span class="property">address</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">infoProxy.<span class="property">address</span> = <span class="string">&quot;北京市&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> foo = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;foo&quot;</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="title function_">watchFn</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(foo.<span class="property">name</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">foo.<span class="property">name</span> = <span class="string">&quot;bar&quot;</span>;</span><br><span class="line">foo.<span class="property">name</span> = <span class="string">&quot;hhh&quot;</span>;</span><br></pre></td></tr></table></figure>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
            <tag> vue </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>vue朝花夕拾03</title>
      <link href="/posts/88de.html"/>
      <url>/posts/88de.html</url>
      
        <content type="html"><![CDATA[<h1 id="v-model-的基本使用"><a href="#v-model-的基本使用" class="headerlink" title="v-model 的基本使用"></a>v-model 的基本使用</h1><p><strong>表单提交</strong>是开发中非常常见的功能，也是和用户交互的重要手段:</p><ul><li>比如用户在<code>登录、注册</code>时需要提交账号密码;</li><li>比如用户在<code>检索、创建、更新</code>信息时，需要提交一些数据;</li></ul><p>这些都要求我们可以在<strong>代码逻辑中获取到用户提交的数据</strong>，我们通常会使用 <strong>v-model 指令</strong>来完成:</p><ul><li><code>v-model 指令</code>可以在表单 input、textarea 以及 select 元素上创建<code>双向数据绑定</code>;</li><li>它会根据<code>控件类型</code>自动选取正确的方法来更新元素;</li><li>尽管有些神奇，<code>但 v-model 本质上不过是语法糖</code>，它<code>负责监听用户的输入事件来更新数据</code>，并在某种极端场景下进行一些特 殊处理;</li></ul><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/17/634d4269a0962.jpg" alt="v-model的基本使用.jpg"></p><h1 id="v-model-的原理"><a href="#v-model-的原理" class="headerlink" title="v-model 的原理"></a>v-model 的原理</h1><blockquote><p>官方有说到，<code>v-model 的原理</code>其实是背后有两个操作:</p></blockquote><p><code>v-bind 绑定 value 属性</code>的值;<br><code>v-on 绑定 input 事件</code>监听到函数中，函数会获取最新的值赋值到绑定的属性中;</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/17/634d427cc09bf.jpg" alt="v-model的原理.jpg"></p><h1 id="事实上-v-model-更加复杂"><a href="#事实上-v-model-更加复杂" class="headerlink" title="事实上 v-model 更加复杂"></a>事实上 v-model 更加复杂</h1><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/17/634d427e15a7c.jpg" alt="事实上v-model更加复杂.jpg"></p><h1 id="v-model-绑定-表单元素"><a href="#v-model-绑定-表单元素" class="headerlink" title="v-model 绑定 表单元素"></a>v-model 绑定 表单元素</h1><ol><li><p>v-model 绑定 textarea<br>我们来看一下绑定 textarea:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">cols</span>=<span class="string">&quot;30&quot;</span> <span class="attr">rows</span>=<span class="string">&quot;10&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;content&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>输入的内容: &#123;&#123;content&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>v-model 绑定 checkbox<br>我们来看一下 v-model 绑定 <code>checkbox</code>:单个勾选框和多个勾选框</p><p>单个勾选框:</p><ul><li>v-model 即为<code>布尔值</code>。</li><li>此时 input 的 value 属性并不影响 v-model 的值。</li></ul><p>多个复选框:</p><ul><li>当是<code>多个复选框</code>时，因为可以选中多个，所以对应的<code>data 中属性是一个数组</code>。</li><li>当选中某一个时，就会<code>将 input 的 value 添加到数组中</code>。</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1.checkbox单选框: 绑定到属性中的值是一个Boolean --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;agree&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;agree&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;isAgree&quot;</span> /&gt;</span></span><br><span class="line">    同意协议</span><br><span class="line">  <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>单选框: &#123;&#123;isAgree&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 2.checkbox多选框: 绑定到属性中的值是一个Array --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 注意: 多选框当中, 必须明确的绑定一个value值 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;hobbies&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>请选择你的爱好:<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;sing&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;sing&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;hobbies&quot;</span> <span class="attr">value</span>=<span class="string">&quot;sing&quot;</span> /&gt;</span></span><br><span class="line">      唱</span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;jump&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;jump&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;hobbies&quot;</span> <span class="attr">value</span>=<span class="string">&quot;jump&quot;</span> /&gt;</span></span><br><span class="line">      跳</span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;rap&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;rap&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;hobbies&quot;</span> <span class="attr">value</span>=<span class="string">&quot;rap&quot;</span> /&gt;</span></span><br><span class="line">      rap</span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;basketball&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;basketball&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;hobbies&quot;</span> <span class="attr">value</span>=<span class="string">&quot;basketball&quot;</span> /&gt;</span></span><br><span class="line">      篮球</span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>爱好: &#123;&#123;hobbies&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>v-model 绑定 radio</p><p>v-model 绑定<code>radio</code>，用于选择其中一项;</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gender&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;male&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;male&quot;</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;gender&quot;</span> <span class="attr">value</span>=<span class="string">&quot;male&quot;</span> /&gt;</span></span><br><span class="line">      男</span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;female&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;female&quot;</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;gender&quot;</span> <span class="attr">value</span>=<span class="string">&quot;female&quot;</span> /&gt;</span></span><br><span class="line">      女</span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>性别: &#123;&#123;gender&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>v-model 绑定 select<br>和 checkbox 一样，select 也分单选和多选两种情况。</p><blockquote><p>单选:只能选中一个值</p></blockquote><ul><li>v-model 绑定的是一个值;</li><li>当我们选中 option 中的一个时，会将它对应的 value 赋值到 fruit 中;</li></ul><blockquote><p>多选:可以选中多个值</p></blockquote><ul><li>v-model 绑定的是一个数组;</li><li>当选中多个值时，就会将选中的 option 对应的 value 添加到数组 fruit 中;</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- select的单选 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">select</span> <span class="attr">v-model</span>=<span class="string">&quot;fruit&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;apple&quot;</span>&gt;</span>苹果<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;orange&quot;</span>&gt;</span>橘子<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;banana&quot;</span>&gt;</span>香蕉<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>单选: &#123;&#123;fruit&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- select的多选 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">select</span> <span class="attr">multiple</span> <span class="attr">size</span>=<span class="string">&quot;3&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;fruits&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;apple&quot;</span>&gt;</span>苹果<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;orange&quot;</span>&gt;</span>橘子<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;banana&quot;</span>&gt;</span>香蕉<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>多选: &#123;&#123;fruits&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li></ol><h1 id="v-model-的值绑定"><a href="#v-model-的值绑定" class="headerlink" title="v-model 的值绑定"></a>v-model 的值绑定</h1><p><strong>目前我们在前面的案例中<code>大部分的值</code>都是<code>在 template 中固定好的</code>:</strong></p><ul><li>比如 gender 的两个输入框值 male、female;</li><li>比如 hobbies 的三个输入框值 basketball、football、tennis;</li></ul><blockquote><p>在真实开发中，我们的<code>数据可能是来自服务器</code>的，那么我们就可以先将值<code>请求下来</code>，<code>绑定到 data 返回的对象</code>中，再<code>通过 v-bind 来 进行值的绑定</code>，这个过程就是<code>值绑定</code>。</p></blockquote><ul><li>这里不再给出具体的做法，因为还是 v-bind 的使用过程。</li></ul><h1 id="v-model-修饰符-lazy"><a href="#v-model-修饰符-lazy" class="headerlink" title="v-model 修饰符 - lazy"></a>v-model 修饰符 - lazy</h1><blockquote><p>lazy 修饰符是什么作用呢?</p></blockquote><p>默认情况下，v-model 在进行双向绑定时，绑定的是<code>input 事件</code>，那么会在每次内容输入后就将最新的值和绑定的属性进行同 步;<br>如果我们在 v-model 后跟上 lazy 修饰符，那么会将绑定的事件切换为<code>change 事件</code>，只有在提交时(比如回车)才会触发;</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model.lazy</span>=<span class="string">&quot;message&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>message: &#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="v-model-修饰符-number"><a href="#v-model-修饰符-number" class="headerlink" title="v-model 修饰符 - number"></a>v-model 修饰符 - number</h1><blockquote><p>我们先来看一下 v-model 绑定后的值是什么类型的:</p></blockquote><p>message 总是<code>string 类型</code>，即使在我们<code>设置 type 为 number 也是 string 类型</code>;</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>counter:&#123;&#123;counter&#125;&#125;-&#123;&#123;typeof counter&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;number&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;counter2&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>counter2:&#123;&#123;counter2&#125;&#125;-&#123;&#123;typeof counter2&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>如果我们希望转换为<code>数字类型</code>，那么可以使用<code>.number 修饰符</code>:</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model.number</span>=<span class="string">&quot;counter&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>另外，在我们进行<code>逻辑判断</code>时，如果是一个<code>string 类型</code>，在可以转化的情况下<code>会进行隐式转换</code>的:</p></blockquote><p>下面的 score 在进行判断的过程中会进行隐式转化的;</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> score = <span class="string">&quot;100&quot;</span>;</span><br><span class="line"><span class="keyword">if</span> (score &gt; <span class="number">90</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;优秀&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> score);</span><br></pre></td></tr></table></figure><h1 id="v-model-修饰符-trim"><a href="#v-model-修饰符-trim" class="headerlink" title="v-model 修饰符 - trim"></a>v-model 修饰符 - trim</h1><p>如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 3.trim: 去除收尾的空格 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model.trim</span>=<span class="string">&quot;content&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>content: &#123;&#123;content&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 4.使用多个修饰符 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model.lazy.trim</span>=<span class="string">&quot;content&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>content: &#123;&#123;content&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="vue-生命周期"><a href="#vue-生命周期" class="headerlink" title="vue 生命周期"></a>vue 生命周期</h1><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/17/634d48a6a0446.png" alt="vue 生命周期"></p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
            <tag> vue </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>vue朝花夕拾02</title>
      <link href="/posts/495f.html"/>
      <url>/posts/495f.html</url>
      
        <content type="html"><![CDATA[<h1 id="复杂-data-的处理方式"><a href="#复杂-data-的处理方式" class="headerlink" title="复杂 data 的处理方式"></a>复杂 data 的处理方式</h1><p><strong>我们知道，在模板中可以直接通过<code>插值语法</code>显示一些<code>data 中的数据</code>。</strong></p><p><strong>但是在某些情况，我们可能需要<code>对数据进行一些转化</code>后再显示，或者需要<code>将多个数据结合起来</code>进行显示;</strong></p><ul><li>比如我们需要对<code>多个 data 数据进行运算、三元运算符来决定结果、数据进行某种转化</code>后显示;</li><li>在模板中使用<code>表达式</code>，可以非常方便的实现，但是设计它们的初衷是用于<code>简单的运算</code>;</li><li>在模板中放入太多的逻辑会让<code>模板过重和难以维护</code>;</li><li>并且如果多个地方都使用到，那么会有大量重复的代码;</li></ul><p><strong>我们有没有什么方法可以将逻辑抽离出去呢?</strong></p><ul><li>可以，其中一种方式就是将逻辑抽取到一个<code>method</code>中，放到 methods 的 options 中;</li><li>但是，这种做法有一个直观的弊端，就是所有的 data 使用过程都会变成了一个<code>方法的调用</code>;</li><li>另外一种方式就是使用计算属性 computed;</li></ul><h1 id="认识计算属性-computed"><a href="#认识计算属性-computed" class="headerlink" title="认识计算属性 computed"></a>认识计算属性 computed</h1><blockquote><p>什么是计算属性呢?</p></blockquote><p>官方并没有给出直接的概念解释;</p><p>而是说:对于<code>任何包含响应式数据的复杂逻辑</code>，你都应该使用<code>计算属性</code>;</p><p><code>计算属性</code>将被混入到组件实例中</p><p>所有 getter 和 setter 的 this 上下文自动地绑定为组件实例;</p><p>计算属性的用法:</p><ul><li>选项:computed</li><li>类型:{ [key: string]: Function | { get: Function, set: Function } }</li></ul><p>那接下来我们通过案例来理解一下这个计算属性。</p><ol><li><p><code> 案例一</code>:我们有两个变量:firstName 和 lastName，希望它们拼接之后在界面上显示;</p></li><li><p><code>案例二</code>:我们有一个分数:score</p><blockquote><p>当 score 大于 60 的时候，在界面上显示及格;<br>当 score 小于 60 的时候，在界面上显示不及格;</p></blockquote></li><li><p><code>案例三</code>:我们有一个变量 message，记录一段文字:比如 Hello World</p><blockquote><p>某些情况下我们是直接显示这段文字;<br>某些情况下我们需要对这段文字进行反转;</p></blockquote></li></ol><blockquote><p>我们可以有三种实现思路:<br><code>思路一</code>:在模板语法中直接使用表达式;<br><code>思路二</code>:使用 method 对逻辑进行抽取;<br><code>思路三</code>:使用计算属性 computed;</p></blockquote><h1 id="案例实现思路"><a href="#案例实现思路" class="headerlink" title="案例实现思路"></a>案例实现思路</h1><ol><li><p>思路一的实现:模板语法</p><ul><li>缺点一:模板中存在大量的复杂逻辑，不便于维护(模板中表达式的初衷是用于简单的计算);</li><li>缺点二:当有多次一样的逻辑时，存在重复的代码;</li><li>缺点三:多次使用的时候，很多运算也需要多次执行，没有缓存;</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 插值语法表达式直接进行拼接 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1.拼接名字 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; firstName + &quot; &quot; + lastName &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; firstName + &quot; &quot; + lastName &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; firstName + &quot; &quot; + lastName &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 2.显示分数等级 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; score &gt;= 60 ? &#x27;及格&#x27;: &#x27;不及格&#x27; &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 3.反转单词显示文本 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; message.split(&quot; &quot;).reverse().join(&quot; &quot;) &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>思路二的实现:method 实现</p><ul><li>缺点一:我们事实上先显示的是一个结果，但是都变成了一种方法的调用;</li><li>缺点二:多次使用方法的时候，没有缓存，也需要多次计算;</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 插值语法表达式直接进行拼接 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1.拼接名字 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; getFullname() &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; getFullname() &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; getFullname() &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 2.显示分数等级 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; getScoreLevel() &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 3.反转单词显示文本 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; reverseMessage() &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">   <span class="title function_">getFullname</span>(<span class="params"></span>) &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">firstName</span> + <span class="string">&quot; &quot;</span> + <span class="variable language_">this</span>.<span class="property">lastName</span></span><br><span class="line">   &#125;,</span><br><span class="line">   <span class="title function_">getScoreLevel</span>(<span class="params"></span>) &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">score</span> &gt;= <span class="number">60</span> ? <span class="string">&quot;及格&quot;</span>: <span class="string">&quot;不及格&quot;</span></span><br><span class="line">   &#125;,</span><br><span class="line">   <span class="title function_">reverseMessage</span>(<span class="params"></span>) &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">message</span>.<span class="title function_">split</span>(<span class="string">&quot; &quot;</span>).<span class="title function_">reverse</span>().<span class="title function_">join</span>(<span class="string">&quot; &quot;</span>)</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure></li><li><p>思路三的实现:computed 实现<br>注意:计算属性看起来像是一个函数，但是我们在使用的时候不需要加()，这个后面讲 setter 和 getter 时会讲到;<br>我们会发现无论是直观上，还是效果上计算属性都是更好的选择;<br>并且计算属性是有缓存的;</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 插值语法表达式直接进行拼接 --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1.拼接名字 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 2.显示分数等级 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; scoreLevel &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 3.反转单词显示文本 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; reverseMessage &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">computed</span>: &#123;</span><br><span class="line">  <span class="comment">// 1.计算属性默认对应的是一个函数</span></span><br><span class="line">  <span class="title function_">fullname</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">firstName</span> + <span class="string">&quot; &quot;</span> + <span class="variable language_">this</span>.<span class="property">lastName</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="title function_">scoreLevel</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">score</span> &gt;= <span class="number">60</span> ? <span class="string">&quot;及格&quot;</span>: <span class="string">&quot;不及格&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="title function_">reverseMessage</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">message</span>.<span class="title function_">split</span>(<span class="string">&quot; &quot;</span>).<span class="title function_">reverse</span>().<span class="title function_">join</span>(<span class="string">&quot; &quot;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li></ol><h1 id="计算属性-vs-methods"><a href="#计算属性-vs-methods" class="headerlink" title="计算属性 vs methods"></a>计算属性 vs methods</h1><p>在上面的实现思路中，我们会发现计算属性和 methods 的实现看起来是差别是不大的，而且我们多次提到计算属性<code>有缓存的</code>。</p><p>接下来我们来看一下同一个计算多次使用，计算属性和 methods 的差异:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 1.methods --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; getFullname() &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; getFullname() &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; getFullname() &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 2.computed --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 修改name值 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeLastname&quot;</span>&gt;</span>修改lastname<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;../lib/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1.创建app</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> app = <span class="title class_">Vue</span>.<span class="title function_">createApp</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// data: option api</span></span></span><br><span class="line"><span class="language-javascript">      <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">firstName</span>: <span class="string">&quot;kobe&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">lastName</span>: <span class="string">&quot;bryant&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">        &#125;;</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">getFullname</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;getFullname-----&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">firstName</span> + <span class="string">&quot; &quot;</span> + <span class="variable language_">this</span>.<span class="property">lastName</span>;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">changeLastname</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">this</span>.<span class="property">lastName</span> = <span class="string">&quot;why&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">computed</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">fullname</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;computed fullname-----&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">          <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">firstName</span> + <span class="string">&quot; &quot;</span> + <span class="variable language_">this</span>.<span class="property">lastName</span>;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2.挂载app</span></span></span><br><span class="line"><span class="language-javascript">    app.<span class="title function_">mount</span>(<span class="string">&quot;#app&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/17/634d0eeabaddb.jpg" alt="计算属性"></p><h1 id="计算属性的缓存"><a href="#计算属性的缓存" class="headerlink" title="计算属性的缓存"></a>计算属性的缓存</h1><blockquote><p>这是什么原因呢?</p></blockquote><p>这是因为计算属性会基于它们的<code>依赖关系进行缓存</code>;<br>在<code>数据不发生变化</code>时，计算属性是<code>不需要重新计算</code>的;<br>但是如果<code>依赖的数据发生变化</code>，在使用时，计算属性依然<code>会重新进行计算</code>;</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/17/634d0fc93b329.jpg" alt="计算属性的缓存"></p><h1 id="计算属性的-setter-和-getter"><a href="#计算属性的-setter-和-getter" class="headerlink" title="计算属性的 setter 和 getter"></a>计算属性的 setter 和 getter</h1><p>计算属性在大多数情况下，只需要一个<code>getter方法</code>即可，所以我们会将计算属性直接<code>写成一个函数</code>。</p><p>但是，如果我们确实想<code>设置计算属性的值</code>呢?<br>这个时候我们也可以给计算属性设置一个<code>setter 的方法</code>;</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">computed</span>: &#123;</span><br><span class="line">  <span class="comment">// 语法糖的写法</span></span><br><span class="line">  <span class="comment">// fullname() &#123;</span></span><br><span class="line">  <span class="comment">//   return this.firstname + &quot; &quot; + this.lastname</span></span><br><span class="line">  <span class="comment">// &#125;,</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 完整的写法:</span></span><br><span class="line">  <span class="attr">fullname</span>: &#123;</span><br><span class="line">    <span class="attr">get</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">firstname</span> + <span class="string">&quot; &quot;</span> + <span class="variable language_">this</span>.<span class="property">lastname</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">set</span>: <span class="keyword">function</span>(<span class="params">value</span>) &#123;</span><br><span class="line">      <span class="keyword">const</span> names = value.<span class="title function_">split</span>(<span class="string">&quot; &quot;</span>)</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">firstname</span> = names[<span class="number">0</span>]</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">lastname</span> = names[<span class="number">1</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h1 id="源码如何对-setter-和-getter-处理呢"><a href="#源码如何对-setter-和-getter-处理呢" class="headerlink" title="源码如何对 setter 和 getter 处理呢?"></a>源码如何对 setter 和 getter 处理呢?</h1><p><strong>你可能觉得很奇怪，Vue 内部是如何对我们传入的是一个 getter，还是说是一个包含 setter 和 getter 的对象进行处理的呢?</strong></p><p>事实上非常的简单，Vue 源码内部只是做了一个逻辑判断而已;</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/17/634d11177f438.jpg" alt="源码如何对 setter 和 getter 处理"></p><h1 id="认识侦听器-watch"><a href="#认识侦听器-watch" class="headerlink" title="认识侦听器 watch"></a>认识侦听器 watch</h1><blockquote><p>什么是侦听器呢?</p></blockquote><p>开发中我们在 data 返回的对象中定义了数据，这个数据通过<code>插值语法等方式绑定到 template</code>中;<br>当数据变化时，template 会自动进行更新来显示最新的数据;<br>但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用<code>侦听器 watch</code>来完成了;</p><p><strong>侦听器的用法如下:</strong></p><ul><li><strong>选项:</strong> watch</li><li><strong>类型:</strong> { [key: string]: string | Function | Object | Array}</li></ul><h1 id="侦听器案例"><a href="#侦听器案例" class="headerlink" title="侦听器案例"></a>侦听器案例</h1><p><strong>举个栗子(例子):</strong></p><p>比如现在我们希望用户在<code>input 中输入一个问题</code>;<br>每当用户输入了最新的内容，我们就获取到最新的内容，并且<code>使用该问题去服务器查询</code>答案;<br>那么，我们就需要实时的去获取最新的数据变化;</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;changeMessage&quot;</span>&gt;</span>修改message<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;../lib/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// Proxy -&gt; Reflect</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 1.创建app</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">const</span> app = <span class="title class_">Vue</span>.<span class="title function_">createApp</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// data: option api</span></span></span><br><span class="line"><span class="language-javascript">      <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">message</span>: <span class="string">&quot;Hello Vue&quot;</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">info</span>: &#123; <span class="attr">name</span>: <span class="string">&quot;why&quot;</span>, <span class="attr">age</span>: <span class="number">18</span> &#125;,</span></span><br><span class="line"><span class="language-javascript">        &#125;;</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">changeMessage</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">this</span>.<span class="property">message</span> = <span class="string">&quot;你好啊, 李银河!&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">this</span>.<span class="property">info</span> = &#123; <span class="attr">name</span>: <span class="string">&quot;kobe&quot;</span> &#125;;</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">      <span class="attr">watch</span>: &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 1.默认有两个参数: newValue/oldValue</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">message</span>(<span class="params">newValue, oldValue</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message数据发生了变化:&quot;</span>, newValue, oldValue);</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">info</span>(<span class="params">newValue, oldValue</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// 2.如果是对象类型, 那么拿到的是代理对象</span></span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// console.log(&quot;info数据发生了变化:&quot;, newValue, oldValue)</span></span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// console.log(newValue.name, oldValue.name)</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// 3.获取原生对象</span></span></span><br><span class="line"><span class="language-javascript">          <span class="comment">// console.log(&#123; ...newValue &#125;)</span></span></span><br><span class="line"><span class="language-javascript">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Vue</span>.<span class="title function_">toRaw</span>(newValue));</span></span><br><span class="line"><span class="language-javascript">        &#125;,</span></span><br><span class="line"><span class="language-javascript">      &#125;,</span></span><br><span class="line"><span class="language-javascript">    &#125;);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 2.挂载app</span></span></span><br><span class="line"><span class="language-javascript">    app.<span class="title function_">mount</span>(<span class="string">&quot;#app&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="侦听器-watch-的配置选项"><a href="#侦听器-watch-的配置选项" class="headerlink" title="侦听器 watch 的配置选项"></a>侦听器 watch 的配置选项</h1><p>我们先来看一个例子:</p><ul><li>当我们点击按钮的时候会<code>修改 info.name</code>的值;</li><li>这个时候我们使用<code>watch 来侦听 info，可以侦听到吗?</code> 答案是<code>不可以</code>。</li></ul><p>这是因为默认情况下，<strong>watch 只是在侦听 info 的引用变化</strong>，对于<strong>内部属性的变化是不会做出响应</strong>的:</p><ul><li>这个时候我们可以使用一个<code>选项 deep</code>进行更深层的侦听;</li><li>注意前面我们说过 watch 里面侦听的属性对应的也可以是一个 Object;</li></ul><p>还有<strong>另外一个属性</strong>，是<strong>希望一开始的就会立即执行一次</strong>:</p><ul><li>这个时候我们使用<code>immediate 选项</code>;</li><li>这个时候无论后面数据是否有变化，侦听的函数都会有限执行一次;</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">watch</span>: &#123;</span><br><span class="line">  <span class="comment">// 默认watch监听不会进行深度监听</span></span><br><span class="line">  <span class="comment">// info(newValue, oldValue) &#123;</span></span><br><span class="line">  <span class="comment">//   console.log(&quot;侦听到info改变:&quot;, newValue, oldValue)</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 进行深度监听</span></span><br><span class="line">  <span class="attr">info</span>: &#123;</span><br><span class="line">    <span class="title function_">handler</span>(<span class="params">newValue, oldValue</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;侦听到info改变:&quot;</span>, newValue, oldValue)</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newValue === oldValue)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 监听器选项:</span></span><br><span class="line">    <span class="comment">// info进行深度监听</span></span><br><span class="line">    <span class="attr">deep</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="comment">// 第一次渲染直接执行一次监听器</span></span><br><span class="line">    <span class="attr">immediate</span>: <span class="literal">true</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;info.name&quot;</span>: <span class="keyword">function</span>(<span class="params">newValue, oldValue</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;name发生改变:&quot;</span>, newValue, oldValue)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="侦听器-watch-的其他方式"><a href="#侦听器-watch-的其他方式" class="headerlink" title="侦听器 watch 的其他方式"></a>侦听器 watch 的其他方式</h1><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/17/634d1369a1ced.jpg" alt="侦听器 watch 的其他方式"></p><blockquote><p>另外一个是 Vue3 文档中没有提到的，但是 Vue2 文档中有提到的是侦听对象的属性:</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;info.name&quot;</span>: <span class="keyword">function</span>(<span class="params">newValue, oldValue</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;name发生改变:&quot;</span>, newValue, oldValue)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>还有另外一种方式就是使用 $watch 的 API:</p></blockquote><blockquote><p>我们可以在 created 的生命周期(后续会讲到)中，使用 this.$watchs 来侦听;</p></blockquote><ul><li><code>第一个参数</code>是要侦听的源;</li><li><code>第二个参数</code>是侦听的回调函数 callback;</li><li><code>第三个参数</code>是额外的其他选项，比如 deep、immediate;</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">created</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.$watch(<span class="string">&quot;message&quot;</span>, <span class="function">(<span class="params">newValue, oldValue</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;message数据变化:&quot;</span>, newValue, oldValue)</span><br><span class="line">  &#125;, &#123; <span class="attr">deep</span>: <span class="literal">true</span> &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
            <tag> vue </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>鱼塘朋友圈部署前端方案</title>
      <link href="/posts/3753.html"/>
      <url>/posts/3753.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>一个好的博客当然需要有自己的鱼塘（坏笑）</p></blockquote><details class="folding-tag" ><summary> 点击查看参考站点 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">参考站点</th></tr></thead><tbody><tr><td align="left">洪哥鱼塘</td><td align="left"><a href="https://blog.zhheo.com/">HEO</a></td></tr></tbody></table>              </div>            </details><p>鱼塘也就是朋友圈使用的项目是 <a href="https://github.com/Rock-Candy-Tea/hexo-circle-of-friends">hexo-circle-of-friends</a></p><p>后端部署文档：<a href="https://fcircle-doc.js.cool/#/backenddeploy">后端部署文档</a></p><p>博主采用的是 server+mysql 的方式进行部署。可以自行选择部署方案，后端部署完成后你就拥有了一个 api 调用地址。</p><p>这篇文章主要讨论前端部署方案</p><h3 id="安装插件"><a href="#安装插件" class="headerlink" title="安装插件"></a>安装插件</h3><p>在博客根目录<code>[Blogroot]</code>下打开终端，运行以下指令（与旧版前端方案不兼容，如有安装旧版请先卸载）：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall hexo-butterfly-fcircle --save</span><br><span class="line">npm uninstall hexo-filter-fcircle --save</span><br><span class="line">npm install hexo-filter-fcircle-anzhiyu --save</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="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># fcircle</span></span><br><span class="line"><span class="comment"># see https://anheyu.com/posts/3753.html</span></span><br><span class="line"><span class="attr">fcircle:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment">#控制开关</span></span><br><span class="line">  <span class="attr">apiurl:</span> <span class="string">https://friends.anheyu.com/</span> <span class="comment">#api地址</span></span><br><span class="line">  <span class="attr">initnumber:</span> <span class="number">30</span> <span class="comment">#【可选】页面初始化展示文章数量</span></span><br><span class="line">  <span class="attr">stepnumber:</span> <span class="number">30</span> <span class="comment">#【可选】每次加载增加的篇数</span></span><br><span class="line">  <span class="attr">css:</span> <span class="string">https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/css/default.css</span> <span class="comment">#【可选】开发者接口，自定义css链接</span></span><br><span class="line">  <span class="attr">js:</span> <span class="string">https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/js/fcircle.js</span> <span class="comment">#【可选】开发者接口，自定义js链接</span></span><br><span class="line">  <span class="attr">fetchJs:</span> <span class="string">https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/js/fetch.js</span></span><br><span class="line">  <span class="attr">randomFriendsPostJS:</span> <span class="string">https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/js/random-friends-post.js</span></span><br><span class="line">  <span class="attr">topIcon:</span> <span class="string">fas</span> <span class="string">fa-arrow-right</span></span><br><span class="line">  <span class="attr">topLink:</span> <span class="string">/about/</span></span><br><span class="line">  <span class="attr">top_background:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/08/21/630249e2df20f.jpg</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">/fcircle</span> <span class="comment">#【可选】fcircle的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html</span></span><br><span class="line">  <span class="attr">front_matter:</span> <span class="comment">#【可选】fcircle页面的 front_matter 配置</span></span><br><span class="line">    <span class="attr">title:</span> <span class="string">朋友圈</span></span><br><span class="line">    <span class="attr">comments:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">aside:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">top_img:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><h3 id="插件参数释义"><a href="#插件参数释义" class="headerlink" title="插件参数释义"></a>插件参数释义</h3><table><thead><tr><th align="left">参数</th><th align="left">备选值&#x2F;类型</th><th align="left">释义</th></tr></thead><tbody><tr><td align="left">enable</td><td align="left">true&#x2F;false</td><td align="left">控制开关</td></tr><tr><td align="left">apiurl</td><td align="left">URL</td><td align="left">api 链接，配置教程参看<a href="https://fcircle-doc.js.cool/#/backenddeploy">后端部署文档</a></td></tr><tr><td align="left">initnumber</td><td align="left">number</td><td align="left">【可选】填写阿拉伯数字，页面展示文章数量，默认 20</td></tr><tr><td align="left">stepnumber</td><td align="left">number</td><td align="left">【可选】填写阿拉伯数字，每次加载增加的篇数，默认 10</td></tr><tr><td align="left">error_img</td><td align="left">URL</td><td align="left">【可选】头像图片加载失败时的默认头像</td></tr><tr><td align="left">css</td><td align="left">URL</td><td align="left">【可选】开发者接口，自定义 css 链接</td></tr><tr><td align="left">js</td><td align="left">URL</td><td align="left">【可选】开发者接口，自定义 js 链接</td></tr><tr><td align="left">fetchJs</td><td align="left">URL</td><td align="left">可选】开发者接口，自定义 fetchJs 链接</td></tr><tr><td align="left">randomFriendsPostJS</td><td align="left">URL</td><td align="left">可选】开发者接口，自定义 randomFriendsPostJS 链接</td></tr><tr><td align="left">path</td><td align="left">string</td><td align="left">【可选】字符串，fcircle 的路径名称。默认为 fcircle，生成的页面为 fcircle&#x2F;index.html</td></tr><tr><td align="left">topIcon</td><td align="left">string</td><td align="left">【可选】字符串，顶部按钮的图标类名</td></tr><tr><td align="left">topLink</td><td align="left">URL</td><td align="left">【可选】字符串，顶部按钮点击跳转的链接（仅支持 pjax 跳转）</td></tr><tr><td align="left">front_matter</td><td align="left">object</td><td align="left">【可选】写法见上文示例，fcircle 页面的 front_matter 配置</td></tr><tr><td align="left">top_background</td><td align="left">URL</td><td align="left">【可选】字符串，页面顶部模块背景图</td></tr></tbody></table><h3 id="样式适配"><a href="#样式适配" class="headerlink" title="样式适配"></a>样式适配</h3><p>安装完成 ✅ 以后，会发现顶部样式有亿点奇怪, 需要与自己的主题样式进行适配, 可以尝试加入以下自定义 css。</p><ol><li><code>颜色说明:</code> 该项目中 css 使用了 css 变量, 添加变量 css 如下, 您可自行修改。</li></ol><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 颜色 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-gray-op</span>: <span class="number">#9999992b</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-top</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-white</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white-op</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-black</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-op</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-none</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-gray</span>: <span class="number">#999999</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-yellow</span>: <span class="number">#ffc93e</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-main</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-main-op</span>: <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-theme</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-main</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-main-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-blue</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">40</span>, <span class="number">109</span>, <span class="number">234</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-white</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-black</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">12px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-yellow</span>: <span class="number">0px</span> <span class="number">38px</span> <span class="number">77px</span> -<span class="number">26px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">201</span>, <span class="number">62</span>, <span class="number">0.12</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-red</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#ee7d7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-green</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#87ee7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-border</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">16px</span> -<span class="number">4px</span> <span class="number">#2c2d300c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-blackdeep</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">16px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-logo-color</span>: <span class="built_in">linear-gradient</span>(<span class="number">215deg</span>, <span class="number">#4584ff</span> <span class="number">30%</span>, <span class="number">#ff7676</span> <span class="number">70%</span>);</span><br><span class="line">  <span class="attr">--style-border</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--anzhiyu-blue-main</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--style-border-hover</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--style-border-dashed</span>: <span class="number">1px</span> dashed <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--style-border-avatar</span>: <span class="number">4px</span> solid <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">  <span class="attr">--style-border-always</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic1</span>: <span class="number">#fefeff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic2</span>: <span class="number">#fcfdff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic2</span>: <span class="number">#08080a</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic1</span>: <span class="number">#0b0b0e</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-main-none</span>: <span class="number">#b8b8b800</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;light&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#d8213c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#363636</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#f7f9fe</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#edf0f7</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#fafcff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#f2f5f8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#edf0f7</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#c0c6d8</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--global-bg</span>: <span class="number">#191919</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#0084ff23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#ff3842</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#18171d</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="number">#0a84ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="number">#f2b94b</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="number">#a1a2b8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">200</span>, <span class="number">200</span>, <span class="number">223</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#121212</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">20px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">28</span>, <span class="number">28</span>, <span class="number">28</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#1d1b26</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#42444a</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li><code>整页背景调整:</code> 可以自行使用样式进行覆盖</li></ol><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#web_bg</span> ~ <span class="selector-class">.page</span><span class="selector-pseudo">:has</span>(<span class="selector-class">.fcircle_page</span>) &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#f7f9fe</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="顶部图片样式修改"><a href="#顶部图片样式修改" class="headerlink" title="顶部图片样式修改"></a>顶部图片样式修改</h3><p>可以通过配置项<code>top_background</code>修改</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>vscode常用插件推荐</title>
      <link href="/posts/aa50.html"/>
      <url>/posts/aa50.html</url>
      
        <content type="html"><![CDATA[<p>工欲善其事，必先利其器。</p><p><code>vscode</code>算是前端的利器了, 也有很大一部分人在使用 <code>WebStorm</code> , 我始终觉得它太大了于是与便弃用了。我相信 vscode 才会是前端开发工具的潮流 😭</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/28/63343c6fddbec.webp"></p><p>在这里推荐几款<code>vscode</code>扩展插件是因为最近问的同学很多，并且给自己做一个记录。</p><ol><li>Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/28/63344725caed7.jpg"></p><p>首先第一个推荐的是 <code>Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code</code> , 不得不说这名字是真长。这是一个汉化插件，可以中文化<code>vscode</code>, 不过总归是有汉化的不太好的地方, 比如我的编译器右键时就有一部分未翻译的，不过基本不影响日常使用已经很棒了啦。</p><ol start="2"><li>Vue Volar extension Pack</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/28/6334476c880fc.jpg"></p><p>开发 vue 的话可以安装这个扩展包，这个扩展包中包括大多数开发 vue3 中需要的扩展，其中包括格式化代码插件<code>Prettier</code>, 路径引入插件<code>Path Intellisense</code>, 自动引入包插件<code>Auto Import</code>等等, 最重要的<code>Vue Language Features (Volar)</code>也有了, 安装完以后开发 vue 几乎就不用安装其他插件就能应付所有场景了, 可以新建一个文件输入<code>vbase</code>以获取 vue 相关的代码提示模版。</p><ol start="3"><li>Bookmarks</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/28/63344743d5f9e.jpg"></p><p>这款插件是书签插件, 在我们查看源码时会发现大量的方法, 函数柯里化的东西, 嵌套大量文件导致我们很难记住每一个方法, 而有了这个插件你就可以快速的<code>插入书签</code>，方便下一次打开这个方法, 快速进入状态。</p><ol start="4"><li>Material Icon Theme</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/28/63344799837f3.jpg"></p><p>这是一款图标插件, 个人比较喜欢这种<code>图标风格</code>, 于是乎便装上了。</p><ol start="5"><li>Live Server</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/28/6334475e3a36b.jpg"></p><p>这是一款可以在本地快速<code>开启一个服务</code>的插件, 如同它的名字一般。安装以后在你想要启动的文件（一般是 html）<code>右键</code>便会出现<code>Open with Live Server</code>, 点击即可开启一个服务, 可以自行修改其快捷键, 偶尔会出现端口占用情况，需要关闭再重新启动即可。</p><ol start="6"><li>Project Manager</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/28/633447aee3ea0.jpg"></p><p>这款插件是一个项目管理插件, 可以在你的<code>vscode左侧</code>显示一个文件夹 📁 的图标, 在<code>项目管理器</code>保存你的项目, 日后可以快速的打开该项目文件夹, 在本窗口或者新窗口都可以, <code>极其方便, 强烈推荐</code>。</p><ol start="7"><li>background-cover</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/28/633447d8c3f6f.jpg"></p><p>这是一个修改<code>vscode背景</code>的插件, 使用该插件修改完背景以后使用管理员启动可能会出现 <code>vscode已损坏字样</code>,可以使用<code>Fix VSCode Checksums</code>解决。</p><ol start="8"><li>Remote - SSH</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/28/633447cb68922.jpg"></p><p>这是一个快速连接远程服务器的插件, 因为我个人需要便下载了这个插件, 能方便的在本地使用 vscode 修改服务器上的文件。</p><p>另外还有许许多多的插件本文未提及, 比如代码提交规范,react,微信小程序,Flutter 等插件, 我相信如果你需要你会找到适合你自己的插件, 也许那时在你的心中 ❤️ 已经有了自己的一套准则, 不必拘泥于编辑器。<psw>vscode 甚至有很多的摸鱼插件, 游戏、小说等都有</psw></p><p>另外提一嘴 vscode 的配置问题, 我觉得要调整的大概就是<code>Tab Size</code>, 我个人习惯于 2 个空格的编程规范于是便调整成了<code>2</code>。再一个就是<code>Bracket Pairs</code> 设置为<code>active</code>开启括号提示。<code>Auto Save</code>设置为<code>onFocusChange</code>,在焦点离开窗口时自动保存文件。</p><p>看到这里相信你已经有了自己的答案, 希望大家都能得到一个属于自己的趁手的代码编辑器。</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 开发 </tag>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Heo同款loading动画</title>
      <link href="/posts/52d8.html"/>
      <url>/posts/52d8.html</url>
      
        <content type="html"><![CDATA[<p>原创<a href="https://blog.zhheo.com/">HEO</a></p><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">洪哥</td><td align="left"><a href="https://blog.zhheo.com/">HEO</a></td></tr></tbody></table>              </div>            </details><p>昨天看到洪哥的加载动画很奇特，就只有一个头像，之前一直以为洪哥没有加载动画<del>原来是加载太快看不到</del></p><h1 id="效果预览"><a href="#效果预览" class="headerlink" title="效果预览"></a>效果预览</h1><p>本站 满屏与 pace 同时启用<br><img src="https://img02.anheyu.com/adminuploads/1/2022/11/21/637b4f7862599.webp" alt="loading 效果预览"></p><h1 id="butterfly-4-5-以上方案"><a href="#butterfly-4-5-以上方案" class="headerlink" title="butterfly 4.5 以上方案"></a>butterfly 4.5 以上方案</h1><p>修改 <code>themes/butterfly/layout/includes/loading/fullpage-loading.pug</code></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#loading-box(onclick=&#x27;document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)&#x27;)</span></span><br><span class="line">  .loading-bg</span><br><span class="line">    div.loading-img</span><br><span class="line">    .loading-image-dot</span><br><span class="line"></span><br><span class="line">script.</span><br><span class="line">  const preloader = &#123;</span><br><span class="line">    endLoading: () =&gt; &#123;</span><br><span class="line">      document.body.style.overflow = <span class="string">&#x27;auto&#x27;</span>;</span><br><span class="line">      document.getElementById(<span class="string">&#x27;loading-box&#x27;</span>).classList.add(<span class="string">&quot;loaded&quot;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    initLoading: () =&gt; &#123;</span><br><span class="line">      document.body.style.overflow = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">      document.getElementById(<span class="string">&#x27;loading-box&#x27;</span>).classList.remove(<span class="string">&quot;loaded&quot;</span>)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  window.addEventListener(<span class="string">&#x27;load&#x27;</span>,()=&gt; &#123; preloader.endLoading() &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (!&#123;theme.pjax &amp;&amp; theme.pjax.enable&#125;) &#123;</span><br><span class="line">    document.addEventListener(<span class="string">&#x27;pjax:send&#x27;</span>, () =&gt; &#123; preloader.initLoading() &#125;)</span><br><span class="line">    document.addEventListener(<span class="string">&#x27;pjax:complete&#x27;</span>, () =&gt; &#123; preloader.endLoading() &#125;)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><p>修改<code>themes/butterfly/layout/includes/loading/index.pug</code></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> theme.preloader.source === <span class="number">1</span></span><br><span class="line">  include ./fullpage-loading.pug</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span> theme.preloader.source === <span class="number">2</span></span><br><span class="line">  include ./pace.pug</span><br><span class="line"><span class="keyword">else</span></span><br><span class="line">  include ./fullpage-loading.pug</span><br><span class="line">  include ./pace.pug</span><br></pre></td></tr></table></figure><p>新建<code>source/css/progress_bar.css</code>, 也可以不做这一步下面配置文件<code>pace_css_url</code>这一项就要留空, 这一步是修改 pace 加载的胶囊 💊 样式用的</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.pace</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">pointer-events</span>: none;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  -webkit-user-select: none;</span><br><span class="line">  -moz-user-select: none;</span><br><span class="line">  user-select: none;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">2000</span>;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">  <span class="attribute">margin</span>: auto;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">4rem</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#eaecf2</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> <span class="number">#e3e8f7</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.pace-inactive</span> <span class="selector-class">.pace-progress</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span> ease-in;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.pace</span> <span class="selector-class">.pace-progress</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  -moz-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  -ms-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  -o-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  -moz-<span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  -ms-<span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  -o-<span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">2000</span>;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(-<span class="number">45deg</span>, <span class="number">#ee7752</span>, <span class="number">#e73c7e</span>, <span class="number">#23a6d5</span>, <span class="number">#23d5ab</span>);</span><br><span class="line">  <span class="attribute">animation</span>: gradient <span class="number">1.5s</span> ease infinite;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">200%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.pace</span><span class="selector-class">.pace-inactive</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">top</span>: -<span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> gradient &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">50%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>修改<code>themes/butterfly/source/css/_layout/loading.styl</code>, 注意其中颜色代码<code>--anzhiyu-card-bg</code>等需自行替换为自己的色值。</p><figure class="highlight styl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> <span class="built_in">hexo-config</span>(<span class="string">&#x27;preloader&#x27;</span>)</span><br><span class="line">  <span class="selector-class">.loading-bg</span></span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1001</span>;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">    <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line"></span><br><span class="line">  <span class="selector-id">#loading-box</span></span><br><span class="line">    <span class="selector-class">.loading-img</span></span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">margin</span>: auto;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">4px</span> solid <span class="number">#f0f0f2</span>;</span><br><span class="line">      <span class="attribute">animation-duration</span>: .<span class="number">3s</span>;</span><br><span class="line">      <span class="attribute">animation-name</span>: loadingAction;</span><br><span class="line">      <span class="attribute">animation-iteration-count</span>: infinite;</span><br><span class="line">      <span class="attribute">animation-direction</span>: alternate;</span><br><span class="line">    <span class="selector-class">.loading-image-dot</span></span><br><span class="line">      <span class="attribute">width</span>: <span class="number">30px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">      <span class="attribute">background</span>: <span class="number">#6bdf8f</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">6px</span> solid <span class="number">#fff</span>;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">18px</span>, <span class="number">24px</span>);</span><br><span class="line">    &amp;<span class="selector-class">.loaded</span></span><br><span class="line">      <span class="selector-class">.loading-bg</span></span><br><span class="line">        <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">z-index</span>: -<span class="number">1000</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">@keyframes</span> loadingAction</span><br><span class="line">    <span class="number">0%</span> &#123;</span><br><span class="line">        <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="number">100%</span> &#123;</span><br><span class="line">        <span class="attribute">opacity</span>: .<span class="number">4</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure><p>在合适的地方加上自定义 css, 其中 <code>background</code> 的 <code>url 即为 loading 的图片地址</code>。</p><p>不会的同学参考<a href="https://blog.leonus.cn/2022/custom.html">Hexo 博客添加自定义 css 和 js 文件</a></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.loading-img</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/avatar.webp</span>) no-repeat center center;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>最后修改<code>_config.butterfly.yml</code>中<code>preloader</code>选项, 改完以后<code>source: 1</code>为满屏加载无<code>pace胶囊</code>,<code>source: 2</code>为<code>pace胶囊</code>无满屏动画, <code>source: 3</code>是两者都启用。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Loading Animation (加载动画)</span></span><br><span class="line"><span class="attr">preloader:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># source</span></span><br><span class="line">  <span class="comment"># 1. fullpage-loading</span></span><br><span class="line">  <span class="comment"># 2. pace (progress bar)</span></span><br><span class="line">  <span class="comment"># else all</span></span><br><span class="line">  <span class="attr">source:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># pace theme (see https://codebyzach.github.io/pace/)</span></span><br><span class="line">  <span class="attr">pace_css_url:</span> <span class="string">/css/progress_bar.css</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="comment"># 自定义头像</span></span><br></pre></td></tr></table></figure><h1 id="butterfly-4-4-2-以下版本方案"><a href="#butterfly-4-4-2-以下版本方案" class="headerlink" title="butterfly 4.4.2 以下版本方案"></a>butterfly 4.4.2 以下版本方案</h1><details class="folding-tag" ><summary> 旧版方案 </summary>              <div class='content'>              <p>将<code>themes/butterfly/source/css/_layout/loading.styl</code>替换为以下代码，其中颜色代码注意换成自己的。</p><figure class="highlight styl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> <span class="built_in">hexo-config</span>(<span class="string">&#x27;preloader&#x27;</span>)</span><br><span class="line">  <span class="selector-class">.loading-bg</span></span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1001</span>;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">    <span class="attribute">transition</span>: .<span class="number">3s</span>;</span><br><span class="line"></span><br><span class="line">  <span class="selector-id">#loading-box</span></span><br><span class="line">    <span class="selector-class">.loading-img</span></span><br><span class="line">      <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">margin</span>: auto;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">4px</span> solid <span class="number">#f0f0f2</span>;</span><br><span class="line">      <span class="attribute">animation-duration</span>: .<span class="number">3s</span>;</span><br><span class="line">      <span class="attribute">animation-name</span>: loadingAction;</span><br><span class="line">      <span class="attribute">animation-iteration-count</span>: infinite;</span><br><span class="line">      <span class="attribute">animation-direction</span>: alternate;</span><br><span class="line">    <span class="selector-class">.loading-image-dot</span></span><br><span class="line">      <span class="attribute">width</span>: <span class="number">30px</span>;</span><br><span class="line">      <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">      <span class="attribute">background</span>: <span class="number">#6bdf8f</span>;</span><br><span class="line">      <span class="attribute">position</span>: absolute;</span><br><span class="line">      <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">border</span>: <span class="number">6px</span> solid <span class="number">#fff</span>;</span><br><span class="line">      <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">18px</span>, <span class="number">24px</span>);</span><br><span class="line">    &amp;<span class="selector-class">.loaded</span></span><br><span class="line">      <span class="selector-class">.loading-bg</span></span><br><span class="line">        <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">z-index</span>: -<span class="number">1000</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">@keyframes</span> loadingAction</span><br><span class="line">    <span class="number">0%</span> &#123;</span><br><span class="line">        <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="number">100%</span> &#123;</span><br><span class="line">        <span class="attribute">opacity</span>: .<span class="number">4</span>;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure><p>替换<code>themes/butterfly/layout/includes/loading/loading.pug</code>, 其中图片注意换成自己的.</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#loading-box(onclick=&#x27;document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)&#x27;)</span></span><br><span class="line">  .loading-bg</span><br><span class="line">    div.loading-img</span><br><span class="line">    .loading-image-dot</span><br></pre></td></tr></table></figure><p>在合适的地方加上自定义 css, 其中 <code>background</code> 的 <code>url 即为 loading 的图片地址</code>。</p><p>不会的同学参考<a href="https://blog.leonus.cn/2022/custom.html">Hexo 博客添加自定义 css 和 js 文件</a></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.loading-img</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/avatar.webp</span>) no-repeat center center;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>              </div>            </details>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>butterfly导航栏修改方案(自用方案)</title>
      <link href="/posts/8e53.html"/>
      <url>/posts/8e53.html</url>
      
        <content type="html"><![CDATA[<details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>参考洪哥的导航栏修改而来。</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">heo</td><td align="left"><a href="https://blog.zhheo.com/">heo</a></td></tr><tr><td align="left">leonus</td><td align="left"><a href="https://blog.leonus.cn/2022/percent.html">返回顶部 显示网页阅读进度</a></td></tr></tbody></table>              </div>            </details><p>注意 ⚠️ 该教程仅为博主目前使用的方法, 如需移植还需自行修改 js, 比如回到顶部需要调用的方法是在右键菜单中定义的方法,而没有这个方法的同学,可以自行修改<code>nav.pug</code>中的<code>rmf.scrollToTop()</code>方法为<code>btf.scrollToDest(0, 500)</code>方法或您自己的方法, 部分 css 颜色代码您可能需要自行修改。</p><h3 id="预览"><a href="#预览" class="headerlink" title="预览"></a>预览</h3><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/12/631f2f043db18.jpg"></p></div></div></div><h3 id="自定义-css"><a href="#自定义-css" class="headerlink" title="自定义 css"></a>自定义 css</h3><p>添加自定义 css <code>nav_menu.css</code>, 注意其中的颜色代码需自行替换。这里提供一份我的颜色代码。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#nav</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-totop</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.totopbtn</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-totop</span> <span class="selector-id">#percent</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">35px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.nav-fixed</span> <span class="selector-id">#nav-totop</span> <span class="selector-id">#percent</span>,</span><br><span class="line"><span class="selector-class">.page</span> <span class="selector-id">#nav-totop</span> <span class="selector-id">#percent</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--card-bg);</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">13px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-totop</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">35px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.is-top-bar</span>) <span class="selector-id">#percent</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.is-top-bar</span>) <span class="selector-id">#nav-totop</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: width <span class="number">0.3s</span>, opacity <span class="number">0.2s</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-totop</span> <span class="selector-id">#percent</span> &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav-totop</span><span class="selector-pseudo">:hover</span> <span class="selector-id">#percent</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.5</span>);</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-id">#nav-right</span> <span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-totop</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.nav-button</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-id">#menus</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-class">.nav-button</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">35px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">35px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.site-page</span> &#123;</span><br><span class="line">  <span class="attribute">padding-bottom</span>: <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> *<span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 顶栏修改 */</span></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span> <span class="selector-class">.menus_item_child</span> <span class="selector-tag">li</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">2px</span> <span class="number">16px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span> <span class="selector-class">.menus_item_child</span> <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: white <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span> <span class="selector-class">.menus_item_child</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">6px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">3px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span> <span class="selector-class">.menus_item_child</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">top</span>: -<span class="number">19px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#site-name</span>,</span><br><span class="line"><span class="selector-class">.shuoshuo</span> &#123;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#site-name</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#blog_name</span> <span class="selector-id">#site-name</span> <span class="selector-tag">i</span> &#123;</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">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#blog_name</span> <span class="selector-id">#site-name</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.title</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#blog_name</span> <span class="selector-id">#site-name</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.01</span>);</span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 圆角隐藏 */</span></span><br><span class="line"><span class="selector-tag">ul</span><span class="selector-class">.menus_item_child</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 一级菜单居中 */</span></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: fit-content;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.menus_item_child</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">right</span>: auto;</span><br><span class="line">  <span class="attribute">left</span>: auto <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">6px</span> <span class="number">4px</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">35px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">27px</span> <span class="number">5px</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: -<span class="number">14.5px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span> <span class="selector-class">.menus_item_child</span> &#123;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">44px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.page</span> <span class="selector-class">.menus_item</span><span class="selector-pseudo">:hover</span> &gt; <span class="selector-tag">a</span><span class="selector-class">.site-page</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white) <span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">    <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-main);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.nav-fixed</span> <span class="selector-id">#nav</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">58px</span>) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="built_in">calc</span>((<span class="number">100%</span> - <span class="number">1420px</span>) / <span class="number">2</span>);</span><br><span class="line">  backdrop-<span class="attribute">filter</span>: <span class="built_in">saturate</span>(<span class="number">180%</span>) <span class="built_in">blur</span>(<span class="number">20px</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.page</span> <span class="selector-id">#nav</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-main);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#menus</span> &gt; <span class="selector-tag">div</span><span class="selector-class">.menus_items</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">letter-spacing</span>: <span class="number">0.3rem</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0em</span> <span class="number">0.3em</span> <span class="number">0em</span> <span class="number">0.5em</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">35px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">35px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">margin</span>: auto;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-tag">div</span><span class="selector-id">#toggle-menu</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">2px</span> <span class="number">0</span> <span class="number">4px</span> <span class="number">6px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav-totop</span> <span class="selector-class">.totopbtn</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-name</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">color</span>: white <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;回到顶部&quot;</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  -ms-<span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  -o-<span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">45px</span>; <span class="comment">/*如果垂直位置不居中可以微调此值，也可以删了*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-name</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#name-container</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  -webkit-<span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  -moz-<span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  -ms-<span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  -o-<span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#name-container</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50%</span>) <span class="built_in">scale</span>(<span class="number">1.03</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-name</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">30px</span>;</span><br><span class="line">  -webkit-<span class="attribute">animation-timing-function</span>: ease-out;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">center<span class="selector-id">#name-container</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;ZhuZiAYuanJWD&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.nav-fixed</span><span class="selector-class">.nav-visible</span> <span class="selector-id">#name-container</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, <span class="number">60px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.nav-fixed</span><span class="selector-class">.nav-visible</span> <span class="selector-id">#menus</span> <span class="selector-class">.menus_items</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">60px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.nav-fixed</span> <span class="selector-id">#menus</span> <span class="selector-class">.menus_items</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">60px</span>);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.nav-fixed</span> <span class="selector-id">#name-container</span> &#123;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">15%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#name-container</span> &#123;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">60px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.mask-name-container</span> &#123;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">1200px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">992px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.mask-name-container</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">65%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">  <span class="selector-class">.mask-name-container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#sidebar</span> <span class="selector-id">#sidebar-menus</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.site-page</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="built_in">var</span>(--anzhiyu-border-radius);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">i</span><span class="selector-pseudo">:last-child</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-id">#search-button</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.3em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">900px</span>) &#123;</span><br><span class="line">  <span class="selector-id">#nav</span> <span class="selector-class">.back-home-button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-main);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.back-home-button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">35px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">35px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">4px</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.back-home-button</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.back-menu-list-groups</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">55px</span>;</span><br><span class="line">  <span class="attribute">pointer-events</span>: auto;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list-groups</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">65px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border);</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-secondtext);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-border);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0s</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list-group</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list-group</span> <span class="selector-class">.back-menu-list-title</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">8px</span> <span class="number">0</span> <span class="number">0</span> <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: -<span class="number">22px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list-group</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.back-menu-list-title</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list-groups</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-hover);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list</span> <span class="selector-class">.back-menu-item</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">4px</span> <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">4px</span> <span class="number">8px</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list</span> <span class="selector-class">.back-menu-item</span> <span class="selector-class">.back-menu-item-text</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="built_in">var</span>(--global-font-size);</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-id">#blog_name</span> &#123;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: nowrap;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="comment">/* z-index: 102; */</span></span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list</span> <span class="selector-class">.back-menu-item</span> <span class="selector-class">.back-menu-item-icon</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-secondbg);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-class">.back-home-button</span> &#123;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">1300px</span>) &#123;</span><br><span class="line">  <span class="selector-id">#nav</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.03</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-home-button</span> <span class="selector-class">.back-menu-list</span> <span class="selector-class">.back-menu-item</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.back-menu-item-text</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.back-menu-item-icon</span><span class="selector-class">.loading</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">25px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-id">#menus</span> <span class="selector-class">.nav-button</span><span class="selector-class">.long</span> <span class="selector-tag">a</span><span class="selector-class">.totopbtn</span>,</span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-id">#menus</span> <span class="selector-class">.nav-button</span><span class="selector-class">.long</span>,</span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-id">#menus</span> <span class="selector-class">.nav-button</span><span class="selector-class">.long</span> <span class="selector-tag">a</span><span class="selector-class">.totopbtn</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">70px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-id">#menus</span> <span class="selector-class">.nav-button</span><span class="selector-class">.long</span> <span class="selector-tag">a</span><span class="selector-class">.totopbtn</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">35px</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-id">#menus</span> <span class="selector-class">.nav-button</span><span class="selector-class">.long</span> <span class="selector-tag">a</span><span class="selector-class">.totopbtn</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">35px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-id">#search-button</span> &#123;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#nav</span> <span class="selector-class">.nav-button</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.is-top-bar</span>) <span class="selector-id">#nav-totop</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#search-button</span> <span class="selector-tag">a</span><span class="selector-class">.site-page</span><span class="selector-class">.social-icon</span><span class="selector-class">.search</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>颜色 css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 颜色 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-none</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-gray</span>: <span class="number">#999999</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-yellow</span>: <span class="number">#ffc93e</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-main</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-main-op</span>: <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-theme</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-main</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-main-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-blue</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">40</span>, <span class="number">109</span>, <span class="number">234</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-white</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-black</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">12px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-yellow</span>: <span class="number">0px</span> <span class="number">38px</span> <span class="number">77px</span> -<span class="number">26px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">201</span>, <span class="number">62</span>, <span class="number">0.12</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-red</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#ee7d7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-green</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#87ee7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-border</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">16px</span> -<span class="number">4px</span> <span class="number">#2c2d300c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-logo-color</span>: <span class="built_in">linear-gradient</span>(<span class="number">215deg</span>, <span class="number">#4584ff</span> <span class="number">30%</span>, <span class="number">#ff7676</span> <span class="number">70%</span>);</span><br><span class="line">  <span class="attr">--style-border</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--anzhiyu-blue-main</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--style-border-hover</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--style-border-dashed</span>: <span class="number">1px</span> dashed <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--style-border-avatar</span>: <span class="number">4px</span> solid <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">  <span class="attr">--style-border-always</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic1</span>: <span class="number">#fefeff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic2</span>: <span class="number">#fcfdff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic2</span>: <span class="number">#08080a</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic1</span>: <span class="number">#0b0b0e</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;light&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#d8213c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#363636</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#f7f9fe</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#edf0f7</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#fafcff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#f2f5f8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#edf0f7</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#c0c6d8</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#0084ff23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#ff3842</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#18171d</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="number">#0a84ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="number">#f2b94b</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="number">#a1a2b8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">200</span>, <span class="number">200</span>, <span class="number">223</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#121212</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">20px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">28</span>, <span class="number">28</span>, <span class="number">28</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#1d1b26</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#42444a</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="自定义-js"><a href="#自定义-js" class="headerlink" title="自定义 js"></a>自定义 js</h3><p>添加自定义 js，不会的同学参考<a href="https://blog.leonus.cn/2022/custom.html">Hexo 博客添加自定义 css 和 js 文件</a>，开启 pjax，且引入的时候在标签上添加<code>data-pjax</code>属性。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 返回顶部 显示网页阅读进度</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">onscroll</span> = percent; <span class="comment">// 执行函数</span></span><br><span class="line"><span class="comment">// 页面百分比</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">percent</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> a = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">window</span>.<span class="property">pageYOffset</span>, <span class="comment">// 卷去高度</span></span><br><span class="line">    b =</span><br><span class="line">      <span class="title class_">Math</span>.<span class="title function_">max</span>(</span><br><span class="line">        <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollHeight</span>,</span><br><span class="line">        <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollHeight</span>,</span><br><span class="line">        <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">offsetHeight</span>,</span><br><span class="line">        <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">offsetHeight</span>,</span><br><span class="line">        <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">clientHeight</span>,</span><br><span class="line">        <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span></span><br><span class="line">      ) - <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span>, <span class="comment">// 整个网页高度 减去 可视高度</span></span><br><span class="line">    result = <span class="title class_">Math</span>.<span class="title function_">round</span>((a / b) * <span class="number">100</span>), <span class="comment">// 计算百分比</span></span><br><span class="line">    btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#percent&quot;</span>); <span class="comment">// 获取图标</span></span><br><span class="line"></span><br><span class="line">  result &lt;= <span class="number">99</span> || (result = <span class="number">99</span>), (btn.<span class="property">innerHTML</span> = result);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;page-name&quot;</span>).<span class="property">innerText</span> = <span class="variable language_">document</span>.<span class="property">title</span>.<span class="title function_">split</span>(<span class="string">&quot; | 安知鱼&quot;</span>)[<span class="number">0</span>];</span><br></pre></td></tr></table></figure><h3 id="main-js"><a href="#main-js" class="headerlink" title="main.js"></a>main.js</h3><p>为了处理顶栏一闪而过的 bug 修改本地<code>themes/butterfly/source/js/main.js</code>，注意有引用线上版本的话一定要使用本地版本改完再自行上传线上版本</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">  window.scrollCollect = () =&gt; &#123;</span><br><span class="line">        return btf.throttle(function (e) &#123;</span><br><span class="line">          const currentTop = window.scrollY || document.documentElement.scrollTop</span><br><span class="line">          const isDown = scrollDirection(currentTop)</span><br><span class="line">          if (currentTop &gt; 56) &#123;</span><br><span class="line"><span class="addition">+           $header.classList.add(&#x27;is-top-bar&#x27;)</span></span><br><span class="line">            if (isDown) &#123;</span><br><span class="line">              if ($header.classList.contains(&#x27;nav-visible&#x27;)) $header.classList.remove(&#x27;nav-visible&#x27;)</span><br><span class="line">              if (isChatBtnShow &amp;&amp; isChatShow <span class="comment">=== true) &#123;</span></span><br><span class="line">                chatBtnHide()</span><br><span class="line">                isChatShow = false</span><br><span class="line">              &#125;</span><br><span class="line">            &#125; else &#123;</span><br><span class="line">              if (!$header.classList.contains(&#x27;nav-visible&#x27;)) $header.classList.add(&#x27;nav-visible&#x27;)</span><br><span class="line">              if (isChatBtnHide &amp;&amp; isChatShow <span class="comment">=== false) &#123;</span></span><br><span class="line">                chatBtnShow()</span><br><span class="line">                isChatShow = true</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            $header.classList.add(&#x27;nav-fixed&#x27;)</span><br><span class="line">            if (window.getComputedStyle($rightside).getPropertyValue(&#x27;opacity&#x27;) <span class="comment">=== &#x27;0&#x27;) &#123;</span></span><br><span class="line">              $rightside.style.cssText = &#x27;opacity: 0.8; transform: translateX(-58px)&#x27;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125; else &#123;</span><br><span class="line">            if (currentTop <span class="comment">=== 0) &#123;</span></span><br><span class="line"><span class="deletion">-             $header.classList.remove(&#x27;nav-fixed&#x27;, &#x27;nav-visible&#x27;)</span></span><br><span class="line"><span class="addition">+             $header.classList.remove(&#x27;is-top-bar&#x27;)</span></span><br><span class="line">            &#125;</span><br><span class="line">            $rightside.style.cssText = &quot;opacity: &#x27;&#x27;; transform: &#x27;&#x27;&quot;</span><br><span class="line">          &#125;</span><br><span class="line"></span><br><span class="line">          if (document.body.scrollHeight &lt;= innerHeight) &#123;</span><br><span class="line">            $rightside.style.cssText = &#x27;opacity: 0.8; transform: translateX(-58px)&#x27;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;, 200)()</span><br><span class="line">      &#125;</span><br></pre></td></tr></table></figure><h3 id="header-x2F-index-pug"><a href="#header-x2F-index-pug" class="headerlink" title="header&#x2F;index.pug"></a>header&#x2F;index.pug</h3><p>修改<code>themes/butterfly/layout/includes/header/index.pug</code></p><p>其中<code>nav-visible</code>可以控制默认显示的是站点标题还是导航栏菜单。</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">  if top_img !== false</span><br><span class="line">    - var imgSource = top_img &amp;&amp; top_img.indexOf(&#x27;/&#x27;) !== -1 ? `background-image: url(&#x27;$&#123;url_for(top_img)&#125;&#x27;)` : `background: $&#123;top_img&#125;`</span><br><span class="line">    - var bg_img = top_img ? imgSource : &#x27;&#x27;</span><br><span class="line">    - var site_title = page.title || page.tag || page.category || config.title</span><br><span class="line"><span class="deletion">-   - var isHomeClass = is_home() ? &#x27;full_page&#x27; : &#x27;not-home-page&#x27;</span></span><br><span class="line"><span class="addition">+   - var isHomeClass = is_home() ? &#x27;full_page nav-fixed nav-visible&#x27; : &#x27;not-home-page&#x27;</span></span><br><span class="line">    - is_post() ? isHomeClass = &#x27;post-bg&#x27; : isHomeClass</span><br><span class="line">  else</span><br><span class="line">    - var isHomeClass = &#x27;not-top-img&#x27;</span><br></pre></td></tr></table></figure><h3 id="nav-pug"><a href="#nav-pug" class="headerlink" title="nav.pug"></a>nav.pug</h3><p>替换<code>themes/butterfly/layout/includes/header/nav.pug</code>, 改动太多了，懒的对比了 🤡，直接替换好啦</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line">- const &#123; darkmode &#125; = theme</span><br><span class="line">nav<span class="comment">#nav</span></span><br><span class="line">  span<span class="comment">#blog_name</span></span><br><span class="line">    .back-home-button(tabindex=<span class="string">&#x27;-1&#x27;</span>)</span><br><span class="line">      i.back-home-button-icon.fas.fa-grip-vertical</span><br><span class="line">      .back-menu-<span class="built_in">list</span>-groups</span><br><span class="line">        .back-menu-<span class="built_in">list</span>-group</span><br><span class="line">          .back-menu-<span class="built_in">list</span>-title 网页</span><br><span class="line">          .back-menu-<span class="built_in">list</span></span><br><span class="line">            a.back-menu-item(href=<span class="string">&#x27;/&#x27;</span>, title=<span class="string">&#x27;前往博客主页&#x27;</span>, target=<span class="string">&#x27;_blank&#x27;</span>, one-link-mark=<span class="string">&#x27;yes&#x27;</span>)</span><br><span class="line">              img.back-menu-item-icon(src=<span class="string">&#x27;https://img02.anheyu.com/adminuploads/1/2022/09/05/6315ec9737ac4.png&#x27;</span>)</span><br><span class="line">              span.back-menu-item-text 博客</span><br><span class="line">            a.back-menu-item(href=<span class="string">&#x27;https://www.cloud.anheyu.com/&#x27;</span>, rel=<span class="string">&#x27;external nofollow&#x27;</span>, title=<span class="string">&#x27;前往云盘主页&#x27;</span>, target=<span class="string">&#x27;_blank&#x27;</span>, one-link-mark=<span class="string">&#x27;yes&#x27;</span>)</span><br><span class="line">              img.back-menu-item-icon(src=<span class="string">&#x27;https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg&#x27;</span>)</span><br><span class="line">              span.back-menu-item-text 云盘主页</span><br><span class="line">            a.back-menu-item(href=<span class="string">&#x27;https://cloud.anheyu.com/&#x27;</span>, rel=<span class="string">&#x27;external nofollow&#x27;</span>, title=<span class="string">&#x27;前往安知鱼云盘&#x27;</span>, target=<span class="string">&#x27;_blank&#x27;</span>, one-link-mark=<span class="string">&#x27;yes&#x27;</span>)</span><br><span class="line">              img.back-menu-item-icon(src=<span class="string">&#x27;https://img02.anheyu.com/adminuploads/1/2022/04/27/6268e7d9de532.png&#x27;</span>)</span><br><span class="line">              span.back-menu-item-text 安知鱼云盘</span><br><span class="line"></span><br><span class="line">    a<span class="comment">#site-name(href=url_for(&#x27;/&#x27;))</span></span><br><span class="line">      .title <span class="comment">#[=config.title]</span></span><br><span class="line">      i.fa-solid.fa-house</span><br><span class="line"></span><br><span class="line">  div.mask-name-container</span><br><span class="line">    center(<span class="built_in">id</span>=<span class="string">&quot;name-container&quot;</span>)</span><br><span class="line">      a(<span class="built_in">id</span>=<span class="string">&quot;page-name&quot;</span> href=<span class="string">&quot;javascript:rmf.scrollToTop()&quot;</span>) PAGE_NAME</span><br><span class="line"></span><br><span class="line">  <span class="comment">#menus</span></span><br><span class="line">    <span class="keyword">if</span> (theme.algolia_search.enable || theme.local_search.enable)</span><br><span class="line">      div.nav-button<span class="comment">#search-button</span></span><br><span class="line">        a.site-page.social-icon.search</span><br><span class="line">          i.fas.fa-search.fa-fw</span><br><span class="line">          span=<span class="string">&#x27; &#x27;</span>+_p(<span class="string">&#x27;search.title&#x27;</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> darkmode.enable &amp;&amp; darkmode.button</span><br><span class="line">      div.nav-button<span class="comment">#darkmode_navswitch</span></span><br><span class="line">        a.darkmode_switchbutton(<span class="built_in">type</span>=<span class="string">&quot;button&quot;</span> title=_p(<span class="string">&#x27;rightside.night_mode_title&#x27;</span>) onclick=<span class="string">&quot;rmf.switchDarkMode()&quot;</span>)</span><br><span class="line">          i.fas.fa-adjust</span><br><span class="line"></span><br><span class="line">    div.nav-button<span class="comment">#nav-totop</span></span><br><span class="line">      a.totopbtn</span><br><span class="line">        i.fas.fa-arrow-up</span><br><span class="line">        span<span class="comment">#percent(onclick=&quot;btf.scrollToDest(0,500)&quot;) 0</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    !=partial(<span class="string">&#x27;includes/header/menu_item&#x27;</span>, &#123;&#125;, &#123;cache: true&#125;)</span><br><span class="line"></span><br><span class="line">    <span class="comment">#toggle-menu</span></span><br><span class="line">      a.site-page</span><br><span class="line">        i.fas.fa-bars.fa-fw</span><br><span class="line"></span><br></pre></td></tr></table></figure><h3 id="写在最后"><a href="#写在最后" class="headerlink" title="写在最后"></a>写在最后</h3><p>这是一个粗略的教程（抱歉），图标可以在主题配置文件自行更改。</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>给butterfly添加不一样的友链</title>
      <link href="/posts/292d.html"/>
      <url>/posts/292d.html</url>
      
        <content type="html"><![CDATA[<details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left">给<code>hexo-theme-butterfly</code>添加 <a href="https://akilar.top/posts/57291286/">Friend Link Card Beautify</a></td></tr></tbody></table>              </div>            </details><h3 id="预览"><a href="#预览" class="headerlink" title="预览"></a>预览</h3><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/12/08/6391dc27edd1f.jpg"></p></div></div></div><h3 id="魔改步骤"><a href="#魔改步骤" class="headerlink" title="魔改步骤"></a>魔改步骤</h3><p>前半部分偷懒直接把店长的复制过来了。</p><ol><li><p>新建友链页面。已开的可以跳过，从第 2 步开始.<br>参照参考教程中的<a href="https://butterfly.js.org/posts/dc584b87/#%E5%8F%8B%E6%83%85%E9%8F%88%E6%8E%A5">Butterfly 友链界面配置教程</a>先配置好默认友链页面。</p></li><li><p>在 Hexo 博客根目录 <code>[Blogroot]</code>下打开终端，输入</p></li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page <span class="built_in">link</span></span><br></pre></td></tr></table></figure><p>打开<code>[Blogroot]\source\link\index.md</code>,添加一行<code>type: &#39;link&#39;</code>:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: link</span><br><span class="line">date: 2020-12-01 22:19:45</span><br><span class="line"><span class="section">type: &#x27;link&#x27;</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure><p>新建文件<code>[Blogroot]\source\_data\link.yml</code>,没有<code>_data</code>文件夹的话也请自己新建。以下是默认友链格式示例(<del>自己写的教程，夹带点私货不过分吧，嘻嘻</del>)。打开<code>[Blogroot]\source\_data\link.yml</code>，输入：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><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">flink_style:</span> <span class="string">flexcard</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">安知鱼`Blog</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://blog.anheyu.com/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">生活明朗，万物可爱</span></span><br><span class="line">      <span class="attr">siteshot:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg</span></span><br></pre></td></tr></table></figure><p>取消<code>[Blogroot]\_config.butterfly.yml</code>中<code>menu</code>配置项内<code>link</code>页面的注释。</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><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="comment"># List||fas fa-list:</span></span><br><span class="line">  <span class="comment">#   - Music || /music/ || icon-music</span></span><br><span class="line">  <span class="comment">#   - Movie || /movies/ || fas 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="comment"># About: /about/ || fas fa-heart</span></span><br></pre></td></tr></table></figure><p>替换<code>[Blogroot]\themes\butterfly\layout\includes\page\flink.pug</code></p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#article-container</span></span><br><span class="line">  <span class="keyword">if</span> top_img === false</span><br><span class="line">    h1.page-title= page.title</span><br><span class="line">  .flink</span><br><span class="line">    <span class="keyword">if</span> site.data.link</span><br><span class="line">      each i <span class="keyword">in</span> site.data.link</span><br><span class="line">        <span class="keyword">if</span> i.class_name</span><br><span class="line">          h2!= i.class_name</span><br><span class="line">        <span class="keyword">if</span> i.class_desc</span><br><span class="line">          .flink-desc!=i.class_desc</span><br><span class="line">        <span class="keyword">if</span> i.flink_style === <span class="string">&#x27;butterfly&#x27;</span></span><br><span class="line">          .butterfly-flink-<span class="built_in">list</span></span><br><span class="line">            each item <span class="keyword">in</span> i.link_list</span><br><span class="line">              .flink-<span class="built_in">list</span>-item</span><br><span class="line">                a(href=url_for(item.link)  title=item.name target=<span class="string">&quot;_blank&quot;</span>)</span><br><span class="line">                  .flink-item-icon</span><br><span class="line">                    <span class="keyword">if</span> theme.lazyload.enable</span><br><span class="line">                      img(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src=<span class="string">&#x27;` + url_for(theme.error_img.flink) + `&#x27;</span>` alt=item.name )</span><br><span class="line">                    <span class="keyword">else</span></span><br><span class="line">                      img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src=<span class="string">&#x27;` + url_for(theme.error_img.flink) + `&#x27;</span>` alt=item.name )</span><br><span class="line">                  .flink-item-info</span><br><span class="line">                    .flink-item-name= item.name</span><br><span class="line">                    .flink-item-desc(title=item.descr)= item.descr</span><br><span class="line">        <span class="keyword">else</span> <span class="keyword">if</span> i.flink_style === <span class="string">&#x27;flexcard&#x27;</span></span><br><span class="line">          .flexcard-flink-<span class="built_in">list</span></span><br><span class="line">            each item <span class="keyword">in</span> i.link_list</span><br><span class="line">              a.flink-<span class="built_in">list</span>-card(href=url_for(item.link) target=<span class="string">&#x27;_blank&#x27;</span> data-title=item.descr)</span><br><span class="line">                .wrapper.cover</span><br><span class="line">                  - var siteshot = item.siteshot ? url_for(item.siteshot) : <span class="string">&#x27;https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/&#x27;</span> + item.link</span><br><span class="line">                  <span class="keyword">if</span> theme.lazyload.enable</span><br><span class="line">                    img.cover.fadeIn(data-lazy-src=siteshot onerror=`this.onerror=null;this.src=<span class="string">&#x27;` + url_for(theme.error_img.post_page) + `&#x27;</span>` alt=<span class="string">&#x27;&#x27;</span> )</span><br><span class="line">                  <span class="keyword">else</span></span><br><span class="line">                    img.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src=<span class="string">&#x27;` + url_for(theme.error_img.post_page) + `&#x27;</span>` alt=<span class="string">&#x27;&#x27;</span> )</span><br><span class="line">                .info</span><br><span class="line">                  <span class="keyword">if</span> theme.lazyload.enable</span><br><span class="line">                    img.flink-avatar(data-lazy-src=url_for(item.avatar) onerror=`this.onerror=null;this.src=<span class="string">&#x27;` + url_for(theme.error_img.flink) + `&#x27;</span>` alt=<span class="string">&#x27;&#x27;</span> )</span><br><span class="line">                  <span class="keyword">else</span></span><br><span class="line">                    img(src=url_for(item.avatar) onerror=`this.onerror=null;this.src=<span class="string">&#x27;` + url_for(theme.error_img.flink) + `&#x27;</span>` alt=<span class="string">&#x27;&#x27;</span> )</span><br><span class="line">                  span.flink-sitename= item.name</span><br><span class="line">    != page.content</span><br></pre></td></tr></table></figure><p>替换<code>[Blogroot]\themes\butterfly\source\css\_page\flink.styl</code></p><figure class="highlight styl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.flink-desc</span></span><br><span class="line">  <span class="attribute">margin</span>: .<span class="number">2rem</span> <span class="number">0</span> .<span class="number">5rem</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.butterfly-flink-list</span></span><br><span class="line">  <span class="attribute">overflow</span>: auto</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">10px</span> <span class="number">0</span></span><br><span class="line">  <span class="attribute">text-align</span>: center</span><br><span class="line"></span><br><span class="line">  &amp; &gt; <span class="selector-class">.flink-list-item</span></span><br><span class="line">    <span class="attribute">position</span>: relative</span><br><span class="line">    <span class="attribute">float</span>: left</span><br><span class="line">    <span class="attribute">overflow</span>: hidden</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">17px</span></span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">translateZ</span>(<span class="number">0</span>)</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">5</span> - <span class="number">0.5rem</span>)</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0.5rem</span> <span class="number">0.25rem</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border);</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">    -webkit-<span class="attribute">transition</span>: all .<span class="number">3s</span> ease-in-out;</span><br><span class="line">    -moz-<span class="attribute">transition</span>: all .<span class="number">3s</span> ease-in-out;</span><br><span class="line">    -o-<span class="attribute">transition</span>: all .<span class="number">3s</span> ease-in-out;</span><br><span class="line">    -ms-<span class="attribute">transition</span>: all .<span class="number">3s</span> ease-in-out;</span><br><span class="line">    <span class="attribute">transition</span>: all .<span class="number">3s</span> ease-in-out;</span><br><span class="line"></span><br><span class="line">    +<span class="built_in">maxWidth1200</span>()</span><br><span class="line">      <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - <span class="number">15px</span>) <span class="meta">!important</span></span><br><span class="line"></span><br><span class="line">    +<span class="built_in">maxWidth600</span>()</span><br><span class="line">      <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">15px</span>) <span class="meta">!important</span></span><br><span class="line"></span><br><span class="line">    <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">      <span class="attribute">border-color</span>: <span class="built_in">var</span>(--anzhiyu-main)<span class="meta">!important</span>;</span><br><span class="line">      <span class="attribute">background-color</span>: <span class="built_in">var</span>(--anzhiyu-main)<span class="meta">!important</span>;</span><br><span class="line">      <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-theme)<span class="meta">!important</span>;</span><br><span class="line"></span><br><span class="line">      <span class="selector-class">.flink-item-icon</span></span><br><span class="line">        <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">margin-left</span>: -<span class="number">10px</span>;</span><br><span class="line">      <span class="selector-class">.flink-item-name</span>,<span class="selector-class">.flink-item-desc</span></span><br><span class="line">        <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line"></span><br><span class="line">    <span class="selector-pseudo">&amp;:hover</span><span class="selector-pseudo">:before</span>,</span><br><span class="line">    <span class="selector-pseudo">&amp;:focus</span><span class="selector-pseudo">:before</span>,</span><br><span class="line">    <span class="selector-pseudo">&amp;:active</span><span class="selector-pseudo">:before</span></span><br><span class="line">      <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line">    <span class="selector-tag">a</span></span><br><span class="line">      <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color)</span><br><span class="line">      <span class="attribute">text-decoration</span>: none</span><br><span class="line"></span><br><span class="line">      <span class="selector-class">.flink-item-icon</span></span><br><span class="line">        <span class="attribute">float</span>: left</span><br><span class="line">        <span class="attribute">overflow</span>: hidden</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">15px</span> <span class="number">10px</span></span><br><span class="line">        <span class="attribute">width</span>: <span class="number">60px</span></span><br><span class="line">        <span class="attribute">height</span>: <span class="number">60px</span></span><br><span class="line">        <span class="attribute">border-radius</span>: <span class="number">35px</span></span><br><span class="line">        <span class="attribute">transition</span>: all .<span class="number">3s</span> ease-out</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">8px</span> <span class="number">0</span> <span class="number">8px</span> <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">        <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">        <span class="attribute">overflow</span>: hidden;</span><br><span class="line"></span><br><span class="line">        <span class="selector-tag">img</span></span><br><span class="line">          <span class="attribute">width</span>: <span class="number">100%</span></span><br><span class="line">          <span class="attribute">height</span>: <span class="number">100%</span></span><br><span class="line">          <span class="attribute">transition</span>: filter <span class="number">375ms</span> ease-in .<span class="number">2s</span>, transform .<span class="number">3s</span></span><br><span class="line">          <span class="attribute">object-fit</span>: cover</span><br><span class="line"></span><br><span class="line">      <span class="selector-class">.img-alt</span></span><br><span class="line">        <span class="attribute">display</span>: none</span><br><span class="line"><span class="selector-class">.flink-item-info</span></span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: left;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.flink-item-name</span></span><br><span class="line">    <span class="keyword">@extend</span> <span class="selector-class">.limit-one-line</span></span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">12px</span> <span class="number">0</span> <span class="number">16px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">height</span>: auto;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">1.2em</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.flink-item-desc</span></span><br><span class="line">    <span class="keyword">@extend</span> <span class="selector-class">.limit-one-line</span></span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">35px</span></span><br><span class="line">    <span class="attribute">font-size</span>: .<span class="number">93em</span></span><br><span class="line">    <span class="attribute">opacity</span>: .<span class="number">7</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor);</span><br><span class="line">    <span class="attribute">word-break</span>: break-all;</span><br><span class="line">    <span class="attribute">white-space</span>: break-spaces;</span><br><span class="line">    <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    -webkit-box-orient: vertical;</span><br><span class="line">    -webkit-line-clamp: <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.flink-name</span></span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">5px</span></span><br><span class="line">  <span class="attribute">font-weight</span>: bold</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.5em</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">img</span></span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">object-fit</span>: cover;</span><br><span class="line">  <span class="attribute">max-height</span>: <span class="number">900px</span>;</span><br><span class="line"><span class="selector-class">.flexcard-flink-list</span></span><br><span class="line">  <span class="attribute">overflow</span> hidden</span><br><span class="line">  <span class="selector-class">.flink-list-card</span></span><br><span class="line">    <span class="selector-class">.wrapper</span> <span class="selector-tag">img</span></span><br><span class="line">      <span class="attribute">transition</span>: transform .<span class="number">5s</span> ease-out <span class="meta">!important</span>;</span><br><span class="line">    <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">      <span class="attribute">border-color</span>: <span class="built_in">var</span>(--anzhiyu-main)<span class="meta">!important</span>;</span><br><span class="line">      <span class="attribute">background-color</span>: <span class="built_in">var</span>(--anzhiyu-main)<span class="meta">!important</span>;</span><br><span class="line">      <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-theme)<span class="meta">!important</span>;</span><br><span class="line"></span><br><span class="line">  &amp; &gt; <span class="selector-tag">a</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">5</span> - <span class="number">0.5rem</span>);</span><br><span class="line">    <span class="attribute">height</span> <span class="number">150px</span></span><br><span class="line">    <span class="attribute">position</span> relative</span><br><span class="line">    <span class="attribute">display</span> block</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0.5rem</span> <span class="number">0.25rem</span>;</span><br><span class="line">    <span class="attribute">float</span> left</span><br><span class="line">    <span class="attribute">overflow</span> hidden</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">transition</span> all .<span class="number">3s</span> ease <span class="number">0s</span>, transform .<span class="number">6s</span> <span class="built_in">cubic-bezier</span>(.<span class="number">6</span>, .<span class="number">2</span>, .<span class="number">1</span>, <span class="number">1</span>) <span class="number">0s</span></span><br><span class="line">    <span class="attribute">box-shadow</span> none</span><br><span class="line">    <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border)<span class="meta">!important</span>;</span><br><span class="line">    <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">      <span class="selector-class">.info</span></span><br><span class="line">        <span class="attribute">transform</span> <span class="built_in">translateY</span>(-<span class="number">100%</span>)</span><br><span class="line">      <span class="selector-class">.wrapper</span></span><br><span class="line">        <span class="selector-tag">img</span></span><br><span class="line">          <span class="attribute">transform</span> <span class="built_in">scale</span>(<span class="number">1.2</span>)</span><br><span class="line">      <span class="selector-pseudo">&amp;::before</span></span><br><span class="line">        <span class="attribute">position</span>: fixed</span><br><span class="line">        <span class="attribute">width</span>:inherit</span><br><span class="line">        <span class="attribute">margin</span>:auto</span><br><span class="line">        <span class="attribute">left</span>:<span class="number">0</span></span><br><span class="line">        <span class="attribute">right</span>:<span class="number">0</span></span><br><span class="line">        <span class="attribute">top</span>:<span class="number">10%</span></span><br><span class="line">        <span class="attribute">border-radius</span>: <span class="number">10px</span></span><br><span class="line">        <span class="attribute">text-align</span>: center</span><br><span class="line">        <span class="attribute">z-index</span>: <span class="number">100</span></span><br><span class="line">        <span class="attribute">content</span>: <span class="built_in">attr</span>(data-title)</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">20px</span></span><br><span class="line">        <span class="attribute">color</span>: <span class="number">#fff</span></span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">10px</span></span><br><span class="line">        <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="variable">$theme</span>-color,<span class="number">0.8</span>)</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.cover</span></span><br><span class="line">      <span class="attribute">width</span> <span class="number">100%</span></span><br><span class="line">      <span class="attribute">transition</span> transform .<span class="number">5s</span> ease-out</span><br><span class="line">    <span class="selector-class">.wrapper</span></span><br><span class="line">      <span class="attribute">position</span> relative</span><br><span class="line">      <span class="selector-class">.fadeIn</span></span><br><span class="line">        <span class="attribute">animation</span> coverIn .<span class="number">8s</span> ease-out forwards</span><br><span class="line">      <span class="selector-tag">img</span></span><br><span class="line">        <span class="attribute">height</span> <span class="number">150px</span></span><br><span class="line">        <span class="attribute">pointer-events</span> none</span><br><span class="line">    <span class="selector-class">.info</span></span><br><span class="line">      <span class="attribute">display</span> flex</span><br><span class="line">      <span class="attribute">flex-direction</span> column</span><br><span class="line">      <span class="attribute">justify-content</span> center</span><br><span class="line">      <span class="attribute">align-items</span> center</span><br><span class="line">      <span class="attribute">width</span> <span class="number">100%</span></span><br><span class="line">      <span class="attribute">height</span> <span class="number">100%</span></span><br><span class="line">      <span class="attribute">overflow</span> hidden</span><br><span class="line">      <span class="attribute">border-radius</span> <span class="number">3px</span></span><br><span class="line">      <span class="attribute">background-color</span> <span class="built_in">hsla</span>(<span class="number">0</span>, <span class="number">0%</span>, <span class="number">100%</span>, .<span class="number">7</span>)</span><br><span class="line">      <span class="attribute">transition</span> transform .<span class="number">5s</span> <span class="built_in">cubic-bezier</span>(.<span class="number">6</span>, .<span class="number">2</span>, .<span class="number">1</span>, <span class="number">1</span>) <span class="number">0s</span></span><br><span class="line">      <span class="selector-tag">img</span></span><br><span class="line">        <span class="attribute">position</span> relative</span><br><span class="line">        <span class="attribute">top</span> <span class="number">45px</span></span><br><span class="line">        <span class="attribute">width</span> <span class="number">80px</span></span><br><span class="line">        <span class="attribute">height</span> <span class="number">80px</span></span><br><span class="line">        <span class="attribute">border-radius</span> <span class="number">50%</span></span><br><span class="line">        <span class="attribute">box-shadow</span> <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">3</span>)</span><br><span class="line">        <span class="attribute">z-index</span> <span class="number">1</span></span><br><span class="line">        <span class="attribute">text-align</span> center</span><br><span class="line">        <span class="attribute">pointer-events</span> none</span><br><span class="line">      <span class="selector-tag">span</span></span><br><span class="line">        <span class="attribute">padding</span> <span class="number">20px</span> <span class="number">10%</span> <span class="number">60px</span> <span class="number">10%</span></span><br><span class="line">        <span class="attribute">font-size</span> <span class="number">16px</span></span><br><span class="line">        <span class="attribute">width</span> <span class="number">100%</span></span><br><span class="line">        <span class="attribute">text-align</span> center</span><br><span class="line">        <span class="attribute">box-shadow</span> <span class="number">0</span> <span class="number">0</span> <span class="number">10px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">3</span>)</span><br><span class="line">        <span class="attribute">background-color</span> <span class="built_in">hsla</span>(<span class="number">0</span>, <span class="number">0%</span>, <span class="number">100%</span>, .<span class="number">7</span>)</span><br><span class="line">        <span class="attribute">color</span> <span class="built_in">var</span>(--font-color)</span><br><span class="line">        <span class="attribute">white-space</span> nowrap</span><br><span class="line">        <span class="attribute">overflow</span> hidden</span><br><span class="line">        <span class="attribute">text-overflow</span> ellipsis</span><br><span class="line">.flexcard-flink-list&gt;<span class="selector-tag">a</span> <span class="selector-class">.info</span>,</span><br><span class="line">.flexcard-flink-list&gt;<span class="selector-tag">a</span> <span class="selector-class">.wrapper</span> <span class="selector-class">.cover</span></span><br><span class="line">  <span class="attribute">position</span> absolute</span><br><span class="line">  <span class="attribute">top</span> <span class="number">0</span></span><br><span class="line">  <span class="attribute">left</span> <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">1024px</span>)</span><br><span class="line">  .flexcard-flink-list</span><br><span class="line">    &amp; &gt; a</span><br><span class="line">      <span class="attribute">width</span> calc(<span class="number">33.33333%</span> - <span class="number">15px</span>)</span><br><span class="line"></span><br><span class="line">@media screen <span class="keyword">and</span> (<span class="attribute">max-width</span>:<span class="number">600px</span>)</span><br><span class="line">  .flexcard-flink-list</span><br><span class="line">    &amp; &gt; a</span><br><span class="line">      <span class="attribute">width</span> calc(<span class="number">50%</span> - <span class="number">15px</span>)</span><br><span class="line"></span><br><span class="line">[data-theme=dark]</span><br><span class="line">  .flexcard-flink-list a .info,</span><br><span class="line">  .flexcard-flink-list a .info span</span><br><span class="line">    background-color rgba(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">6</span>)</span><br><span class="line">  .flexcard-flink-list</span><br><span class="line">    &amp; &gt; a</span><br><span class="line">      &amp;:<span class="attribute">hover</span></span><br><span class="line">        &amp;:before</span><br><span class="line">          background-color: rgba(#<span class="number">121212</span>,<span class="number">0.8</span>);</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">a</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">a</span> &gt; <span class="selector-tag">a</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">a</span> &gt; svg,</span><br><span class="line"><span class="selector-class">.justified-gallery</span> &gt; <span class="selector-tag">figure</span> &gt; <span class="selector-tag">a</span> &gt; svg</span><br><span class="line">  <span class="attribute">position</span> static<span class="meta">!important</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><ol start="8"><li>相比店长原教程修改处为不需要在主题配置文件中添加配置项，而是需要在<code>source/_data/link.yml</code>添加配置项</li></ol><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">flink_style:</span> <span class="string">flexcard</span> <span class="string">||</span> <span class="string">butterfly</span></span><br></pre></td></tr></table></figure><p>该参数可选值<code>flexcard</code>或者<code>butterfly</code>分别对应两种样式。</p><p>可能遇到的 bug：使用<code>flexcard</code>样式时，因为全站字体大小配置与本站不一致的关系，可能导致友链卡片的头像位置偏移较大。请读者按照<code>flink.styl</code>里的注释内容自己微调。</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
            <tag> butterfly </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>vue朝花夕拾01</title>
      <link href="/posts/521a.html"/>
      <url>/posts/521a.html</url>
      
        <content type="html"><![CDATA[<h1 id="声明式和命令式"><a href="#声明式和命令式" class="headerlink" title="声明式和命令式"></a>声明式和命令式</h1><p>原生开发和 Vue 开发的模式和特点，我们会发现是完全不同的，这里其实涉及到<code>两种不同的编程范式</code>:</p><div class="tabs" id="声明式和命令式"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#声明式和命令式-1">命令式编程</button></li><li class="tab"><button type="button" data-href="#声明式和命令式-2">声明式编程</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="声明式和命令式-1"><p>命令式编程关注的是 <code>how to do</code>自己完成整个 how 的过程;</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="声明式和命令式-2"><p>声明式编程关注的是 <code>what to do</code>, 由框架(机器)完成 <code>how</code>的过程;</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><blockquote><p>在原生的实现过程中，我们是如何操作的呢?</p></blockquote><p>我们每完成一个操作，都需要通过<code>JavaScript编写一条代码</code>，来给<code>浏览器一个指令</code>;</p><p>这样的编写代码的过程，我们称之为<code>命令式编程</code>;</p><p>在早期的原生 JavaScript 和 jQuery 开发的过程中，我们都是通过这种命令式的方式在编写代码的;</p><blockquote><p>在 Vue 的实现过程中，我们是如何操作的呢?</p></blockquote><p>我们会在 createApp 传入的对象中声明需要的内容，模板 template、数据 data、方法 methods;<br>这样的编写代码的过程，我们称之为是<code>声明式编程</code>;<br>目前 Vue、React、Angular、小程序的编程模式，我们称之为<code>声明式编程</code>;</p><h1 id="MVVM-模型"><a href="#MVVM-模型" class="headerlink" title="MVVM 模型"></a>MVVM 模型</h1><p><code>MVC</code> 和 <code>MVVM</code> 都是一种软件的体系结构</p><p>MVC 是 Model – View –Controller 的简称，是在前期被使用非常框架的架构模式，比如 iOS、前端；<br>MVVM 是 Model-View-ViewModel 的简称，是目前非常流行的架构模式；</p><p>通常情况下，我们也经常称 Vue 是一个 MVVM 的框架。<br>Vue 官方其实有说明，Vue 虽然<code>并没有完全遵守MVVM的模型</code>，但是<code>整个设计是受到它的启发</code>的。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/09/631adabb90cc5.jpg"></p><h1 id="指令"><a href="#指令" class="headerlink" title="指令"></a>指令</h1><details class="folding-tag" ><summary> 点击查看不常用vue指令 </summary>              <div class='content'>              <div class="tabs" id="指令"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#指令-1">v-once</button></li><li class="tab"><button type="button" data-href="#指令-2">v-text</button></li><li class="tab"><button type="button" data-href="#指令-3">v-html</button></li><li class="tab"><button type="button" data-href="#指令-4">v-pre</button></li><li class="tab"><button type="button" data-href="#指令-5">v-cloak</button></li><li class="tab"><button type="button" data-href="#指令-6">v-on支持修饰符</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="指令-1"><p><code>v-once</code>用于指定元素或者组件只渲染一次</p><p>当数据发生变化时，<code>元素或者组件以及其所有的子元素将视为静态内容并且跳过</code>；</p><p>该指令可以用于<code>性能优化</code>；</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="指令-2"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/09/631adabb8e411.png"></p><p>用于更新元素的 textContent</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="指令-3"><p>如果我们希望这个内容被 Vue 可以解析出来，那么可以使用 <code>v-html</code> 来展示</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/09/631adabb8ea6c.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="指令-4"><p><code>v-pre</code>用于跳过元素和它的子元素的编译过程，显示原始的 Mustache 标签：</p><p>跳过不需要编译的节点，<code>加快编译的速度</code>；</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/09/631adabb8d463.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="指令-5"><p>这个指令保持在元素上直到<code>关联组件实例结束编译</code>。<br>和 <code>CSS 规则如 [v-cloak] { display: none } 一起用时</code>，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/09/631adabb8e680.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="指令-6"><p>v-on 支持修饰符，修饰符相当于对事件进行了一些特殊的处理：</p><ul><li>stop - 调用  event.stopPropagation()。</li><li>prevent - 调用  event.preventDefault()。</li><li>capture - 添加事件侦听器时使用 capture 模式。</li><li>self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。</li><li>{keyAlias} - 仅当事件是从特定键触发时才触发回调。</li><li>once - 只触发一次回调。</li><li>left - 只当点击鼠标左键时触发。</li><li>right - 只当点击鼠标右键时触发。</li><li>middle - 只当点击鼠标中键时触发。</li><li>passive - { passive: true }  模式添加侦听器</li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><details class="folding-tag" ><summary> 点击查看常用vue指令 </summary>              <div class='content'>              <div class="tabs" id="常用指令"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#常用指令-1">v-on</button></li><li class="tab"><button type="button" data-href="#常用指令-2">v-if v-else-if v-else</button></li><li class="tab"><button type="button" data-href="#常用指令-3">v-show</button></li><li class="tab"><button type="button" data-href="#常用指令-4">v-show和v-if的区别</button></li><li class="tab"><button type="button" data-href="#常用指令-5">v-bind</button></li><li class="tab"><button type="button" data-href="#常用指令-6">v-for</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="常用指令-1"><p>我们可以使用 v-on 来监听一下<code>点击的事件</code>:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 绑定一个表达式 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;counter++&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">&lt;!-- 绑定到一个methods方法中 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">&quot;btnClick&quot;</span>&gt;</span>按钮1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>v-on:click 可以写成@click，是它的<code>语法糖</code>写法:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- v-on的语法躺 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;btnClick&quot;</span>&gt;</span>按钮2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>当然，我们也可以<code>绑定其他的事件</code>:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 绑定鼠标移动事件 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">mousemove</span>=<span class="string">&quot;mouseMove&quot;</span>&gt;</span>div的区域<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>如果我们希望一个元素<code>绑定多个事件</code>，这个时候可以传入一个对象:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 绑定对象 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on</span>=<span class="string">&quot;&#123;click: btnClick, mousemove: mouseMove&#125;&quot;</span>&gt;</span>特殊按钮3<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p><strong>v-on 参数传递</strong></p><blockquote><p>当通过 methods 中定义方法，以供 <code>@click</code> 调用时，需要注意参数问题</p></blockquote><ol><li><p>情况一:如果该方法不需要额外参数，那么方法后的()可以不添加。<br>但是注意:如果方法本身中有一个参数，那么会默认将原生事件 <code>event</code> 参数传递进去</p></li><li><p>情况二:如果需要同时传入某个参数，同时需要 <code>event</code> 时，可以通过 <code>$event</code> 传入事件。</p></li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/18/6326ba8f24abc.jpg"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="常用指令-2"><p>v-if 的渲染原理:</p><ul><li>v-if 是惰性的;</li><li>当条件为 false 时，其判断的内容完全不会被渲染或者会被销毁掉;</li><li>当条件为 true 时，才会真正渲染条件块中的内容;</li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="常用指令-3"><p>  v-show 和 v-if 的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件:  </p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="常用指令-4"><p>  首先，在用法上的区别:</p><ul><li>v-show 是不支持 template;</li><li>v-show 不可以和 v-else 一起使用;</li></ul><p>其次，本质的区别:</p><ul><li>v-show 元素无论是否需要显示到浏览器上，它的 DOM 实际都是有存在的，只是通过 CSS 的 display 属性来进行切换;</li><li>v-if 当条件为 false 时，其对应的原生压根不会被渲染到 DOM 中;</li></ul><p>开发中如何进行选择呢?</p><ul><li>如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用 v-show;</li><li>如果不会频繁的发生切换，那么使用 v-if;</li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="常用指令-5"><blockquote><p>绑定 class – 对象语法<br><code>对象语法:</code> 我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class。</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;template id=<span class="string">&quot;my-app&quot;</span>&gt;</span><br><span class="line">   &lt;!-- <span class="number">1.</span>普通的绑定方式 --&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;classname&quot;</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">   &lt;!-- <span class="number">2.</span>对象绑定 --&gt;</span><br><span class="line">   &lt;!-- 动态切换<span class="keyword">class</span>是否加入: &#123;类(变量): <span class="title function_">boolean</span>(<span class="literal">true</span>/<span class="literal">false</span>)&#125; --&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;anzhiyu&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;&#123;nba: true, &#x27;james&#x27;: true&#125;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">   &lt;!-- <span class="number">3.</span>案例练习 --&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;&#123;&#x27;active&#x27;: isActive&#125;&quot;</span>&gt;</span>哈哈哈<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&#x27;toggle&#x27;</span>&gt;</span>切换<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">   &lt;!-- <span class="number">4.</span>对象绑定--&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;classObj&quot;</span>&gt;</span>哈哈哈哈<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">   &lt;!-- <span class="number">4.</span>从methods获取--&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;getClassObj()&quot;</span>&gt;</span>呵呵呵<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure><blockquote><p>绑定 class – 数组语法<br><code>数组语法:</code>我们可以把一个数组传给 :class，以应用一个 class 列表</p></blockquote><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;template id=<span class="string">&quot;my-app&quot;</span>&gt;</span><br><span class="line">   &lt;!-- <span class="number">1.</span>直接传入一个数组。--&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;[&#x27;anzhiyu&#x27;,nba]&quot;</span>&gt;</span>MaMal@<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">   &lt;!-- <span class="number">2.</span>数组中也可以使用三元运算符或者绑定变量 --&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;[&#x27;anzhiyu&#x27;, nba, isActive ? &#x27;active&#x27; : &#x27;&#x27;]&quot;</span>&gt;</span>呵呵呵<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">   &lt;!-- <span class="number">3.</span>数组中也可以使用对象语法 --&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;[&#x27;anzhiyu&#x27;,nba,&#123;&#x27;actvie&#x27;: isActive &#125;]&quot;</span>&gt;</span>嘻嘻嘻<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template›</span><br></pre></td></tr></table></figure><blockquote><p>绑定 style 介绍</p></blockquote><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/19/6327b0833b12c.jpg"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="常用指令-6"><blockquote><p>v-for 基本使用</p></blockquote><ol><li>v-for 的基本格式是 <code>&quot;item in 数组&quot;</code>:<ul><li>数组通常是来自 <code>data</code> 或者 <code>prop</code>, 也可以是其他方式;</li><li><code>item</code> 是我们给每项元素起的一个别名，这个别名可以自定来定义;</li></ul></li><li>我们知道，在遍历一个数组的时候会经常需要拿到数组的<code>索引</code>:<ul><li>如果我们需要<code>索引</code>，可以使用格式: <code>&quot;(item, index) in 数组&quot;</code>;</li><li>注意上面的顺序:数组元素项 <code>item</code> 是在前面的，索引项 <code>index</code> 是在后面的;</li></ul></li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;my-app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>电影列表<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;item in movies&quot;</span>&gt;</span>&#123;&#123; item &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;my-app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>电影列表-有索引<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(movie, index) in movies&quot;</span>&gt;</span>&#123;&#123; index + 1 &#125;&#125; - &#123;&#123; movie &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>v-for 支持的类型</p></blockquote><ol><li><p><code>v-for</code> 也支持遍历对象，并且支持有一二三个参数:</p><ul><li>一个参数: <code>&quot;value in object&quot;</code>;</li><li>二个参数: <code>&quot;(value, key) in object&quot;</code>;</li><li>三个参数: <code>&quot;(value, key, index) in object&quot;</code>;</li></ul></li><li><p><code>v-for</code> 同时也支持数字的遍历:</p><ul><li>每一个 item 都是一个数字;</li></ul></li><li><p><code>v-for</code> 也可以遍历其他<code>可迭代对象(Iterable)</code></p></li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;my-app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 1.遍历对象 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(value, key, index) in info&quot;</span>&gt;</span>&#123;&#123;value&#125;&#125;-&#123;&#123;key&#125;&#125;-&#123;&#123;index&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 2.遍历字符串(iterable) --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;item in message&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 3.遍历数字 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;item in 100&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h1 id="template-元素"><a href="#template-元素" class="headerlink" title="template 元素"></a>template 元素</h1><p>类似于<code>v-if</code>，你可以使用 template 元素来循环渲染一段包含多个元素的内容:</p><p>我们使用 <code>template</code> 来对多个元素进行包裹，而不是使用 <code>div</code> 来完成;</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">&quot;my-app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 如果div没有实际的意义, 那么可以使用template替换 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-for</span>=<span class="string">&quot;(value, key) in info&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#123;&#123;key&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#123;&#123;value&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="数组更新检测"><a href="#数组更新检测" class="headerlink" title="数组更新检测"></a>数组更新检测</h1><p>Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括:</p><ul><li><code>push()</code></li><li><code>pop()</code></li><li><code>shift()</code></li><li><code>unshift()</code></li><li><code>splice()</code></li><li><code>sort()</code></li><li><code>reverse()</code></li></ul><p>替换数组的方法</p><ul><li>上面的方法会直接修改原来的数组;</li><li>但是某些方法不会替换原来的数组，而是会生成新的数组，比如 <code>filter()</code>、<code>concat()</code> 和 <code>slice()</code>;</li></ul><h1 id="v-for-中的-key-是什么作用"><a href="#v-for-中的-key-是什么作用" class="headerlink" title="v-for 中的 key 是什么作用?"></a>v-for 中的 key 是什么作用?</h1><p>在使用 v-for 进行列表渲染时，我们通常会给元素或者组件绑定一个 key 属性。</p><blockquote><p>这个 key 属性有什么作用呢?我们先来看一下官方的解释:</p></blockquote><ul><li><code>key 属性</code>主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 <code>VNodes</code>;</li><li>如果不使用 key，Vue 会使用一种<code>最大限度减少动态元素</code>并且尽可能的尝试就地<code>修改/复用相同类型元素</code>的算法;</li><li>而使用 key 时，它会基于 key 的<code>变化重新排列元素顺序</code>，并且会<code>移除/销毁 key 不存在的元素</code>;</li></ul><p>官方的解释对于初学者来说并不好理解，比如下面的问题:</p><blockquote><p>什么是新旧 nodes，什么是 VNode?</p></blockquote><ul><li>没有 key 的时候，如何尝试修改和复用的?</li><li>有 key 的时候，如何基于 key 重新排列的?</li></ul><h1 id="认识-VNode"><a href="#认识-VNode" class="headerlink" title="认识 VNode"></a>认识 VNode</h1><p>我们先来解释一下 VNode 的概念:</p><ul><li>因为目前我们还没有比较完整的学习组件的概念，所以目前我们先理解 HTML 元素创建出来的 VNode; VNode 的全称是 Virtual Node，也就是虚拟节点;</li><li>事实上，无论是组件还是元素，它们最终在 Vue 中表示出来的都是一个个 VNode;</li><li>VNode 的本质是一个 JavaScript 的对象;</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;title&quot;</span> <span class="attr">style</span>=<span class="string">&quot;font-size: 30px; color: red;&quot;</span>&gt;</span>哈哈哈<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> vnode = &#123;</span><br><span class="line">  <span class="attr">type</span>: <span class="string">&quot;div&quot;</span>,</span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="attr">class</span>: <span class="string">&quot;title&quot;</span>,</span><br><span class="line">    <span class="attr">style</span>: &#123;</span><br><span class="line">      <span class="string">&quot;font-size&quot;</span>: <span class="string">&quot;30px&quot;</span>,</span><br><span class="line">      <span class="attr">color</span>: <span class="string">&quot;red&quot;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">children</span>: <span class="string">&quot;哈哈哈&quot;</span>,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bcea6498fa.jpg" alt="vnode"></p><h1 id="虚拟-DOM"><a href="#虚拟-DOM" class="headerlink" title="虚拟 DOM"></a>虚拟 DOM</h1><p>如果我们不只是一个简单的 div，而是有一大堆的元素，那么它们应该会形成一个 <code>VNode Tree</code>:</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bcf1b7f7e5.webp" alt="虚拟 DOM"></p><h1 id="插入-F-的案例"><a href="#插入-F-的案例" class="headerlink" title="插入 F 的案例"></a>插入 F 的案例</h1><p><strong>我们先来看一个案例:这个案例是当我点击按钮时会在中间插入一个 f;</strong></p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bcf8915dac.webp" alt="案例"></p><blockquote><p>我们可以确定的是，这次更新对于 ul 和 button 是不需要进行更新，需 要更新的是我们 li 的列表:</p></blockquote><p>在 Vue 中，对于相同父元素的子元素节点并<code>不会重新渲染整个列表</code>;</p><p>因为对于列表中 <code>a、b、c、d</code> 它们都是<code>没有变化</code>的;</p><p>在操作真实 DOM 的时候，我们只需要在中间插入<code>一个 f 的 li</code> 即可;</p><blockquote><p>那么 Vue 中对于<code>列表的更新</code>究竟是如何操作的呢?</p></blockquote><p>Vue 事实上会对于有 <code>key</code> 和没有 <code>key</code> 会调用<code>两个不同的方法</code>;<br>有 key，那么就使用 <code>patchKeyedChildren</code> 方法;<br>没有 key，那么久使用 <code>patchUnkeyedChildren</code> 方法;</p><h1 id="Vue-源码对于-key-的判断"><a href="#Vue-源码对于-key-的判断" class="headerlink" title="Vue 源码对于 key 的判断"></a>Vue 源码对于 key 的判断</h1><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bd19a04f6e.jpg" alt="Vue 源码对于 key 的判断"></p><h1 id="没有-key-的操作-源码"><a href="#没有-key-的操作-源码" class="headerlink" title="没有 key 的操作(源码)"></a>没有 key 的操作(源码)</h1><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bd27bce4e8.jpg" alt="没有 key 的操作(源码)"></p><h1 id="没有-key-的过程如下"><a href="#没有-key-的过程如下" class="headerlink" title="没有 key 的过程如下"></a>没有 key 的过程如下</h1><p><strong>我们会发现上面的 <code>diff</code> 算法效率并不高:</strong></p><ul><li>c 和 d 来说它们事实上并不需要有任何的改动;</li><li>但是因为我们的 c 被 f 所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增;</li></ul><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bd33424274.webp" alt="没有 key 的过程新增"></p><h1 id="有-key-执行操作-源码"><a href="#有-key-执行操作-源码" class="headerlink" title="有 key 执行操作(源码)"></a>有 key 执行操作(源码)</h1><p><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bd52c735f2.jpg" alt="有 key 执行操作(源码)"></p><h1 id="有-key-的-diff-算法-一"><a href="#有-key-的-diff-算法-一" class="headerlink" title="有 key 的 diff 算法(一)"></a>有 key 的 diff 算法(一)</h1><p>第一步的操作是从头开始进行遍历、比较:</p><ul><li><p>a 和 b 是一致的会继续进行比较;</p></li><li><p>c 和 f 因为 key 不一致，所以就会 break 跳出循环;<br><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bd615d68db.webp" alt="从头开始进行遍历、比较"></p></li></ul><p>第二步的操作是从尾部开始进行遍历、比较:<br><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bd616d852a.webp" alt="从尾部开始进行遍历、比较"></p><h1 id="有-key-的-diff-算法-二"><a href="#有-key-的-diff-算法-二" class="headerlink" title="有 key 的 diff 算法(二)"></a>有 key 的 diff 算法(二)</h1><p><strong>第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点:</strong><br><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bd6c7db5a6.webp" alt="新增节点"><br><strong>第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点:</strong><br><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bd6c8bb810.webp" alt="移除旧节点"></p><h1 id="有-key-的-diff-算法-三"><a href="#有-key-的-diff-算法-三" class="headerlink" title="有 key 的 diff 算法(三)"></a>有 key 的 diff 算法(三)</h1><p><strong>第五步是最特色的情况，中间还有很多未知的或者乱序的节点:</strong><br><img src="https://img02.anheyu.com/adminuploads/1/2022/10/16/634bd6c9800a3.webp" alt="未知的或者乱序的节点"><br><strong>所以我们可以发现，Vue 在进行 diff 算法的时候，会尽量利用我们的 key 来进行优化操作:</strong></p><ul><li>在没有 key 的时候我们的效率是非常低效的;</li><li>在进行插入或者重置顺序的时候，保持相同的 key 可以让 diff 算法更加的高效;</li></ul>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
            <tag> vue </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Mac上配置多个SSH</title>
      <link href="/posts/443e.html"/>
      <url>/posts/443e.html</url>
      
        <content type="html"><![CDATA[<p>Mac 上配置 SSH - 多个 SSH</p><h3 id="进入-ssh-目录，查看目录"><a href="#进入-ssh-目录，查看目录" class="headerlink" title="进入 ssh 目录，查看目录"></a>进入 ssh 目录，查看目录</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> ~/.ssh</span><br><span class="line"><span class="built_in">ls</span></span><br></pre></td></tr></table></figure><h3 id="ls-命令效果"><a href="#ls-命令效果" class="headerlink" title="ls 命令效果"></a>ls 命令效果</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">config            id_rsa.pub        id_rsa_github.pub known_hosts.old</span><br><span class="line">id_rsa            id_rsa_github     known_hosts</span><br></pre></td></tr></table></figure><h3 id="生成对称加密秘钥，默认名称-id-rsa"><a href="#生成对称加密秘钥，默认名称-id-rsa" class="headerlink" title="生成对称加密秘钥，默认名称 id_rsa"></a>生成对称加密秘钥，默认名称 id_rsa</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C <span class="string">&quot;youremail@yourcompany.com&quot;</span></span><br></pre></td></tr></table></figure><h3 id="指定秘钥名称-id-rsa-github，名字任意定"><a href="#指定秘钥名称-id-rsa-github，名字任意定" class="headerlink" title="指定秘钥名称 id_rsa_github，名字任意定"></a>指定秘钥名称 id_rsa_github，名字任意定</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C <span class="string">&quot;youremail@yourcompany.com&quot;</span> -f ~/.ssh/id_rsa_github</span><br></pre></td></tr></table></figure><h3 id="配置-config-文件"><a href="#配置-config-文件" class="headerlink" title="配置 config 文件"></a>配置 config 文件</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim config</span><br></pre></td></tr></table></figure><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># gitlab rsa pub</span></span><br><span class="line"><span class="comment"># Host相当于别名，随便取，使用的时候注意名称一致，git clone git@NBGit:anzhiyu-c/anzhiyu-c.git</span></span><br><span class="line">Host NBGit</span><br><span class="line">    <span class="comment"># HostName：域名</span></span><br><span class="line">    HostName github.com</span><br><span class="line">    <span class="comment"># 账号，不配置User也可生效</span></span><br><span class="line">    User anzhiyu-c@qq.com</span><br><span class="line">    <span class="comment"># 权限</span></span><br><span class="line">    PreferredAuthentications publickey</span><br><span class="line">    <span class="comment"># 对应域名下的秘钥</span></span><br><span class="line">    IdentityFile ~/.ssh/id_rsa_github</span><br><span class="line"></span><br><span class="line"><span class="comment"># gitlab rsa pub</span></span><br><span class="line">Host gitlab</span><br><span class="line">    HostName gitlab.com</span><br><span class="line">    User anzhiyu_c@163.com</span><br><span class="line">    PreferredAuthentications publickey</span><br><span class="line">    IdentityFile ~/.ssh/id_rsa</span><br></pre></td></tr></table></figure><h3 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ssh -T git@NBGit</span><br><span class="line">Hi anzhiyu-c! You&#x27;ve successfully authenticated, but GitHub does not provide shell access.</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ssh -T git@gitlab</span><br><span class="line">Welcome to GitLab, @anzhiyu_c!</span><br></pre></td></tr></table></figure>]]></content>
      
      
      
        <tags>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>macOS 安装 Mysql 和 Navicat</title>
      <link href="/posts/e8da.html"/>
      <url>/posts/e8da.html</url>
      
        <content type="html"><![CDATA[<h2 id="Mysql"><a href="#Mysql" class="headerlink" title="Mysql"></a>Mysql</h2><ol><li>登录 Mysql 的官网 <a href="https://www.mysql.com/downloads/">mysql 下载的官网</a></li></ol><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://www.mysql.com/downloads/">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/www.mysql.com/downloads/.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">mysql下载的官网</div>            <div class="tag-link-sitename">mysql官网</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/631596d5384eb.webp"></p><ol start="2"><li>下载<code>社区版的Mysql</code>，点击下图的<code>Mysql Community(GPL) Downloads</code>。</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/631596d4bd42a.webp"></p><ol start="3"><li>然后选择<code>Mysql Community Server</code>。</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/631596d5384a6.webp"></p><ol start="4"><li>接下来进入现在页面，这里有这个下载的链接，我们选择<code>DMG格式</code>的下载链接。注意：一定要选择 macOS 系统。我是<code>M1</code>芯片<code>arm</code>架构所以选择<code>ARM</code></li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/631596d546a9d.webp"></p><ol start="5"><li><p>选择直接下载<br><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/631596d54797b.webp"></p></li><li><p>下载了 dmg 格式的安装包之后，接下来的安装就比较简单了，需要注意的是：<br>一定要选择<code>Use Legacy Password Encryption</code>。（备注：因为我之前选择过 Use Strong Password Encryption，但是有的时候运行项目会出现问题）</p></li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/631599571f59d.webp"></p><p>一定要记得输入密码，这个密码也是登录 mysql 的密码，非常重要。备注：如果是 8.23 版本后的 Mysql，那么在输入密码的时候需要至少输入 8 位。<br><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/631599570e8bf.webp"></p><ol start="7"><li><p>剩下的安装只需要点击继续就可以了。</p></li><li><p>查看 Mysql 是否安装成功，需要点击<code>MAC中的系统偏好设置</code>，然后点击 Mysql 图标</p></li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/63159957185f9.webp"></p><ol start="9"><li>进入 Mysql 界面之后，如果是两个绿色的圆形图标，则说明 Mysql 已经安装成功了。</li></ol><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/631599570e8e5.webp"></p><ol start="10"><li>卸载也是直接在这个界面的右下角有一个<code>uninstall</code>, 点击后即可直接卸载。</li></ol><h2 id="Navicat"><a href="#Navicat" class="headerlink" title="Navicat"></a>Navicat</h2><p>下载后一直下一步即可。<br><img src="https://img02.anheyu.com/adminuploads/1/2022/09/05/63159a623acb7.webp"></p><h1 id="mysql-8-0-30-macos12-x86-64-dmg"><a href="#mysql-8-0-30-macos12-x86-64-dmg" class="headerlink" title="mysql-8.0.30-macos12-x86_64.dmg"></a>mysql-8.0.30-macos12-x86_64.dmg</h1><div class="btns rounded center wide">            <a class="button no-text-decoration" href='https://cloud.anheyu.com/s/LGYqhW' title='下载源码'><img src='fas fa-download'>下载源码</a>          </div><h1 id="Navicat-Premium-16-1-1-zh-CN-dmg"><a href="#Navicat-Premium-16-1-1-zh-CN-dmg" class="headerlink" title="Navicat Premium 16.1.1_zh-CN.dmg"></a>Navicat Premium 16.1.1_zh-CN.dmg</h1><div class="btns rounded center wide">            <a class="button no-text-decoration" href='https://cloud.anheyu.com/s/EW3zFq' title='下载源码'><img src='fas fa-download'>下载源码</a>          </div>]]></content>
      
      
      
        <tags>
            
            <tag> 开发日记 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>给butterfly添加github贡献图(Gitcalendar)</title>
      <link href="/posts/cf4f.html"/>
      <url>/posts/cf4f.html</url>
      
        <content type="html"><![CDATA[<details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left">给<code>hexo-theme-butterfly</code>添加 <a href="https://akilar.top/posts/1f9c68c9/">Gitcalendar</a></td></tr></tbody></table>              </div>            </details><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630ca7f62b235.webp"></p></div></div></div><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><ol><li>安装插件,在博客根目录<code>[Blogroot]</code>下打开终端，运行以下指令：</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-filter-gitcalendar --save</span><br></pre></td></tr></table></figure><ol start="2"><li>添加配置信息，以下为写法示例<br>在站点配置文件<code>_config.yml</code>或者主题配置文件如<code>_config.butterfly.yml</code>中添加</li></ol><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment"># hexo-filter-gitcalendar</span></span><br><span class="line"><span class="comment"># see https://akilar.top/posts/1f9c68c9/</span></span><br><span class="line"><span class="attr">gitcalendar:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">/</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="comment"># butterfly挂载容器</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">id</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">recent-posts</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">0</span></span><br><span class="line">  <span class="comment"># volantis挂载容器</span></span><br><span class="line">  <span class="comment"># layout:</span></span><br><span class="line">  <span class="comment">#   type: class</span></span><br><span class="line">  <span class="comment">#   name: l_main</span></span><br><span class="line">  <span class="comment">#   index: 0</span></span><br><span class="line">  <span class="comment"># matery挂载容器</span></span><br><span class="line">  <span class="comment"># layout:</span></span><br><span class="line">  <span class="comment">#   type: id</span></span><br><span class="line">  <span class="comment">#   name: indexCard</span></span><br><span class="line">  <span class="comment">#   index: 0</span></span><br><span class="line">  <span class="comment"># mengd挂载容器</span></span><br><span class="line">  <span class="comment"># layout:</span></span><br><span class="line">  <span class="comment">#   type: class</span></span><br><span class="line">  <span class="comment">#   name: content</span></span><br><span class="line">  <span class="comment">#   index: 0</span></span><br><span class="line">  <span class="attr">user:</span> <span class="string">anzhiyu-c</span> <span class="comment">#git用户名</span></span><br><span class="line">  <span class="attr">apiurl:</span> <span class="string">&#x27;https://github.anheyu.com&#x27;</span></span><br><span class="line">  <span class="attr">minheight:</span></span><br><span class="line">    <span class="attr">pc:</span> <span class="string">280px</span> <span class="comment">#桌面端最小高度</span></span><br><span class="line">    <span class="attr">mibile:</span> <span class="string">0px</span> <span class="comment">#移动端最小高度</span></span><br><span class="line">  <span class="attr">color:</span> <span class="string">&quot;[&#x27;#e4dfd7&#x27;, &#x27;#f9f4dc&#x27;, &#x27;#f7e8aa&#x27;, &#x27;#f7e8aa&#x27;, &#x27;#f8df72&#x27;, &#x27;#fcd217&#x27;, &#x27;#fcc515&#x27;, &#x27;#f28e16&#x27;, &#x27;#fb8b05&#x27;, &#x27;#d85916&#x27;, &#x27;#f43e06&#x27;]&quot;</span> <span class="comment">#橘黄色调</span></span><br><span class="line">  <span class="comment"># color: &quot;[&#x27;#ebedf0&#x27;, &#x27;#fdcdec&#x27;, &#x27;#fc9bd9&#x27;, &#x27;#fa6ac5&#x27;, &#x27;#f838b2&#x27;, &#x27;#f5089f&#x27;, &#x27;#c4067e&#x27;, &#x27;#92055e&#x27;, &#x27;#540336&#x27;, &#x27;#48022f&#x27;, &#x27;#30021f&#x27;]&quot; #浅紫色调</span></span><br><span class="line">  <span class="comment"># color: &quot;[&#x27;#ebedf0&#x27;, &#x27;#f0fff4&#x27;, &#x27;#dcffe4&#x27;, &#x27;#bef5cb&#x27;, &#x27;#85e89d&#x27;, &#x27;#34d058&#x27;, &#x27;#28a745&#x27;, &#x27;#22863a&#x27;, &#x27;#176f2c&#x27;, &#x27;#165c26&#x27;, &#x27;#144620&#x27;]&quot; #翠绿色调</span></span><br><span class="line">  <span class="comment"># color: &quot;[&#x27;#ebedf0&#x27;, &#x27;#f1f8ff&#x27;, &#x27;#dbedff&#x27;, &#x27;#c8e1ff&#x27;, &#x27;#79b8ff&#x27;, &#x27;#2188ff&#x27;, &#x27;#0366d6&#x27;, &#x27;#005cc5&#x27;, &#x27;#044289&#x27;, &#x27;#032f62&#x27;, &#x27;#05264c&#x27;]&quot; #天青色调</span></span><br><span class="line">  <span class="attr">container:</span> <span class="string">.recent-post-item(style=&#x27;width:100%;height:auto;padding:10px;&#x27;)</span> <span class="comment">#父元素容器，需要使用pug语法</span></span><br><span class="line">  <span class="attr">gitcalendar_css:</span> <span class="string">https://cdn.cbd.int/hexo-filter-gitcalendar/lib/gitcalendar.css</span></span><br><span class="line">  <span class="attr">gitcalendar_js:</span> <span class="string">https://cdn.cbd.int/hexo-filter-gitcalendar/lib/gitcalendar.js</span></span><br></pre></td></tr></table></figure><h3 id="参数释义"><a href="#参数释义" class="headerlink" title="参数释义"></a>参数释义</h3><table><thead><tr><th align="left">参数</th><th align="left">备选值&#x2F;类型</th><th align="left">释义</th></tr></thead><tbody><tr><td align="left">priority</td><td align="left">number</td><td align="left">【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填</td></tr><tr><td align="left">enable</td><td align="left">true&#x2F;false</td><td align="left">【必选】控制开关</td></tr><tr><td align="left">enable_page</td><td align="left">path&#x2F;all</td><td align="left">【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’&#x2F;’,分类页面就填’&#x2F;categories&#x2F;’。若要应用于所有页面，就填’all’，默认为’&#x2F;’</td></tr><tr><td align="left">layout.type</td><td align="left">id&#x2F;class</td><td align="left">【可选】挂载容器类型，填写 id 或 class，不填则默认为 id</td></tr><tr><td align="left">layout.name</td><td align="left">text</td><td align="left">【必选】挂载容器名称</td></tr><tr><td align="left">layout.index</td><td align="left">0 和正整数</td><td align="left">【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位</td></tr><tr><td align="left">user</td><td align="left">text</td><td align="left">【必选】git 用户名</td></tr><tr><td align="left">apiurl</td><td align="left">url</td><td align="left">【可选】默认使用提供文档提供的 api，但还是建议自建 api，参考教程：<a href="https://akilar.top/posts/1f9c68c9/#%E8%87%AA%E5%BB%BAAPI%E9%83%A8%E7%BD%B2">自建 API 部署</a></td></tr><tr><td align="left">minheight.pc</td><td align="left">280px</td><td align="left">【可选】桌面端最小高度，默认为 280px</td></tr><tr><td align="left">minheight.mobile</td><td align="left">0px</td><td align="left">【可选】移动端最小高度，默认为 0px</td></tr><tr><td align="left">color</td><td align="left">list</td><td align="left">【可选】一个包含 11 个色值的数组，文档给出了四款预设值</td></tr><tr><td align="left">container</td><td align="left">pug</td><td align="left">【可选】预留的父元素容器，用以适配多主题，需要用 pug 语法填写，目前已适配<a href="https://github.com/jerryc127/hexo-theme-butterfly">butterfly</a>，<a href="https://github.com/volantis-x/hexo-theme-volantis">volantis</a>，<a href="https://github.com/blinkfox/hexo-theme-matery">matery</a>，<a href="https://github.com/lete114/hexo-theme-MengD">mengd</a>主题，这四个主题，插件会自自动识别<code>_config.yml</code>内填写的<code>theme</code>配置项。其余主题需要自己填写父元素容器。</td></tr><tr><td align="left">gitcalendar_css</td><td align="left">URL</td><td align="left">【可选】自定义 CSS 样式链接</td></tr><tr><td align="left">gitcalendar_js</td><td align="left">URL</td><td align="left">【可选】自定义 js 链接</td></tr></tbody></table><div class="tip ban faa-horizontal animated"><p>注意 ⚠️Vercel 默认域名于 2022 年 8 月 27 日被 GFW 屏蔽，请绑定自定义域名使用（暂时可用）</p></div><h3 id="自建-API-部署"><a href="#自建-API-部署" class="headerlink" title="自建 API 部署"></a>自建 API 部署</h3><div class="note info simple"><p>虽然 Vercel 的访问应当没有次数限制，但是不排除存在因访问次数过多而限流等限制。所以还是建议各位自建 API。使用 Vercel 部署，完全免费。且无需服务器。</p></div><ol><li><p>访问<a href="https://vercel.com/">Vercel 官网</a>，点击右上角的 sign up 进行注册<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630cac25ecfe8.webp" alt="img"></p><div class="note danger flat"><p>若注册时提示<code>Error:This user account is blocked.Contact support@vercel.com for more information.</code></p></div><div class="note primary flat"><p>这是由于<code>Vercel</code>不支持大部分国内邮箱。可以将<code>github</code>账号主邮箱改为<code>Gmail</code>邮箱。<br><strong>但是</strong>根据群友反应，将<code>github</code>账号主邮箱切换为<code>Gmail</code>以后，<code>Vercel</code>又会提示需要使用手机号码验证。然而<code>github</code>并没有提供手机号码绑定的内容。<br>综上，建议一开始注册<code>github</code>账号时就使用<code>Gmail</code>等国外邮箱进行注册。</p></div><div class="note success flat"><ol><li><p>国内访问<code>Gmail</code>的方案：</p><ul><li>直接使用 QQ 邮箱手机版，它提供<code>Gmail</code>的访问路线，可以直接注册并使用。</li><li>使用<code>Ghelper</code>等浏览器插件访问。详情可以参考这篇文章：<a href="https://akilar.top/posts/8c8df126/">玩转 Microsoft-Edge</a></li></ul></li><li><p>若是执着于当前<code>Github</code>账号，可以参考以下方案进行尝试:</p><ul><li>完成了<code>Gmail</code>等国外邮箱的注册，打开<a href="https://github.com/settings/emails">github-&gt;头像-&gt;settings-&gt;Emails</a>-&gt;Add email address,并完成邮箱验证。</li><li>在 Add email address 下方的 Primary email address 选项中将<code>Gmail</code>设置为主邮箱。</li></ul></li></ol></div></li><li><p>注册完成后选择新建一个项目<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630caf79cf06c.webp"></p></li><li><p>选择<code>Import Third-Party Git Repository →</code><br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630caf79c9e77.webp"></p></li><li><p>填入<a href="https://zfe.space/">@冰老师</a>提供的自建 API 项目地址</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://github.com/Zfour/python_github_calendar_api.git</span><br></pre></td></tr></table></figure></li><li><p>选择<code>github</code><br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630caf79cc89a.webp"></p></li><li><p>新增一个<code>github账号</code><br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630caf79c1fda.webp"></p></li><li><p>登录 github 账号后在弹窗内点击 install<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630caf79bd0be.webp"></p></li><li><p>选择登录后 githun 账号,输入仓库名称,然后点击<code>Create</code><br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630cb0902b742.webp"></p></li><li><p>等待 ⌛️ 部署完成 ✅ 后点击中间的区域<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630caf79c9e67.webp"><br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630caf79b5e37.webp"></p></li><li><p>在打开的链接 🔗 后拼接上参数<code>/api/?[你的github用户名]</code>，比如我的用户名为<code>anzhiyu-c</code>，vercel 提供的域名为 <code>https://python-github-calendar-api-kappa.vercel.app</code><br>所以我的测试链接为：<code>https://python-github-calendar-api-kappa.vercel.app/api/?anzhiyu-c</code><br>打开后访问有数据即为部署成功！</p></li><li><p>到此时，<code>Vercel</code>的部署已经完成，可以使用<code>Vercel</code>提供的默认域名来访问<code>api</code>链接。例如我获取到的默认域名为<code>python-github-calendar-api-kappa.vercel.app</code>,则用它来替换冰老师教程中的自建 API，填写到<code>[Blogroot]\_config.butterfly.yml</code>中关于<code>gitcalendar</code>的<code>apiurl</code>中。填写值为<code>https://python-github-calendar-api-kappa.vercel.app</code>,<br>带上协议，末尾不要添加<code>/</code></p></li></ol><div class="tip ban faa-horizontal animated"><p>注意 ⚠️Vercel 默认域名于 2022 年 8 月 27 日被 GFW 屏蔽，请绑定自定义域名使用（暂时可用）</p></div><details class="folding-tag" yellow><summary> 点击查看自定义域名教程 </summary>              <div class='content'>              <ol><li>点击需要进行<code>自定义域名</code>的项目<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630cb508c8541.webp"> 2. 添加<code>自定义域名</code>（即你需要使用该域名来访问该项目）<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630cb508d907c.webp"> 3. 将<code>TXT</code>记录解析，以验证域名，验证完域名以后，然后将该自定义域名<code>cname</code>解析到<code>cname-china.vercel-dns.com</code><br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630cb508db147.webp"><br>解析图如下：<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/29/630cb6528d6b0.webp"></li></ol>              </div>            </details>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>给butterfly添加侧边栏电子钟</title>
      <link href="/posts/fc18.html"/>
      <url>/posts/fc18.html</url>
      
        <content type="html"><![CDATA[<details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="center">参考方向</th><th align="center">教程原贴</th><th></th></tr></thead><tbody><tr><td align="center">店长原教程</td><td align="center">给<code>hexo-theme-butterfly</code>添加 <a href="https://akilar.top/posts/4e39cf4a/">侧边栏电子钟</a></td><td></td></tr></tbody></table>              </div>            </details><div class="note info simple"> <div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/08/26/630888b65adc7.png"> </p></div></div> </div><ol><li><p>如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突），在博客根目录<code>[Blogroot]</code>下打开终端，运行以下指令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 卸载原版电子钟</span></span><br><span class="line">npm uninstall hexo-butterfly-clock</span><br></pre></td></tr></table></figure></li><li><p>安装插件,在博客根目录<code>[Blogroot]</code>下打开终端，运行以下指令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-butterfly-clock-anzhiyu --save</span><br></pre></td></tr></table></figure></li><li><p>添加配置信息，以下为写法示例在站点配置文件<code>_config.yml</code>或者主题配置文件<code>_config.butterfly.yml</code>中添加</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># electric_clock</span></span><br><span class="line"><span class="comment"># see https://anheyu.com/posts/fc18.html</span></span><br><span class="line"><span class="attr">electric_clock:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">all</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">  <span class="comment"># - /posts/</span></span><br><span class="line">  <span class="comment"># - /about/</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">class</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">sticky_layout</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">0</span></span><br><span class="line">  <span class="attr">loading:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif</span> <span class="comment">#加载动画自定义</span></span><br><span class="line">  <span class="attr">clock_css:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css</span></span><br><span class="line">  <span class="attr">clock_js:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js</span></span><br><span class="line">  <span class="attr">ip_api:</span> <span class="string">https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0</span></span><br><span class="line">  <span class="attr">qweather_key:</span> <span class="comment"># 和风天气key</span></span><br><span class="line">  <span class="attr">gaud_map_key:</span> <span class="comment"># 高得地图web服务key</span></span><br><span class="line">  <span class="attr">default_rectangle:</span> <span class="literal">false</span> <span class="comment"># 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气</span></span><br><span class="line">  <span class="attr">rectangle:</span> <span class="number">112.982279</span><span class="string">,28.19409</span> <span class="comment"># 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置</span></span><br></pre></td></tr></table></figure><div class="tip warning faa-horizontal animated"><p>其中<mark class="hl-label blue">qweather_key</mark> 和<mark class="hl-label blue">gaud_map_key</mark> 最好自己去申请对应的 api key，默认使用我自己的，可能会被限制，不保证可靠性 </p></div><details class="folding-tag" yellow><summary> 点击查看参考教程 </summary>              <div class='content'>              <p><code>qweather_key</code>申请地址: <a href="https://id.qweather.com/#/login">https://id.qweather.com/#/login</a></p><ol><li>登录后进入控制台 <img src="https://img02.anheyu.com/adminuploads/1/2022/08/26/63089a777772f.webp" alt="和风天气控制台"></li><li>创建应用 <img src="https://img02.anheyu.com/adminuploads/1/2022/08/26/63089a7772a30.webp" alt="创建和风天气应用"></li><li>填写应用名称和 key 名称随意</li><li>选择 WebApi <img src="https://img02.anheyu.com/adminuploads/1/2022/08/26/63089a776a3fd.webp" alt="选择WebApi"></li><li>复制 key <img src="https://img02.anheyu.com/adminuploads/1/2022/08/26/63089b848e8a7.webp" alt="复制key"></li></ol><p><code>gaud_map_key</code> 申请地址: <a href="https://lbs.amap.com/">https://lbs.amap.com/</a></p><ol><li>登录后进入控制台</li><li>创建应用，名称随意，类型选其他 <img src="https://img02.anheyu.com/adminuploads/1/2022/08/26/6308a1101d83c.webp" alt="创建应用"></li><li>点击添加, <code>key</code>名称随意，<code>服务平台</code>选择<code>Web服务</code>,点击提交 <img src="https://img02.anheyu.com/adminuploads/1/2022/08/26/6308a11023c69.webp" alt="Web服务"></li><li>复制 key <img src="https://img02.anheyu.com/adminuploads/1/2022/08/26/6308a11018a74.webp" alt="复制key"></li></ol>              </div>            </details></li><li><p>参数释义</p><table><thead><tr><th align="center">参数</th><th align="center">备选值&#x2F;类型</th><th align="center">释义</th></tr></thead><tbody><tr><td align="center">priority</td><td align="center">number</td><td align="center">【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填</td></tr><tr><td align="center">enable</td><td align="center">true&#x2F;false</td><td align="center">【必选】控制开关</td></tr><tr><td align="center">enable_page</td><td align="center">path&#x2F;all</td><td align="center">【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’&#x2F;‘,分类页面就填’&#x2F;categories&#x2F;‘。若要应用于所有页面，就填’all’，默认为 all</td></tr><tr><td align="center">exclude</td><td align="center">path</td><td align="center">【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。</td></tr><tr><td align="center">layout.type</td><td align="center">id&#x2F;class</td><td align="center">【可选】挂载容器类型，填写 id 或 class，不填则默认为 id</td></tr><tr><td align="center">layout.name</td><td align="center">text</td><td align="center">【必选】挂载容器名称</td></tr><tr><td align="center">layout.index</td><td align="center">0 和正整数</td><td align="center">【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位</td></tr><tr><td align="center">loading</td><td align="center">URL</td><td align="center">【可选】电子钟加载动画的图片</td></tr><tr><td align="center">clock_css</td><td align="center">URL</td><td align="center">【可选】电子钟样式 CDN 资源</td></tr><tr><td align="center">clock_js</td><td align="center">URL</td><td align="center">【可选】电子钟执行脚本 CDN 资源</td></tr><tr><td align="center">ip_api</td><td align="center">URL</td><td align="center">【可选】获取时钟 IP 的 API</td></tr><tr><td align="center">qweather_key</td><td align="center">text</td><td align="center">【可选】和风天气 key</td></tr><tr><td align="center">gaud_map_key</td><td align="center">text</td><td align="center">【可选】高得地图 web 服务 key</td></tr><tr><td align="center">default_rectangle</td><td align="center">text</td><td align="center">【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气</td></tr><tr><td align="center">rectangle</td><td align="center">text</td><td align="center">【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置</td></tr></tbody></table></li></ol>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>macbook pro 2021真实体验</title>
      <link href="/posts/571d.html"/>
      <url>/posts/571d.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>用了差不多一个月 macbook pro2021 的真实体验就是：真香</p></blockquote><p>我手里的这款是 2021 年 7 月教育优惠下单的 M1 MAX 64G 16 寸版本等了大半个月然后在 7 月底 提前发货了 😁</p><p>收到以后的第一感觉还是没有想象中的惊艳 但是仍然让我狠狠的开心了一把</p><p>让我最为感受明显，最爽的还是这几点</p><h3 id="重量"><a href="#重量" class="headerlink" title="重量"></a>重量</h3><p>再也不用背着我的 砖头 🧱 电脑（指我 19 年的联想拯救者 Y7000）到处走了，虽然依然不轻（作为办公本来说，但是毕竟还是 16 寸的），没办法谁让我贪 16 寸的大屏幕呢 hhh，但是和之前的拯救者比起来可好多了。</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/08/24/6305fee29f84f.jpg" alt="IMG_5603.JPG"><br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/24/6305fee300c1d.jpg" alt="mac"><br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/24/6305fee2eff04.jpg" alt="186.jpg"></p><h3 id="续航-🔋"><a href="#续航-🔋" class="headerlink" title="续航 🔋"></a>续航 🔋</h3><p>续航方面，我的拯救者已经被我玩成了台式机 🖥️，必须得一直插电才能用 🥱，电池已经完全老化，好几次达到不插电就直接罢工了，但新的 macbook 就不一样了，充满中度使用一天不是问题，一个小时左右就能充满，让我感觉非常的舒服 😌<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/24/6305fee29689a.jpg" alt="IMG_5605.JPG"></p><h3 id="系统"><a href="#系统" class="headerlink" title="系统"></a>系统</h3><p>macOS 流畅无比的感觉让我能够完全沉浸在自己的事情中，几乎不用为其他的事情分心，之前的拯救者在开启两个 vscode，一个浏览器,打出 log 都卡顿，需要等 2-3s 才能出来代码提示，让我及其难受,macbook pro 可以流畅无比，希望几年后依然如此坚挺。<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/24/6305fee2cb0b0.jpg" alt="9cfe-0.jpg"></p><h3 id="保护"><a href="#保护" class="headerlink" title="保护"></a>保护</h3><p>买了一个保护壳，然后买了 Apple Care+，所以其实是几乎裸奔，大不了以后换一块电池就赚回来了 🐑<br><img src="https://img02.anheyu.com/adminuploads/1/2022/08/24/6305fee295e39.jpg" alt="IMG_5610.JPG"></p><h3 id="游戏-🎮"><a href="#游戏-🎮" class="headerlink" title="游戏 🎮"></a>游戏 🎮</h3><p>macOS 的软件兼容方面真的很差（指游戏），自从使用 macOS 以后几乎没有玩游戏 😩，最喜欢的原神也玩不了了，虽然有办法解决，不仅繁琐，而且我真的不想用那种奇怪的解决方式啊！！！希望原神能出 mac 版（我在想 peach）,米忽悠你不要不识好歹！</p><p><img src="https://img02.anheyu.com/adminuploads/1/2022/08/24/6305fee2bd605.jpg" alt="IMG_5608.JPG"></p><h3 id="另外"><a href="#另外" class="headerlink" title="另外"></a>另外</h3><p>10 月就要发布新款 mac 了，希望不要背刺我！！！</p>]]></content>
      
      
      <categories>
          
          <category> 生活日常 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 生活 </tag>
            
            <tag> 分享 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>使用 Github Action 自动部署</title>
      <link href="/posts/asdx.html"/>
      <url>/posts/asdx.html</url>
      
        <content type="html"><![CDATA[<p>此教程参考 <a href="https://akilar.top/posts/f752c86d/">🧊Akilar の糖果屋 🍭</a>，转载需注明出处。</p><h3 id="Github-Action-简介"><a href="#Github-Action-简介" class="headerlink" title="Github Action 简介"></a>Github Action 简介</h3><p>Github Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务。</p><details class="folding-tag" ><summary> CI/CD解释 </summary>              <div class='content'>              <div class="note info simple"><p>CI\CD 其实说的是三件事情：「持续集成（Continuous Integration）」、「持续交付（Continuous Delivery）」、「持续部署（Continuous Deployment）」。<br>因为「持续交付」和「持续部署」的英文缩写是一样的，所以这三件事情缩写成了 CI\CD 。</p></div>              </div>            </details><p>每次部署 <code>Hexo</code> 都需要运行指令三件套，随着文章越来越多，编译的时间也随之越来越长，通过 <code>Github Action</code>，我们只需要在每次完成博客的编写或修改以后，将改动直接 <code>push</code> 到远程仓库，之后的编译部署的工作统统交给 <code>CI</code> 来完成即可，如果是看过 <code>Coding 部署教程</code>的小伙伴，应该对这种持续部署的操作有所感触。</p><h3 id="教程常量声明"><a href="#教程常量声明" class="headerlink" title="教程常量声明"></a>教程常量声明</h3><div class="tip info"><p>感谢@YML 的反馈。以下将使用特定的常量名来指代一些名词。此处建议读者直接使用教程内容的常量名。在最后再逐一搜索替换。这样可以避免对各种常量名的混淆。</p></div><table><thead><tr><th>常量名</th><th>常量释义</th></tr></thead><tbody><tr><td><strong>[Blogroot]</strong></td><td>本地存放博客源码的文件夹路径</td></tr><tr><td><strong>[SourceRepo]</strong></td><td>存放博客源码的私有仓库名</td></tr><tr><td><strong>[SiteBlogRepo]</strong></td><td>存放编译好的博客页面的公有仓库名 Site 指站点，教程中会替换成 Github、Gitee、Coding</td></tr><tr><td><strong>[SiteUsername]</strong></td><td>用户名 Site 指站点，教程中会替换成 Github、Gitee、Coding</td></tr><tr><td><strong>[SiteToken]</strong></td><td>申请到的令牌码 Site 指站点，教程中会替换成 Github、Gitee、Coding</td></tr><tr><td><strong>[GithubEmail]</strong></td><td>与 github 绑定的主邮箱，建议使用 Gmail</td></tr><tr><td><strong>[TokenUser]</strong></td><td>Coding 配置特有的令牌用户名</td></tr></tbody></table><figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"># 在记事本中逐个记录，方便替换，以下为我的示例</span><br><span class="line">[Blogroot]：E:\Blogroot</span><br><span class="line"></span><br><span class="line">[SourceRepo]：anzhiyu-c/Hexo-blog-source</span><br><span class="line"></span><br><span class="line">[SiteBlogRepo]</span><br><span class="line">  [GithubBlogRepo]：anzhiyu-c.github.io</span><br><span class="line">  [GiteeBlogRepo]：anzhiyu</span><br><span class="line">  [CodingBlogRepo]：anzhiyu/anzhiyu</span><br><span class="line"></span><br><span class="line">[SiteUsername]</span><br><span class="line">  [GithubUsername]：anzhiyu-c</span><br><span class="line">  [GiteeUsername]：anzhiyu</span><br><span class="line">  [CodingUsername]：anzhiyu</span><br><span class="line"></span><br><span class="line">[SiteToken]</span><br><span class="line">  [GithubToken]：15076c8eb9c874sad676bc9bfb13sadw86babf2</span><br><span class="line">  [GiteeToken]：f57acasdadgar4578603adas5d8w79bb</span><br><span class="line">  [CodingToken]：a4e45daf78as1f2670dcbbcfd5as7d8asd8cd66a77</span><br><span class="line"></span><br><span class="line">[GithubEmail]：anzhiyu77@gmail.com</span><br><span class="line"></span><br><span class="line">[TokenUser]：RAxDiobbRi</span><br></pre></td></tr></table></figure><h3 id="Github-Action-使用教程"><a href="#Github-Action-使用教程" class="headerlink" title="Github Action 使用教程"></a>Github Action 使用教程</h3><p>为了确保交由<code>Github Action</code>来持续部署时，<code>Github Action</code> 具备足够的权限来进行 <code>hexo deploy</code> 操作,需要先获取 <code>Token</code>。</p><div class="tabs" id="one"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#one-1">Github</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="one-1"><p>访问 Github-&gt;头像（右上角）-&gt;Settings-&gt;Developer Settings-&gt;Personal access tokens-&gt;<kbd>generate new token</kbd>,创建的 Token 名称随意，但必须勾选 repo 项 和 workflows 项。</p><p><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/01/01.png"><br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/01/02.png"><br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/01/03.png"></p><div class="tip warning"><p>token 只会显示这一次，之后将无法查看，所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置了。</p></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h3 id="创建存放源码的私有仓库"><a href="#创建存放源码的私有仓库" class="headerlink" title="创建存放源码的私有仓库"></a>创建存放源码的私有仓库</h3><details class="folding-tag" ><summary> 点击查看 </summary>              <div class='content'>              <p>我们需要创建一个用来存放 <code>Hexo</code> 博客源码的私有仓库<code>[SourceRepo]</code>，这点在 <code>Win10</code> 的 <code>Hexo</code> 博客搭建教程中有提到。为了保持教程的连贯，此处再写一遍。<br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/01/04.png"></p><p>创建完成后，需要把博客的源码 push 到这里。首先获取远程仓库地址，此处虽然 SSH 和 HTTPS 均可。SSH 在绑定过 ssh key 的设备上无需再输入密码，HTTPS 则需要输入密码，但是 SSH 偶尔会遇到端口占用的情况。请自主选择。</p><p><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/01/05.png"></p><div class="note info simple"><p>这里之所以是私有仓库，是因为在接下来的配置中会用到 <code>Token</code>，如果 <code>Token</code> 被盗用，别人可以肆意操作你的 github 仓库内容，为了避免这一风险，才选择的博客源码闭源。</p></div>              </div>            </details><h3 id="配置-Github-Action"><a href="#配置-Github-Action" class="headerlink" title="配置 Github Action"></a>配置 Github Action</h3><ol><li>在<code>[Blogroot]</code>新建<code>.github</code>文件夹,注意开头是有个<code>.</code>的。然后在<code>.github</code> 内新建 <code>workflows</code> 文件夹，再在 <code>workflows</code> 文件夹内新建 <code>autodeploy.yml</code>,在<code>[Blogroot]/.github/workflows/autodeploy.yml</code> 里面输入</li></ol><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">name:</span> <span class="string">自动部署</span></span><br><span class="line"><span class="comment"># 当有改动推送到master分支时，启动Action</span></span><br><span class="line"><span class="attr">on:</span></span><br><span class="line">  <span class="attr">push:</span></span><br><span class="line">    <span class="attr">branches:</span></span><br><span class="line">      <span class="bullet">-</span> <span class="string">master</span></span><br><span class="line">      <span class="comment">#2020年10月后github新建仓库默认分支改为main，注意更改</span></span><br><span class="line">  <span class="attr">release:</span></span><br><span class="line">    <span class="attr">types:</span></span><br><span class="line">      <span class="bullet">-</span> <span class="string">published</span></span><br><span class="line"></span><br><span class="line"><span class="attr">jobs:</span></span><br><span class="line">  <span class="attr">deploy:</span></span><br><span class="line">    <span class="attr">runs-on:</span> <span class="string">ubuntu-latest</span></span><br><span class="line">    <span class="attr">steps:</span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">检查分支</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">actions/checkout@v2</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">ref:</span> <span class="string">master</span></span><br><span class="line"></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Node</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">actions/setup-node@v1</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">node-version:</span> <span class="string">&quot;16.x&quot;</span></span><br><span class="line"></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Hexo</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string">          export TZ=&#x27;Asia/Shanghai&#x27;</span></span><br><span class="line"><span class="string">          npm install hexo-cli -g</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">缓存</span> <span class="string">Hexo</span></span><br><span class="line">        <span class="attr">id:</span> <span class="string">cache-npm</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">actions/cache@v3</span></span><br><span class="line">        <span class="attr">env:</span></span><br><span class="line">          <span class="attr">cache-name:</span> <span class="string">cache-node-modules</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">path:</span> <span class="string">node_modules</span></span><br><span class="line">          <span class="attr">key:</span> <span class="string">$&#123;&#123;</span> <span class="string">runner.os</span> <span class="string">&#125;&#125;-build-$&#123;&#123;</span> <span class="string">env.cache-name</span> <span class="string">&#125;&#125;-$&#123;&#123;</span> <span class="string">hashFiles(&#x27;**/package-lock.json&#x27;)</span> <span class="string">&#125;&#125;</span></span><br><span class="line">          <span class="attr">restore-keys:</span> <span class="string">|</span></span><br><span class="line"><span class="string">            $&#123;&#123; runner.os &#125;&#125;-build-$&#123;&#123; env.cache-name &#125;&#125;-</span></span><br><span class="line"><span class="string">            $&#123;&#123; runner.os &#125;&#125;-build-</span></span><br><span class="line"><span class="string">            $&#123;&#123; runner.os &#125;&#125;-</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装依赖</span></span><br><span class="line">        <span class="attr">if:</span> <span class="string">$&#123;&#123;</span> <span class="string">steps.cache-npm.outputs.cache-hit</span> <span class="type">!=</span> <span class="string">&#x27;true&#x27;</span> <span class="string">&#125;&#125;</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string">          npm install gulp-cli -g #全局安装gulp</span></span><br><span class="line"><span class="string">          npm install --save</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">生成静态文件</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string">          hexo clean</span></span><br><span class="line"><span class="string">          hexo bangumi -u #bilibili番剧更新</span></span><br><span class="line"><span class="string">          hexo generate</span></span><br><span class="line"><span class="string">          gulp</span></span><br><span class="line"><span class="string"></span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">部署到Github</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">JamesIves/github-pages-deploy-action@v4</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">token:</span> <span class="string">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</span></span><br><span class="line">          <span class="attr">repository-name:</span> <span class="string">anzhiyu-a/anzhiyu-a.github.io</span></span><br><span class="line">          <span class="attr">branch:</span> <span class="string">main</span></span><br><span class="line">          <span class="attr">folder:</span> <span class="string">public</span></span><br><span class="line">          <span class="attr">commit-message:</span> <span class="string">&quot;$<span class="template-variable">&#123;&#123; github.event.head_commit.message &#125;&#125;</span> Updated By Github Actions&quot;</span></span><br></pre></td></tr></table></figure><ol start="2"><li>之后需要自己到仓库的 Settings-&gt;Secrets-&gt;actions 下添加环境变量，变量名参考脚本中出现的，依次添加。<br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/01/06.png"></li></ol><h3 id="重新设置远程仓库和分支"><a href="#重新设置远程仓库和分支" class="headerlink" title="重新设置远程仓库和分支"></a>重新设置远程仓库和分支</h3><div class="tabs" id="two"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#two-1">🍼第一次使用git管理博客源码</button></li><li class="tab"><button type="button" data-href="#two-2">🍾曾经做过git管理博客源码的操作</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="two-1"><ol><li><p>删除或者先把<code>[Blogroot]/themes/butterfly/.git</code>移动到非博客文件夹目录下,原因是主题文件夹下的<code>.git</code>文件夹的存在会导致其被识别成子项目，从而无法被上传到源码仓库。</p></li><li><p>在博客根目录<code>[Blogroot]</code>路径下运行指令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">git init <span class="comment">#初始化</span></span><br><span class="line">git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git <span class="comment">#[SourceRepo]为存放源码的github私有仓库</span></span><br><span class="line">git checkout -b master <span class="comment"># 切换到master分支，</span></span><br><span class="line"><span class="comment">#2020年10月后github新建仓库默认分支改为main，注意更改</span></span><br><span class="line"><span class="comment"># 如果不是，后面的所有设置的分支记得保持一致</span></span><br></pre></td></tr></table></figure></li><li><p>添加屏蔽项</p><p>因为能够使用指令进行安装的内容不包括在需要提交的源码内，所有我们需要将这些内容添加到屏蔽项，表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。打开<code>[Blogroot]/.gitignore</code>,输入以下内容：</p><figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">.DS_Store</span><br><span class="line">Thumbs.db</span><br><span class="line">db.json</span><br><span class="line">*.log</span><br><span class="line">node_modules/</span><br><span class="line">public/</span><br><span class="line">.deploy*/</span><br><span class="line">.deploy_git*/</span><br><span class="line">.idea</span><br><span class="line">themes/butterfly/.git</span><br></pre></td></tr></table></figure><p>如果不是<code>butterfly</code>主题，记得替换最后一行内容为你自己当前使用的主题。</p></li><li><p>之后再运行 git 提交指令，将博客源码提交到 github 上。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">&quot;github action update&quot;</span></span><br><span class="line">git push origin master</span><br><span class="line"><span class="comment">#2020年10月后github新建仓库默认分支改为main，注意更改</span></span><br></pre></td></tr></table></figure></li><li><p>此时你的主题文件夹若已经被正常上传，并且你也添加了主题文件夹下的.git 文件夹的屏蔽项。那你可以考虑把第二步移走或删除的<code>.git</code>放回来，用作以后升级。（不禁怀疑真的有人会去用这个方式来升级吗）</p></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="two-2"><p>1.添加屏蔽项<br>因为能够使用指令进行安装的内容不包括在需要提交的源码内，所有我们需要将这些内容添加到屏蔽项，表示不上传到 github 上。这样可以显著减少需要提交的文件量和加快提交速度。<br>打开<code>[Blogroot]/.gitignore</code>,输入以下内容：</p><figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">.DS_Store</span><br><span class="line">Thumbs.db</span><br><span class="line">db.json</span><br><span class="line">*.log</span><br><span class="line">node_modules/</span><br><span class="line">public/</span><br><span class="line">.deploy*/</span><br><span class="line">.deploy_git*/</span><br><span class="line">.idea</span><br><span class="line">themes/butterfly/.git</span><br></pre></td></tr></table></figure><p>如果不是 butterfly 主题，记得替换最后一行内容为你自己当前使用的主题。 2.提交源码到私有仓库<code>[SourceRepo]</code><br>在博客根目录<code>[Blogroot]</code>下启动终端，使用 git 指令重设仓库地址。这样在新建仓库，我们仍旧可以保留珍贵的 commit history，便于版本回滚。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">git remote <span class="built_in">rm</span> origin <span class="comment"># 删除原有仓库链接</span></span><br><span class="line">git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git <span class="comment">#[SourceRepo]为新的存放源码的github私有仓库</span></span><br><span class="line">git checkout -b master <span class="comment"># 切换到master分支，</span></span><br><span class="line"><span class="comment">#2020年10月后github新建仓库默认分支改为main，注意更改</span></span><br><span class="line"><span class="comment"># 如果不是，后面的所有设置的分支记得保持一致</span></span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">&quot;github action update&quot;</span></span><br><span class="line">git push origin master</span><br><span class="line"><span class="comment">#2020年10月后github新建仓库默认分支改为main，注意更改</span></span><br></pre></td></tr></table></figure><p>3.可能遇到的 bug<br>因为 butterfly 主题文件夹下的.git 文件夹的存在，那么主题文件夹会被识别子项目。从而无法被上传到源码仓库。若是遇到添加屏蔽项，但是还是无法正常上传主题文件夹的情况。请先将本地源码中的 themes 文件夹移动到别的目录下。然后 commit 一次。接着将 themes 文件夹移动回来，再 commit 一次。</p><div class="tip error"><p>要是还不行，那就删了 butterfly 主题文件夹下的.git 文件夹，然后再重复上述的 commit 操作。</p></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><h3 id="查看部署情况"><a href="#查看部署情况" class="headerlink" title="查看部署情况"></a>查看部署情况</h3><details class="folding-tag" ><summary> 点击查看 </summary>              <div class='content'>              <p>此时，打开 GIthub 存放源码的私有仓库，找到 action。<br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/01/07.png"><br>根据刚刚的 Commit 记录找到相应的任务</p><p><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/01/08.png"><br>点击 Deploy 查看部署情况<br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/01/09.png"><br>若全部打钩，恭喜你，你现在可以享受自动部署的快感了。</p>              </div>            </details><h3 id="可能遇到的-bug"><a href="#可能遇到的-bug" class="headerlink" title="可能遇到的 bug"></a>可能遇到的 bug</h3><div class="tabs" id="bug"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#bug-1">⛔unknown block tag: "tagname"</button></li><li class="tab"><button type="button" data-href="#bug-2">⛔spawn failed</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="bug-1"><div class="note danger flat"><p>要是在 github action 部署时遇到 unknown block tag: “tagname”这样的报错，说明你可能没有正确上传主题文件夹，也可能遇到安装依赖或生成页面失败的情况。</p></div><ol><li><p>是否将<code>node_modules</code>也上传到源码仓库<code>[SourceRepo]</code>了。源码仓库不需要有<code>node_modules</code>文件夹。</p></li><li><p>是否有将<code>[Blogroot]/themes/</code>下的主题文件夹上传，例如检查[SourceRepo]内的<code> [Blogroot]/themes/Butterfly</code>是否为空文件夹。为了能够正常编译页面，源码仓库需要有<code> [Blogroot]/themes/Butterfly</code>文件夹及它所包含的主题文件内容。为了避免这两点，需要添加 git 屏蔽项。通过给<code> .gitignore</code>添加屏蔽项解决。打开<code>[Blogroot]/.gitignore</code>,输入以下内容：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">.DS_Store</span><br><span class="line">Thumbs.db</span><br><span class="line">db.json</span><br><span class="line">*.log</span><br><span class="line">node_modules/</span><br><span class="line">public/</span><br><span class="line">.deploy*/</span><br><span class="line">.deploy_git*/</span><br><span class="line">.idea</span><br><span class="line">themes/butterfly/.git</span><br></pre></td></tr></table></figure></li><li><p>若是遇到添加屏蔽项，但是还是无法正常上传主题文件夹的情况。请先将本地源码中的<code>themes</code>文件夹移动到别的目录下。然后<code>commit</code>一次。接着将<code>themes</code>文件夹移动回来，再<code>commit</code>一次。</p></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="bug-2"><div class="note danger flat"><p>若是遇到 spawn failed 报错。在 github action 的配置中出现这一报错。一般是因为涉及到部署地址的配置项有误。</p></div><ol><li>首先排查你在<code>[Blogroot]\_config.yml</code>的<code>deploy</code>配置项是否按照上文<a href="https://akilar.top/posts/f752c86d/#%E9%85%8D%E7%BD%AEdeploy%E9%A1%B9">配置 deploy 项</a>中的步骤正确组装配置链接。</li><li>其次排查<code>[Blogroot]\.github\workflows\autodeploy.yml</code>中各个关于仓库链接的配置内容，注意按照注释指引检查空格、分支等。</li><li>更多可能的因素和解决方案可以参考<a href="https://blog.zhheo.com/">@洪哥 HEO</a>写的方案:<a href="https://blog.zhheo.com/p/128998ac.html">Hexo 错误：spawn failed 的解决方法</a>。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><div class="note warning flat"><p>2020 年 10 月后 github 新建仓库默认分支改为 main，注意更改</p></div>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>npm图床使用</title>
      <link href="/posts/72ea.html"/>
      <url>/posts/72ea.html</url>
      
        <content type="html"><![CDATA[<ol><li><p>首先需要注册一个 npm 的账号。访问<a href="https://www.npmjs.com/signup/">npm 注册页面</a><br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/02/01.png"></p></li><li><p>完成邮箱验证，注册完成后进入账号管理界面:头像-&gt;Account，拉倒最上方，你会看到<code>You have not verified your email address</code>字样的提示，点击以后按提示步骤验证你的邮箱。<br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/02/02.png"></p></li><li><p>找到我们之前创建的图床仓库，在本地合适的位置把它<code>clone</code>下来。找个空文件夹打开终端输入</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> git@github.com:[username]/[AssetsRepo].git</span><br><span class="line"><span class="comment">#或者</span></span><br><span class="line">git <span class="built_in">clone</span> https://github.com/[username]/[AssetsRepo].git</span><br></pre></td></tr></table></figure></li><li><p>在 clone 下来的[AssetsRepo]文件夹内打开终端，输入以下指令切换回原生源</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config <span class="built_in">set</span> registry https://registry.npmjs.org</span><br></pre></td></tr></table></figure></li><li><p>添加本地 npm 用户设置</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 仅第一次使用需要添加用户，之后会提示你输入你的npm账号密码以及注册邮箱</span></span><br><span class="line">npm adduser</span><br><span class="line"><span class="comment"># 非第一次使用直接登录即可，之后会提示你输入你的npm账号密码以及注册邮箱</span></span><br><span class="line">npm login</span><br></pre></td></tr></table></figure></li><li><p>运行 npm 初始化指令，把整个图床仓库打包，按照指示进行配置，注意需要事先确认你的包名没有和别人已发布的包重复，可以在 npm 官网搜索相应包名，搜不到就说明还没被占用。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure><p><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/02/03.png"></p><p>最后会输出一段 package.json，请求确认，输入 yes 即可。</p></li><li><p>然后输入发布指令，我们就可以把包发布到 npm 上了。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm publish</span><br></pre></td></tr></table></figure></li><li><p>jsdelivr+npm 的图片引用和 jsdelivr+github 很相似，例如我在<code>[AssetsRepo]</code>仓库里存放的<code>/img/index.png</code></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># jsDelivr+github链接</span></span><br><span class="line">https://cdn.jsdelivr.net/gh/[GithubUserName]/[AssetsRepo]/img/index.png</span><br><span class="line"><span class="comment"># jsDelivr+npm链接</span></span><br><span class="line">https://cdn.jsdelivr.net/npm/[NpmPackageName]/img/index.png</span><br></pre></td></tr></table></figure><div class="note success flat"><p>可以看到 Npm 只需要提供包名即可。这也是一开始要求包名不重复的原因之一</p></div><p>jsDelivr+Npm 依然有 100MB 的包大小限制，但是 NPM 有丰富的国内节点。可以挑选一个使用。个人推荐知乎的。没有大小限制，而且也很稳定。</p><figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">【jsd出品，网宿国内节点】</span><br><span class="line">https://cdn.jsdelivr.net/npm/:package@:version/:file</span><br><span class="line">【unpkg 自建】</span><br><span class="line">https://cdn.cbd.int/:package@:version/:file</span><br></pre></td></tr></table></figure><p>当然你也可以利用<a href="https://unpkg.com/">unpkg</a>自建。(UNPKG 是一个内容源自 npm 的全球快速 CDN。它部署在 cloudflare 上，在大陆地区访问到的是香港节点。所以速度也不错。)</p><figure class="highlight txt"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://unpkg.com/:package@:version/:file</span><br></pre></td></tr></table></figure></li><li><p>如果每次都要在本地进行<code>npm publish</code>的话，npm 的提交是整个包一起上传的，不存在增量更新，耗时不说，而且还往往需要架梯子才能正常上传。所以我们可以把它交给 github action 来完成。</p><ul><li><p>在<a href="https://www.npmjs.com/">npm 官网</a>-&gt;头像-&gt;Access Tokens-&gt;Generate New Token,勾选 Automation 选项，<code>Token</code>只会显示这一次，之后如果忘记了就只能重新生成重新配置了。<br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/02/04.png"><br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/02/05.png"></p></li><li><p>在 github 的[AssetsRepo]仓库设置项里添加一个名为<code>NPM_TOKEN</code>的<code>secrets</code>，把获取的 Npm 的 Access token 输入进去。<br><img src="https://cdn.cbd.int/anzhiyu-static@1.0.0/img/02/06.png"></p></li><li><p>在本地的<code>[AssetsRepo]</code>文件夹下新建<code>[AssetsRepo]/.github/workflows/autopublish.yml</code>,</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">name:</span> <span class="string">Node.js</span> <span class="string">Package</span></span><br><span class="line"><span class="comment"># 监测图床分支，2020年10月后github新建仓库默认分支改为main，记得更改</span></span><br><span class="line"><span class="attr">on:</span></span><br><span class="line">  <span class="attr">push:</span></span><br><span class="line">    <span class="attr">branches:</span></span><br><span class="line">      <span class="bullet">-</span> <span class="string">master</span></span><br><span class="line"></span><br><span class="line"><span class="attr">jobs:</span></span><br><span class="line">  <span class="attr">publish-npm:</span></span><br><span class="line">    <span class="attr">runs-on:</span> <span class="string">ubuntu-latest</span></span><br><span class="line">    <span class="attr">steps:</span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">uses:</span> <span class="string">actions/checkout@v2</span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">uses:</span> <span class="string">actions/setup-node@v1</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">node-version:</span> <span class="string">&quot;12.x&quot;</span></span><br><span class="line">          <span class="attr">registry-url:</span> <span class="string">https://registry.npmjs.org/</span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">run:</span> <span class="string">npm</span> <span class="string">publish</span></span><br><span class="line">        <span class="attr">env:</span></span><br><span class="line">          <span class="attr">NODE_AUTH_TOKEN:</span> <span class="string">$&#123;&#123;secrets.npm_token&#125;&#125;</span></span><br></pre></td></tr></table></figure></li><li><p>在本地的<code>[AssetsRepo]</code>文件夹下打开终端，运行以下指令，上传新增内容至 github，即可触发部署。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 将更改提交</span></span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">&quot;npm publish&quot;</span></span><br><span class="line"><span class="comment"># 更新package版本号</span></span><br><span class="line">npm version patch</span><br><span class="line"><span class="comment"># 推送至github触发action</span></span><br><span class="line">git push</span><br></pre></td></tr></table></figure></li></ul><div class="note warning flat"><p>此处的四行指令顺序严格。<br>每次更新 npm 图床都需要先修改<code>[AssetsRepo]\package.json</code>里的<code>version</code>,也就是版本号。<br>而<code>npm version patch</code>即为更新 package.json 里的版本号的指令，效果是末尾版本号+1，例如<code>0.0.1=&gt;0.0.2</code>、<code>1.1.3=&gt;1.1.4</code>。免去了打开<code>package.json</code>再修改版本号的麻烦。（大版本更新还是需要手动改的）<br>更新 npm 图床务必要记得更新<code>package.json</code>里的版本号！</p></div></li></ol>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>目前可用cdn整理</title>
      <link href="/posts/fe76.html"/>
      <url>/posts/fe76.html</url>
      
        <content type="html"><![CDATA[<h1 id="可用-npm-镜像"><a href="#可用-npm-镜像" class="headerlink" title="可用 npm 镜像"></a>可用 npm 镜像</h1><h2 id="jsDelivr"><a href="#jsDelivr" class="headerlink" title="jsDelivr"></a>jsDelivr</h2><p><a href="https://cdn.jsdelivr.net/npm">https://cdn.jsdelivr.net/npm</a></p><h2 id="unpkg"><a href="#unpkg" class="headerlink" title="unpkg"></a>unpkg</h2><p><a href="https://unpkg.com/">https://unpkg.com/</a></p><h2 id="unpkg-自建"><a href="#unpkg-自建" class="headerlink" title="unpkg 自建"></a>unpkg 自建</h2><p><a href="https://cdn.cbd.int/">https://cdn.cbd.int</a></p><h2 id="npm-element"><a href="#npm-element" class="headerlink" title="npm element"></a>npm element</h2><p><a href="http://npm.elemecdn.com/">http://npm.elemecdn.com/</a></p><h2 id="cdn1-tianli0-top"><a href="#cdn1-tianli0-top" class="headerlink" title="cdn1.tianli0.top"></a>cdn1.tianli0.top</h2><p><a href="https://tianli-blog.club/jsd/">https://tianli-blog.club/jsd/</a> 处申请</p><h2 id="cdn-afdelivr-top"><a href="#cdn-afdelivr-top" class="headerlink" title="cdn.afdelivr.top"></a>cdn.afdelivr.top</h2><p><a href="https://cdn.afdelivr.top/npm/%E5%8C%85%E5%90%8D@%E7%89%88%E6%9C%AC%E5%8F%B7/%E6%96%87%E4%BB%B6%E5%90%8D">https://cdn.afdelivr.top/npm/包名@版本号/文件名</a></p><p><a href="https://arcitcgn.cn/202.html">https://arcitcgn.cn/202.html</a></p><h1 id="其他-cdn"><a href="#其他-cdn" class="headerlink" title="其他 cdn"></a>其他 cdn</h1><h2 id="bootcdn"><a href="#bootcdn" class="headerlink" title="bootcdn"></a>bootcdn</h2><p><a href="https://www.bootcdn.cn/">https://www.bootcdn.cn/</a></p><h2 id="loli-（cdnjs）"><a href="#loli-（cdnjs）" class="headerlink" title="loli （cdnjs）"></a>loli （cdnjs）</h2><p><a href="https://cdnjs.loli.net/">https://cdnjs.loli.net/</a></p><h2 id="Staticfile"><a href="#Staticfile" class="headerlink" title="Staticfile"></a>Staticfile</h2><p><a href="https://staticfile.org/">https://staticfile.org/</a></p><h2 id="75CDN"><a href="#75CDN" class="headerlink" title="75CDN"></a>75CDN</h2><p><a href="https://cdn.baomitu.com/">https://cdn.baomitu.com/</a></p><h2 id="今日头条-CDN"><a href="#今日头条-CDN" class="headerlink" title="今日头条 CDN"></a>今日头条 CDN</h2><p><a href="https://cdn.bytedance.com/">https://cdn.bytedance.com/</a></p><h2 id="cdnjs"><a href="#cdnjs" class="headerlink" title="cdnjs"></a>cdnjs</h2><p><a href="https://cdnjs.com/">https://cdnjs.com/</a></p>]]></content>
      
      
      
        <tags>
            
            <tag> 杂谈 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>cloudreve pdf预览偶尔出错修复方案</title>
      <link href="/posts/b1d7.html"/>
      <url>/posts/b1d7.html</url>
      
        <content type="html"><![CDATA[<div class="note warning simple"><p>完成此教程前请先完成前置教程</p><div calss='anzhiyu-tag-link'><a class="tag-Link" target="_blank" href="https://anheyu.com/posts/xoan.html">    <div class="tag-link-tips">引用站外地址</div>    <div class="tag-link-bottom">        <div class="tag-link-left" style="background-image: url(https://api.iowen.cn/favicon/anheyu.com/posts/xoan.html.png);"></div>        <div class="tag-link-right">            <div class="tag-link-title">cloudreve魔改前置教程</div>            <div class="tag-link-sitename">cloudreve魔改前置教程</div>        </div>        <i class="anzhiyufont anzhiyu-icon-angle-right"></i>    </div>    </a></div></div><p>找到 src\component\Viewer\PDF.js 下第<code>13</code>行左右</p><p>替换掉这一行</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 删除这一行</span></span><br><span class="line">pdfjs.<span class="property">GlobalWorkerOptions</span>.<span class="property">workerSrc</span> = <span class="string">`//cdnjs.cloudflare.com/ajax/libs/pdf.js/<span class="subst">$&#123;pdfjs.version&#125;</span>/pdf.worker.js`</span>;</span><br><span class="line"><span class="comment">// 加上这一行</span></span><br><span class="line">pdfjs.<span class="property">GlobalWorkerOptions</span>.<span class="property">workerSrc</span> = <span class="string">`//cdn.staticfile.org/pdf.js/<span class="subst">$&#123;pdfjs.version&#125;</span>/pdf.worker.js`</span>;</span><br></pre></td></tr></table></figure><p>然后在跟目录启动 cmd 或者 git bash, 执行下面这行代码</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn run build</span><br></pre></td></tr></table></figure><p>等待 1-2 分钟项目根目录下会产生 build 文件夹，将该文件夹压缩成一个压缩包。</p><p>然后来到服务器上 cloudreve 启动文件所在目录</p><p>执行 以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">./cloudreve -eject</span><br></pre></td></tr></table></figure><p>随后会在同级目录生成 statics 文件夹</p><p>进入 statics 文件夹，将里面的文件全部删除，再将刚刚的压缩包上传至 statics 文件夹里面，然后解压<br>解压完成以后记得重启 cloudreve 进程。</p>]]></content>
      
      
      
        <tags>
            
            <tag> cloudreve </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>butterfly 重装日记</title>
      <link href="/posts/sdxhu.html"/>
      <url>/posts/sdxhu.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>本篇为博主的部分魔改重装日记，以防自己日后因魔改迷失所做记录 📝</p></blockquote><h2 id="npm-镜像"><a href="#npm-镜像" class="headerlink" title="npm 镜像"></a>npm 镜像</h2><p>npm 淘宝镜像源</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm config set registry http://registry.npmmirror.com</span><br><span class="line"># 切回源</span><br><span class="line">npm config set registry https://registry.npmjs.org/</span><br></pre></td></tr></table></figure><h2 id="颜色-css"><a href="#颜色-css" class="headerlink" title="颜色 css"></a>颜色 css</h2><p>因魔改中有大量 css 颜色变量代码如<code>color: var(--anzhiyu-white)</code>等类似代码, 均为 css 颜色代码, 此处为博主目前所有的颜色变量定义 css, 可自行复制并修改</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 颜色 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-gray-op</span>: <span class="number">#9999992b</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-top</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-white</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white-op</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-black</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-op</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-none</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-gray</span>: <span class="number">#999999</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-yellow</span>: <span class="number">#ffc93e</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-main</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-main-op</span>: <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-theme</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-main</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">var</span>(--anzhiyu-main-op);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-blue</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">40</span>, <span class="number">109</span>, <span class="number">234</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-white</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-black</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">12px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-yellow</span>: <span class="number">0px</span> <span class="number">38px</span> <span class="number">77px</span> -<span class="number">26px</span> <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">201</span>, <span class="number">62</span>, <span class="number">0.12</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-red</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#ee7d7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-green</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">12px</span> -<span class="number">3px</span> <span class="number">#87ee7936</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-border</span>: <span class="number">0</span> <span class="number">8px</span> <span class="number">16px</span> -<span class="number">4px</span> <span class="number">#2c2d300c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-blackdeep</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">16px</span> -<span class="number">3px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-logo-color</span>: <span class="built_in">linear-gradient</span>(<span class="number">215deg</span>, <span class="number">#4584ff</span> <span class="number">30%</span>, <span class="number">#ff7676</span> <span class="number">70%</span>);</span><br><span class="line">  <span class="attr">--style-border</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--anzhiyu-blue-main</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--style-border-hover</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--style-border-dashed</span>: <span class="number">1px</span> dashed <span class="built_in">var</span>(--anzhiyu-theme-op);</span><br><span class="line">  <span class="attr">--style-border-avatar</span>: <span class="number">4px</span> solid <span class="built_in">var</span>(--anzhiyu-background);</span><br><span class="line">  <span class="attr">--style-border-always</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--anzhiyu-card-border);</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic1</span>: <span class="number">#fefeff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-white-acrylic2</span>: <span class="number">#fcfdff</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic2</span>: <span class="number">#08080a</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-black-acrylic1</span>: <span class="number">#0b0b0e</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-main-none</span>: <span class="number">#b8b8b800</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;light&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#4259ef23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#d8213c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#363636</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#f7f9fe</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">60</span>, <span class="number">60</span>, <span class="number">67</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#edf0f7</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#fafcff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#f2f5f8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#edf0f7</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0.05</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#c0c6d8</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> &#123;</span><br><span class="line">  <span class="attr">--global-bg</span>: <span class="number">#191919</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-theme-op</span>: <span class="number">#0084ff23</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-blue</span>: <span class="number">#0084ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-red</span>: <span class="number">#ff3842</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-pink</span>: <span class="number">#ff7c7c</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-green</span>: <span class="number">#57bd6a</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-fontcolor</span>: <span class="number">#f7f7fa</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-background</span>: <span class="number">#18171d</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-reverse</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-maskbg</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.6</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-maskbgdeep</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.85</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-hovertext</span>: <span class="number">#0a84ff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-ahoverbg</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-lighttext</span>: <span class="number">#f2b94b</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondtext</span>: <span class="number">#a1a2b8</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-scrollbar</span>: <span class="built_in">rgba</span>(<span class="number">200</span>, <span class="number">200</span>, <span class="number">223</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-btn-bg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-blockquote-bg</span>: <span class="number">#000</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-post-tabs-bg</span>: <span class="number">#121212</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-secondbg</span>: <span class="number">#30343f</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-nav</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">20px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">28</span>, <span class="number">28</span>, <span class="number">28</span>, <span class="number">0.4</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-bg</span>: <span class="number">#1d1b26</span>;</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-lightblack</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-shadow-light2black</span>: <span class="number">0</span> <span class="number">5px</span> <span class="number">12px</span> -<span class="number">5px</span> <span class="built_in">rgba</span>(<span class="number">102</span>, <span class="number">68</span>, <span class="number">68</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attr">--anzhiyu-card-border</span>: <span class="number">#42444a</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="安装-hexo"><a href="#安装-hexo" class="headerlink" title="安装 hexo"></a>安装 hexo</h2><p>参考教程: <a href="https://anheyu.com/posts/ddae.html">https://anheyu.com/posts/ddae.html</a></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-cli -g</span><br><span class="line">hexo init</span><br><span class="line">npm install hexo-deployer-git --save</span><br><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure><h2 id="安装-Butterfly"><a href="#安装-Butterfly" class="headerlink" title="安装 Butterfly"></a>安装 Butterfly</h2><p>参考教程: <a href="https://butterfly.js.org/posts/21cfbf15/#%E5%AE%89%E8%A3%9D">https://butterfly.js.org/posts/21cfbf15/#%E5%AE%89%E8%A3%9D</a></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><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><h2 id="修改-config-yml"><a href="#修改-config-yml" class="headerlink" title="修改 _config.yml"></a>修改 _config.yml</h2><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Hexo Configuration</span></span><br><span class="line"><span class="comment">## Docs: https://hexo.io/docs/configuration.html</span></span><br><span class="line"><span class="comment">## Source: https://github.com/hexojs/hexo/</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Site</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">安知鱼</span></span><br><span class="line"><span class="attr">subtitle:</span> <span class="string">&#x27;生活明朗 万物可爱&#x27;</span></span><br><span class="line"><span class="attr">description:</span> <span class="string">&#x27;生活明朗,万物可爱.&#x27;</span></span><br><span class="line"><span class="attr">keywords:</span> <span class="string">安知鱼,安知鱼的博客,博客,安知鱼博客,陈志伟,Blog,anzhiyu,安知鱼`Blog,hexo,ANZHIYU,</span> <span class="string">HEXO</span> <span class="string">anzhiyu,Blog,anzhiyu`Blog,💖,安,安知,安知鱼,In安知鱼,Go安知鱼,anzhiy</span></span><br><span class="line"><span class="attr">author:</span> <span class="string">安知鱼</span></span><br><span class="line"><span class="attr">language:</span> <span class="string">zh-CN</span></span><br><span class="line"><span class="attr">timezone:</span></span><br><span class="line"><span class="attr">email:</span> <span class="string">anzhiy-c@qq.com</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># URL</span></span><br><span class="line"><span class="comment">## Set your site url here. For example, if you use GitHub Page, set url as &#x27;https://username.github.io/project&#x27;</span></span><br><span class="line"><span class="attr">url:</span> <span class="string">https://anheyu.com</span></span><br><span class="line"><span class="attr">permalink:</span> <span class="string">posts/:abbrlink.html</span></span><br><span class="line"><span class="attr">permalink_defaults:</span></span><br><span class="line"><span class="attr">pretty_urls:</span></span><br><span class="line">  <span class="attr">trailing_index:</span> <span class="literal">true</span> <span class="comment"># Set to false to remove trailing &#x27;index.html&#x27; from permalinks</span></span><br><span class="line">  <span class="attr">trailing_html:</span> <span class="literal">true</span> <span class="comment"># Set to false to remove trailing &#x27;.html&#x27; from permalinks</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Directory</span></span><br><span class="line"><span class="attr">source_dir:</span> <span class="string">source</span></span><br><span class="line"><span class="attr">public_dir:</span> <span class="string">public</span></span><br><span class="line"><span class="attr">tag_dir:</span> <span class="string">tags</span></span><br><span class="line"><span class="attr">archive_dir:</span> <span class="string">archives</span></span><br><span class="line"><span class="attr">category_dir:</span> <span class="string">categories</span></span><br><span class="line"><span class="attr">code_dir:</span> <span class="string">downloads/code</span></span><br><span class="line"><span class="attr">i18n_dir:</span> <span class="string">:lang</span></span><br><span class="line"><span class="attr">skip_render:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Writing</span></span><br><span class="line"><span class="attr">new_post_name:</span> <span class="string">:title.md</span> <span class="comment"># File name of new posts</span></span><br><span class="line"><span class="attr">default_layout:</span> <span class="string">post</span></span><br><span class="line"><span class="attr">titlecase:</span> <span class="literal">false</span> <span class="comment"># Transform title into titlecase</span></span><br><span class="line"><span class="attr">external_link:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># Open external links in new tab</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">site</span> <span class="comment"># Apply to the whole site</span></span><br><span class="line">  <span class="attr">exclude:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line"><span class="attr">filename_case:</span> <span class="number">0</span></span><br><span class="line"><span class="attr">render_drafts:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">post_asset_folder:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">relative_link:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">future:</span> <span class="literal">true</span></span><br><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">true</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 class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="attr">wrap:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hljs:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">prismjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">preprocess:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Home page setting</span></span><br><span class="line"><span class="comment"># path: Root path for your blogs index page. (default = &#x27;&#x27;)</span></span><br><span class="line"><span class="comment"># per_page: Posts displayed per page. (0 = disable pagination)</span></span><br><span class="line"><span class="comment"># order_by: Posts order. (Order by date descending by default)</span></span><br><span class="line"><span class="attr">index_generator:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="number">10</span></span><br><span class="line">  <span class="attr">order_by:</span> <span class="string">-date</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Category &amp; Tag</span></span><br><span class="line"><span class="attr">default_category:</span> <span class="string">uncategorized</span></span><br><span class="line"><span class="attr">category_map:</span></span><br><span class="line"><span class="attr">tag_map:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Metadata elements</span></span><br><span class="line"><span class="comment">## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta</span></span><br><span class="line"><span class="attr">meta_generator:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Date / Time format</span></span><br><span class="line"><span class="comment">## Hexo uses Moment.js to parse and display date</span></span><br><span class="line"><span class="comment">## You can customize the date format as defined in</span></span><br><span class="line"><span class="comment">## http://momentjs.com/docs/#/displaying/format/</span></span><br><span class="line"><span class="attr">date_format:</span> <span class="string">YYYY-MM-DD</span></span><br><span class="line"><span class="attr">time_format:</span> <span class="string">HH:mm:ss</span></span><br><span class="line"><span class="comment">## updated_option supports &#x27;mtime&#x27;, &#x27;date&#x27;, &#x27;empty&#x27;</span></span><br><span class="line"><span class="attr">updated_option:</span> <span class="string">&#x27;mtime&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Pagination</span></span><br><span class="line"><span class="comment">## Set per_page to 0 to disable pagination</span></span><br><span class="line"><span class="attr">per_page:</span> <span class="number">10</span></span><br><span class="line"><span class="attr">pagination_dir:</span> <span class="string">page</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Include / Exclude file(s)</span></span><br><span class="line"><span class="comment">## include:/exclude: options only apply to the &#x27;source/&#x27; folder</span></span><br><span class="line"><span class="attr">include:</span></span><br><span class="line"><span class="attr">exclude:</span></span><br><span class="line"><span class="attr">ignore:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Extensions</span></span><br><span class="line"><span class="comment">## Plugins: https://hexo.io/plugins/</span></span><br><span class="line"><span class="comment">## Themes: https://hexo.io/themes/</span></span><br><span class="line"><span class="attr">theme:</span> <span class="string">butterfly</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Deployment</span></span><br><span class="line"><span class="comment">## Docs: https://hexo.io/docs/one-command-deployment</span></span><br><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">    <span class="attr">repository:</span></span><br><span class="line">      <span class="comment"># github: git@github.com:anzhiyu-c/anzhiyu-c.github.io.git  #用户名@服务器Ip:git仓库位置</span></span><br><span class="line">      <span class="attr">github:</span> <span class="string">https://anzhiyu-c:xxx@github.com/anzhiyu-c/anzhiyu-c.github.io.git</span></span><br><span class="line">    <span class="attr">branch:</span> <span class="string">master</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">type:</span> <span class="string">baidu_url_submitter</span> <span class="comment"># 这是新加的百度主动推送</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 文章链接转数字或字母：https://github.com/rozbo/hexo-abbrlink</span></span><br><span class="line"><span class="attr">abbrlink:</span></span><br><span class="line"><span class="attr">alg:</span> <span class="string">crc16</span>   <span class="comment">#算法： crc16(default) and crc32</span></span><br><span class="line"><span class="attr">rep:</span> <span class="string">hex</span>     <span class="comment">#进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 本地搜索：https://github.com/wzpan/hexo-generator-search</span></span><br><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">all</span></span><br><span class="line">  <span class="attr">content:</span> <span class="literal">true</span></span><br><span class="line"></span><br><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 class="comment">#开关插件版看板娘</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="comment"># scriptFrom: https://cdn.cbd.int/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-koharu</span> <span class="comment"># npm-module package name</span></span><br><span class="line">    <span class="comment"># use: https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.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">left</span> <span class="comment">#控制看板娘位置</span></span><br><span class="line">    <span class="attr">width:</span> <span class="number">150</span> <span class="comment">#控制看板娘大小</span></span><br><span class="line">    <span class="attr">height:</span> <span class="number">300</span> <span class="comment">#控制看板娘大小</span></span><br><span class="line">  <span class="attr">mobile:</span></span><br><span class="line">    <span class="attr">show:</span> <span class="literal">false</span> <span class="comment"># 手机中是否展示</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://github.com/hexojs/hexo-generator-sitemap</span></span><br><span class="line"><span class="attr">sitemap:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">sitemap.xml</span></span><br><span class="line">  <span class="attr">rel:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tags:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">categories:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://github.com/coneycode/hexo-generator-baidu-sitemap</span></span><br><span class="line"><span class="attr">baidusitemap:</span></span><br><span class="line">    <span class="attr">path:</span> <span class="string">baidusitemap.xml</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://github.com/hexojs/hexo-generator-feed</span></span><br><span class="line"><span class="comment">#Feed Atom</span></span><br><span class="line"><span class="attr">feed:</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">atom</span></span><br><span class="line">    <span class="attr">path:</span> <span class="string">atom.xml</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">20</span></span><br><span class="line"><span class="attr">rss:</span> <span class="string">/atom.xml</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Extensions</span></span><br><span class="line"><span class="attr">plugins:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">hexo-generator-feed</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">hexo-generator-baidu-sitemap</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">hexo-generator-sitemap</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 追番插件</span></span><br><span class="line"><span class="comment"># https://github.com/HCLonely/hexo-bilibili-bangumi</span></span><br><span class="line"><span class="attr">bangumi:</span> <span class="comment"># 追番设置</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">path:</span></span><br><span class="line">  <span class="attr">vmid:</span> <span class="number">372204786</span></span><br><span class="line">  <span class="attr">title:</span> <span class="string">&#x27;追番列表&#x27;</span></span><br><span class="line">  <span class="attr">quote:</span> <span class="string">&#x27;生命不息，追番不止！&#x27;</span></span><br><span class="line">  <span class="attr">show:</span> <span class="number">1</span></span><br><span class="line">  <span class="attr">lazyload:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">loading:</span></span><br><span class="line">  <span class="attr">metaColor:</span></span><br><span class="line">  <span class="attr">color:</span></span><br><span class="line">  <span class="attr">webp:</span></span><br><span class="line">  <span class="attr">progress:</span></span><br><span class="line">  <span class="attr">extra_options:</span></span><br><span class="line">    <span class="attr">key:</span> <span class="string">value</span></span><br><span class="line"><span class="attr">cinema:</span> <span class="comment"># 追剧设置</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">path:</span></span><br><span class="line">  <span class="attr">vmid:</span> <span class="number">372204786</span></span><br><span class="line">  <span class="attr">title:</span> <span class="string">&#x27;追剧列表&#x27;</span></span><br><span class="line">  <span class="attr">quote:</span> <span class="string">&#x27;生命不息，追剧不止！&#x27;</span></span><br><span class="line">  <span class="attr">show:</span> <span class="number">1</span></span><br><span class="line">  <span class="attr">lazyload:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">loading:</span></span><br><span class="line">  <span class="attr">metaColor:</span></span><br><span class="line">  <span class="attr">color:</span></span><br><span class="line">  <span class="attr">webp:</span></span><br><span class="line">  <span class="attr">progress:</span></span><br><span class="line">  <span class="attr">extra_options:</span></span><br><span class="line">    <span class="attr">key:</span> <span class="string">value</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 百度主动推送</span></span><br><span class="line"><span class="comment"># https://github.com/huiwang/hexo-baidu-url-submit</span></span><br><span class="line"><span class="attr">baidu_url_submit:</span></span><br><span class="line">  <span class="attr">count:</span> <span class="number">1</span>        <span class="comment"># 提交最新的多少个链接</span></span><br><span class="line">  <span class="attr">host:</span> <span class="string">blog.anheyu.com</span>  <span class="comment"># 在百度站长平台中添加的域名</span></span><br><span class="line">  <span class="attr">token:</span> <span class="string">Rgem9kAECSLflQq6</span>   <span class="comment"># 秘钥</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">baidu_urls.txt</span>   <span class="comment"># 文本文档的地址， 新链接会保存在此文本文档里</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># APlayer</span></span><br><span class="line"><span class="comment"># https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md</span></span><br><span class="line"><span class="attr">aplayer:</span></span><br><span class="line">  <span class="attr">meting:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">asset_inject:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><h2 id="配置文章链接转数字或字母"><a href="#配置文章链接转数字或字母" class="headerlink" title="配置文章链接转数字或字母"></a>配置文章链接转数字或字母</h2><p>参考: <a href="https://github.com/rozbo/hexo-abbrlink">https://github.com/rozbo/hexo-abbrlink</a></p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-abbrlink --save</span><br></pre></td></tr></table></figure><h2 id="本地搜索依赖"><a href="#本地搜索依赖" class="headerlink" title="本地搜索依赖"></a>本地搜索依赖</h2><p>参考：<a href="https://github.com/wzpan/hexo-generator-search">https://github.com/wzpan/hexo-generator-search</a></p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-search --save</span><br></pre></td></tr></table></figure><h2 id="live2d"><a href="#live2d" class="headerlink" title="live2d"></a>live2d</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">安装live2d</span></span><br><span class="line">npm install --save hexo-helper-live2d</span><br></pre></td></tr></table></figure><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">安装模型</span></span><br><span class="line">npm install --save live2d-widget-model-koharu</span><br></pre></td></tr></table></figure><h2 id="sitemap"><a href="#sitemap" class="headerlink" title="sitemap"></a>sitemap</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-sitemap --save</span><br><span class="line">npm install hexo-generator-baidu-sitemap --save-dev</span><br></pre></td></tr></table></figure><h2 id="Rss"><a href="#Rss" class="headerlink" title="Rss"></a>Rss</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-feed --save</span><br></pre></td></tr></table></figure><h2 id="追番插件"><a href="#追番插件" class="headerlink" title="追番插件"></a>追番插件</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-bilibili-bangumi --save</span><br></pre></td></tr></table></figure><h2 id="百度主动推送"><a href="#百度主动推送" class="headerlink" title="百度主动推送"></a>百度主动推送</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-baidu-url-submit --save</span><br></pre></td></tr></table></figure><h2 id="aplayer-音乐播放器"><a href="#aplayer-音乐播放器" class="headerlink" title="aplayer 音乐播放器"></a>aplayer 音乐播放器</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-tag-aplayer --save</span><br></pre></td></tr></table></figure><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">aplayerInject:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># aplayer音乐</span></span><br><span class="line"><span class="bullet">-</span> <span class="string">&lt;div</span> <span class="string">class=&quot;aplayer</span> <span class="literal">no</span><span class="string">-destroy&quot;</span> <span class="string">data-id=&quot;8152976493&quot;</span> <span class="string">data-server=&quot;netease&quot;</span> <span class="string">data-type=&quot;playlist&quot;</span>   <span class="string">data-order=&quot;list&quot;</span> <span class="string">data-fixed=&quot;true&quot;</span> <span class="string">data-preload=&quot;auto&quot;</span> <span class="string">data-autoplay=&quot;false&quot;</span> <span class="string">data-mutex=&quot;true&quot;</span> <span class="string">&gt;&lt;/div&gt;</span></span><br></pre></td></tr></table></figure><h2 id="配置自定义-css"><a href="#配置自定义-css" class="headerlink" title="配置自定义 css"></a>配置自定义 css</h2><p>新建文件<code>[Blogroot]/source/css/custom.css</code>,在 custom.css 中填入以下内容</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* @font-face &#123;</span></span><br><span class="line"><span class="comment">  font-family: Candyhome;</span></span><br><span class="line"><span class="comment">  src: url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/fonts/Candyhome.ttf);</span></span><br><span class="line"><span class="comment">  font-display: swap;</span></span><br><span class="line"><span class="comment">  font-weight: lighter;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: ZhuZiAYuanJWD;</span><br><span class="line">  <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">https://npm.elemecdn.com/anzhiyu-blog@1.1.6/fonts/ZhuZiAWan.woff2</span>);</span><br><span class="line">  <span class="attribute">font-display</span>: swap;</span><br><span class="line">  <span class="attribute">font-weight</span>: lighter;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-id">#menus</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;ZhuZiAYuanJWD&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">h1</span><span class="selector-id">#site-title</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: ZhuZiAYuanJWD;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">3em</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.article-title</span>,</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.blog-slider__title</span>,</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.categoryBar-list-link</span>,</span><br><span class="line"><span class="selector-tag">h1</span><span class="selector-class">.post-title</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: ZhuZiAYuanJWD;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.iconfont</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;iconfont&quot;</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">3em</span>;</span><br><span class="line">  <span class="comment">/* 可以定义图标大小 */</span></span><br><span class="line">  <span class="attribute">font-style</span>: normal;</span><br><span class="line">  -webkit-<span class="attribute">font-smoothing</span>: antialiased;</span><br><span class="line">  -moz-osx-<span class="attribute">font-smoothing</span>: grayscale;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 时间轴生肖icon */</span></span><br><span class="line">svg<span class="selector-class">.icon</span> &#123;</span><br><span class="line">  <span class="comment">/* 这里定义svg.icon，避免和Butterfly自带的note标签冲突 */</span></span><br><span class="line">  <span class="attribute">width</span>: <span class="number">1em</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">1em</span>;</span><br><span class="line">  <span class="comment">/* width和height定义图标的默认宽度和高度*/</span></span><br><span class="line">  <span class="attribute">vertical-align</span>: -<span class="number">0.15em</span>;</span><br><span class="line">  fill: currentColor;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.icon-zhongbiao</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#f7c768</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* bilibli番剧插件 */</span></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-class">.bangumi-tab</span><span class="selector-class">.bangumi-active</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-ahoverbg);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.bangumi-tab</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bangumi-button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-theme) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">10px</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-ahoverbg) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.bangumi-button</span><span class="selector-class">.bangumi-nextpage</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bangumi-button</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">10px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.bangumi-tab</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">10px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line">svg<span class="selector-class">.icon</span><span class="selector-class">.faa-tada</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.1em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bangumi-info-item</span> &#123;</span><br><span class="line">  <span class="attribute">border-right</span>: <span class="number">1px</span> solid <span class="number">#f2b94b</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bangumi-info-item</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#f2b94b</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bangumi-info-item</span> <span class="selector-tag">em</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#f2b94b</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 解决artitalk的图标问题 */</span></span><br><span class="line"><span class="selector-id">#uploadSource</span> &gt; svg &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">1.19em</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">1.5em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */</span></span><br><span class="line"><span class="selector-id">#page-header</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.not-top-img</span>)<span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 首页文章卡片 */</span></span><br><span class="line"><span class="selector-id">#recent-posts</span> &gt; <span class="selector-class">.recent-post-item</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.9</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 首页侧栏卡片 */</span></span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-widget</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.9</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 文章页面正文背景 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-id">#post</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.9</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 分页页面 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-id">#page</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.9</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 归档页面 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-id">#archive</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.9</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 标签页面 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-id">#tag</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.9</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 分类页面 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-id">#category</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.9</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*夜间模式伪类遮罩层透明*/</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-id">#recent-posts</span> &gt; <span class="selector-class">.recent-post-item</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#121212</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-class">.card-widget</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#121212</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">div</span><span class="selector-id">#post</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#121212</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">div</span><span class="selector-id">#tag</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#121212</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">div</span><span class="selector-id">#archive</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#121212</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">div</span><span class="selector-id">#page</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#121212</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">div</span><span class="selector-id">#category</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#121212</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> <span class="selector-tag">div</span><span class="selector-id">#category</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 页脚透明 */</span></span><br><span class="line"><span class="selector-id">#footer</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 头图透明 */</span></span><br><span class="line"><span class="selector-id">#page-header</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#rightside</span> &gt; <span class="selector-tag">div</span> &gt; <span class="selector-tag">button</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 滚动条 */</span></span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar-thumb &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">2em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar-corner &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::-moz-selection &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 音乐播放器 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* .aplayer .aplayer-lrc &#123;</span></span><br><span class="line"><span class="comment">  display: none !important;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-fixed</span><span class="selector-class">.aplayer-narrow</span> <span class="selector-class">.aplayer-body</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: -<span class="number">66px</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  <span class="comment">/* 默认情况下缩进左侧66px，只留一点箭头部分 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-fixed</span><span class="selector-class">.aplayer-narrow</span> <span class="selector-class">.aplayer-body</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">  <span class="comment">/* 鼠标悬停是左侧缩进归零，完全显示按钮 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aplayer</span><span class="selector-class">.aplayer-fixed</span> &#123;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">999999</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 评论框  */</span></span><br><span class="line"><span class="selector-class">.vwrap</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">5px</span> <span class="number">#bbb</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.3</span>);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">30px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">30px</span> <span class="number">0px</span> <span class="number">30px</span> <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 设置评论框 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.vcard</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">5px</span> <span class="number">#bbb</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.3</span>);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">30px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">30px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* md网站下划线 */</span></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-id">#hpp_talk</span> <span class="selector-tag">p</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 404页面 */</span></span><br><span class="line"><span class="selector-id">#error-wrap</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">40%</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">1000px</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">0</span>, -<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#error-wrap</span> <span class="selector-class">.error-content</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">18rem</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--card-bg);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--card-box-shadow);</span><br><span class="line">  <span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#error-wrap</span> <span class="selector-class">.error-content</span> <span class="selector-class">.error-img</span> &#123;</span><br><span class="line">  box-<span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">border-top-left-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border-bottom-left-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  <span class="attribute">background-position</span>: center;</span><br><span class="line">  <span class="attribute">background-size</span>: cover;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#error-wrap</span> <span class="selector-class">.error-content</span> <span class="selector-class">.error-info</span> &#123;</span><br><span class="line">  box-<span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: Titillium Web, <span class="string">&quot;PingFang SC&quot;</span>, <span class="string">&quot;Hiragino Sans GB&quot;</span>, <span class="string">&quot;Microsoft JhengHei&quot;</span>, <span class="string">&quot;Microsoft YaHei&quot;</span>, sans-serif;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#error-wrap</span> <span class="selector-class">.error-content</span> <span class="selector-class">.error-info</span> <span class="selector-class">.error_title</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: -<span class="number">4rem</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">9em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#error-wrap</span> <span class="selector-class">.error-content</span> <span class="selector-class">.error-info</span> <span class="selector-class">.error_subtitle</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: -<span class="number">3.5rem</span>;</span><br><span class="line">  <span class="attribute">word-break</span>: break-word;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.6em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#error-wrap</span> <span class="selector-class">.error-content</span> <span class="selector-class">.error-info</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.3rem</span> <span class="number">1.5rem</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--btn-bg);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--btn-color);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#body-wrap</span><span class="selector-class">.error</span> <span class="selector-class">.aside-list</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: nowrap;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: scroll;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#body-wrap</span><span class="selector-class">.error</span> <span class="selector-class">.aside-list</span> <span class="selector-class">.aside-list-group</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: nowrap;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">1200px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#body-wrap</span><span class="selector-class">.error</span> <span class="selector-class">.aside-list</span> <span class="selector-class">.aside-list-item</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#body-wrap</span><span class="selector-class">.error</span> <span class="selector-class">.aside-list</span> <span class="selector-class">.aside-list-item</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">object-fit</span>: cover;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#body-wrap</span><span class="selector-class">.error</span> <span class="selector-class">.aside-list</span> <span class="selector-class">.aside-list-item</span> <span class="selector-class">.thumbnail</span> &#123;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">230px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">143px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-card-bg);</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#body-wrap</span><span class="selector-class">.error</span> <span class="selector-class">.aside-list</span> <span class="selector-class">.aside-list-item</span> <span class="selector-class">.content</span> <span class="selector-class">.title</span> &#123;</span><br><span class="line">  -webkit-line-clamp: <span class="number">2</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">  -webkit-box-orient: vertical;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">  <span class="attribute">justify-content</span>: center;</span><br><span class="line">  <span class="attribute">align-items</span>: flex-end;</span><br><span class="line">  <span class="attribute">align-content</span>: center;</span><br><span class="line">  <span class="attribute">padding-top</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#body-wrap</span><span class="selector-class">.error</span> <span class="selector-class">.aside-list</span> <span class="selector-class">.aside-list-item</span> <span class="selector-class">.content</span> <span class="selector-tag">time</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 代码框主题 */</span></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">figure</span><span class="selector-class">.highlight</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如果不需要一图流，请删除<code>157行</code>这一部分代码</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 页脚透明 */</span></span><br><span class="line"><span class="selector-id">#footer</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 头图透明 */</span></span><br><span class="line"><span class="selector-id">#page-header</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在<code>_config.butterfly.yml</code>中搜索 Inject 添加以下代码，将自定义 css<code>custom.css</code>引入</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><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">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/css/custom.css&quot;</span> <span class="string">media=&quot;defer&quot;</span> <span class="string">onload=&quot;this.media=&#x27;all&#x27;&quot;&gt;</span></span><br></pre></td></tr></table></figure><h2 id="配置-pwa"><a href="#配置-pwa" class="headerlink" title="配置 pwa"></a>配置 pwa</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left"><a href="https://akilar.top/posts/8f31c3d0/">Butterfly 主题的 PWA 实现方案</a></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看魔改教程 </summary>              <div class='content'>              <p>安装必要插件</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">npm install --global gulp-cli # 全局安装gulp命令集</span><br><span class="line">npm install workbox-build gulp --save # 安装workbox和gulp插件</span><br><span class="line"></span><br><span class="line"># 压缩html插件</span><br><span class="line">npm install gulp-htmlclean --save-dev</span><br><span class="line">npm install --save gulp-htmlmin</span><br><span class="line"># 压缩css插件</span><br><span class="line">npm install gulp-clean-css --save-dev</span><br><span class="line"># 压缩js插件</span><br><span class="line"># 使用babel压缩js，与terser二选一</span><br><span class="line">npm install --save-dev gulp-uglify</span><br><span class="line">npm install --save-dev gulp-babel @babel/core @babel/preset-env</span><br><span class="line"># 使用terser压缩js，与babel二选一</span><br><span class="line">npm install gulp-terser --save-dev</span><br><span class="line">npm install --save-dev gulp-babel @babel/core @babel/preset-env</span><br><span class="line"># 压缩图片插件</span><br><span class="line">npm install --save-dev gulp-imagemin</span><br><span class="line"># 压缩字体插件(font-min仅支持压缩ttf格式的字体包)</span><br><span class="line">npm install gulp-fontmin --save-dev</span><br></pre></td></tr></table></figure><div class="tip warning"><p>关于 font-min 的补充说明，在本文中，是通过读取所有编译好的 html 文件（.&#x2F;public&#x2F;*<em>&#x2F;</em>.html）中的字符，然后匹配原有字体包内.&#x2F;public&#x2F;fonts&#x2F;<em>.ttf 字体样式，输出压缩后的字体包到.&#x2F;public&#x2F;fontsdest&#x2F;目录。所以最终引用字体的相对路径应该是&#x2F;fontsdest&#x2F;</em>.ttf。而本地测试时，如果没有运行 gulp，自然也就不会输出压缩字体包到 public 目录，也就看不到字体样式。</p></div><div class="tip warning"><p>gulp-terser 只会直接压缩 js 代码，所以不存在因为语法变动导致的错误 。事实上，当我们使用 jsdelivr 的 CDN 服务时，只需要在 css 或者 js 的后缀前添加.min,例如 example.js-&gt;example.min.js,JsDelivr 就会自动使用 terser 帮我们压缩好代码。</p></div><p>在 package.json 中添加</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;module&quot;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure><p>创建<code>gulpfile.js</code><br>在 Hexo 的根目录，创建一个<code>gulpfile.js</code>文件,打开<code>[Blogroot]/gulpfile.js</code>,</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * @Description: gulp</span></span><br><span class="line"><span class="comment"> * @Author: 安知鱼</span></span><br><span class="line"><span class="comment"> * @Email: 2268025923@qq.com</span></span><br><span class="line"><span class="comment"> * @Date: 2022-02-22 11:22:57</span></span><br><span class="line"><span class="comment"> * @LastEditTime: 2022-08-18 12:24:11</span></span><br><span class="line"><span class="comment"> * @LastEditors: 安知鱼</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">import</span> gulp <span class="keyword">from</span> <span class="string">&quot;gulp&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> cleanCSS <span class="keyword">from</span> <span class="string">&quot;gulp-clean-css&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> htmlmin <span class="keyword">from</span> <span class="string">&quot;gulp-htmlmin&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> htmlclean <span class="keyword">from</span> <span class="string">&quot;gulp-htmlclean&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> workbox <span class="keyword">from</span> <span class="string">&quot;workbox-build&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> fontmin <span class="keyword">from</span> <span class="string">&quot;gulp-fontmin&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 若使用babel压缩js，则取消下方注释，并注释terser的代码</span></span><br><span class="line"><span class="comment">// var uglify = require(&#x27;gulp-uglify&#x27;);</span></span><br><span class="line"><span class="comment">// var babel = require(&#x27;gulp-babel&#x27;);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 若使用terser压缩js</span></span><br><span class="line"><span class="keyword">import</span> terser <span class="keyword">from</span> <span class="string">&quot;gulp-terser&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//pwa</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;generate-service-worker&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> workbox.<span class="title function_">injectManifest</span>(&#123;</span><br><span class="line">    <span class="attr">swSrc</span>: <span class="string">&quot;./sw-template.js&quot;</span>,</span><br><span class="line">    <span class="attr">swDest</span>: <span class="string">&quot;./public/sw.js&quot;</span>,</span><br><span class="line">    <span class="attr">globDirectory</span>: <span class="string">&quot;./public&quot;</span>,</span><br><span class="line">    <span class="attr">globPatterns</span>: [</span><br><span class="line">      <span class="comment">// 缓存所有以下类型的文件，极端不推荐</span></span><br><span class="line">      <span class="comment">// &quot;**/*.&#123;html,css,js,json,woff2,xml&#125;&quot;</span></span><br><span class="line">      <span class="comment">// 推荐只缓存404，主页和主要样式和脚本。</span></span><br><span class="line">      <span class="string">&quot;404.html&quot;</span>,</span><br><span class="line">      <span class="string">&quot;index.html&quot;</span>,</span><br><span class="line">      <span class="string">&quot;js/main.js&quot;</span>,</span><br><span class="line">      <span class="string">&quot;css/index.css&quot;</span>,</span><br><span class="line">    ],</span><br><span class="line">    <span class="attr">modifyURLPrefix</span>: &#123;</span><br><span class="line">      <span class="string">&quot;&quot;</span>: <span class="string">&quot;./&quot;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//minify js babel</span></span><br><span class="line"><span class="comment">// 若使用babel压缩js，则取消下方注释，并注释terser的代码</span></span><br><span class="line"><span class="comment">// gulp.task(&#x27;compress&#x27;, () =&gt;</span></span><br><span class="line"><span class="comment">//   gulp.src([&#x27;./public/**/*.js&#x27;, &#x27;!./public/**/*.min.js&#x27;])</span></span><br><span class="line"><span class="comment">// .pipe(babel(&#123;</span></span><br><span class="line"><span class="comment">// presets: [&#x27;@babel/preset-env&#x27;]</span></span><br><span class="line"><span class="comment">// &#125;))</span></span><br><span class="line"><span class="comment">//     .pipe(uglify().on(&#x27;error&#x27;, function(e)&#123;</span></span><br><span class="line"><span class="comment">//       console.log(e);</span></span><br><span class="line"><span class="comment">//     &#125;))</span></span><br><span class="line"><span class="comment">// .pipe(gulp.dest(&#x27;./public&#x27;))</span></span><br><span class="line"><span class="comment">// );</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// minify js - gulp-tester</span></span><br><span class="line"><span class="comment">// 若使用terser压缩js</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;compress&quot;</span>, <span class="function">() =&gt;</span></span><br><span class="line">  gulp</span><br><span class="line">    .<span class="title function_">src</span>([</span><br><span class="line">      <span class="string">&quot;./public/**/*.js&quot;</span>,</span><br><span class="line">      <span class="string">&quot;!./public/**/*.min.js&quot;</span>,</span><br><span class="line">      <span class="string">&quot;!./public/js/custom/galmenu.js&quot;</span>,</span><br><span class="line">      <span class="string">&quot;!./public/js/custom/gitcalendar.js&quot;</span>,</span><br><span class="line">    ])</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">terser</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&quot;./public&quot;</span>))</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">//css</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;minify-css&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .<span class="title function_">src</span>(<span class="string">&quot;./public/**/*.css&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(</span><br><span class="line">      <span class="title function_">cleanCSS</span>(&#123;</span><br><span class="line">        <span class="attr">compatibility</span>: <span class="string">&quot;ie11&quot;</span>,</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&quot;./public&quot;</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩 public 目录内 html</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;minify-html&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .<span class="title function_">src</span>(<span class="string">&quot;./public/**/*.html&quot;</span>)</span><br><span class="line">    .<span class="title function_">pipe</span>(<span class="title function_">htmlclean</span>())</span><br><span class="line">    .<span class="title function_">pipe</span>(</span><br><span class="line">      <span class="title function_">htmlmin</span>(&#123;</span><br><span class="line">        <span class="attr">removeComments</span>: <span class="literal">true</span>, <span class="comment">//清除 HTML 註释</span></span><br><span class="line">        <span class="attr">collapseWhitespace</span>: <span class="literal">true</span>, <span class="comment">//压缩 HTML</span></span><br><span class="line">        <span class="attr">collapseBooleanAttributes</span>: <span class="literal">true</span>, <span class="comment">//省略布尔属性的值 &lt;input checked=&quot;true&quot;/&gt; ==&gt; &lt;input /&gt;</span></span><br><span class="line">        <span class="attr">removeEmptyAttributes</span>: <span class="literal">true</span>, <span class="comment">//删除所有空格作属性值 &lt;input id=&quot;&quot; /&gt; ==&gt; &lt;input /&gt;</span></span><br><span class="line">        <span class="attr">removeScriptTypeAttributes</span>: <span class="literal">true</span>, <span class="comment">//删除 &lt;script&gt; 的 type=&quot;text/javascript&quot;</span></span><br><span class="line">        <span class="attr">removeStyleLinkTypeAttributes</span>: <span class="literal">true</span>, <span class="comment">//删除 &lt;style&gt; 和 &lt;link&gt; 的 type=&quot;text/css&quot;</span></span><br><span class="line">        <span class="attr">minifyJS</span>: <span class="literal">true</span>, <span class="comment">//压缩页面 JS</span></span><br><span class="line">        <span class="attr">minifyCSS</span>: <span class="literal">true</span>, <span class="comment">//压缩页面 CSS</span></span><br><span class="line">        <span class="attr">minifyURLs</span>: <span class="literal">true</span>,</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&quot;./public&quot;</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//压缩字体</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">minifyFont</span>(<span class="params">text, cb</span>) &#123;</span><br><span class="line">  gulp</span><br><span class="line">    .<span class="title function_">src</span>(<span class="string">&quot;./public/fonts/*.ttf&quot;</span>) <span class="comment">//原字体所在目录</span></span><br><span class="line">    .<span class="title function_">pipe</span>(</span><br><span class="line">      <span class="title function_">fontmin</span>(&#123;</span><br><span class="line">        <span class="attr">text</span>: text,</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&quot;./public/fontsdest/&quot;</span>)) <span class="comment">//压缩后的输出目录</span></span><br><span class="line">    .<span class="title function_">on</span>(<span class="string">&quot;end&quot;</span>, cb);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;mini-font&quot;</span>, <span class="function"><span class="params">cb</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">var</span> buffers = [];</span><br><span class="line">  gulp</span><br><span class="line">    .<span class="title function_">src</span>([<span class="string">&quot;./public/**/*.html&quot;</span>]) <span class="comment">//HTML文件所在目录请根据自身情况修改</span></span><br><span class="line">    .<span class="title function_">on</span>(<span class="string">&quot;data&quot;</span>, <span class="keyword">function</span> (<span class="params">file</span>) &#123;</span><br><span class="line">      buffers.<span class="title function_">push</span>(file.<span class="property">contents</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    .<span class="title function_">on</span>(<span class="string">&quot;end&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">var</span> text = <span class="title class_">Buffer</span>.<span class="title function_">concat</span>(buffers).<span class="title function_">toString</span>(<span class="string">&quot;utf-8&quot;</span>);</span><br><span class="line">      <span class="title function_">minifyFont</span>(text, cb);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 执行 gulp 命令时执行的任务</span></span><br><span class="line">gulp.<span class="title function_">task</span>(</span><br><span class="line">  <span class="string">&quot;default&quot;</span>,</span><br><span class="line">  gulp.<span class="title function_">series</span>(<span class="string">&quot;generate-service-worker&quot;</span>, gulp.<span class="title function_">parallel</span>(<span class="string">&quot;compress&quot;</span>, <span class="string">&quot;minify-html&quot;</span>, <span class="string">&quot;minify-css&quot;</span>, <span class="string">&quot;mini-font&quot;</span>))</span><br><span class="line">);</span><br></pre></td></tr></table></figure><p>创建在 Hexo 的根目录，创建一个<code>sw-template.js</code>文件,打开<code>[Blogroot]/sw-template.js</code>,输入以下内容：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * @Description: sw</span></span><br><span class="line"><span class="comment"> * @Author: 安知鱼</span></span><br><span class="line"><span class="comment"> * @Email: 2268025923@qq.com</span></span><br><span class="line"><span class="comment"> * @Date: 2022-02-22 11:23:58</span></span><br><span class="line"><span class="comment"> * @LastEditTime: 2022-03-08 12:24:30</span></span><br><span class="line"><span class="comment"> * @LastEditors: 安知鱼</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> workboxVersion = <span class="string">&quot;5.1.3&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="title function_">importScripts</span>(<span class="string">`https://storage.googleapis.com/workbox-cdn/releases/<span class="subst">$&#123;workboxVersion&#125;</span>/workbox-sw.js`</span>);</span><br><span class="line"></span><br><span class="line">workbox.<span class="property">core</span>.<span class="title function_">setCacheNameDetails</span>(&#123;</span><br><span class="line">  <span class="attr">prefix</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">workbox.<span class="property">core</span>.<span class="title function_">skipWaiting</span>();</span><br><span class="line"></span><br><span class="line">workbox.<span class="property">core</span>.<span class="title function_">clientsClaim</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册成功后要立即缓存的资源列表</span></span><br><span class="line"><span class="comment">// 具体缓存列表在gulpfile.js中配置，见下文</span></span><br><span class="line">workbox.<span class="property">precaching</span>.<span class="title function_">precacheAndRoute</span>(self.<span class="property">__WB_MANIFEST</span>, &#123;</span><br><span class="line">  <span class="attr">directoryIndex</span>: <span class="literal">null</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 清空过期缓存</span></span><br><span class="line">workbox.<span class="property">precaching</span>.<span class="title function_">cleanupOutdatedCaches</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 图片资源（可选，不需要就注释掉）</span></span><br><span class="line"><span class="comment">// workbox.routing.registerRoute(</span></span><br><span class="line"><span class="comment">//   /\.(?:png|jpg|jpeg|gif|bmp|webp|svg|ico)$/,</span></span><br><span class="line"><span class="comment">//   new workbox.strategies.CacheFirst(&#123;</span></span><br><span class="line"><span class="comment">//     cacheName: &#x27;images&#x27;,</span></span><br><span class="line"><span class="comment">//     plugins: [</span></span><br><span class="line"><span class="comment">//       new workbox.expiration.ExpirationPlugin(&#123;</span></span><br><span class="line"><span class="comment">//         maxEntries: 1000,</span></span><br><span class="line"><span class="comment">//         maxAgeSeconds: 60 * 60 * 24 * 30,</span></span><br><span class="line"><span class="comment">//       &#125;),</span></span><br><span class="line"><span class="comment">//       new workbox.cacheableResponse.CacheableResponsePlugin(&#123;</span></span><br><span class="line"><span class="comment">//         statuses: [0, 200],</span></span><br><span class="line"><span class="comment">//       &#125;),</span></span><br><span class="line"><span class="comment">//     ],</span></span><br><span class="line"><span class="comment">//   &#125;)</span></span><br><span class="line"><span class="comment">// )</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 字体文件（可选，不需要就注释掉）</span></span><br><span class="line">workbox.<span class="property">routing</span>.<span class="title function_">registerRoute</span>(</span><br><span class="line">  <span class="regexp">/\.(?:eot|ttf|woff|woff2)$/</span>,</span><br><span class="line">  <span class="keyword">new</span> workbox.<span class="property">strategies</span>.<span class="title class_">CacheFirst</span>(&#123;</span><br><span class="line">    <span class="attr">cacheName</span>: <span class="string">&quot;fonts&quot;</span>,</span><br><span class="line">    <span class="attr">plugins</span>: [</span><br><span class="line">      <span class="keyword">new</span> workbox.<span class="property">expiration</span>.<span class="title class_">ExpirationPlugin</span>(&#123;</span><br><span class="line">        <span class="attr">maxEntries</span>: <span class="number">1000</span>,</span><br><span class="line">        <span class="attr">maxAgeSeconds</span>: <span class="number">60</span> * <span class="number">60</span> * <span class="number">24</span> * <span class="number">30</span>,</span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> workbox.<span class="property">cacheableResponse</span>.<span class="title class_">CacheableResponsePlugin</span>(&#123;</span><br><span class="line">        <span class="attr">statuses</span>: [<span class="number">0</span>, <span class="number">200</span>],</span><br><span class="line">      &#125;),</span><br><span class="line">    ],</span><br><span class="line">  &#125;)</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 谷歌字体（可选，不需要就注释掉）</span></span><br><span class="line">workbox.<span class="property">routing</span>.<span class="title function_">registerRoute</span>(</span><br><span class="line">  <span class="regexp">/^https:\/\/fonts\.googleapis\.com/</span>,</span><br><span class="line">  <span class="keyword">new</span> workbox.<span class="property">strategies</span>.<span class="title class_">StaleWhileRevalidate</span>(&#123;</span><br><span class="line">    <span class="attr">cacheName</span>: <span class="string">&quot;google-fonts-stylesheets&quot;</span>,</span><br><span class="line">  &#125;)</span><br><span class="line">);</span><br><span class="line">workbox.<span class="property">routing</span>.<span class="title function_">registerRoute</span>(</span><br><span class="line">  <span class="regexp">/^https:\/\/fonts\.gstatic\.com/</span>,</span><br><span class="line">  <span class="keyword">new</span> workbox.<span class="property">strategies</span>.<span class="title class_">CacheFirst</span>(&#123;</span><br><span class="line">    <span class="attr">cacheName</span>: <span class="string">&quot;google-fonts-webfonts&quot;</span>,</span><br><span class="line">    <span class="attr">plugins</span>: [</span><br><span class="line">      <span class="keyword">new</span> workbox.<span class="property">expiration</span>.<span class="title class_">ExpirationPlugin</span>(&#123;</span><br><span class="line">        <span class="attr">maxEntries</span>: <span class="number">1000</span>,</span><br><span class="line">        <span class="attr">maxAgeSeconds</span>: <span class="number">60</span> * <span class="number">60</span> * <span class="number">24</span> * <span class="number">30</span>,</span><br><span class="line">      &#125;),</span><br><span class="line">      <span class="keyword">new</span> workbox.<span class="property">cacheableResponse</span>.<span class="title class_">CacheableResponsePlugin</span>(&#123;</span><br><span class="line">        <span class="attr">statuses</span>: [<span class="number">0</span>, <span class="number">200</span>],</span><br><span class="line">      &#125;),</span><br><span class="line">    ],</span><br><span class="line">  &#125;)</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// jsdelivr的CDN资源（可选，不需要就注释掉）</span></span><br><span class="line"><span class="comment">// workbox.routing.registerRoute(</span></span><br><span class="line"><span class="comment">//   /^https:\/\/cdn\.jsdelivr\.net/,</span></span><br><span class="line"><span class="comment">//   new workbox.strategies.CacheFirst(&#123;</span></span><br><span class="line"><span class="comment">//     cacheName: &#x27;static-libs&#x27;,</span></span><br><span class="line"><span class="comment">//     plugins: [</span></span><br><span class="line"><span class="comment">//       new workbox.expiration.ExpirationPlugin(&#123;</span></span><br><span class="line"><span class="comment">//         maxEntries: 1000,</span></span><br><span class="line"><span class="comment">//         maxAgeSeconds: 60 * 60 * 24 * 30,</span></span><br><span class="line"><span class="comment">//       &#125;),</span></span><br><span class="line"><span class="comment">//       new workbox.cacheableResponse.CacheableResponsePlugin(&#123;</span></span><br><span class="line"><span class="comment">//         statuses: [0, 200],</span></span><br><span class="line"><span class="comment">//       &#125;),</span></span><br><span class="line"><span class="comment">//     ],</span></span><br><span class="line"><span class="comment">//   &#125;)</span></span><br><span class="line"><span class="comment">// )</span></span><br><span class="line"></span><br><span class="line">workbox.<span class="property">googleAnalytics</span>.<span class="title function_">initialize</span>();</span><br></pre></td></tr></table></figure><p>在<code>[Blogroot]\themes\butterfly\layout\includes\third-party\</code>目录下新建<code>pwanotice.pug</code>文件，<br>打开<code>[Blogroot]\themes\butterfly\layout\includes\third-party\pwanotice.pug</code>,输入：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">#app-refresh.<span class="property">app</span>-<span class="title function_">refresh</span>(style=<span class="string">&#x27;position: fixed;top: -2.2rem;left: 0;right: 0;z-index: 99999;padding: 0 1rem;font-size: 15px;height: 2.2rem;transition: all 0.3s ease;&#x27;</span>)</span><br><span class="line">  .<span class="property">app</span>-refresh-<span class="title function_">wrap</span>(style=<span class="string">&#x27; display: flex;color: #fff;height: 100%;align-items: center;justify-content: center;&#x27;</span>)</span><br><span class="line">    label ✨ 有新文章啦！ 👉</span><br><span class="line">    <span class="title function_">a</span>(href=<span class="string">&#x27;javascript:void(0)&#x27;</span> onclick=<span class="string">&#x27;location.reload()&#x27;</span>)</span><br><span class="line">      <span class="title function_">span</span>(style=<span class="string">&#x27;color: #fff;text-decoration: underline;cursor: pointer;&#x27;</span>) 🍗点击食用🍔</span><br><span class="line">script.</span><br><span class="line">  <span class="keyword">if</span> (<span class="string">&#x27;serviceWorker&#x27;</span> <span class="keyword">in</span> navigator) &#123;</span><br><span class="line">  <span class="keyword">if</span> (navigator.<span class="property">serviceWorker</span>.<span class="property">controller</span>) &#123;</span><br><span class="line">  navigator.<span class="property">serviceWorker</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;controllerchange&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title function_">showNotification</span>()</span><br><span class="line">  &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;load&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  navigator.<span class="property">serviceWorker</span>.<span class="title function_">register</span>(<span class="string">&#x27;/sw.js&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">showNotification</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">Snackbar</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> snackbarBg =</span><br><span class="line">  <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">getAttribute</span>(<span class="string">&#x27;data-theme&#x27;</span>) === <span class="string">&#x27;light&#x27;</span> ?</span><br><span class="line">  <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">Snackbar</span>.<span class="property">bgLight</span> :</span><br><span class="line">  <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">Snackbar</span>.<span class="property">bgDark</span></span><br><span class="line">  <span class="keyword">var</span> snackbarPos = <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">Snackbar</span>.<span class="property">position</span></span><br><span class="line">  <span class="title class_">Snackbar</span>.<span class="title function_">show</span>(&#123;</span><br><span class="line">  <span class="attr">text</span>: <span class="string">&#x27;✨ 有新文章啦！ 👉&#x27;</span>,</span><br><span class="line">  <span class="attr">backgroundColor</span>: snackbarBg,</span><br><span class="line">  <span class="attr">duration</span>: <span class="number">500000</span>,</span><br><span class="line">  <span class="attr">pos</span>: snackbarPos,</span><br><span class="line">  <span class="attr">actionText</span>: <span class="string">&#x27;🍗点击食用🍔&#x27;</span>,</span><br><span class="line">  <span class="attr">actionTextColor</span>: <span class="string">&#x27;#fff&#x27;</span>,</span><br><span class="line">  <span class="attr">onActionClick</span>: <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line">  location.<span class="title function_">reload</span>()</span><br><span class="line">  &#125;,</span><br><span class="line">  &#125;)</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="keyword">var</span> showBg =</span><br><span class="line">  <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">getAttribute</span>(<span class="string">&#x27;data-theme&#x27;</span>) === <span class="string">&#x27;light&#x27;</span> ?</span><br><span class="line">  <span class="string">&#x27;#3b70fc&#x27;</span> :</span><br><span class="line">  <span class="string">&#x27;#1f1f1f&#x27;</span></span><br><span class="line">  <span class="keyword">var</span> cssText = <span class="string">`top: 0; background: <span class="subst">$&#123;showBg&#125;</span>;`</span></span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;app-refresh&#x27;</span>).<span class="property">style</span>.<span class="property">cssText</span> = cssText</span><br><span class="line">  &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><p>修改<code>[Blogroot]\themes\butterfly\layout\includes\additional-js.pug</code>,在文件底部添加以下内容，注意缩进。<code>butterfly_v3.6.0</code>取消了缓存配置，转为完全默认，需要将<code>&#123;cache:theme.fragment_cache&#125;</code>改为<code>&#123;cache: true&#125;</code>:</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">      if theme.pjax.enable</span><br><span class="line">        !=partial(&#x27;includes/third-party/pjax&#x27;, &#123;&#125;, &#123;cache:theme.fragment_cache&#125;)</span><br><span class="line"></span><br><span class="line">      !=partial(&#x27;includes/third-party/baidu_push&#x27;, &#123;&#125;, &#123;cache:theme.fragment_cache&#125;)</span><br><span class="line"></span><br><span class="line"><span class="addition">+     if theme.pwa.enable</span></span><br><span class="line"><span class="addition">+       !=partial(&#x27;includes/third-party/pwanotice&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span></span><br></pre></td></tr></table></figure><p>将你的图标包移入相应的目录，例如我是<code>/img/siteicon/</code>，所以放到<code>[Blogroot]/source/img/siteicon/</code>目录下。</p><p>新建文件名为<code>manifest.json</code>并将其放到<code>[Blogroot]/source</code>目录下，此时还不能直接用，需要添加一些内容，以下是我的<code>manifest.json</code>配置内容，权且作为参考，其中的<code>theme_color</code>建议用取色器取设计的图标的主色调，<strong>同时务必配置 start_url 和 name 的配置项，这关系到你之后能否看到浏览器的应用安装按钮</strong>。：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;安知鱼`Blog&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;short_name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;安知鱼&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;theme_color&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#3b70fc&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;background_color&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#3b70fc&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;display&quot;</span><span class="punctuation">:</span> <span class="string">&quot;standalone&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;scope&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;start_url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;icons&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/img/siteicon/16.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;16x16&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/img/siteicon/32.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;32x32&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/img/siteicon/48.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;48x48&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/img/siteicon/64.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;64x64&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/img/siteicon/128.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;128x128&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/img/siteicon/144.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;144x144&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/img/siteicon/512.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;512x512&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;splash_pages&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">null</span></span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><p>打开主题配置文件<code>[Blogroot]/_config.butterfly.yml</code>,找到<code>PWA</code>配置项。添加图标路径。这里的 theme_color 建议改成你图标的主色调，包括<code>manifest.json</code>中的<code>theme_color</code>也是如此。</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><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">/manifest.json</span></span><br><span class="line">  <span class="attr">theme_color:</span> <span class="string">&quot;#3b70fc&quot;</span></span><br><span class="line">  <span class="attr">apple_touch_icon:</span> <span class="string">/img/siteicon/128.png</span></span><br><span class="line">  <span class="attr">favicon_32_32:</span> <span class="string">/img/siteicon/32.png</span></span><br><span class="line">  <span class="attr">favicon_16_16:</span> <span class="string">/img/siteicon/16.png</span></span><br><span class="line">  <span class="attr">mask_icon:</span> <span class="string">/img/siteicon/128.png</span></span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="添加外挂标签"><a href="#添加外挂标签" class="headerlink" title="添加外挂标签"></a>添加外挂标签</h2><p>新建<code>[Blogroot]/source/js/ali_font.js</code>, 输入以下内容</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line">!(<span class="keyword">function</span> (<span class="params">c</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> l,</span><br><span class="line">    h,</span><br><span class="line">    a,</span><br><span class="line">    t,</span><br><span class="line">    i,</span><br><span class="line">    v =</span><br><span class="line">      <span class="string">&#x27;&lt;svg&gt;&lt;symbol id=&quot;icon-dragon_chen&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#D6B196&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-498.122105 265.620211L431.157895 754.526316V485.052632h-66.074948c-14.470737 110.645895-44.355368 197.066105-102.696421 260.742736l-39.747368-36.432842C306.526316 617.876211 323.368421 462.901895 323.368421 242.526316V215.578947h377.263158v53.894737H377.182316c-0.404211 58.260211-2.209684 112.128-6.359579 161.684211H700.631579v53.894737h-122.152421a481.172211 481.172211 0 0 0 76.826947 119.70021l66.479158-39.855158 27.728842 46.214737-54.460631 32.687158c29.507368 24.953263 63.757474 45.675789 102.80421 58.098526l-16.303158 51.361684c-134.224842-42.711579-222.773895-167.073684-261.551158-268.207157H485.052632v221.857684l68.985263-41.391158 27.728842 46.214737-109.783579 65.886316zM646.736842 377.263158h-215.578947v-53.894737h215.578947v53.894737z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-dog_xu&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#D6B196&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-375.592421 150.393263c33.684211 44.544 75.210105 74.698105 124.739369 90.812632l11.425684 3.718737 10.401684-6.009264C781.204211 727.740632 808.421053 622.565053 808.421053 592.842105h-53.894737c0 22.069895-19.132632 80.869053-33.711158 103.504842-34.816-14.605474-64.538947-39.262316-89.249684-74.13221 48.316632-55.269053 92.079158-117.328842 120.535579-179.900632l-49.044211-22.285473c-23.767579 52.250947-59.742316 104.717474-100.055579 152.656842-24.010105-50.930526-41.148632-115.927579-51.658105-195.395369H700.631579v-53.894737h-155.189895A1848.050526 1848.050526 0 0 1 538.947368 161.684211h-53.894736c0 58.206316 2.155789 112.074105 6.494315 161.68421H323.368421v26.947368c0 216.549053-13.177263 263.545263-100.702316 359.046737l39.747369 36.432842c63.326316-69.093053 92.806737-118.272 105.714526-206.848H485.052632v-53.894736h-111.319579a1742.147368 1742.147368 0 0 0 3.449263-107.789474h120.158316c12.611368 98.250105 35.031579 177.475368 67.395368 238.187789-61.978947 65.536-128.053895 117.975579-173.298526 142.282106l25.519158 47.481263c47.589053-25.573053 114.095158-77.446737 177.55621-142.821053z m125.170526-411.971368l-80.842105-80.842106-38.103579 38.103579 80.842105 80.842106 38.103579-38.103579z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-dog&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M894.814316 904.434526l83.240421-183.134315-13.824-13.204211c-0.485053-0.458105-45.648842-47.589053-47.939369-185.263158-0.134737-7.922526-0.134737-33.953684-0.134736-55.996631-30.693053 15.306105-70.090105 19.887158-106.09179 19.887157-92.752842 0-163.624421-23.983158-210.647579-71.275789a192.512 192.512 0 0 1-27.944421-36.513684H377.263158v377.263158c342.662737 0 403.105684 51.092211 494.592 128.377263 7.922526 6.682947 15.521684 13.312 22.959158 19.86021z&quot; fill=&quot;#85C3DE&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M326.063158 282.947368c0 34.250105-13.231158 44.463158-29.642105 44.463158s-29.642105-10.213053-29.642106-44.463158c0-34.223158 13.231158-44.463158 29.642106-44.463157s29.642105 10.24 29.642105 44.463157zM269.473684 430.295579v311.646316L190.275368 916.210526h59.203369L323.368421 753.637053V377.263158h-26.947368c-119.403789 0-172.732632-53.382737-185.505685-107.789474h35.624421c51.092211 0 68.581053-15.764211 120.535579-62.544842 12.773053-11.506526 28.079158-25.276632 47.023158-41.741474l18.351158-15.952842-69.658947-99.139368-44.085895 30.989474 41.768421 59.472842c-11.183158 9.862737-20.884211 18.593684-29.480421 26.327579C180.736 212.156632 176.235789 215.578947 146.539789 215.578947H53.894737v26.947369c0 88.710737 66.910316 178.149053 215.578947 187.769263z m216.710737-161.414737c2.290526 71.733895 28.698947 136.326737 75.048421 182.918737C618.711579 509.628632 702.437053 538.947368 810.091789 538.947368c18.593684 0 36.190316-1.158737 52.628211-3.449263 3.745684 111.265684 33.630316 170.334316 51.496421 196.015158l-38.507789 84.722526C782.174316 742.049684 688.774737 700.631579 377.263158 700.631579v53.894737c34.277053 0 65.697684 0.512 94.639158 1.509052L374.595368 970.105263h59.203369l96.013474-211.240421c66.182737 4.338526 117.005474 11.829895 157.911578 22.016L626.229895 916.210526h59.176421l54.16421-119.134315c47.616 18.405053 79.737263 42.091789 113.125053 69.739789L805.753263 970.105263h59.203369l113.071157-248.778105-13.824-13.204211c-0.485053-0.458105-45.648842-47.589053-47.939368-185.263158C985.168842 498.553263 1024 447.811368 1024 377.263158c0-95.205053-66.506105-161.684211-161.684211-161.684211v53.894737c65.482105 0 107.789474 42.307368 107.789474 107.789474 0 89.088-87.013053 107.789474-160.013474 107.789474-92.752842 0-163.624421-23.983158-210.647578-71.27579-30.315789-30.504421-45.891368-65.832421-53.35579-98.735158 11.210105 6.952421 22.932211 13.338947 35.274105 19.186527l23.04-48.720843c-92.106105-43.654737-148.992-128.646737-219.243789-243.981473l-46.026105 28.05221c49.448421 81.246316 92.968421 148.506947 147.051789 199.302737z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-goat&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M548.378947 646.736842a952.32 952.32 0 0 1 140.90779-161.68421H107.789474c0 107.600842 0 107.600842-63.649685 169.283368l-13.069473 12.665263L66.721684 754.526316h417.172211c20.345263-41.472 43.654737-77.446737 64.485052-107.789474z&quot; fill=&quot;#F7C768&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M608.256 144.734316C555.762526 115.577263 506.098526 107.789474 485.052632 107.789474V53.894737c32.579368 0 91.270737 11.452632 149.369263 43.735579 75.290947 41.822316 130.694737 94.531368 171.385263 150.878316C755.873684 288.013474 697.101474 323.368421 646.736842 323.368421h-107.789474v-53.894737h107.789474c20.506947 0 48.424421-11.210105 80.437895-31.285895a471.04 471.04 0 0 0-118.918737-93.453473zM832.673684 342.231579c-16.384 0-29.642105 10.24-29.642105 44.463158 0 34.250105 13.231158 44.463158 29.642105 44.463158s29.642105-10.213053 29.642105-44.463158c0-34.223158-13.231158-44.463158-29.642105-44.463158zM1024 619.789474C1024 347.109053 901.066105 122.448842 686.753684 3.395368l-26.165895 47.104C914.324211 191.461053 964.688842 440.400842 969.647158 592.842105h-84.506947c-17.92-35.624421-45.352421-69.12-87.013053-101.995789l-16.788211-13.285053-16.734315 13.392842c-66.128842 52.897684-134.629053 127.083789-187.311158 209.677474H102.965895l-8.272842-20.318316C159.043368 617.013895 161.684211 603.109053 161.684211 485.052632v-53.894737h485.052631v-53.894737H161.684211c0-80.384 14.309053-110.026105 66.586947-137.916632l-25.384421-47.535158C123.365053 234.226526 107.789474 291.920842 107.789474 377.263158v107.789474c0 107.600842 0 107.600842-63.649685 169.283368l-13.069473 12.665263L110.618947 862.315789h58.206316l-43.897263-107.789473h103.477895l43.897263 107.789473h58.206316l-43.897263-107.789473h259.47621C508.981895 824.939789 485.052632 899.152842 485.052632 970.105263h53.894736c0-68.688842 27.270737-144.060632 68.958316-215.578947H687.157895c7.410526 0 13.473684 6.063158 13.473684 13.473684V862.315789h53.894737v-94.315789c0-37.160421-30.208-67.368421-67.368421-67.368421h-44.65179c40.771368-58.017684 89.438316-111.427368 138.913684-153.626947C841.512421 600.037053 862.315789 655.225263 862.315789 754.526316h53.894737c0-38.912-2.748632-74.482526-11.102315-107.789474H1024v-26.947368z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-goat_wei&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#D6B196&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-431.157895 50.202947c52.304842 70.925474 136.973474 152.144842 232.528843 190.383158l19.994947-50.041263c-109.271579-43.708632-202.805895-152.629895-238.780632-217.49221H808.421053v-53.894737H538.947368v-53.894737h215.578948v-53.894737h-215.578948V161.684211h-53.894736v161.68421h-215.578948v53.894737h215.578948v53.894737H215.578947v53.894737h255.757474c-35.974737 64.862316-129.536 173.783579-238.807579 217.49221l20.021895 50.041263c95.528421-38.238316 180.197053-119.484632 232.501895-190.383158V808.421053h53.894736v-246.218106z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-dragon&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M366.376421 344.441263l152.980211-152.98021c43.142737-43.142737 141.204211-9.216 270.201263 115.738947-15.225263 9.835789-25.114947 15.818105-44.13979 32.256s-38.076632 35.489684-59.418947 56.832c-4.203789 4.203789-51.173053 53.221053-78.740211 82.027789-10.805895-12.126316-22.743579-24.171789-34.654315-36.082526L493.136842 362.792421l-54.218105 54.218105-72.542316-72.569263zM862.315789 512c0 46.834526-45.352421 80.842105-107.789473 80.842105-108.948211 0-189.359158-28.806737-267.129263-56.697263C414.100211 509.871158 344.872421 485.052632 258.182737 485.052632 80.788211 485.052632 0 588.126316 0 683.897263h53.894737C73.216 659.779368 135.302737 646.736842 177.340632 646.736842c77.338947 0 223.124211 23.282526 291.893894 47.912421C547.462737 722.701474 615.989895 754.526316 734.315789 754.526316 862.315789 754.526316 916.210526 670.315789 916.210526 512h-53.894737z&quot; fill=&quot;#FF8787&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M552.421053 1024c-69.766737 0-113.825684-13.958737-156.402527-27.459368-54.487579-17.273263-110.807579-35.004632-232.421052-26.516211l-3.826527-53.733053c131.718737-9.458526 195.934316 10.967579 252.52379 28.887579 42.226526 13.365895 78.686316 24.926316 140.126316 24.926316 92.752842 0 148.210526-57.936842 148.210526-113.960421 0-16.949895-5.524211-101.618526-114.634105-101.618526-64.970105 0-112.747789 23.336421-163.328 48.02021C365.325474 830.571789 300.301474 862.315789 204.288 862.315789 85.908211 862.315789 0 787.294316 0 683.897263 0 588.126316 80.788211 485.052632 258.182737 485.052632c86.689684 0 155.917474 24.818526 229.214316 51.09221 45.810526 16.410947 92.564211 33.172211 145.488842 44.166737 9.000421-7.033263 13.850947-16.276211 13.850947-26.758737 0-37.187368-37.672421-74.859789-74.13221-111.265684l-3.287579-3.287579 38.103579-38.103579 3.260631 3.287579C652.853895 446.275368 700.631579 494.026105 700.631579 553.552842c0 12.719158-2.802526 24.926316-7.976421 36.109474A594.997895 594.997895 0 0 0 754.526316 592.842105c62.437053 0 107.789474-34.007579 107.789473-80.842105 0-58.853053-52.870737-110.268632-108.840421-164.702316l-8.057263-7.841684c-19.024842 16.437895-38.076632 35.489684-59.418947 56.832l-38.103579-38.103579c74.805895-74.832842 134.898526-134.898526 268.314947-141.931789V55.619368c-63.407158 7.787789-120.993684 39.424-121.667368 39.801264l-15.818105 8.811789-14.120421-11.344842C731.701895 66.452211 709.712842 53.894737 673.684211 53.894737c-41.418105 0-74.347789 25.869474-109.190737 53.301895-26.624 20.911158-54.137263 42.549895-86.851369 53.194105L469.342316 161.684211h-69.093053l-105.525895 105.525894-38.103579-38.130526L324.015158 161.684211H161.684211V107.789474h303.104c22.231579-8.272842 43.708632-25.168842 66.398315-42.981053C569.829053 34.438737 613.618526 0 673.684211 0c48.909474 0 81.408 17.946947 110.888421 40.097684C813.702737 26.300632 877.729684 0 943.157895 0h26.947368v323.368421h-53.894737v-53.167158c-54.164211 3.098947-92.914526 15.845053-127.002947 36.675369l1.832421 1.778526C852.587789 368.505263 916.210526 430.376421 916.210526 512c0 60.928-43.708632 109.945263-107.789473 127.622737V700.631579h53.894736v-53.894737h53.894737v53.894737h53.894737v53.894737h-53.894737v53.894737h-53.894737v-53.894737h-53.894736c-29.722947 0-53.894737-24.171789-53.894737-53.894737v-53.894737c-118.325895 0-207.063579-31.797895-285.318737-59.877053C400.437895 562.229895 335.494737 538.947368 258.182737 538.947368 117.059368 538.947368 53.894737 611.732211 53.894737 683.897263 53.894737 757.221053 115.738947 808.421053 204.288 808.421053c11.910737 0 23.228632-0.538947 34.034526-1.536C248.454737 796.321684 269.473684 770.640842 269.473684 739.166316c0-33.118316-43.088842-70.979368-58.152421-81.596632l30.935579-44.139789c8.299789 5.793684 81.111579 58.664421 81.111579 125.736421 0 19.429053-4.527158 37.052632-10.994526 52.304842 30.773895-10.051368 58.314105-23.498105 86.662737-37.349053C452.877474 727.848421 508.577684 700.631579 585.997474 700.631579 702.410105 700.631579 754.526316 778.725053 754.526316 856.144842 754.526316 938.657684 678.912 1024 552.421053 1024z m-21.180632-623.104L493.136842 362.792421l137.889684-137.889684 38.103579 38.103579-137.889684 137.889684z m-126.760421-18.351158l-38.103579-38.103579 152.980211-152.98021 38.103579 38.103579-152.980211 152.98021z m282.004211-218.624c15.494737-9.754947 43.331368-31.447579 43.331368-31.447579-25.734737-27.809684-49.556211-33.333895-67.368421-29.07621-19.240421 4.608-37.753263 24.602947-37.753263 24.602947s42.253474 22.447158 61.790316 35.920842z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-horse&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M776.003368 646.736842c16.599579-99.947789 43.439158-181.086316 83.213474-256.538947l6.817684-12.934737H269.473684c-36.756211 0-53.894737 54.945684-53.894737 92.05221 0 46.753684 6.656 77.527579 70.278737 176.074106l84.533895 128.269473L498.876632 646.736842h277.126736z&quot; fill=&quot;#FFAF6E&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M1024 0v404.210526c0 33.333895 0 134.736842-92.079158 134.736842h-13.824l-78.362947-109.056c-22.743579 49.906526-40.340211 103.046737-53.490527 162.950737h115.092211C937.310316 592.842105 970.105263 625.637053 970.105263 661.638737c0 60.631579-69.389474 154.300632-77.312 164.75621l-43.008-32.471579C875.466105 759.861895 916.210526 693.813895 916.210526 661.638737c0-5.982316-8.919579-14.901895-14.901894-14.901895h-125.332211C761.128421 736.121263 754.526316 840.569263 754.526316 970.105263h-53.894737c0-283.971368 31.097263-453.605053 110.888421-605.049263l20.318316-38.534737 112.801684 156.995369c14.443789-4.419368 25.465263-20.938105 25.465263-79.306106V0h53.894737z m-161.684211 161.684211h53.894737V0h-53.894737v80.842105c-17.381053-14.955789-38.184421-26.947368-80.842105-26.947368h-134.736842v53.894737h134.736842c37.672421 0 80.842105 40.906105 80.842105 53.894737z m-107.789473 0h-215.578948v53.894736h161.684211l53.894737-53.894736zM300.894316 766.544842L400.680421 916.210526h64.754526l-95.043368-142.551579L498.876632 646.736842h167.855157a1212.631579 1212.631579 0 0 1 9.431579-53.894737h-199.383579l-175.885473 173.702737z m109.97221-184.400842l-37.861052-38.319158-132.419369 130.802526C173.729684 571.095579 161.684211 529.812211 161.684211 469.315368 161.684211 398.578526 199.464421 323.368421 269.473684 323.368421h323.368421l53.894737-53.894737H269.473684c-6.709895 0-13.258105 0.565895-19.698526 1.482105C234.927158 249.451789 204.638316 215.578947 160.633263 215.578947 65.967158 215.578947 0 349.291789 0 469.315368c0 70.170947 16.141474 136.650105 49.232842 202.671158L6.197895 723.833263l41.472 34.41179 66.128842-79.737264-8.704-16.033684C83.105684 622.133895 53.894737 558.214737 53.894737 469.315368 53.894737 368.451368 106.765474 269.473684 160.633263 269.473684c13.231158 0 25.815579 9.889684 35.43579 20.533895C142.874947 321.967158 107.789474 388.500211 107.789474 469.315368c0 78.201263 19.698526 130.937263 93.642105 243.981474l-55.296 54.622316L280.899368 970.105263h64.754527l-130.048-195.072 195.260631-192.889263z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-monkey_shen&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#BBC4C9&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-431.157895 134.736842h161.684211v53.894737h53.894737V269.473684h-215.578948V161.684211h-53.894736v107.789473h-215.578948v431.157895h53.894737v-53.894737h161.684211v215.578947h53.894736v-215.578947z m0-161.68421h161.684211v107.789473h-161.684211v-107.789473z m-215.578947 0h161.684211v107.789473h-161.684211v-107.789473z m215.578947-161.684211h161.684211v107.789474h-161.684211v-107.789474z m-215.578947 0h161.684211v107.789474h-161.684211v-107.789474z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-ox_chou&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#D6B196&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-161.68421 188.631579h-159.555369c13.985684-172.813474 43.115789-357.429895 70.817684-385.158737L700.631579 269.473684H323.368421v53.894737h107.169684c-1.940211 45.756632-8.192 103.962947-15.76421 161.684211H323.368421v53.894736h83.968c-9.862737 68.446316-20.264421 130.128842-25.734737 161.684211H215.578947v53.894737h592.842106v-53.894737z m-346.543158-161.684211h149.800421a3313.717895 3313.717895 0 0 0-16.842105 161.684211h-158.477474c6.036211-35.247158 16.114526-95.636211 25.519158-161.684211z m22.608842-215.578947h171.735579c-15.198316 41.121684-27.405474 100.594526-36.890948 161.684211h-150.123789c7.383579-57.505684 13.419789-115.361684 15.279158-161.684211z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-monkey&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M757.733053 485.052632H565.894737a80.842105 80.842105 0 0 0-80.842105 80.842105v215.578947c0 40.96 43.546947 99.678316 77.446736 139.210105C596.426105 960.215579 603.055158 970.105263 603.055158 970.105263H754.526316s15.144421-18.674526 45.891368-58.071579S862.315789 809.984 862.315789 717.608421c0-89.573053-47.993263-166.346105-104.582736-232.555789z&quot; fill=&quot;#C3D686&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M538.947368 1024h-53.894736c0-32.794947 25.869474-87.417263 77.446736-103.316211C528.599579 881.152 485.052632 822.433684 485.052632 781.473684c0-44.570947 36.271158-80.842105 80.842105-80.842105h80.842105v53.894737h-80.842105a26.947368 26.947368 0 0 0-26.947369 26.947368c0 19.725474 36.675368 77.473684 92.133053 134.736842h88.602947c20.210526-14.147368 88.737684-71.464421 88.737685-198.602105 0-108.382316-93.237895-202.967579-168.151579-278.986105-49.502316-50.202947-88.576-89.842526-98.735158-128.61979-11.749053-44.732632-21.584842-112.586105-26.327579-148.318315H377.263158c-45.136842 0-89.519158 8.434526-121.802105 53.894736H431.157895v53.894737c-97.28 0-107.789474 113.071158-107.789474 161.684211v53.894737h53.894737v161.68421h-53.894737v-107.789474h-26.947368c-170.253474 0-188.631579-94.234947-188.631579-134.736842 0-31.043368 35.220211-72.326737 55.727158-93.722947 2.694737-14.686316 5.847579-28.348632 9.431579-41.013895H161.684211V215.578947h31.528421C239.642947 120.993684 317.224421 107.789474 377.263158 107.789474h185.640421l2.802526 23.794526c0.134737 1.050947 12.719158 106.657684 27.944421 164.756211 6.494316 24.872421 44.624842 63.514947 84.965053 104.448C760.481684 483.813053 862.315789 587.129263 862.315789 717.608421c0 92.375579-31.124211 155.028211-61.898105 194.425263C904.919579 892.146526 970.105263 803.004632 970.105263 673.684211c0-91.405474-42.819368-154.381474-84.237474-215.255579C847.791158 402.458947 808.421053 344.576 808.421053 269.473684c0-119.349895 87.093895-161.684211 161.68421-161.68421v53.894737c-32.417684 0-107.789474 10.509474-107.789474 107.789473 0 58.502737 31.555368 104.933053 68.096 158.639158C974.282105 492.597895 1024 565.679158 1024 673.684211c0 177.286737-108.301474 296.421053-269.473684 296.421052h-161.684211c-37.672421 0-53.894737 40.906105-53.894737 53.894737zM229.214316 269.473684a384.808421 384.808421 0 0 0-14.012632 58.341053l-1.401263 8.488421-6.090105 6.117053c-22.878316 22.932211-44.813474 52.601263-46.026105 62.275368 0 56.805053 53.76 75.264 107.789473 79.386947V431.157895c0-58.691368 13.473684-119.619368 46.511158-161.684211h-86.770526zM323.368421 1024h-53.894737c0-32.794947 25.869474-87.417263 77.446737-103.316211C313.020632 881.152 269.473684 822.433684 269.473684 781.473684c0-44.570947 36.271158-80.842105 80.842105-80.842105h45.16379A188.847158 188.847158 0 0 1 565.894737 592.842105h134.736842v53.894737h-134.736842c-74.293895 0-134.736842 60.442947-134.736842 134.736842v26.516211l-53.894737 0.377263V781.473684c0-9.162105 0.646737-18.135579 1.913263-26.947368H350.315789c-14.848 0-26.947368 12.072421-26.947368 26.947368 0 19.725474 36.675368 77.473684 92.133053 134.736842H431.157895v53.894737h-53.894737c-37.672421 0-53.894737 40.906105-53.894737 53.894737z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-horse_wu&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#FF8787&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-431.157895 26.947368h269.473685v-53.894736H538.947368v-161.684211h161.684211v-53.894737H411.001263c12.045474-33.28 20.156632-69.793684 20.156632-107.789473h-53.894737c0 121.963789-105.364211 233.391158-106.415158 234.496l38.858105 37.349052c2.883368-3.018105 43.816421-46.133895 77.392842-110.160842H485.052632v161.684211H215.578947v53.894736h269.473685v323.368421h53.894736V538.947368z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-ox&quot; viewBox=&quot;0 0 1025 1024&quot;&gt;&lt;path d=&quot;M540.294737 754.526316h215.578947c20.210526 0 35.112421 1.374316 53.894737 4.581052 91.863579 15.656421 145.354105 67.691789 161.684211 86.069895V916.210526h53.894736V635.580632l-7.895579-7.895579c-9.269895-9.269895-36.513684-49.232842-44.032-196.527158H540.294737a161.684211 161.684211 0 0 0-161.684211 161.68421v131.098948c43.304421 20.210526 97.28 30.585263 161.684211 30.585263z&quot; fill=&quot;#FFAF6E&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M1025.347368 635.580632V916.210526h-53.894736v-71.033263c-16.330105-18.405053-69.820632-70.413474-161.684211-86.069895V916.210526h-53.894737v-161.68421h-107.789473v215.578947h-53.894737V700.631579h161.68421c100.998737 0 172.570947 38.669474 215.578948 71.868632v-115.738948c-33.684211-43.627789-51.712-137.458526-53.706106-279.498105H701.978947c-76.934737 0-127.218526-26.219789-175.804631-51.550316a1556.048842 1556.048842 0 0 0-26.839579-13.743158c-26.839579 26.004211-66.209684 44.921263-115.738948 55.511579 24.441263 22.986105 60.874105 52.116211 106.469053 72.838737l-22.312421 49.044211c-76.584421-34.816-129.589895-88.926316-150.824421-113.125053-10.644211 0.619789-21.477053 1.024-32.687158 1.024a473.734737 473.734737 0 0 1-123.365053-15.952842l-93.022315 186.314105 68.581052 53.86779C167.882105 579.557053 237.891368 538.947368 324.715789 538.947368v53.894737c-95.986526 0-170.361263 62.490947-171.088842 63.137684l-16.78821 14.282106-136.838737-107.358316 109.729684-219.809684C46.430316 314.448842 1.347368 267.371789 1.347368 199.868632 1.347368 89.815579 121.586526 53.894737 163.031579 53.894737v53.894737c-14.120421 0-107.789474 17.165474-107.789474 92.079158C55.242105 290.465684 192.188632 323.368421 284.240842 323.368421c67.907368 0 122.421895-12.988632 157.696-35.624421-42.711579-14.336-95.097263-23.120842-169.337263-18.324211l-3.503158-53.786947c95.878737-6.117053 160.148211 8.515368 211.429053 28.833684C484.244211 235.439158 486.4 225.818947 486.4 215.578947c0-48.855579-57.829053-76.288-58.394947-76.557473l22.393263-49.017263C454.063158 91.648 540.294737 131.826526 540.294737 215.578947c0 18.566737-3.422316 35.84-9.997474 51.631158 7.060211 3.584 13.985684 7.168 20.776421 10.698106C597.854316 302.322526 638.248421 323.368421 701.978947 323.368421h269.473685v26.947368c0 214.689684 35.220211 266.590316 45.999157 277.369264l7.895579 7.895579z m-729.384421 25.141894l-98.789052 118.541474 86.797473 137.835789 45.594948-28.725894-65.913263-104.690527 37.052631-44.43621C358.642526 785.192421 439.080421 808.421053 540.294737 808.421053v-53.894737c-99.893895 0-175.077053-24.549053-223.474526-72.946527l-20.857264-20.857263z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-rabbit_mao&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#7DD47F&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-377.263158-188.631579h107.789474v323.368421c-20.48 0-39.936-11.264-40.016842-11.317895l-27.728842 46.214737c3.206737 1.940211 32.660211 18.997895 67.745684 18.997895 30.746947 0 53.894737-23.147789 53.894737-53.894737V269.473684h-215.578948v538.947369h53.894737V323.368421z m-107.789473 242.526316v-242.526316h-53.894737v196.904421l-107.789474 40.421053v-243.927579l169.094737-48.316632-14.821053-51.819789L269.473684 276.102737v304.801684l-36.405895 13.662316 18.917053 50.472421 178.741895-67.018105c-5.039158 69.928421-55.269053 106.981053-165.133474 122.933894l7.733895 53.328842C325.712842 746.657684 485.052632 723.536842 485.052632 565.894737z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-rabbit&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M680.96 488.744421a1666.667789 1666.667789 0 0 0-54.433684-23.95621c-16.006737 12.234105-33.899789 20.264421-60.631579 20.264421h-80.842105c-36.810105 0-83.644632 30.396632-104.394106 67.772631-42.819368 77.123368-53.409684 117.813895-11.021473 201.701053C397.096421 808.879158 431.157895 876.409263 431.157895 970.105263h338.539789l68.338527-138.859789c20.129684-40.96 24.252632-73.701053 24.252631-110.349474 0.026947-57.397895-25.061053-159.717053-181.328842-232.151579z&quot; fill=&quot;#FFBDD8&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M862.315789 720.896c0 36.621474-4.122947 69.389474-24.252631 110.349474L769.697684 970.105263H485.052632v-53.894737h48.370526C507.877053 880.074105 485.052632 833.509053 485.052632 781.473684c0-59.418947 24.171789-113.313684 63.218526-152.360421l38.103579 38.103579A161.091368 161.091368 0 0 0 538.947368 781.473684c0 54.784 35.381895 104.043789 63.514948 134.736842h133.712842l53.490526-108.759579c15.710316-31.851789 18.755368-55.834947 18.755369-86.554947 0-80.976842-63.434105-150.096842-178.607158-195.503158-17.542737 8.138105-38.292211 13.554526-63.919158 13.554526h-80.842105c-13.958737 0-43.924211 15.979789-57.290106 40.016843l-47.104-26.165895C401.408 515.449263 448.242526 485.052632 485.052632 485.052632h80.842105c37.268211 0 57.478737-15.440842 79.090526-36.45979C625.367579 336.195368 549.753263 269.473684 485.052632 269.473684h-107.789474a21.288421 21.288421 0 0 0-5.955369 2.021053A683.762526 683.762526 0 0 0 302.187789 194.021053c-35.84-34.223158-61.763368-58.933895-94.908631-79.440842A42.442105 42.442105 0 0 0 185.478737 107.789474a22.824421 22.824421 0 0 0-17.381053 7.194947c-10.913684 11.425684-6.063158 28.240842 1.428211 39.181474 21.989053 32.121263 47.912421 56.858947 83.752421 91.109052 20.614737 19.671579 49.259789 43.169684 77.392842 63.08379C281.007158 367.400421 215.578947 484.432842 215.578947 592.842105c0 74.482526 24.791579 124.065684 51.065264 176.586106C294.534737 825.209263 323.368421 882.903579 323.368421 970.105263h-53.894737c0-74.482526-24.791579-124.065684-51.065263-176.586105C190.517895 737.738105 161.684211 680.043789 161.684211 592.842105c0-90.866526 42.226526-197.685895 93.453473-274.485894a803.759158 803.759158 0 0 1-39.046737-34.115369C177.852632 247.754105 150.231579 221.399579 125.035789 184.616421c-24.441263-35.759158-22.797474-78.686316 4.069053-106.819368 26.300632-27.567158 70.898526-31.043368 106.522947-9.000421 37.941895 23.444211 65.562947 49.798737 103.774316 86.258526 9.970526 9.512421 33.037474 32.309895 56.93979 60.550737h68.634947c-27.621053-37.780211-60.416-72.730947-88.522105-99.543579-28.833684-27.540211-54.730105-52.116211-84.533895-74.024421L326.305684 0.296421c31.232 23.228632 57.802105 48.532211 87.309474 76.719158 53.840842 51.388632 94.450526 100.594526 121.74821 146.83621 82.836211 26.650947 150.042947 116.870737 165.025685 230.750316l1.724631 13.177263-9.404631 9.404632c-3.772632 3.772632-7.706947 7.653053-11.802948 11.587368C837.227789 561.178947 862.315789 663.498105 862.315789 720.896zM309.463579 754.526316c3.934316 8.057263 7.895579 16.087579 11.991579 24.144842C348.887579 832.970105 377.263158 889.128421 377.263158 970.105263h53.894737c0-93.696-34.061474-161.226105-61.520842-215.578947h-60.173474z m597.90821 53.894737c-3.422316 9.404632-7.814737 19.806316-13.770105 31.959579L829.790316 970.105263h60.065684l52.143158-105.957052c10.778947-21.935158 17.515789-40.016842 21.90821-55.727158h-56.535579zM514.694737 390.736842c0-34.223158-13.231158-44.463158-29.642105-44.463158s-29.642105 10.24-29.642106 44.463158c0 34.250105 13.231158 44.463158 29.642106 44.463158s29.642105-10.213053 29.642105-44.463158z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-rat_zi&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#85C3DE&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-431.157895 188.631579v-215.578947h269.473685v-53.894737H538.947368v-39.585684c26.543158-18.081684 94.585263-65.050947 177.852632-127.488L700.631579 215.578947H323.368421v53.894737h295.316211a4221.008842 4221.008842 0 0 1-121.640421 85.369263l-11.991579 8.003369V431.157895H242.526316v53.894737h242.526316v215.578947c0 48.343579-13.850947 53.894737-134.736843 53.894737v53.894737c105.391158 0 188.631579 0 188.631579-107.789474z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-rat&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M727.659789 431.157895c-132.581053 0-220.348632 47.454316-285.803789 154.354526-19.779368 32.309895-15.845053 76.503579-9.404632 96.579368 3.260632 10.159158 7.760842 18.647579 12.422737 25.546106C464.761263 737.010526 499.927579 754.526316 538.947368 754.526316h66.829474c1.158737 17.893053-1.967158 34.762105-15.144421 53.975579-12.692211 18.539789-37.807158 40.151579-56.32 54.810947 25.249684-0.673684 52.709053-0.997053 83.240421-0.997053C877.487158 862.315789 970.105263 711.922526 970.105263 571.176421 936.421053 512 882.364632 431.157895 727.659789 431.157895z&quot; fill=&quot;#85C3DE&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M210.432 1012.897684l-43.573895-31.690105c106.954105-147.051789 185.317053-171.196632 423.828211-172.705684 21.396211-31.258947 16.249263-56.266105 9.377684-89.70779-3.557053-17.138526-7.221895-34.842947-7.221895-54.433684 0-68.958316 25.330526-104.636632 63.407158-136.973474l34.896842 41.040842c-29.453474 25.061053-44.409263 46.780632-44.409263 95.932632 0 14.093474 2.937263 28.402526 6.063158 43.546947 5.901474 28.510316 12.8 62.032842-1.131789 99.462737 166.373053-10.24 264.542316-96.902737 264.542315-236.193684C916.210526 418.330947 827.580632 323.368421 684.921263 323.368421c-83.644632 0-153.303579 29.696-174.187789 39.612632a224.875789 224.875789 0 0 1-20.533895 31.339789l-41.741474-34.115368 20.884211 17.057684-20.911158-16.976842C448.781474 359.828211 485.052632 314.287158 485.052632 262.736842c0-34.816-8.946526-60.766316-26.570106-77.069474-17.515789-16.249263-44.786526-24.602947-81.219368-24.953263V323.368421h-53.894737V109.783579l24.872421-1.913263c64.700632-4.931368 114.095158 7.895579 146.863158 38.238316C524.207158 173.056 538.947368 212.291368 538.947368 262.736842c0 11.102316-1.131789 21.908211-3.072 32.202105 37.268211-12.584421 89.842526-25.465263 149.045895-25.465263C858.165895 269.473684 970.105263 387.907368 970.105263 571.176421 970.105263 711.922526 877.487158 862.315789 617.552842 862.315789c-258.667789 0-311.942737 19.698526-407.120842 150.581895z m19.105684-256.835368c-12.045474 0-24.387368-0.565895-37.025684-1.64379l-22.096842-1.859368-2.425263-22.016C167.747368 728.144842 161.684211 672.444632 161.684211 631.026526c0-103.585684 21.450105-178.903579 53.894736-259.045052V107.789474h53.894737v274.782315l-2.021052 4.904422C235.439158 465.758316 215.578947 533.800421 215.578947 631.026526c0 22.878316 2.101895 51.442526 3.826527 70.979369 99.678316 2.802526 172.813474-35.408842 222.450526-116.493474l48.020211 24.090947c-11.237053 28.133053-11.371789 51.577263-0.377264 67.853474 9.701053 14.282105 28.645053 23.174737 49.448421 23.174737v53.894737c-39.019789 0-74.186105-17.515789-94.073263-46.888421a100.244211 100.244211 0 0 1-12.422737-25.546106c-53.221053 49.178947-121.128421 73.943579-202.913684 73.970527zM379.957895 525.473684c0-34.223158-13.231158-44.463158-29.642106-44.463158s-29.642105 10.24-29.642105 44.463158c0 34.250105 13.231158 44.463158 29.642105 44.463158s29.642105-10.213053 29.642106-44.463158z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-rooster_you&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#BBC4C9&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-215.578947-188.631579h-161.684211v-26.947368h161.684211V242.526316H269.473684v53.894737h161.684211v26.947368h-161.684211v485.052632h53.894737v-53.894737h377.263158v53.894737h53.894737V323.368421zM323.368421 646.736842h377.263158v53.894737H323.368421v-53.894737z m0-269.473684h107.789474c0 103.316211-72.784842 107.654737-81.084632 107.789474L350.315789 538.947368c46.592 0 134.736842-33.792 134.736843-161.68421h53.894736v107.789474c0 29.722947 24.171789 53.894737 53.894737 53.894736h107.789474v53.894737H323.368421v-215.578947z m377.263158 0v107.789474h-107.789474v-107.789474h107.789474z m-215.578947-80.842105h53.894736v26.947368h-53.894736v-26.947368z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-rooster&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M891.688421 506.421895C877.244632 455.033263 862.315789 401.893053 862.315789 323.368421V116.224l-323.368421 195.745684V323.368421c0 78.524632 14.928842 131.664842 29.372632 183.053474 12.611368 44.894316 24.522105 87.282526 24.522105 140.314947 0 101.618526-77.931789 176.693895-168.286316 203.991579l5.416422 11.587368h215.578947c24.333474 0 43.385263-0.242526 58.556631-2.128842C811.52 846.821053 916.210526 764.550737 916.210526 646.736842c0-53.032421-11.910737-95.420632-24.522105-140.314947z&quot; fill=&quot;#FF8787&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M673.684211 354.357895c-16.384 0-29.642105-10.213053-29.642106-44.463158 0-34.223158 13.231158-44.463158 29.642106-44.463158s29.642105 10.24 29.642105 44.463158c0 34.250105-13.258105 44.463158-29.642105 44.463158zM540.106105 970.105263l-50.58021-107.789474h156.05221l50.607158 107.789474h59.553684l-51.60421-109.918316C811.52 846.821053 916.210526 764.550737 916.210526 646.736842c0-53.032421-11.910737-95.420632-24.522105-140.314947C877.244632 455.033263 862.315789 401.893053 862.315789 323.368421V107.789474c0-59.445895-48.343579-107.789474-107.789473-107.789474a107.924211 107.924211 0 0 0-107.789474 106.172632 100.890947 100.890947 0 0 0-24.117895-3.314527 88.710737 88.710737 0 0 0-88.602947 88.602948c0 20.668632 5.227789 39.720421 10.671158 53.921684l-99.489684 59.688421 93.749894 14.470737V377.263158c0 14.416842-5.901474 21.692632-33.360842 49.152l-11.129263 11.129263C398.228211 326.521263 324.985263 269.473684 215.740632 269.473684 96.768 269.473684 0 366.241684 0 485.214316V646.736842h53.894737v-161.522526A162.007579 162.007579 0 0 1 215.740632 323.368421c82.081684 0 140.422737 36.244211 240.64 152.252632l-38.615579 38.615579C367.804632 461.285053 323.098947 431.157895 259.584 431.157895A151.983158 151.983158 0 0 0 107.789474 582.952421V754.526316h53.894737v-171.573895A98.007579 98.007579 0 0 1 259.584 485.052632c46.322526 0 79.629474 20.911158 137.027368 86.016l18.970948 21.530947 128.080842-128.080842C572.200421 435.981474 592.842105 415.366737 592.842105 377.263158v-97.926737l23.309474-14.120421-13.662316-23.04c-0.161684-0.242526-14.578526-24.899368-14.578526-50.688 0-19.132632 15.575579-34.708211 34.70821-34.708211 5.093053 0 26.785684 3.179789 39.558737 18.647579l26.327579 46.026106 39.774316-24.090948-20.372211-49.367579C704.754526 140.449684 700.631579 117.517474 700.631579 107.789474c0-29.722947 24.171789-53.894737 53.894737-53.894737s53.894737 24.171789 53.894737 53.894737v215.578947c0 85.935158 16.680421 145.300211 31.366736 197.632C851.887158 564.008421 862.315789 601.141895 862.315789 646.736842c0 95.285895-99.408842 161.684211-188.631578 161.684211h-209.461895l-68.419369-145.704421C375.242105 618.954105 338.108632 592.842105 296.448 592.842105A80.976842 80.976842 0 0 0 215.578947 673.711158V862.315789h53.894737v-188.604631c0-14.874947 12.099368-26.974316 26.974316-26.974316 20.533895 0 38.965895 14.147368 50.553263 38.858105L480.579368 970.105263h59.526737z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-snake_si&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#FF8787&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-242.041263 180.762947l-52.116211-13.797052C657.219368 749.864421 651.425684 754.526316 619.789474 754.526316h-242.526316V485.052632h269.473684v53.894736h53.894737V215.578947H323.368421v538.947369c0 29.722947 24.171789 53.894737 53.894737 53.894737h242.526316c77.689263 0 91.189895-51.065263 108.274526-115.658106zM377.263158 269.473684h269.473684v161.684211H377.263158v-161.684211z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-tiger_yin&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#7DD47F&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M970.105263 512c0 224.983579-163.166316 412.186947-377.263158 450.533053v-54.460632C777.135158 870.507789 916.210526 707.206737 916.210526 512c0-222.881684-181.328842-404.210526-404.210526-404.210526S107.789474 289.118316 107.789474 512s181.328842 404.210526 404.210526 404.210526c9.081263 0 18.000842-0.754526 26.947368-1.374315v53.894736c-8.973474 0.538947-17.866105 1.374316-26.947368 1.374316-252.604632 0-458.105263-205.500632-458.105263-458.105263S259.395368 53.894737 512 53.894737s458.105263 205.500632 458.105263 458.105263z m-257.42821 299.250526l-107.789474-53.894737-24.117895 48.208843 107.789474 53.894736 24.117895-48.208842z m-269.473685-5.658947l-24.117894-48.208842-107.789474 53.894737 24.117895 48.208842 107.789473-53.894737zM700.631579 431.157895h-161.684211v-53.894737h107.789474v-53.894737H377.263158v53.894737h107.789474v53.894737h-161.684211v323.368421h53.894737v-53.894737h269.473684v53.894737h53.894737V431.157895z m-161.684211 161.68421h107.789474v53.894737h-107.789474v-53.894737z m-161.68421 0h107.789474v53.894737h-107.789474v-53.894737z m161.68421-107.789473h107.789474v53.894736h-107.789474v-53.894736z m-161.68421 0h107.789474v53.894736h-107.789474v-53.894736zM754.526316 215.578947h-223.097263l-20.803369-62.410105-51.119158 17.057684L474.624 215.578947H269.473684v107.789474h53.894737v-53.894737h377.263158v53.894737h53.894737V215.578947z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-snake&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M107.789474 790.474105c0-72.434526 67.880421-91.513263 121.451789-91.513263 74.401684 0 153.815579 34.438737 237.891369 70.925474 50.580211 21.935158 104.609684 45.325474 162.250105 63.083789-52.412632 44.786526-118.784 74.347789-195.152842 83.078737-143.171368 16.357053-326.440421 7.006316-326.440421-125.574737zM377.263158 215.578947c-15.575579 0-30.288842 3.449263-43.654737 9.377685A250.691368 250.691368 0 0 0 323.368421 296.421053c0 115.550316 76.422737 169.391158 137.83579 212.614736 8.138105 5.712842 16.141474 11.371789 23.848421 17.057685V323.368421a107.789474 107.789474 0 0 0-107.789474-107.789474z&quot; fill=&quot;#C3D686&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M671.528421 788.857263c44.328421 11.964632 89.626947 19.563789 136.892632 19.56379 89.168842 0 161.684211-60.442947 161.68421-134.736842s-72.515368-134.736842-161.68421-134.736843c-19.078737 0-37.025684 1.509053-54.218106 4.015158-0.754526-101.402947-38.211368-172.355368-79.413894-219.648L673.684211 323.368421a1749.962105 1749.962105 0 0 1-79.036632-1.751579c45.702737 35.866947 108.705684 107.870316 105.984 232.367158 0 0.431158-0.080842 0.808421-0.10779 1.239579-34.923789 10.994526-66.155789 26.731789-95.097263 45.190737a163.085474 163.085474 0 0 0-15.845052-42.388211c-21.557895-39.639579-60.065684-66.775579-97.360842-93.022316C433.098105 423.343158 377.263158 384 377.263158 296.421053c0-130.290526 108.274526-188.631579 215.578947-188.631579 64.134737 0 132.715789 12.045474 214.366316 37.807158C802.330947 180.250947 780.099368 209.381053 700.631579 214.635789V161.684211h-53.894737v53.679157c-63.272421-1.024-104.528842-5.200842-104.986947-5.254736l-5.578106 53.598315C538.408421 263.949474 592.357053 269.473684 673.684211 269.473684c125.170526 0 188.631579-48.128 188.631578-143.063579V106.981053l-18.432-6.144C747.789474 68.823579 668.025263 53.894737 592.842105 53.894737c-158.666105 0-269.473684 99.732211-269.473684 242.526316 0 115.550316 76.422737 169.391158 137.83579 212.614736 33.684211 23.713684 65.509053 46.106947 81.003789 74.698106 9.539368 17.542737 13.285053 33.414737 12.341895 47.750737 21.153684 9.108211 42.118737 17.839158 62.949052 25.977263C671.151158 620.193684 729.977263 592.842105 808.421053 592.842105c59.445895 0 107.789474 36.271158 107.789473 80.842106s-48.343579 80.842105-107.789473 80.842105c-105.472 0-203.237053-42.388211-297.768421-83.429053-94.800842-41.094737-184.346947-79.952842-281.411369-79.952842C122.718316 591.171368 53.894737 644.715789 53.894737 727.578947c0 79.063579 67.098947 136.434526 159.555368 136.434527 142.174316 0 230.426947-66.883368 306.79579-129.886316 31.420632 13.419789 62.787368 26.058105 94.450526 37.133474-47.077053 49.637053-110.969263 82.566737-186.610526 91.270736l5.066105 53.625264c93.453474-7.006316 143.144421 9.350737 195.718737 26.543157 46.457263 15.225263 94.127158 30.854737 169.822316 30.854737 19.994947 0 41.957053-1.077895 66.344421-3.557052l-5.416421-53.625263c-105.283368 10.778947-158.100211-6.548211-213.935158-24.872422-22.150737-7.275789-44.624842-14.632421-70.305684-20.345263a334.848 334.848 0 0 0 96.14821-82.297263z m-458.078316 21.261474C162.573474 810.118737 107.789474 784.276211 107.789474 727.578947c0-60.847158 62.733474-82.539789 121.451789-82.539789 77.850947 0 154.731789 30.288842 235.250526 64.943158-66.263579 52.924632-139.722105 100.136421-251.041684 100.136421z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-tiger&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M431.157895 162.250105V134.736842c0-41.552842-39.289263-80.842105-80.842106-80.842105-28.833684 0-57.128421 4.661895-58.314105 4.850526L269.473684 62.490947v83.887158C144.788211 223.824842 89.222737 346.839579 66.991158 431.157895h266.051368c240.747789 0 415.851789 107.789474 415.85179 269.473684-14.848-25.114947-43.924211-53.894737-88.68379-53.894737-67.988211 0-121.263158 71.033263-121.263158 161.684211 0 66.802526 30.477474 119.888842 60.712421 156.16 12.638316 15.171368 36.055579 37.726316 59.014737 58.88 5.066105 0.107789 9.781895 0.538947 15.009685 0.538947 219.297684 0 350.315789-191.811368 350.315789-377.263158C1024 327.545263 679.855158 172.813474 431.157895 162.250105z&quot; fill=&quot;#F7C768&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M673.684211 1024c-114.768842 0-188.820211-33.333895-254.167579-62.787368-53.625263-24.144842-99.974737-45.002105-161.28-45.002106-40.448 0-83.590737 23.255579-103.639579 45.16379l-39.747369-36.432842C142.497684 894.787368 199.168 862.315789 258.236632 862.315789c68.392421 0 119.861895 21.288421 172.921263 45.056V673.684211c0-35.166316-17.542737-64.107789-30.639158-80.815158-15.198316 9.835789-32.067368 18.890105-50.741895 26.947368l-21.342316-49.475368C469.800421 509.413053 485.052632 377.317053 485.052632 323.368421V221.642105A597.827368 597.827368 0 0 0 404.210526 215.578947h-26.947368V134.736842c0-12.099368-14.848-26.947368-26.947369-26.947368-9.377684 0-18.836211 0.592842-26.947368 1.347368V269.473684h-53.894737V211.671579c-136.030316 102.912-158.450526 266.886737-161.306947 295.882105 9.135158 9.108211 38.992842 25.061053 71.976421 38.669474l38.103579-59.365053 12.449684-1.589894C321.212632 473.653895 377.263158 392.192 377.263158 323.368421h53.894737c0 88.333474-68.796632 192.242526-180.870737 213.342316l-48.397474 75.398737-20.291368-7.437474C53.894737 557.756632 53.894737 523.317895 53.894737 512c0-50.041263 37.025684-254.733474 215.578947-365.621895V62.490947l22.528-3.745684C293.187368 58.556632 321.482105 53.894737 350.315789 53.894737c41.552842 0 80.842105 39.289263 80.842106 80.842105v27.513263c248.697263 10.563368 592.842105 165.295158 592.842105 484.486737 0 185.451789-131.018105 377.263158-350.315789 377.263158z m-13.473685-323.368421c-36.513684 0-67.368421 49.367579-67.368421 107.789474 0 85.746526 68.096 145.084632 89.465263 161.549473 91.540211-2.533053 164.378947-45.487158 213.827369-107.654737H700.631579v-53.894736h230.238316c8.919579-17.273263 16.357053-35.354947 22.285473-53.894737h-239.885473l-6.467369-17.650527C706.290526 735.582316 692.439579 700.631579 660.210526 700.631579zM485.052632 931.112421c33.926737 14.066526 70.521263 26.597053 114.607157 33.468632C569.424842 928.309895 538.947368 875.223579 538.947368 808.421053c0-90.650947 53.274947-161.684211 121.263158-161.684211 44.759579 0 73.835789 28.779789 88.68379 53.894737h217.007158c2.775579-17.866105 4.203789-35.920842 4.203789-53.894737 0-38.938947-5.658947-74.752-15.925895-107.627789l-126.706526 126.679579-38.103579-38.103579L932.001684 485.052632a367.939368 367.939368 0 0 0-57.775158-81.596632l-154.543158 154.543158-38.103579-38.103579 153.573053-153.573053a537.869474 537.869474 0 0 0-82.593684-56.751158l-140.665263 140.638316-38.103579-38.103579 128.134737-128.134737A794.731789 794.731789 0 0 0 538.947368 231.046737V323.368421c0 50.149053-11.102316 156.698947-95.932631 236.328421 18.378105 23.417263 42.037895 63.407158 42.037895 113.987369v257.42821zM215.578947 431.157895v-53.894737c39.774316 0 53.894737-29.022316 53.894737-53.894737h53.894737c0 53.571368-37.025684 107.789474-107.789474 107.789474z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-boar&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M732.079158 377.263158c-107.789474 0-186.421895 31.393684-281.869474 126.841263L180.331789 773.982316C257.724632 807.909053 348.725895 808.421053 485.052632 808.421053h96.013473c55.834947-34.411789 133.551158-53.894737 227.354948-53.894737h121.344L970.105263 680.555789V572.631579c0-94.315789-130.236632-195.368421-238.026105-195.368421z&quot; fill=&quot;#FFBDD8&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M808.421053 700.631579v53.894737c-196.446316 0-323.368421 84.641684-323.368421 215.578947h-53.894737c0-163.705263 148.075789-269.473684 377.263158-269.473684z m-323.368421 107.789474v-53.894737c-158.342737 0-245.598316 0-319.649685-49.367579L158.612211 700.631579H80.842105c-21.692632 0-26.624-14.821053-26.947368-26.947368v-82.620632c84.156632-11.183158 161.684211-74.913684 161.68421-186.853053V215.578947H161.684211v161.684211H134.736842c-66.964211 0-134.736842 37.025684-134.736842 107.789474h53.894737c0-42.630737 52.870737-53.894737 80.842105-53.894737h24.629895C147.132632 504.912842 85.153684 538.947368 26.947368 538.947368H0v134.736843c0 32.498526 21.530947 80.842105 80.842105 80.842105h61.682527c32.687158 20.506947 67.125895 33.145263 105.957052 41.013895A232.879158 232.879158 0 0 0 215.578947 916.210526h53.894737c0-41.930105 14.012632-80.303158 39.424-112.505263C358.885053 808.151579 415.959579 808.421053 485.052632 808.421053z m-72.946527-342.420211L323.368421 554.738526V431.157895h-53.894737v253.682526l180.736-180.736-38.103579-38.103579zM323.368421 161.684211h-53.894737v190.032842a769.536 769.536 0 0 1 53.894737-49.098106V161.684211z m323.368421-53.894737c-72.623158 0-146.809263 23.336421-215.578947 58.637473V107.789474h-53.894737v154.138947C458.832842 205.392842 555.331368 161.684211 646.736842 161.684211c148.587789 0 269.473684 120.885895 269.473684 269.473684v235.654737L809.579789 862.315789h61.359158L970.105263 680.555789V431.157895c0-178.310737-145.057684-323.368421-323.368421-323.368421z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-boar_hai&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-296.421053 0a296.421053 296.421053 0 1 0 592.842106 0 296.421053 296.421053 0 1 0-592.842106 0Z&quot; fill=&quot;#85C3DE&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M309.975579 804.756211l-27.136-46.592c103.073684-60.011789 183.026526-132.473263 241.475368-219.24379H350.315789l-13.473684-50.283789c58.88-33.980632 99.435789-117.571368 118.703158-165.295158H242.526316v-53.894737h538.947368v53.894737h-268.18021c-12.395789 34.088421-42.469053 106.603789-90.435369 161.68421h134.009263a680.555789 680.555789 0 0 0 46.349474-107.708631l51.092211 17.057684c-58.421895 175.265684-171.034947 309.490526-344.333474 410.381474z m192.350316-2.937264L467.806316 760.454737c88.414316-73.728 154.516211-158.773895 202.105263-259.907369l48.801684 22.959158a797.372632 797.372632 0 0 1-82.351158 137.781895c32.741053 15.009684 83.456 44.867368 137.647158 101.591579l-38.938947 37.268211c-57.236211-59.877053-109.325474-85.557895-133.766737-95.178106a850.997895 850.997895 0 0 1-98.977684 96.848842z m48.613052-536.872421l-80.842105-53.894737 29.884632-44.840421 80.842105 53.894737-29.884632 44.840421zM512 53.894737C259.395368 53.894737 53.894737 259.395368 53.894737 512s205.500632 458.105263 458.105263 458.105263c9.081263 0 17.973895-0.835368 26.947368-1.374316v-53.894736c-8.946526 0.619789-17.866105 1.374316-26.947368 1.374315-222.881684 0-404.210526-181.328842-404.210526-404.210526S289.118316 107.789474 512 107.789474s404.210526 181.328842 404.210526 404.210526c0 195.206737-139.075368 358.507789-323.368421 396.045474v54.460631c214.096842-38.346105 377.263158-225.549474 377.263158-450.533052C970.105263 259.395368 764.604632 53.894737 512 53.894737z&quot; fill=&quot;#231F20&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-bilibili1&quot; viewBox=&quot;0 0 1129 1024&quot;&gt;&lt;path d=&quot;M234.909 9.656a80.468 80.468 0 0 1 68.398 0 167.374 167.374 0 0 1 41.843 30.578l160.937 140.82h115.07l160.936-140.82a168.983 168.983 0 0 1 41.843-30.578A80.468 80.468 0 0 1 930.96 76.445a80.468 80.468 0 0 1-17.703 53.914 449.818 449.818 0 0 1-35.406 32.187 232.553 232.553 0 0 1-22.531 18.508h100.585a170.593 170.593 0 0 1 118.289 53.109 171.397 171.397 0 0 1 53.914 118.288v462.693a325.897 325.897 0 0 1-4.024 70.007 178.64 178.64 0 0 1-80.468 112.656 173.007 173.007 0 0 1-92.539 25.75H212.377a341.186 341.186 0 0 1-72.421-4.024A177.835 177.835 0 0 1 28.91 939.065a172.202 172.202 0 0 1-27.36-92.539V388.662a360.498 360.498 0 0 1 0-66.789A177.03 177.03 0 0 1 162.487 178.64h105.414c-16.899-12.07-31.383-26.555-46.672-39.43a80.468 80.468 0 0 1-25.75-65.984 80.468 80.468 0 0 1 39.43-63.57M216.4 321.873a80.468 80.468 0 0 0-63.57 57.937 108.632 108.632 0 0 0 0 30.578v380.615a80.468 80.468 0 0 0 55.523 80.469 106.218 106.218 0 0 0 34.601 5.632h654.208a80.468 80.468 0 0 0 76.444-47.476 112.656 112.656 0 0 0 8.047-53.109v-354.06a135.187 135.187 0 0 0 0-38.625 80.468 80.468 0 0 0-52.304-54.719 129.554 129.554 0 0 0-49.89-7.242H254.22a268.764 268.764 0 0 0-37.82 0z m0 0&quot; fill=&quot;#20B0E3&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M348.369 447.404a80.468 80.468 0 0 1 55.523 18.507 80.468 80.468 0 0 1 28.164 59.547v80.468a80.468 80.468 0 0 1-16.094 51.5 80.468 80.468 0 0 1-131.968-9.656 104.609 104.609 0 0 1-10.46-54.719v-80.468a80.468 80.468 0 0 1 70.007-67.593z m416.02 0a80.468 80.468 0 0 1 86.102 75.64v80.468a94.148 94.148 0 0 1-12.07 53.11 80.468 80.468 0 0 1-132.773 0 95.757 95.757 0 0 1-12.875-57.133V519.02a80.468 80.468 0 0 1 70.007-70.812z m0 0&quot; fill=&quot;#20B0E3&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-yinle&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512.2976 0a531.2 531.2 0 0 0-512 548.48V960h128V548.48a398.72 398.72 0 0 1 384-411.52 398.72 398.72 0 0 1 384 411.52V960h128V548.48A531.2 531.2 0 0 0 512.2976 0z&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M64.2976 576l256 0 0 448-256 0 0-448Z&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M704.2976 576l256 0 0 448-256 0 0-448Z&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-icon-test-copy&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M512 512m-229.517241 0a229.517241 229.517241 0 1 0 459.034482 0 229.517241 229.517241 0 1 0-459.034482 0Z&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M512 1024A512 512 0 1 1 1024 512 512 512 0 0 1 512 1024z m0-141.241379A370.758621 370.758621 0 1 0 141.241379 512 370.758621 370.758621 0 0 0 512 882.758621z&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-V&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M1012.47774251 492.58192592L544.94137566 87.22962963a49.96686561 49.96686561 0 0 0-65.88275132 0L11.63784127 492.6975097c-21.03624691 18.26223633-23.3479224 49.93219048-5.08568606 70.96843739 18.03106878 21.03624691 49.93219048 23.3479224 70.96843738 5.08568607L512 191.83294532l434.71057495 376.91868784c9.47786949 8.20644797 21.26741446 12.25188008 32.82579189 12.13629629 14.10122046 0 27.97127337-5.77918871 38.02706173-17.33756613 18.14665256-20.92066314 15.95056084-52.70620106-5.08568606-70.9684374z&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M109.30613051 567.59579541V896.89396825c0 42.53482892 34.90629982 77.44112875 77.44112875 77.44112875h220.76500882V666.30433862c0-25.54401411 20.92066314-46.46467725 46.46467724-46.46467724h116.16169313c25.54401411 0 46.46467725 20.92066314 46.46467725 46.46467724V974.335097h220.76500882c42.53482892 0 77.44112875-34.90629982 77.44112874-77.44112875l0.11558377-329.29817284L512 218.18604586 109.30613051 567.59579541zM848.00203175 197.49655027h-63.91782716c-12.82979894 0-23.23233862 10.40253968-23.23233863 23.23233862v24.27259259l110.49808818 95.70336508V220.72888889h-0.11558377c0-12.82979894-10.40253968-23.23233862-23.23233862-23.23233862zM905.44716754 83.18419754s-34.90629982 56.86721693-89.11508994 100.32671603c152.68616579 13.98563668 127.83565432-133.26809171 127.83565432-133.2680917-134.07717813-10.28695591-132.92134039 102.29164021-131.072 127.83565432 20.92066314-20.92066314 49.70102293-62.64640564 92.35143562-94.89427865zM798.53217637 174.61096297c-19.64924162-16.52847972-40.56990476-43.45949912-51.203612-53.97762258 0 0 32.94137566 20.57391182 56.40488184 49.3542716 2.42725926-18.37782011 6.47269135-93.3916896-93.16052205-85.3008254 0 0-13.98563668 104.71889947 87.95925221 89.92417638z&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-zhifeiji&quot; viewBox=&quot;0 0 1167 1024&quot;&gt;&lt;path d=&quot;M41.201759 463.52493L1110.665064 30.117647c10.32605-4.159104 21.942857 0.860504 26.101961 11.043137 1.434174 3.728852 1.864426 7.744538 1.003921 11.616807L949.033691 978.823529c-2.151261 10.89972-12.764146 17.927171-23.663865 15.632493-2.72493-0.573669-5.306443-1.721008-7.601121-3.298599L634.80624 789.79944l-163.065546 133.951821c-16.492997 13.62465-40.87395 11.186555-54.498599-5.306443-3.011765-3.728852-5.306443-7.887955-6.884034-12.477311l-102.973669-313.080112-265.178712-91.787115c-10.469468-3.585434-16.062745-15.058824-12.333893-25.528291 1.864426-5.44986 6.023529-9.895798 11.329972-12.047059z&quot; fill=&quot;#FCFDFC&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M929.385512 1023.569748c-3.155182 0-6.453782-0.286835-9.752381-1.003922-6.740616-1.434174-12.907563-4.015686-18.50084-8.031372L635.953579 825.940616l-146.142297 120.040336c-13.911485 11.473389-31.408403 16.779832-49.335574 15.058824-17.927171-1.721008-34.133333-10.32605-45.463305-24.237535-5.306443-6.453782-9.322129-13.768067-11.903642-21.79944l-98.527731-299.598879-251.697479-87.19776c-12.333894-4.302521-22.229692-13.05098-27.966386-24.811204s-6.453782-24.954622-2.151261-37.288515c4.589356-13.337815 14.771989-23.9507 27.82297-29.257143L1099.908761 3.585434c24.954622-10.039216 53.351261 2.007843 63.533894 26.819048 3.585434 8.891877 4.445938 18.644258 2.581513 28.109804L977.143495 984.560224c-4.732773 23.090196-25.098039 39.009524-47.757983 39.009524z m-294.579272-233.770308l282.962465 201.357983c2.294678 1.577591 4.87619 2.72493 7.601121 3.298599 10.89972 2.151261 21.512605-4.87619 23.663865-15.632493L1137.914364 52.777591c0.860504-3.872269 0.430252-7.887955-1.003922-11.616807-4.159104-10.32605-15.919328-15.202241-26.101961-11.043137L41.201759 463.52493c-5.306443 2.151261-9.465546 6.597199-11.47339 12.047059-1.721008 5.019608-1.434174 10.469468 0.860505 15.345658 2.294678 4.87619 6.453782 8.461625 11.473389 10.182633l265.178711 91.787115L410.214644 905.967507c1.434174 4.589356 3.872269 8.748459 6.884033 12.477311 6.597199 8.031373 15.919328 12.907563 26.101961 13.911485 10.32605 1.003922 20.365266-2.007843 28.396639-8.605042l163.208963-133.951821z&quot; fill=&quot;#4A4A4A&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M307.097557 592.743978l105.698599 316.091876c6.310364 18.787675 26.532213 28.970308 45.319888 22.659944 4.159104-1.434174 7.887955-3.442017 11.186555-6.166946l164.786555-133.951821-165.360224-118.892997c297.017367-287.982073 447.462185-433.980952 451.191036-437.853222 0.573669-0.573669 2.581513-3.442017 0.430252-7.027451-1.290756-1.577591-3.298599-3.298599-7.027451-2.15126-202.218487 120.327171-404.293557 242.805602-606.22521 367.291877z&quot; fill=&quot;#CAE0EE&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M446.786072 934.794398c-5.736695 0-11.329972-1.290756-16.636414-3.872269-8.891877-4.445938-15.632493-12.047059-18.787675-21.512605L305.376549 592.313725l1.003921-0.573669C507.308201 467.684034 711.391114 344.058263 912.60568 224.161345l0.286835-0.143418c3.585434-1.147339 6.310364-0.286835 8.605042 2.581513l0.143417 0.143417c2.438095 4.015686 0.573669 7.457703-0.573669 8.74846-3.872269 4.015686-155.177591 150.87507-450.043698 436.705882l165.503642 119.036414-166.220728 135.09916c-3.442017 2.868347-7.457703 5.019608-11.760225 6.453782-3.728852 1.290756-7.744538 2.007843-11.760224 2.007843z m-137.967507-341.333334l105.268348 314.944538c2.868347 8.748459 9.035294 15.77591 17.210084 19.935014 8.17479 4.159104 17.496919 4.732773 26.245378 1.864426 3.872269-1.290756 7.60112-3.298599 10.756302-5.880112l163.352381-132.804482L466.434252 672.627451l1.290756-1.147339C763.308201 384.932213 915.043775 237.642577 918.772627 233.626891c0 0 2.007843-2.294678 0.286835-5.306443-1.003922-1.290756-2.438095-2.438095-5.306443-1.577591-200.784314 119.610084-404.293557 242.94902-604.934454 366.718207z&quot; fill=&quot;#CAE0EE&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M460.840974 924.898599l7.457703-253.561904 165.933894 119.896918-168.658824 135.959664c-1.290756 1.003922-3.011765 0.860504-4.015686-0.430252-0.430252-0.430252-0.717087-1.147339-0.717087-1.864426z&quot; fill=&quot;#94C3E2&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M463.709322 929.344538c-1.290756 0-2.438095-0.573669-3.2986-1.577591-0.573669-0.860504-1.003922-1.864426-1.003921-2.868348l7.60112-256.286834 169.519328 122.621848-1.434174 1.147339-168.658823 135.959664c-0.860504 0.717087-1.721008 1.003922-2.72493 1.003922z m6.023529-255.282913l-7.457703 250.836974c0 0.286835 0.143417 0.717087 0.286835 1.003922 0.430252 0.573669 1.434174 0.717087 2.007843 0.286835l167.22465-134.812325-162.061625-117.315406z&quot; fill=&quot;#94C3E2&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-lianjie&quot; viewBox=&quot;0 0 1079 1024&quot;&gt;&lt;path d=&quot;M695.355535 432.666896c-0.553495-1.10699-0.885592-2.186305-1.383737-3.265619-0.193723-0.193723-0.193723-0.359772-0.359771-0.719543-12.508983-26.318678-39.436506-43.366319-69.325226-41.013966-39.076734 3.265619-68.439634 39.021384-65.312388 79.841627 0.857917 10.516401 3.653066 20.147211 7.998 28.83708 19.78744 46.659613 11.097571 103.448181-25.377737 141.750022l-191.094085 199.950001a118.088119 118.088119 0 0 1-171.998513 0c-47.434506-49.537786-47.434506-130.098956 0-179.636742l71.234782-74.389703-0.52582-0.553494a75.911814 75.911814 0 0 0 24.326097-61.880721c-3.127246-40.820243-37.3609-71.51153-76.437634-68.24591a69.463599 69.463599 0 0 0-46.908685 23.966325l-0.166049-0.193723-72.618519 75.856464c-103.226783 107.793115-103.226783 282.36538 0 390.158495 103.171433 107.793115 270.299193 107.793115 373.498301 0l191.619904-200.1714c80.256748-83.992838 97.636485-208.307773 52.83108-310.289193z&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M1002.047012 80.865592c-103.226783-107.82079-270.382217-107.82079-373.581325 0l-191.619905 200.199075c-80.284423 83.854464-97.66416 208.197074-52.997128 310.233843 0.52582 1.079315 0.857917 2.15863 1.383737 3.26562 0.166048 0.166048 0.166048 0.359772 0.332097 0.719543 12.536658 26.291004 39.46418 43.366319 69.3529 41.013966 39.076734-3.265619 68.439634-39.021384 65.312388-79.869302a78.679288 78.679288 0 0 0-7.998-28.864755c-19.78744-46.631938-11.097571-103.448181 25.377737-141.750022l191.287808-199.839302a118.088119 118.088119 0 0 1 172.026188 0c47.434506 49.537786 47.434506 130.126631 0 179.692091l-71.234782 74.417378 0.52582 0.553495a75.939489 75.939489 0 0 0-24.353772 61.88072c3.15492 40.847917 37.3609 71.51153 76.465309 68.245911a69.463599 69.463599 0 0 0 46.908685-23.938651l0.166049 0.166048 72.646194-75.856464c103.03306-107.82079 103.03306-282.642127 0-390.269194z&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-liaotian&quot; viewBox=&quot;0 0 1171 1024&quot;&gt;&lt;path d=&quot;M1068.71699 0.243751H102.193768C46.228437 0.243751 0.500666 45.045267 0.500666 99.74309v696.251622c0 54.697824 45.727771 99.450589 101.693102 99.450589h329.113198l120.851966 114.465677a48.652788 48.652788 0 0 0 66.641644 0l120.851966-114.465677h329.064448c55.965331 0 101.741852-44.752765 101.741852-99.450589V99.74309C1170.458842 45.045267 1124.682321 0.243751 1068.71699 0.243751z m-439.776354 596.849784h-370.989696c-27.933915 0-50.846551-22.425133-50.846551-49.774045 0-27.348912 22.912636-49.725294 50.846551-49.725294h370.989696c27.933915 0 50.846551 22.376382 50.846551 49.725294 0 27.348912-22.912636 49.774045-50.846551 49.774045z m287.18795-211.381252H254.782171a50.456549 50.456549 0 0 1-50.846551-49.725294c0-27.397662 22.912636-49.774045 50.846551-49.774045h661.346415c27.933915 0 50.846551 22.376382 50.846551 49.774045 0 27.348912-22.912636 49.725294-50.846551 49.725294z&quot; fill=&quot;#5C8ADD&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-xinfeng&quot; viewBox=&quot;0 0 1400 1024&quot;&gt;&lt;path d=&quot;M1301.63733163 214.78520234a207.81921797 207.81921797 0 0 1 7.02423018 52.42036465v489.73590176a205.10753818 205.10753818 0 0 1-205.05853125 205.05853125H283.05853124A205.15654424 205.15654424 0 0 1 77.99999999 756.79444971V267.20556699a201.36672685 201.36672685 0 0 1 7.02423106-52.42036465L586.24393329 562.1905874c69.44187217 51.96297217 146.36536612 49.13694404 214.1736961 0zM1103.60303056 62.0000167H283.05853124A204.50312753 204.50312753 0 0 0 106.37462518 163.41030547l489.71956641 335.75823018c62.43397646 50.77048623 127.85733457 50.31309463 194.62019765 0L1280.28693749 163.41030547A204.68281729 204.68281729 0 0 0 1103.60303056 62.0000167z m0 0&quot; fill=&quot;#5c8add&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-QQ1&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z&quot; fill=&quot;#18ACFC&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M500.113 228.39c118.396-1.518 178.924 61.004 201 156 3.497 15.048 0.15 34.807 0 50 27.143 5.682 33.087 60.106 10 75v1h1c8.26 14.33 19.04 28.125 26 44 7.332 16.723 9.306 35.16 14 55 4.024 17.01-2.287 51.505-10 57-0.771 0.683-2.231 1.312-3 2-14.601-3.016-30.377-16.865-38-27-3.065-4.074-5.275-9.672-10-12-0.395 21.568-12.503 41.15-22 55-3.514 5.123-14.073 13.217-14 18 3.691 2.836 8.305 2.956 13 5 10.513 4.577 25.449 13.168 32 22 2.334 3.146 5.548 7.555 7 11 16.193 38.414-36.527 48.314-63 54-27.185 5.839-77.818-10.224-92-19-8.749-5.414-16.863-18.573-29-19-3.666 2.389-14.438 1.132-20 1-16.829 32.804-101.913 47.868-148 31-14.061-5.146-43.398-17.695-38-40 4.437-18.327 19.947-29.224 35-37 5.759-2.975 18.915-4.419 22-10-13.141-8.988-24.521-28.659-31-44-3.412-8.077-4.193-25.775-9-32-7.789 12.245-32.097 36.91-52 33-3.071-4.553-7.213-9.097-9-15-4.792-15.835-1.81-40.379 2-54 8.117-29.02 16.965-50.623 32-72 4.672-6.643 11.425-12.135 16-19-8.945-9.733-6.951-37.536-1-49 4.002-7.709 9.701-7.413 10-20-1.92-3.022-0.071-8.604-1-13-4.383-20.75 3.273-47.552 9-63 19.8-53.421 53.712-90.466 105-112 11.986-5.033 25.833-7.783 39-11 5.322-1.3 11.969 0.518 16-2z&quot; fill=&quot;#FFFFFF&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-rss&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M749.61196492 908.06119793C749.61196492 560.41848146 463.58151854 274.36328126 115.93880207 274.36328126V115.93880207c434.50388795 0 792.12239584 357.61850789 792.12239586 792.12239586zM224.55858562 690.72261555a108.91682943 108.91682943 0 0 1 108.69404499 108.74355267C333.25263061 859.29616292 284.24005737 908.06119793 224.31104736 908.06119793 164.48105265 908.06119793 115.96355592 859.41993206 115.96355592 799.46616822s48.69077351-108.71879883 108.61978351-108.74355267zM641.01693522 908.06119793h-153.96879069c0-203.60020956-167.50913289-371.13409627-371.10934246-371.13409629v-153.96879068c288.03550619 0 525.07813313 237.11688843 525.07813315 525.10288697z&quot; fill=&quot;#FFA500&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-youxiang&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M583.60666667 972h-68.08c-8.43333333 0-15.33333333-6.9-15.33333334-15.33333333V609.52c0-8.43333333 6.9-15.33333333 15.33333334-15.33333333h68.08c8.43333333 0 15.33333333 6.9 15.33333333 15.33333333V956.66666667c0 8.43333333-6.9 15.33333333-15.33333333 15.33333333z&quot; fill=&quot;#629FF9&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M294.42 167c-113.62 0-205.77333333 92-205.77333333 205.31333333v336.72h411.39333333V372.31333333c0.15333333-113.31333333-92-205.31333333-205.62-205.31333333z&quot; fill=&quot;#2166CC&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M519.97333333 627H216.98666667c-25.45333333 0-46-20.54666667-46-46V393.78c0-25.45333333 20.54666667-46 46-46h302.98666666c25.45333333 0 46 20.54666667 46 46V581c0 25.45333333-20.54666667 46-46 46z&quot; fill=&quot;#D2E4FF&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M565.97333333 397a49.22 49.22 0 0 0-49.37333333-49.22H220.36c-27.29333333 0-49.37333333 22.08-49.37333333 49.22v10.27333333l179.4 94.60666667c11.34666667 5.98 24.84 5.98 36.18666666 0l179.4-94.60666667v-10.27333333z&quot; fill=&quot;#FFFFFF&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M730.5 167h-427.8v0.46c109.78666667 4.29333333 197.49333333 94.3 197.49333333 205.00666667v336.72h411.39333334c27.29333333 0 49.37333333-22.08 49.37333333-49.22V397c0-126.96-103.19333333-230-230.46-230z&quot; fill=&quot;#4E8DF6&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M845.80666667 52H681.12666667c-9.04666667 0-16.40666667 7.36-16.40666667 16.40666667v336.72a24.67133333 24.67133333 0 1 0 49.37333333 0V134.18666667h131.71333334c9.04666667 0 16.40666667-7.36 16.40666666-16.40666667V68.40666667c0-9.04666667-7.36-16.40666667-16.40666666-16.40666667z&quot; fill=&quot;#2166CC&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M896.25333333 659.81333333h-35.11333333c-8.43333333 0-15.33333333-6.9-15.33333333-15.33333333v-35.11333333c0-8.43333333 6.9-15.33333333 15.33333333-15.33333334h35.11333333c8.43333333 0 15.33333333 6.9 15.33333334 15.33333334v35.11333333c0 8.58666667-6.9 15.33333333-15.33333334 15.33333333z&quot; fill=&quot;#FFFFFF&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M88.8 709.18666667l-24.22666667 131.40666666c-9.66 54.43333333 26.83333333 98.59333333 81.26666667 98.59333334h213.9c54.58666667 0 106.56666667-44.16 116.22666667-98.59333334l23.15333333-131.40666666H88.8z&quot; fill=&quot;#2974CE&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-gitHub&quot; viewBox=&quot;0 0 1049 1024&quot;&gt;&lt;path d=&quot;M523.6581816 52C262.83923907 52 52 262.8401375 52 523.6581816c0 208.49703047 135.09433812 384.97758117 322.50789391 447.44906532 23.42658172 4.68531653 32.01647887-10.15136894 32.01647796-22.64584583 0-10.93210574-0.78163433-48.41463703-0.78163433-87.45953855-131.18885996 28.11189824-158.5200223-56.22379738-158.52002231-56.22379739-21.08437312-54.66232469-52.3201152-68.71827336-52.3201152-68.71827335-42.94858371-28.89353348 3.12384382-28.89353348 3.12384384-28.89353348 47.63479867 3.12384382 72.62285398 48.41643391 72.62285398 48.4164339 42.16784782 71.84121875 110.10538527 51.53758242 137.43654672 39.04400399 3.90457972-30.45500618 16.3990566-51.5393793 29.67427028-63.25222094-104.64023039-10.93300418-214.74561566-51.53848086-214.74561657-232.70524742 0-51.53848086 18.74126609-93.70632867 48.4164339-126.50444187-4.68621496-11.71284164-21.08527156-60.12837711 4.6844181-124.94207075 0 0 39.82563922-12.49447688 129.62738726 48.41463704 37.48253129-10.15136894 78.08980484-15.61742227 117.91454562-15.61742137s80.43201433 5.46605242 117.91454473 15.61742137c89.80264648-60.90911391 129.62828571-48.41463703 129.62828571-48.41463704 25.76879122 64.81369363 9.37063305 113.22922911 4.68531651 124.94207075 30.45410773 32.79721477 48.41463703 74.96506258 48.41463703 126.50444187 0 181.16676656-110.10538527 220.99150644-215.52545401 232.70524742 17.1797934 14.83668547 32.01647887 42.94858371 32.01647886 87.45953946 0 63.25222094-0.78163433 114.009965-0.78163523 129.62738636 0 12.49447688 8.59079468 27.33116234 32.01737731 22.64584583 187.41265734-62.4705866 322.50699547-238.95203574 322.50699546-447.44996375C995.31636231 262.8401375 783.69369203 52 523.6581816 52z&quot; fill=&quot;#663399&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M230.82365863 729.03136735c-0.7807359 2.34310703-4.68531653 3.12384382-7.80916035 1.56237113s-5.46605242-4.68531653-3.90368129-7.02842356c0.7807359-2.34220859 4.68531653-3.12384382 7.80826192-1.56147269s4.68531653 4.68531653 3.90457972 7.02752512z m18.7412661 21.08437312c-2.34220859 2.34220859-7.02752512 0.78163433-9.37063305-2.34310703-3.12294539-3.12294539-3.90457972-7.80826192-1.5614727-10.15136894 2.34220859-2.34220859 6.24678922-0.7807359 9.37063305 2.34310702 3.12384382 3.90457972 3.90457972 8.58899782 1.5614727 10.15136895zM268.30618992 777.44690281c-3.12294539 2.34220859-7.80826192 0-10.15136895-3.90457972-3.12384382-3.90457972-3.12384382-9.37063305 0-10.93210574 3.12384382-2.34310703 7.80916035 0 10.15226739 3.90457972 3.12294539 3.90368129 3.12294539 8.58899782 0 10.93210574z m25.76968965 26.55042555c-2.34220859 3.12294539-7.80916035 2.34220859-12.49447688-1.56237113-3.90457972-3.90368129-5.46605242-9.37063305-2.34220859-11.71284164 2.34220859-3.12384382 7.80826192-2.34310703 12.49447687 1.56147269 3.90368129 3.12384382 4.68531653 8.58989625 2.3422086 11.71374008z m35.1403227 14.83668637c-0.78163433 3.90457972-6.24768766 5.46605242-11.71374008 3.90457972-5.46605242-1.5614727-8.58899782-6.24768766-7.80916036-9.37063305 0.78163433-3.90457972 6.24768766-5.46605242 11.71374009-3.90457972 5.46605242 1.5614727 8.58899782 5.46605242 7.80916035 9.37063305z m38.26416562 3.12384382c0 3.90457972-4.68621496 7.02752512-10.15226738 7.02752512-5.46605242 0-10.15226738-3.12294539-10.15226739-7.02752512s4.68621496-7.02842356 10.15226739-7.02842445c5.46605242 0 10.15226738 3.12384382 10.15226738 7.02842445z m35.92016106-6.24768766c0.78163433 3.90457972-3.12384382 7.80916035-8.58899872 8.58989625-5.46695086 0.78163433-10.15226738-1.5614727-10.93390172-5.46605241-0.77983747-3.90457972 3.12384382-7.80916035 8.5907947-8.58899872 5.46605242-0.78163433 10.15136894 1.56057426 10.93210574 5.46515488z m0 0&quot; fill=&quot;#663399&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;symbol id=&quot;icon-bilibili&quot; viewBox=&quot;0 0 1024 1024&quot;&gt;&lt;path d=&quot;M832.61667555 181.33447111h-164.32545185l74.45617778-74.45617778c12.84020148-12.84020148 12.84020148-30.8140563 0-43.65425778-12.84020148-12.84020148-30.8140563-12.84020148-43.65425778 0L573.2882963 189.04101925H450.04420741L324.2272237 63.23617185c-10.26730667-12.84020148-25.68040297-15.40096-41.08136295-7.70654815-2.57289482 0-2.57289482 2.57289482-5.13365334 5.13365333-12.84020148 12.84020148-12.84020148 30.8140563 0 43.65425779l77.02907259 77.02907259h-164.32545185c-89.86927408 0-164.32545185 74.45617778-164.32545185 164.32545184v408.24073483c0 87.29637925 74.45617778 161.75255703 164.32545185 161.75255703h25.68040296c0 30.8140563 25.68040297 53.92156445 53.92156444 53.92156444s53.92156445-25.68040297 53.92156445-53.92156444H704.23893333c2.57289482 30.8140563 28.24116148 53.92156445 59.05521778 51.34866964 28.24116148-2.57289482 48.78791111-23.10750815 51.34866964-51.34866964h20.53461333c89.86927408 0 164.32545185-74.45617778 164.32545184-164.32545186V343.09916445c-2.56075852-89.86927408-77.02907259-161.76469333-166.88621037-161.76469334z m-5.13365333 634.19429926H200.99527111c-33.37481482 0-59.05521778-28.24116148-61.61597629-61.61597629l-2.57289482-415.94728297c0-33.37481482 28.24116148-61.6159763 61.6159763-61.61597629h626.48775111c33.37481482 0 59.05521778 28.24116148 61.61597629 61.61597629l2.57289482 415.94728297c-2.57289482 35.93557333-28.24116148 61.6159763-61.6159763 61.61597629z&quot; fill=&quot;#ff7299&quot; &gt;&lt;/path&gt;&lt;path d=&quot;M403.82919111 417.55534222l15.40096 77.0290726-205.40681481 38.50846815-15.40096-77.0290726 205.40681481-38.50846815z m197.70026667 77.0290726l15.40096-77.0290726 205.40681481 38.50846815-15.40096 77.0290726-205.40681481-38.50846815z m41.08136297 161.75255703c0 2.57289482 0 7.70654815-2.57289483 10.26730667-12.84020148 28.24116148-41.08136297 46.2150163-74.45617777 48.78791111-20.53461333 0-41.08136297-10.26730667-53.92156445-25.68040296-15.40096 15.40096-33.37481482 25.68040297-53.92156445 25.68040296-30.8140563-2.57289482-59.05521778-20.53461333-74.45617777-48.78791111 0-2.57289482-2.57289482-5.13365333-2.57289481-10.26730667 0-10.26730667 7.70654815-17.97385482 17.97385481-20.53461333h2.57289482c7.70654815 0 12.84020148 2.57289482 15.40096 10.26730666 0 0 20.53461333 28.24116148 38.50846815 28.24116149 35.94770963 0 35.94770963-30.8140563 56.48232296-53.92156445 23.10750815 25.68040297 23.10750815 53.92156445 56.48232296 53.92156445 23.10750815 0 38.50846815-28.24116148 38.50846815-28.24116149 2.57289482-5.13365333 10.26730667-10.26730667 15.40096-10.26730666 10.26730667-2.57289482 17.97385482 5.13365333 20.53461333 15.40096v5.13365333h0.0364089z&quot; fill=&quot;#ff7299&quot; &gt;&lt;/path&gt;&lt;/symbol&gt;&lt;/svg&gt;&#x27;</span>,</span><br><span class="line">    o = (o = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;script&quot;</span>))[o.<span class="property">length</span> - <span class="number">1</span>].<span class="title function_">getAttribute</span>(<span class="string">&quot;data-injectcss&quot;</span>),</span><br><span class="line">    p = <span class="keyword">function</span> (<span class="params">c, l</span>) &#123;</span><br><span class="line">      l.<span class="property">parentNode</span>.<span class="title function_">insertBefore</span>(c, l);</span><br><span class="line">    &#125;;</span><br><span class="line">  <span class="keyword">if</span> (o &amp;&amp; !c.<span class="property">__iconfont__svg__cssinject__</span>) &#123;</span><br><span class="line">    c.<span class="property">__iconfont__svg__cssinject__</span> = !<span class="number">0</span>;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">write</span>(</span><br><span class="line">        <span class="string">&quot;&lt;style&gt;.svgfont &#123;display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;&#125;&lt;/style&gt;&quot;</span></span><br><span class="line">      );</span><br><span class="line">    &#125; <span class="keyword">catch</span> (c) &#123;</span><br><span class="line">      <span class="variable language_">console</span> &amp;&amp; <span class="variable language_">console</span>.<span class="title function_">log</span>(c);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">d</span>(<span class="params"></span>) &#123;</span><br><span class="line">    i || ((i = !<span class="number">0</span>), <span class="title function_">a</span>());</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">m</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      t.<span class="property">documentElement</span>.<span class="title function_">doScroll</span>(<span class="string">&quot;left&quot;</span>);</span><br><span class="line">    &#125; <span class="keyword">catch</span> (c) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">void</span> <span class="built_in">setTimeout</span>(m, <span class="number">50</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">d</span>();</span><br><span class="line">  &#125;</span><br><span class="line">  (l = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> c,</span><br><span class="line">      l = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">    (l.<span class="property">innerHTML</span> = v),</span><br><span class="line">      (v = <span class="literal">null</span>),</span><br><span class="line">      (l = l.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;svg&quot;</span>)[<span class="number">0</span>]) &amp;&amp;</span><br><span class="line">        (l.<span class="title function_">setAttribute</span>(<span class="string">&quot;aria-hidden&quot;</span>, <span class="string">&quot;true&quot;</span>),</span><br><span class="line">        (l.<span class="property">style</span>.<span class="property">position</span> = <span class="string">&quot;absolute&quot;</span>),</span><br><span class="line">        (l.<span class="property">style</span>.<span class="property">width</span> = <span class="number">0</span>),</span><br><span class="line">        (l.<span class="property">style</span>.<span class="property">height</span> = <span class="number">0</span>),</span><br><span class="line">        (l.<span class="property">style</span>.<span class="property">overflow</span> = <span class="string">&quot;hidden&quot;</span>),</span><br><span class="line">        (l = l),</span><br><span class="line">        (c = <span class="variable language_">document</span>.<span class="property">body</span>).<span class="property">firstChild</span> ? <span class="title function_">p</span>(l, c.<span class="property">firstChild</span>) : c.<span class="title function_">appendChild</span>(l));</span><br><span class="line">  &#125;),</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">addEventListener</span></span><br><span class="line">      ? ~[<span class="string">&quot;complete&quot;</span>, <span class="string">&quot;loaded&quot;</span>, <span class="string">&quot;interactive&quot;</span>].<span class="title function_">indexOf</span>(<span class="variable language_">document</span>.<span class="property">readyState</span>)</span><br><span class="line">        ? <span class="built_in">setTimeout</span>(l, <span class="number">0</span>)</span><br><span class="line">        : ((h = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">removeEventListener</span>(<span class="string">&quot;DOMContentLoaded&quot;</span>, h, !<span class="number">1</span>), <span class="title function_">l</span>();</span><br><span class="line">          &#125;),</span><br><span class="line">          <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;DOMContentLoaded&quot;</span>, h, !<span class="number">1</span>))</span><br><span class="line">      : <span class="variable language_">document</span>.<span class="property">attachEvent</span> &amp;&amp;</span><br><span class="line">        ((a = l),</span><br><span class="line">        (t = c.<span class="property">document</span>),</span><br><span class="line">        (i = !<span class="number">1</span>),</span><br><span class="line">        <span class="title function_">m</span>(),</span><br><span class="line">        (t.<span class="property">onreadystatechange</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">          <span class="string">&quot;complete&quot;</span> == t.<span class="property">readyState</span> &amp;&amp; ((t.<span class="property">onreadystatechange</span> = <span class="literal">null</span>), <span class="title function_">d</span>());</span><br><span class="line">        &#125;));</span><br><span class="line">&#125;)(<span class="variable language_">window</span>);</span><br></pre></td></tr></table></figure><p>执行以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># https://www.npmjs.com/package/hexo-butterfly-tag-plugins-plus</span></span><br><span class="line">npm install hexo-butterfly-tag-plugins-plus --save</span><br><span class="line"></span><br><span class="line">npm uninstall hexo-renderer-marked --save</span><br><span class="line">npm install hexo-renderer-kramed --save</span><br></pre></td></tr></table></figure><p>添加配置项</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># tag-plugins-plus</span></span><br><span class="line"><span class="comment"># see https://akilar.top/posts/615e2dec/</span></span><br><span class="line"><span class="attr">tag_plugins:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">issues:</span> <span class="literal">false</span> <span class="comment">#issues标签开关</span></span><br><span class="line">  <span class="attr">link:</span></span><br><span class="line">    <span class="attr">placeholder:</span> <span class="string">/img/siteicon/64.png</span> <span class="comment">#link_card标签默认的图标图片</span></span><br><span class="line">  <span class="attr">CDN:</span></span><br><span class="line">    <span class="attr">anima:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css</span> <span class="comment">#动画标签anima的依赖</span></span><br><span class="line">    <span class="attr">jquery:</span> <span class="string">https://cdn.cbd.int/jquery@latest/dist/jquery.min.js</span> <span class="comment">#issues标签依赖</span></span><br><span class="line">    <span class="attr">issues:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js</span> <span class="comment">#issues标签依赖</span></span><br><span class="line">    <span class="attr">iconfont:</span> <span class="string">/js/ali_font.js</span> <span class="comment">#参看https://akilar.top/posts/d2ebecef/</span></span><br><span class="line">    <span class="attr">carousel:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js</span></span><br><span class="line">    <span class="attr">tag_plugins_css:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css</span></span><br></pre></td></tr></table></figure><h2 id="添加-wowjs-特效"><a href="#添加-wowjs-特效" class="headerlink" title="添加 wowjs 特效"></a>添加 wowjs 特效</h2><p>参考：<a href="https://akilar.top/posts/abab51cf/">wowjs 特效</a></p><blockquote><p>see <a href="https://www.npmjs.com/package/hexo-butterfly-wowjs">https://www.npmjs.com/package/hexo-butterfly-wowjs</a></p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-butterfly-wowjs --save</span><br></pre></td></tr></table></figure><p>添加配置项</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># wowjs</span></span><br><span class="line"><span class="comment"># see https://www.npmjs.com/package/hexo-butterfly-wowjs</span></span><br><span class="line"><span class="attr">wowjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment">#控制动画开关。true是打开，false是关闭</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">10</span> <span class="comment">#过滤器优先级</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span> <span class="comment">#移动端是否启用，默认移动端禁用</span></span><br><span class="line">  <span class="attr">animateitem:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">class:</span> <span class="string">recent-post-item</span> <span class="comment">#必填项，需要添加动画的元素的class</span></span><br><span class="line">      <span class="attr">style:</span> <span class="string">animate__zoomIn</span> <span class="comment">#必填项，需要添加的动画</span></span><br><span class="line">      <span class="attr">duration:</span> <span class="number">1.</span><span class="string">5s</span> <span class="comment">#选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。</span></span><br><span class="line">      <span class="attr">delay:</span> <span class="string">200ms</span> <span class="comment">#选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。</span></span><br><span class="line">      <span class="attr">offset:</span> <span class="number">30</span> <span class="comment">#选填项，开始动画的距离（相对浏览器底部）</span></span><br><span class="line">      <span class="attr">iteration:</span> <span class="number">1</span> <span class="comment">#选填项，动画重复的次数</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">class:</span> <span class="string">card-widget</span></span><br><span class="line">      <span class="attr">style:</span> <span class="string">animate__zoomIn</span></span><br><span class="line">      <span class="attr">delay:</span> <span class="string">200ms</span></span><br><span class="line">    <span class="comment"># - class: flink-list-card</span></span><br><span class="line">    <span class="comment">#   style: wowpanels</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">class:</span> <span class="string">flink-list-card</span></span><br><span class="line">      <span class="attr">style:</span> <span class="string">animate__flipInY</span></span><br><span class="line">      <span class="attr">duration:</span> <span class="string">3s</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">class:</span> <span class="string">flink-list-card</span></span><br><span class="line">      <span class="attr">style:</span> <span class="string">animate__animated</span></span><br><span class="line">      <span class="attr">duration:</span> <span class="string">3s</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">class:</span> <span class="string">article-sort-item</span></span><br><span class="line">      <span class="attr">style:</span> <span class="string">animate__slideInRight</span></span><br><span class="line">      <span class="attr">duration:</span> <span class="number">1.</span><span class="string">5s</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">class:</span> <span class="string">site-card</span></span><br><span class="line">      <span class="attr">style:</span> <span class="string">animate__flipInY</span></span><br><span class="line">      <span class="attr">duration:</span> <span class="string">3s</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">class:</span> <span class="string">site-card</span></span><br><span class="line">      <span class="attr">style:</span> <span class="string">animate__animated</span></span><br><span class="line">      <span class="attr">duration:</span> <span class="string">3s</span></span><br><span class="line">  <span class="attr">animate_css:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css</span></span><br><span class="line">  <span class="attr">wow_js:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js</span></span><br><span class="line">  <span class="attr">wow_init_js:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js</span></span><br></pre></td></tr></table></figure><h2 id="留言板：薇尔莉特信封"><a href="#留言板：薇尔莉特信封" class="headerlink" title="留言板：薇尔莉特信封"></a>留言板：薇尔莉特信封</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-butterfly-envelope --save</span><br></pre></td></tr></table></figure><p>添加配置项</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># envelope_comment</span></span><br><span class="line"><span class="comment"># see https://akilar.top/posts/e2d3c450/</span></span><br><span class="line"><span class="comment"># envelope_comment</span></span><br><span class="line"><span class="comment"># see https://akilar.top/posts/e2d3c450/</span></span><br><span class="line"><span class="attr">envelope_comment:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment">#控制开关</span></span><br><span class="line">  <span class="attr">custom_pic:</span></span><br><span class="line">    <span class="attr">cover:</span> <span class="string">https://cdn.cbd.int//hexo-butterfly-envelope/lib/violet.jpg</span> <span class="comment">#信笺头部图片</span></span><br><span class="line">    <span class="attr">line:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-envelope/lib/line.png</span> <span class="comment">#信笺底部图片</span></span><br><span class="line">    <span class="attr">beforeimg:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-envelope/lib/before.png</span> <span class="comment"># 信封前半部分</span></span><br><span class="line">    <span class="attr">afterimg:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-envelope/lib/after.png</span> <span class="comment"># 信封后半部分</span></span><br><span class="line">  <span class="attr">message:</span> <span class="comment">#信笺正文，多行文本，写法如下</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">有什么想问的？</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">有什么想说的？</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">有什么想吐槽的？</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">哪怕是有什么想吃的，都可以告诉我哦~</span></span><br><span class="line">  <span class="attr">bottom:</span> <span class="string">自动书记人偶竭诚为您服务！</span> <span class="comment">#仅支持单行文本</span></span><br><span class="line">  <span class="attr">height:</span> <span class="comment">#1050px，信封划出的高度</span></span><br><span class="line">  <span class="attr">path:</span> <span class="comment">#【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html</span></span><br><span class="line">  <span class="attr">front_matter:</span> <span class="comment">#【可选】comments页面的 front_matter 配置</span></span><br><span class="line">    <span class="attr">title:</span> <span class="string">留言板</span></span><br><span class="line">    <span class="attr">comments:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">留言板:</span> <span class="string">/comments/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-envelope</span></span><br></pre></td></tr></table></figure><h2 id="使用-Github-Action-实现全自动部署"><a href="#使用-Github-Action-实现全自动部署" class="headerlink" title="使用 Github Action 实现全自动部署"></a>使用 Github Action 实现全自动部署</h2><p>参考<a href="https://anheyu.com/posts/asdx.html">https://anheyu.com/posts/asdx.html</a></p><h2 id="页脚-github-徽标和计时器"><a href="#页脚-github-徽标和计时器" class="headerlink" title="页脚 github 徽标和计时器"></a>页脚 github 徽标和计时器</h2><p>参考: <a href="https://www.npmjs.com/package/hexo-butterfly-footer-beautify">https://www.npmjs.com/package/hexo-butterfly-footer-beautify</a></p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-butterfly-footer-beautify --save</span><br></pre></td></tr></table></figure><p>添加配置项</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># footer_beautify</span></span><br><span class="line"><span class="comment"># 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)</span></span><br><span class="line"><span class="comment"># 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)</span></span><br><span class="line"><span class="attr">footer_beautify:</span></span><br><span class="line">  <span class="attr">enable:</span></span><br><span class="line">    <span class="attr">timer:</span> <span class="literal">true</span> <span class="comment"># 计时器开关</span></span><br><span class="line">    <span class="attr">bdage:</span> <span class="literal">true</span> <span class="comment"># 徽标开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">all</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="comment"># - /posts/</span></span><br><span class="line">    <span class="comment"># - /about/</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">id</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">footer-wrap</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">0</span></span><br><span class="line">  <span class="comment"># 计时器部分配置项</span></span><br><span class="line">  <span class="attr">runtime_js:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-blog@2.0.4/js/runtime/runtime.min.js</span></span><br><span class="line">  <span class="attr">runtime_css:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-blog@2.0.4/css/runtime/runtime.min.css</span></span><br><span class="line">  <span class="comment"># 徽标部分配置项</span></span><br><span class="line">  <span class="attr">swiperpara:</span> <span class="number">0</span> <span class="comment">#若非0，则开启轮播功能，每行徽标个数</span></span><br><span class="line">  <span class="attr">bdageitem:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">link:</span> <span class="string">https://hexo.io/</span> <span class="comment">#徽标指向网站链接</span></span><br><span class="line">      <span class="attr">shields:</span> <span class="string">https://img.shields.io/badge/Frame-Hexo-blue?style=flat&amp;logo=hexo</span> <span class="comment">#徽标API</span></span><br><span class="line">      <span class="attr">message:</span> <span class="string">博客框架为Hexo_v5.4.0</span> <span class="comment">#徽标提示语</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">link:</span> <span class="string">https://butterfly.js.org/</span></span><br><span class="line">      <span class="attr">shields:</span> <span class="string">https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&amp;logo=bitdefender</span></span><br><span class="line">      <span class="attr">message:</span> <span class="string">主题版本Butterfly_v4.2.2</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">link:</span> <span class="string">https://www.jsdelivr.com/</span></span><br><span class="line">      <span class="attr">shields:</span> <span class="string">https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&amp;logo=jsDelivr</span></span><br><span class="line">      <span class="attr">message:</span> <span class="string">本站使用JsDelivr为静态资源提供CDN加速</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">link:</span> <span class="string">https://beian.miit.gov.cn/#/Integrated/index</span></span><br><span class="line">      <span class="attr">shields:</span> <span class="string">https://img.shields.io/badge/湘ICP备-2022004213号-e1d492?style=flat&amp;logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAYAAAC9pNwMAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+nhxg7wAACNlJREFUSInF1mmMVeUdx/Hv2e+5+519mJWBYQZkGxZZxLKJqBXGoLS1iXWrmihotFXaJiTWWlsbl6q1aetWd5u0VkKjNG4YEJSlOCibDLMwM8x679z9nnPP1jcVJUxf+7z6J8+LT37/Z4VvaQhfFS8+sBXbctCDGrVTKlBUH4mxAbI9Hfj0IJLsp6paJ5/tmn20N/D0wKDRMq9F/c3M2U1/V0vDfWMFh+tv/Ig1zYPMabDImPJ52OaXO87W580KggCiiOsJOJ6I3wcNFaaeNKxrt72f2fLGu4FpJ/sDQABRzD22fH7/Yze069vGc6mrDLNIJCDik10sxz2by3VdPM87xzkP9jwPTZFRVI1YUJKH+oy7n3tbvv/P2wW/UQxRWe6w4ZJRptYLHDoCuz8v5cP92XbI762O+h6UVWHnUFbPpU0fEb2A60mMJ7MUi9b/b7UgKhiZMaIxm8YLplLMDPz8hl/EH+rs8TNlUpFf32uyZJGLPDwCiTGUyTWodTN49eUCdz2YwXb9NNcObp1X98WDoufynzMVCEKGn27ayPTWBi5ad8P5iQUkJEnFLjqM9Z+hrVX0vfDe6K2dPRWsW2bwyp9EUifSJB84gdxrkR0eRgv1o/3I4fbbprJ6scqamzVO9pffec1S5ZWY2Nfz5qEy/FqOC2Y3s3j53HMSi18VRjFPwSwg+1RfVbl115vvJrsfej7UGIsYPPGgQ7JXoO+Xx5B3dHEomyJ9x1qiQozkr95h5937aFnVyouPlgJK+Ss7Fxz64OTSxSX+LHYxT2IsRW5kbGI4oHcR0jqoqTjV9se3I7/f8rS/ClS23GxSXhph6L5d9Akm7qqZhHWBQGUJ+CWGFzcg7e7m6D3/ZuW1Ea5YKdA3EojuONi813TqNi+YPYOKUhXDtCeGL26/hakLLiEcdsaHRkRAoLRc4fJrmhnekyF0apgZowWSwwkaa+rw3f8WA1GZZsPP5JEChX8dhZTN6iU6kAcs5s+dHd183SJ0VVKL57pfw6YdRQw23aeWTns47DPTALWlRTR7kMLew6hGgYqUhWXYFFUdPZ6lUBahLA8hVcOftckfi7No7VRAAQqsX1dybfvG1qwriM9mM5mJ4e4jO5Cc01dPqixbr8tWGBQUL4vjGigEEShi+xUmZ2RiR/sJ1pbS8NkgZrKAGw0TsgQsQyFaF/nfYTGprAlMFysbA1pI3mhkR6snhGsaymYGvPyFEb9IdbUE2AzFFTwpRqCtBY0wmdER+hZW4j63gcJj38V+/ErSUZXsYBfjIZHIRW0c2Z8BskCAqN+CbBJBFnyyKjR+Ez57nBxLqpfMUeSISElMBFz6x2Q6OxzWrYjyxWVzEewioU3LCS5vQY6nMUrLwNaxXvoQ59IloFSx54PPAZtQLExVZZDxsVE8J4dn6v4JYatgbSjk0owPw7RGH2ADMo88Z7L20ip8f7gC7fAo0q4+0rt7kEQDvaghVZbiPHUHcyeXcfLjT3jmpR7AYsnSScya3UR8bARVMck7Y/cB75/X6rDf3Fg2dw2jKZm5dXGm1LuAzO5DCo9v6aT0ibco5kzOvLOP+NGTFJtDpPYeZKijk/Rn3QxsfZV7txwhX7ABiZUXBsGvIvguQApNQQva9RMmTvZ2dpVUls+tX/UD7GN/Y8Ws05w6rQF+9vyzg1vZjbvMRJhXiRSU8DpTFFe0QE8S6SfPkOkZoktrB2oAhZWrwljxOPmchiSMYOWNoxNuruFU5vWeXdsojiUon345113dBBQBmTYlTimgdB8nfPo4WjaNFgN9OMEkJ02dnadVt5ki54Esqy+bzKJltVhSPbI3iN2zCyMTeXNCuG7Omm2Zok7PR2+R7jvD8ouruHhmCrB5jVZeYxLdrTP4sr4Vtd9g4MA4qc4c+6cu5NPamfw4P59t2WrA4YdXKkASf7SFivo6PDdEPmf1fRM++zp1bH/0r4I1dD1ODtOWaW4IsvPjL7nqXhloQiSPwjjgMYkMASyGEBkjhISCQwkwzve/18AbT+pk8pVY4UacQi9y+gyZ0eRAw4qHa89LXEx1LXMSPfhDJYRb59BtlLKg2WPT2l6qYl1svtGkrLYckyA1S+t5+2ATm37WCui0LSynsckDNH5zTxAchbQtkx08hDHYiW6NgC0enHBzEZ102UDH8QORdEckjEzZrNWkRydzyx17uGnDXqbUnGZ6dRPjSY91q2TqwjFuvTxLo5Zn5Qo/pumRSFcTLQtybEhGE0fQrDhhJ0VvH2lTnnHPhGtsmWan469apERjI2MH3qN7+7MEfH6ql29CbV7PvsMG32k6yU2XDhEKyZw66eJaRdrXR7CzCcqUNC3zwgymPJRCH4KRRLINimpL14A5Y4GDeOqbsPRVcfuN7Xj44pav/hFfrNT2kr2rsqf2Ibp5pEA14ZIImUyW3t5REkkTXRGQ/DGGhtLginhqCWknQDE5hKf5UFSF9Lj020Q2ul5V1AR2hr+8vuP8Vlc2zMPRxoSjnx7XBC14sDoydahSGq7KdO/HFyrBchxCVfX4fDKp4T7SCQejYODZLrYgIqgKFsNIgQqEYob8mW6yiUyb7Z64LVK/+B85xznnJ3AWzqTzuIX46mr5wLs+UUTyIriBCjRNxguHMJIFDLEEvXEOVRWnSJ0+jCd4CJoGjoedM1CLcXQziW3nMV2TSMBeOx7vWZvPt1r+cMPzE8KunaUkFn0vNrvtqXj34c1W6gzxlEQ6naIoBahtnkMwoFMwIVzSRNguMt53Aj2s4nkSlgPoGqLkICsRNF0gl8rYWuP8+11/w/OOJDEhHPKLCIpOXmi+M9AgP+maiesLifF2T1Rn5ZNj5Lo/Qc/GcPMmhdoqlEgIGzCK4PiCmJKK68p4KfF3qYGuF0qCRUkJTzleUbvQyWRTuE5xYthxQbBs7EISAbkzUFG3VfXXbK2YFi3X/eryfKKnqVBItNjJxDzH8erddC4SqWwcN5WyTtlyO1RP/Lh3eHD76MB40swmiDVJyDLYRhpc5+ub6tse/wWKbvSQEAw1awAAAABJRU5ErkJggg==</span></span><br><span class="line">      <span class="attr">message:</span> <span class="string">本站已在湘进行备案</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">link:</span> <span class="string">https://github.com/</span></span><br><span class="line">      <span class="attr">shields:</span> <span class="string">https://img.shields.io/badge/Source-Github-d021d6?style=flat&amp;logo=GitHub</span></span><br><span class="line">      <span class="attr">message:</span> <span class="string">本站项目由Github托管</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">link:</span> <span class="string">http://creativecommons.org/licenses/by-nc-sa/4.0/</span></span><br><span class="line">      <span class="attr">shields:</span> <span class="string">https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&amp;logo=Claris</span></span><br><span class="line">      <span class="attr">message:</span> <span class="string">本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># swiper_css: https://cdn.cbd.int/hexo-butterfly-swiper/lib/swiper.min.css</span></span><br><span class="line">  <span class="comment"># swiper_js: https://cdn.cbd.int/hexo-butterfly-swiper/lib/swiper.min.js</span></span><br><span class="line">  <span class="comment"># swiperbdage_init_js: https://cdn.cbd.int/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js</span></span><br></pre></td></tr></table></figure><p><code>runtime.js</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">createtime</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> grt = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;04/01/2021 00:00:00&quot;</span>);</span><br><span class="line">  now.<span class="title function_">setTime</span>(now.<span class="title function_">getTime</span>() + <span class="number">250</span>);</span><br><span class="line">  <span class="keyword">var</span> days = (now - grt) / <span class="number">1e3</span> / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>,</span><br><span class="line">    dnum = <span class="title class_">Math</span>.<span class="title function_">floor</span>(days),</span><br><span class="line">    hours = (now - grt) / <span class="number">1e3</span> / <span class="number">60</span> / <span class="number">60</span> - <span class="number">24</span> * dnum,</span><br><span class="line">    hnum = <span class="title class_">Math</span>.<span class="title function_">floor</span>(hours);</span><br><span class="line">  <span class="number">1</span> == <span class="title class_">String</span>(hnum).<span class="property">length</span> &amp;&amp; (hnum = <span class="string">&quot;0&quot;</span> + hnum);</span><br><span class="line">  <span class="keyword">var</span> minutes = (now - grt) / <span class="number">1e3</span> / <span class="number">60</span> - <span class="number">1440</span> * dnum - <span class="number">60</span> * hnum,</span><br><span class="line">    mnum = <span class="title class_">Math</span>.<span class="title function_">floor</span>(minutes);</span><br><span class="line">  <span class="number">1</span> == <span class="title class_">String</span>(mnum).<span class="property">length</span> &amp;&amp; (mnum = <span class="string">&quot;0&quot;</span> + mnum);</span><br><span class="line">  <span class="keyword">var</span> seconds = (now - grt) / <span class="number">1e3</span> - <span class="number">86400</span> * dnum - <span class="number">3600</span> * hnum - <span class="number">60</span> * mnum,</span><br><span class="line">    snum = <span class="title class_">Math</span>.<span class="title function_">round</span>(seconds);</span><br><span class="line">  <span class="number">1</span> == <span class="title class_">String</span>(snum).<span class="property">length</span> &amp;&amp; (snum = <span class="string">&quot;0&quot;</span> + snum);</span><br><span class="line">  <span class="keyword">let</span> currentTimeHtml = <span class="string">&quot;&quot;</span>;</span><br><span class="line">  (currentTimeHtml =</span><br><span class="line">    hnum &lt; <span class="number">18</span> &amp;&amp; hnum &gt;= <span class="number">9</span></span><br><span class="line">      ? <span class="string">`&lt;img class=&#x27;boardsign&#x27; src=&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-上班摸鱼中.svg&#x27; title=&#x27;距离月入25k也就还差一个大佬带我~&#x27;&gt;&lt;span class=&#x27;textTip&#x27;&gt; &lt;br&gt; 本站居然运行了 <span class="subst">$&#123;dnum&#125;</span> 天&lt;/span&gt;&lt;span id=&#x27;runtime&#x27;&gt; <span class="subst">$&#123;hnum&#125;</span> 小时 <span class="subst">$&#123;mnum&#125;</span> 分 <span class="subst">$&#123;snum&#125;</span> 秒 &lt;/span&gt; &lt;i class=&#x27;fas fa-heartbeat&#x27; style=&#x27;color:red&#x27;&gt;&lt;/i&gt;`</span></span><br><span class="line">      : <span class="string">`&lt;img class=&#x27;boardsign&#x27; src=&#x27;https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-下班啦.svg&#x27; title=&#x27;下班了就该开开心心的玩耍，嘿嘿~&#x27;&gt;&lt;span class=&#x27;textTip&#x27;&gt; &lt;br&gt; 本站居然运行了 <span class="subst">$&#123;dnum&#125;</span> 天&lt;/span&gt;&lt;span id=&#x27;runtime&#x27;&gt; <span class="subst">$&#123;hnum&#125;</span> 小时 <span class="subst">$&#123;mnum&#125;</span> 分 <span class="subst">$&#123;snum&#125;</span> 秒 &lt;/span&gt; &lt;i class=&#x27;fas fa-heartbeat&#x27; style=&#x27;color:red&#x27;&gt;&lt;/i&gt;`</span>),</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;workboard&quot;</span>) &amp;&amp; (<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;workboard&quot;</span>).<span class="property">innerHTML</span> = currentTimeHtml);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="title function_">createtime</span>();</span><br><span class="line">&#125;, <span class="number">250</span>);</span><br></pre></td></tr></table></figure><h2 id="电子钟"><a href="#电子钟" class="headerlink" title="电子钟"></a>电子钟</h2><p>参考：<a href="https://anheyu.com/posts/fc18.html">https://anheyu.com/posts/fc18.html</a></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">npm</span> <span class="string">install</span> <span class="string">hexo-butterfly-clock-anzhiyu</span> <span class="string">--save</span></span><br></pre></td></tr></table></figure><p>添加配置项</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># electric_clock</span></span><br><span class="line"><span class="comment"># see https://anheyu.com/posts/fc18.html</span></span><br><span class="line"><span class="attr">electric_clock:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">all</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="comment"># - /posts/</span></span><br><span class="line">    <span class="comment"># - /about/</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">class</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">sticky_layout</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">0</span></span><br><span class="line">  <span class="attr">loading:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/loading.gif</span> <span class="comment">#加载动画自定义</span></span><br><span class="line">  <span class="attr">clock_css:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/clock.min.css</span></span><br><span class="line">  <span class="attr">clock_js:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu@1.1.6/lib/clock.min.js</span></span><br><span class="line">  <span class="attr">ip_api:</span> <span class="string">https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0</span></span><br><span class="line">  <span class="attr">qweather_key:</span> <span class="comment"># 和风天气key</span></span><br><span class="line">  <span class="attr">gaud_map_key:</span> <span class="comment"># 高得地图web服务key</span></span><br><span class="line">  <span class="attr">default_rectangle:</span> <span class="literal">true</span> <span class="comment"># 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气</span></span><br><span class="line">  <span class="attr">rectangle:</span> <span class="number">112.6534116</span><span class="string">,27.96920845</span> <span class="comment"># 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置</span></span><br></pre></td></tr></table></figure><h2 id="Gitcalendar"><a href="#Gitcalendar" class="headerlink" title="Gitcalendar"></a>Gitcalendar</h2><p>参考：<a href="https://akilar.top/posts/1f9c68c9/">https://akilar.top/posts/1f9c68c9/</a></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-filter-gitcalendar --save</span><br></pre></td></tr></table></figure><p>添加配置项</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># hexo-filter-gitcalendar</span></span><br><span class="line"><span class="comment"># see https://akilar.top/posts/1f9c68c9/</span></span><br><span class="line"><span class="attr">gitcalendar:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">/</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="comment"># butterfly挂载容器</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">id</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">recent-posts</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">0</span></span><br><span class="line">  <span class="attr">user:</span> <span class="string">anzhiyu-c</span> <span class="comment">#git用户名</span></span><br><span class="line">  <span class="attr">apiurl:</span> <span class="string">&quot;https://python-github-calendar-api-spk83h666-anzhiyu-c.vercel.app&quot;</span></span><br><span class="line">  <span class="attr">minheight:</span></span><br><span class="line">    <span class="attr">pc:</span> <span class="string">280px</span> <span class="comment">#桌面端最小高度</span></span><br><span class="line">    <span class="attr">mibile:</span> <span class="string">0px</span> <span class="comment">#移动端最小高度</span></span><br><span class="line">  <span class="comment"># color: &quot;[&#x27;#e4dfd7&#x27;, &#x27;#f9f4dc&#x27;, &#x27;#f7e8aa&#x27;, &#x27;#f7e8aa&#x27;, &#x27;#f8df72&#x27;, &#x27;#fcd217&#x27;, &#x27;#fcc515&#x27;, &#x27;#f28e16&#x27;, &#x27;#fb8b05&#x27;, &#x27;#d85916&#x27;, &#x27;#f43e06&#x27;]&quot; #橘黄色调</span></span><br><span class="line">  <span class="attr">color:</span> <span class="string">&quot;[&#x27;#ebedf0&#x27;, &#x27;#fdcdec&#x27;, &#x27;#fc9bd9&#x27;, &#x27;#fa6ac5&#x27;, &#x27;#f838b2&#x27;, &#x27;#f5089f&#x27;, &#x27;#c4067e&#x27;, &#x27;#92055e&#x27;, &#x27;#540336&#x27;, &#x27;#48022f&#x27;, &#x27;#30021f&#x27;]&quot;</span> <span class="comment">#浅紫色调</span></span><br><span class="line">  <span class="comment"># color: &quot;[&#x27;#ebedf0&#x27;, &#x27;#f0fff4&#x27;, &#x27;#dcffe4&#x27;, &#x27;#bef5cb&#x27;, &#x27;#85e89d&#x27;, &#x27;#34d058&#x27;, &#x27;#28a745&#x27;, &#x27;#22863a&#x27;, &#x27;#176f2c&#x27;, &#x27;#165c26&#x27;, &#x27;#144620&#x27;]&quot; #翠绿色调</span></span><br><span class="line">  <span class="comment"># color: &quot;[&#x27;#ebedf0&#x27;, &#x27;#f1f8ff&#x27;, &#x27;#dbedff&#x27;, &#x27;#c8e1ff&#x27;, &#x27;#79b8ff&#x27;, &#x27;#2188ff&#x27;, &#x27;#0366d6&#x27;, &#x27;#005cc5&#x27;, &#x27;#044289&#x27;, &#x27;#032f62&#x27;, &#x27;#05264c&#x27;]&quot; #天青色调</span></span><br><span class="line">  <span class="attr">container:</span> <span class="string">.recent-post-item(style=&#x27;width:100%;height:auto;padding:10px;&#x27;)</span> <span class="comment">#父元素容器，需要使用pug语法</span></span><br><span class="line">  <span class="attr">gitcalendar_css:</span> <span class="string">https://cdn.cbd.int/hexo-filter-gitcalendar/lib/gitcalendar.css</span></span><br><span class="line">  <span class="attr">gitcalendar_js:</span> <span class="string">https://cdn.cbd.int/hexo-filter-gitcalendar/lib/gitcalendar.js</span></span><br></pre></td></tr></table></figure><h2 id="hexo-butterfly-swiper-anzhiyu-插件安装"><a href="#hexo-butterfly-swiper-anzhiyu-插件安装" class="headerlink" title="hexo-butterfly-swiper-anzhiyu 插件安装"></a>hexo-butterfly-swiper-anzhiyu 插件安装</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left"><a href="https://akilar.top/posts/8e1264d1/">Swiper Bar</a></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看魔改教程 </summary>              <div class='content'>              <p>本站首页 <code>Swiper Bar</code> 修改请参考 <a href="https://www.npmjs.com/package/hexo-butterfly-swiper-anzhiyu-pro">hexo-butterfly-swiper-anzhiyu-pro</a> 文档自行修改。此处不做赘述。</p><p>hexo-butterfly-swiper-anzhiyu 安装教程</p><div class="tabs" id="hexo-butterfly-swiper-anzhiyu"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#hexo-butterfly-swiper-anzhiyu-1">安装依赖</button></li><li class="tab"><button type="button" data-href="#hexo-butterfly-swiper-anzhiyu-2">配置项</button></li><li class="tab"><button type="button" data-href="#hexo-butterfly-swiper-anzhiyu-3">pjax适配</button></li><li class="tab"><button type="button" data-href="#hexo-butterfly-swiper-anzhiyu-4">轮播图顺序控制</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="hexo-butterfly-swiper-anzhiyu-1"><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-butterfly-swiper-anzhiyu --save</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="hexo-butterfly-swiper-anzhiyu-2"><p>在<code>_config.butterfly.yml</code>加入以下配置项</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># hexo-butterfly-swiper-anzhiyu</span></span><br><span class="line"><span class="comment"># see https://akilar.top/posts/8e1264d1/</span></span><br><span class="line"><span class="attr">swiper:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">randomenable:</span> <span class="literal">true</span> <span class="comment"># 人潮汹涌开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">/</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="attr">timemode:</span> <span class="string">date</span> <span class="comment">#date/updated</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">id</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">recent-posts</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">1</span></span><br><span class="line">  <span class="attr">default_descr:</span> <span class="string">再怎么看我也不知道怎么描述它的啦！</span></span><br><span class="line">  <span class="attr">swiper_css:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css</span> <span class="comment">#swiper css依赖</span></span><br><span class="line">  <span class="attr">swiper_js:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js</span> <span class="comment">#swiper js依赖 #swiper js依赖</span></span><br><span class="line">  <span class="attr">custom_css:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiperstyle.css</span> <span class="comment"># 适配主题样式补丁</span></span><br><span class="line">  <span class="attr">custom_js:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper_init.js</span> <span class="comment"># swiper初始化方法</span></span><br><span class="line">  <span class="attr">gsap_js:</span> <span class="string">https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js</span></span><br><span class="line">  <span class="attr">people_js:</span> <span class="string">https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/people.min.js</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="hexo-butterfly-swiper-anzhiyu-3"><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Pjax</span></span><br><span class="line"><span class="comment"># It may contain bugs and unstable, give feedback when you find the bugs.</span></span><br><span class="line"><span class="comment"># https://github.com/MoOx/pjax</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="comment"># - xxxx</span></span><br><span class="line">    <span class="comment"># - xxxx</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="hexo-butterfly-swiper-anzhiyu-4"><p>swiper_index: 1</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="hexo-butterfly-categories-card"><a href="#hexo-butterfly-categories-card" class="headerlink" title="hexo-butterfly-categories-card"></a>hexo-butterfly-categories-card</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left"><a href="https://akilar.top/posts/a9131002/">Categories Magnet</a></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看魔改教程 </summary>              <div class='content'>              <div class="tabs" id="侧边栏最近文章修改"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#侧边栏最近文章修改-1">安装依赖</button></li><li class="tab"><button type="button" data-href="#侧边栏最近文章修改-2">配置项</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="侧边栏最近文章修改-1"><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-butterfly-categories-card --save</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏最近文章修改-2"><p>在<code>_config.butterfly.yml</code>加入以下配置项</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># hexo-butterfly-categories-card</span></span><br><span class="line"><span class="comment"># see https://akilar.top/posts/a9131002/</span></span><br><span class="line"><span class="attr">categoryBar:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># 开关</span></span><br><span class="line">  <span class="attr">priority:</span> <span class="number">5</span> <span class="comment">#过滤器优先权</span></span><br><span class="line">  <span class="attr">enable_page:</span> <span class="string">/</span> <span class="comment"># 应用页面</span></span><br><span class="line">  <span class="attr">layout:</span> <span class="comment"># 挂载容器类型</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">id</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">recent-posts</span></span><br><span class="line">    <span class="attr">index:</span> <span class="number">0</span></span><br><span class="line">  <span class="attr">column:</span> <span class="string">odd</span> <span class="comment"># odd：3列 | even：4列</span></span><br><span class="line">  <span class="attr">row:</span> <span class="number">1</span> <span class="comment">#显示行数，默认两行，超过行数切换为滚动显示</span></span><br><span class="line">  <span class="attr">message:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span> <span class="string">大学学习史</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover1.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span> <span class="string">前端成长历程</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover2.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span> <span class="string">生活欢乐多</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover3.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover4.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover5.webp</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">descr:</span></span><br><span class="line">      <span class="attr">cover:</span> <span class="string">https://cdn.cbd.int/akilar-candyassets@1.0.36/image/cover6.webp</span></span><br><span class="line">  <span class="attr">custom_css:</span> <span class="string">https://cdn.cbd.int/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="友链朋友圈"><a href="#友链朋友圈" class="headerlink" title="友链朋友圈"></a>友链朋友圈</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left"><a href="https://akilar.top/posts/62f13a97/">hexo-filter-fcircle</a></td></tr></tbody></table>              </div>            </details><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><a href="https://anheyu.com/fcircle/">https://anheyu.com/fcircle/</a></p></div></div></div><details class="folding-tag" ><summary> 点击查看魔改友链朋友圈教程 </summary>              <div class='content'>              <div class="tabs" id="侧边栏最近文章修改"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#侧边栏最近文章修改-1">安装依赖</button></li><li class="tab"><button type="button" data-href="#侧边栏最近文章修改-2">配置项</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="侧边栏最近文章修改-1"><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall hexo-butterfly-fcircle --save</span><br><span class="line">npm install hexo-filter-fcircle --save</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏最近文章修改-2"><p>在<code>_config.butterfly.yml</code>加入以下配置项</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># fcircle</span></span><br><span class="line"><span class="comment"># see https://akilar.top/posts/62f13a97/</span></span><br><span class="line"><span class="attr">fcircle:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment">#控制开关</span></span><br><span class="line">  <span class="attr">apiurl:</span> <span class="string">https://hexo-friendcircle-api-ai9d4hwad-anzhiyu-c.vercel.app/api</span> <span class="comment">#api地址</span></span><br><span class="line">  <span class="attr">initnumber:</span> <span class="number">20</span> <span class="comment">#【可选】页面初始化展示文章数量</span></span><br><span class="line">  <span class="attr">stepnumber:</span> <span class="number">10</span> <span class="comment">#【可选】每次加载增加的篇数</span></span><br><span class="line">  <span class="attr">css:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-blog@1.1.6/css/friend.min.css</span> <span class="comment">#【可选】开发者接口，自定义css链接</span></span><br><span class="line">  <span class="attr">js:</span> <span class="string">https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/fcircle.min.js</span> <span class="comment">#【可选】开发者接口，自定义js链接</span></span><br><span class="line">  <span class="attr">path:</span> <span class="comment">#【可选】fcircle的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html</span></span><br><span class="line">  <span class="attr">front_matter:</span> <span class="comment">#【可选】fcircle页面的 front_matter 配置</span></span><br><span class="line">    <span class="attr">title:</span> <span class="string">朋友圈</span></span><br><span class="line">    <span class="attr">comments:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="魔改友人帐"><a href="#魔改友人帐" class="headerlink" title="魔改友人帐"></a>魔改友人帐</h2><details class="folding-tag" ><summary> 点击查看魔改友人帐参考教程 </summary>              <div class='content'>              <p>参考: <a href="https://anheyu.com/posts/292d.html">https://anheyu.com/posts/292d.html</a></p>              </div>            </details><h2 id="字数统计"><a href="#字数统计" class="headerlink" title="字数统计"></a>字数统计</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-wordcount --save</span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="使用-github-action-推送博客部署仓库至-NPM"><a href="#使用-github-action-推送博客部署仓库至-NPM" class="headerlink" title="使用 github-action 推送博客部署仓库至 NPM"></a>使用 github-action 推送博客部署仓库至 NPM</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">使用 github-action 推送博客部署仓库至 NPM</td><td align="left"><a href="https://anheyu.com/posts/asdx.html">https://anheyu.com/posts/asdx.html</a></td></tr></tbody></table>              </div>            </details><h2 id="引入阿里图标"><a href="#引入阿里图标" class="headerlink" title="引入阿里图标"></a>引入阿里图标</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left"><a href="https://akilar.top/posts/d2ebecef/">Iconfont Inject</a></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看引入阿里图标魔改教程 </summary>              <div class='content'>              <p>注意 ⚠️ 先自行引入<code>ali_font.js</code></p><p>添加外挂标签，在<code>[Blogroot]\themes\butterfly\scripts\tag\</code>目录下新建<code>iconfont.js</code>，打开<code>[Blogroot]\themes\butterfly\scripts\tag\iconfont.js</code>,输入</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">iconFont</span>(<span class="params">args</span>) &#123;</span><br><span class="line">  args = args.<span class="title function_">join</span>(<span class="string">&quot; &quot;</span>).<span class="title function_">split</span>(<span class="string">&quot;,&quot;</span>);</span><br><span class="line">  <span class="keyword">let</span> p0 = args[<span class="number">0</span>];</span><br><span class="line">  <span class="keyword">let</span> p1 = args[<span class="number">1</span>] ? args[<span class="number">1</span>] : <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;svg class=&quot;icon&quot; style=&quot;width:<span class="subst">$&#123;p1&#125;</span>em; height:<span class="subst">$&#123;p1&#125;</span>em&quot; aria-hidden=&quot;true&quot;&gt;&lt;use xlink:href=&quot;#<span class="subst">$&#123;p0&#125;</span>&quot;&gt;&lt;/use&gt;&lt;/svg&gt;`</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">hexo.<span class="property">extend</span>.<span class="property">tag</span>.<span class="title function_">register</span>(<span class="string">&quot;icon&quot;</span>, iconFont);</span><br></pre></td></tr></table></figure><div class="tabs" id="文章中使用阿里图标"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#文章中使用阿里图标-1">语法示例</button></li><li class="tab"><button type="button" data-href="#文章中使用阿里图标-2">参数释义</button></li><li class="tab"><button type="button" data-href="#文章中使用阿里图标-3">示例源码</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="文章中使用阿里图标-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% icon [icon-xxxx],[font-size] %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="文章中使用阿里图标-2"><ol><li><code>icon-xxxx</code>：表示图标<code>font-class</code>,可以在自己的阿里矢量图标库项目的<code>font-class</code>引用方案内查询并复制。</li><li><code>font-size</code>：表示图标大小，直接填写数字即可，单位为<code>em</code>。图标大小默认值为<code>1em</code>。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="文章中使用阿里图标-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&#123;% icon icon-rat<span class="emphasis">_zi %&#125;&#123;% icon icon-rat,2 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-ox_</span>chou,3 %&#125;&#123;% icon icon-ox,4 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-tiger<span class="emphasis">_yin,5 %&#125;&#123;% icon icon-tiger,6 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-rabbit_</span>mao,1 %&#125;&#123;% icon icon-rabbit,2 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-dragon<span class="emphasis">_chen,3 %&#125;&#123;% icon icon-dragon,4 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-snake_</span>si,5 %&#125;&#123;% icon icon-snake,6 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-horse<span class="emphasis">_wu %&#125;&#123;% icon icon-horse,2 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-goat_</span>wei,3 %&#125;&#123;% icon icon-goat,4 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-monkey<span class="emphasis">_shen,5 %&#125;&#123;% icon icon-monkey,6 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-rooster_</span>you %&#125;&#123;% icon icon-rooster,2 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% icon icon-dog<span class="emphasis">_xu,3 %&#125;&#123;% icon icon-dog,4 %&#125;</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">&#123;% icon icon-boar_</span>hai,5 %&#125;&#123;% icon icon-boar,6 %&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="站点动态-title"><a href="#站点动态-title" class="headerlink" title="站点动态 title"></a>站点动态 title</h2><details class="folding-tag" ><summary> 点击查看魔改站点动态 title 教程 </summary>              <div class='content'>              <p>添加自定义<code>title.js</code>，然后主题配置文件<code>inject</code>引入即可.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//动态标题</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">OriginTitile</span> = <span class="variable language_">document</span>.<span class="property">title</span>;</span><br><span class="line"><span class="keyword">var</span> titleTime;</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;visibilitychange&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">hidden</span>) &#123;</span><br><span class="line">    <span class="comment">//离开当前页面时标签显示内容</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">title</span> = <span class="string">&quot;w(ﾟДﾟ)w 不要走！再看看嘛！&quot;</span>;</span><br><span class="line">    <span class="built_in">clearTimeout</span>(titleTime);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">//返回当前页面时标签显示内容</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">title</span> = <span class="string">&quot;♪(^∇^*)欢迎肥来！&quot;</span> + <span class="title class_">OriginTitile</span>;</span><br><span class="line">    <span class="comment">//两秒后变回正常标题</span></span><br><span class="line">    titleTime = <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">document</span>.<span class="property">title</span> = <span class="title class_">OriginTitile</span>;</span><br><span class="line">    &#125;, <span class="number">2000</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="时间轴生肖"><a href="#时间轴生肖" class="headerlink" title="时间轴生肖"></a>时间轴生肖</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left"><a href="https://akilar.top/posts/22257072/">Archive Beautify</a></td></tr></tbody></table>              </div>            </details><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/13/63200ab68ba45.jpg"></p></div></div></div><details class="folding-tag" ><summary> 点击查看魔改时间轴生肖教程 </summary>              <div class='content'>              <div class="tabs" id="时间轴生肖修改"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#时间轴生肖修改-1">year.js</button></li><li class="tab"><button type="button" data-href="#时间轴生肖修改-2">article-sort.pug</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="时间轴生肖修改-1"><p>在<code>[Blogroot]\themes\butterfly\scripts\</code>目录下新建<code>year.js</code>，并在<code>[Blogroot]\themes\butterfly\scripts\year.js</code>中输入以下内容：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">hexo.<span class="property">extend</span>.<span class="property">helper</span>.<span class="title function_">register</span>(<span class="string">&quot;getAnimalIcon&quot;</span>, <span class="keyword">function</span> (<span class="params">year</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> index = <span class="built_in">parseInt</span>(year) % <span class="number">12</span>;</span><br><span class="line">  <span class="keyword">var</span> icon = &#123;</span><br><span class="line">    <span class="number">0</span>: <span class="string">&quot;icon-monkey&quot;</span>,</span><br><span class="line">    <span class="number">1</span>: <span class="string">&quot;icon-rooster&quot;</span>,</span><br><span class="line">    <span class="number">2</span>: <span class="string">&quot;icon-dog&quot;</span>,</span><br><span class="line">    <span class="number">3</span>: <span class="string">&quot;icon-boar&quot;</span>,</span><br><span class="line">    <span class="number">4</span>: <span class="string">&quot;icon-rat&quot;</span>,</span><br><span class="line">    <span class="number">5</span>: <span class="string">&quot;icon-ox&quot;</span>,</span><br><span class="line">    <span class="number">6</span>: <span class="string">&quot;icon-tiger&quot;</span>,</span><br><span class="line">    <span class="number">7</span>: <span class="string">&quot;icon-rabbit&quot;</span>,</span><br><span class="line">    <span class="number">8</span>: <span class="string">&quot;icon-dragon&quot;</span>,</span><br><span class="line">    <span class="number">9</span>: <span class="string">&quot;icon-snake&quot;</span>,</span><br><span class="line">    <span class="number">10</span>: <span class="string">&quot;icon-horse&quot;</span>,</span><br><span class="line">    <span class="number">11</span>: <span class="string">&quot;icon-goat&quot;</span>,</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="keyword">return</span> icon[index];</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="时间轴生肖修改-2"><p>修改<code>[Blogroot]\themes\butterfly\layout\includes\mixins\article-sort.pug</code>，第 7 行开始，注意缩进。</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">    - let title = article.title || _p(&#x27;no_title&#x27;)</span><br><span class="line"><span class="addition">+   - let iconAnimal = &#x27;#&#x27;+ getAnimalIcon(tempYear)</span></span><br><span class="line">    if tempYear !== year</span><br><span class="line">      - year = tempYear</span><br><span class="line"><span class="deletion">-     .article-sort-item.year= year</span></span><br><span class="line"><span class="addition">+     .article-sort-item.year</span></span><br><span class="line"><span class="addition">+       span= year</span></span><br><span class="line"><span class="addition">+       svg.icon(aria-hidden=&#x27;true&#x27;)</span></span><br><span class="line"><span class="addition">+         use(xlink:href=iconAnimal)</span></span><br><span class="line">    .article-sort-item(class=no_cover)</span><br><span class="line">      if article.cover &amp;&amp; theme.cover.archives_enable</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="打赏按钮投币彩蛋效果"><a href="#打赏按钮投币彩蛋效果" class="headerlink" title="打赏按钮投币彩蛋效果"></a>打赏按钮投币彩蛋效果</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left">给<code>hexo-theme-butterfly</code>添加 <u><a href="https://akilar.top/posts/23fdf850/">打赏按钮投币彩蛋效果</a></u></td></tr></tbody></table>              </div>            </details><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/04/6314934137b7e.webp"></p></div></div></div><details class="folding-tag" ><summary> 点击查看打赏按钮投币彩蛋效果教程 </summary>              <div class='content'>              <div class="tabs" id="侧边栏最近文章修改"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#侧边栏最近文章修改-1">修改zh-CN.yml</button></li><li class="tab"><button type="button" data-href="#侧边栏最近文章修改-2">整体替换reward.pug</button></li><li class="tab"><button type="button" data-href="#侧边栏最近文章修改-3">新建coin.css</button></li><li class="tab"><button type="button" data-href="#侧边栏最近文章修改-4">新建coin.js</button></li><li class="tab"><button type="button" data-href="#侧边栏最近文章修改-5">修改配置项</button></li><li class="tab"><button type="button" data-href="#侧边栏最近文章修改-6">整体替换reward.styl</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="侧边栏最近文章修改-1"><p>修改<code>[Blogroot]\themes\butterfly\languages\zh-CN.yml</code></p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">date_suffix:</span><br><span class="line">  just: 刚刚</span><br><span class="line">  min: 分钟前</span><br><span class="line">  hour: 小时前</span><br><span class="line">  day: 天前</span><br><span class="line">  month: 个月前</span><br><span class="line"></span><br><span class="line"><span class="deletion">- donate: 打赏</span></span><br><span class="line"><span class="addition">+ donate: 不给糖果就捣蛋</span></span><br><span class="line">share: 分享</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏最近文章修改-2"><p>修改<code>[Blogroot]\themes\butterfly\layout\includes\post\reward.pug</code>,整体替换为以下内容：</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">link(rel=<span class="string">&#x27;stylesheet&#x27;</span> href=url_for(theme.CDN.option.coin_css) media=<span class="string">&quot;defer&quot;</span> onload=<span class="string">&quot;this.media=&#x27;all&#x27;&quot;</span>)</span><br><span class="line">.post-reward</span><br><span class="line">  button.tip-button.reward-button</span><br><span class="line">    span.tip-button__text= _p(<span class="string">&#x27;donate&#x27;</span>)</span><br><span class="line">    .coin-wrapper</span><br><span class="line">      .coin</span><br><span class="line">        .coin__middle</span><br><span class="line">        .coin__back</span><br><span class="line">        .coin__front</span><br><span class="line">    .reward-main</span><br><span class="line">      ul.reward-<span class="built_in">all</span></span><br><span class="line">        each item <span class="keyword">in</span> theme.reward.QR_code</span><br><span class="line">          - var clickTo = (item.itemlist||item).link ? (item.itemlist||item).link : (item.itemlist||item).img</span><br><span class="line">          li.reward-item</span><br><span class="line">            a(href=clickTo target=<span class="string">&#x27;_blank&#x27;</span>)</span><br><span class="line">              img.post-qr-code-img(src=url_for((item.itemlist||item).img) alt=(item.itemlist||item).text)</span><br><span class="line">            .post-qr-code-desc=(item.itemlist||item).text</span><br><span class="line"><span class="keyword">if</span> theme.reward.coinAudio</span><br><span class="line">  - var coinAudio = theme.reward.coinAudio ? url_for(theme.reward.coinAudio) : <span class="string">&#x27;https://cdn.cbd.int/akilar-candyassets@1.0.36/audio/coin.mp3&#x27;</span></span><br><span class="line">  audio<span class="comment">#coinAudio(src=coinAudio)</span></span><br><span class="line">script(defer src=url_for(theme.CDN.option.coin_js))</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏最近文章修改-3"><p>新建<code>[Blogroot]source\css\coin\coin.css</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.tip-button</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">0.25rem</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">600</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2.6rem</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: -<span class="number">4rem</span>;</span><br><span class="line">  <span class="attribute">outline</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform-origin</span>: <span class="number">0%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">50ms</span> ease-in-out;</span><br><span class="line">  <span class="attribute">width</span>: auto;</span><br><span class="line">  -webkit-tap-highlight-<span class="attribute">color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">4deg</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-class">.clicked</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: <span class="number">150ms</span> ease-in-out <span class="number">1</span> shake;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-class">.clicked</span> <span class="selector-class">.tip-button__text</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">100ms</span> linear <span class="number">200ms</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-class">.clicked</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">60%</span>;</span><br><span class="line">  <span class="attribute">background</span>: $button-hover-color;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-class">.clicked</span> <span class="selector-class">.coin</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: margin-bottom <span class="number">1s</span> linear <span class="number">200ms</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-class">.shrink-landing</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: width <span class="number">200ms</span> ease-in;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-class">.coin-landed</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">  <span class="attribute">transform-origin</span>: <span class="number">50%</span> <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-class">.coin-landed</span> <span class="selector-class">.coin-wrapper</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(circle at <span class="number">35%</span> <span class="number">97%</span>, <span class="built_in">rgba</span>(<span class="number">3</span>, <span class="number">16</span>, <span class="number">50</span>, <span class="number">0.4</span>) <span class="number">0.04rem</span>, transparent <span class="number">0.04rem</span>), <span class="built_in">radial-gradient</span>(</span><br><span class="line">      circle at <span class="number">45%</span> <span class="number">92%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">3</span>, <span class="number">16</span>, <span class="number">50</span>, <span class="number">0.4</span>) <span class="number">0.04rem</span>,</span><br><span class="line">      transparent <span class="number">0.02rem</span></span><br><span class="line">    ), <span class="built_in">radial-gradient</span>(circle at <span class="number">55%</span> <span class="number">98%</span>, <span class="built_in">rgba</span>(<span class="number">3</span>, <span class="number">16</span>, <span class="number">50</span>, <span class="number">0.4</span>) <span class="number">0.04rem</span>, transparent <span class="number">0.04rem</span>), <span class="built_in">radial-gradient</span>(circle at</span><br><span class="line">        <span class="number">65%</span> <span class="number">96%</span>, <span class="built_in">rgba</span>(<span class="number">3</span>, <span class="number">16</span>, <span class="number">50</span>, <span class="number">0.4</span>) <span class="number">0.06rem</span>, transparent <span class="number">0.06rem</span>);</span><br><span class="line">  <span class="attribute">background-position</span>: center bottom;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: -<span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">2</span>) <span class="built_in">translateY</span>(-<span class="number">10px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button__text</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">1.8rem</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">100ms</span> linear <span class="number">500ms</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">0.25rem</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">transition</span>: height <span class="number">250ms</span> ease-in-out <span class="number">400ms</span>, width <span class="number">250ms</span> ease-in-out <span class="number">300ms</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">2</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tip-button</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">bottom</span>: -<span class="number">1rem</span>;</span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;ヾ(≧O≦)〃嗷~&quot;</span>; <span class="comment">/*点击后显示的内容*/</span></span><br><span class="line">  <span class="attribute">height</span>: <span class="number">110%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</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">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>);</span><br><span class="line">  <span class="attribute">transform-origin</span>: <span class="number">50%</span> <span class="number">20%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: transform <span class="number">200ms</span> <span class="built_in">cubic-bezier</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0.35</span>, <span class="number">1.43</span>);</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.coin-wrapper</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: none;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">18rem</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">transform</span>: none;</span><br><span class="line">  <span class="attribute">transform-origin</span>: <span class="number">50%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">200ms</span> linear <span class="number">100ms</span>, transform <span class="number">300ms</span> ease-out;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.coin</span> &#123;</span><br><span class="line">  <span class="attr">--front-y-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--back-y-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--coin-y-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--coin-x-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--coin-scale-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--coin-rotation-multiplier</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">--shine-opacity-multiplier</span>: <span class="number">0.4</span>;</span><br><span class="line">  <span class="attr">--shine-bg-multiplier</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="built_in">calc</span>(<span class="built_in">var</span>(--coin-y-multiplier) * <span class="number">1rem</span> - <span class="number">3.5rem</span>);</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">3.5rem</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">3.05rem</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">right</span>: <span class="built_in">calc</span>(<span class="built_in">var</span>(--coin-x-multiplier) * <span class="number">34%</span> + <span class="number">16%</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">50%</span>) <span class="built_in">scale</span>(<span class="built_in">calc</span>(<span class="number">0.4</span> + <span class="built_in">var</span>(--coin-scale-multiplier))) <span class="built_in">rotate</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(</span><br><span class="line">            --coin-rotation-multiplier</span><br><span class="line">          ) * -<span class="number">1deg</span>));</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">100ms</span> linear <span class="number">200ms</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">3.5rem</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__front</span>,</span><br><span class="line"><span class="selector-class">.coin__middle</span>,</span><br><span class="line"><span class="selector-class">.coin__back</span>,</span><br><span class="line"><span class="selector-class">.coin</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-class">.coin__front</span><span class="selector-pseudo">::after</span>,</span><br><span class="line"><span class="selector-class">.coin__back</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__front</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(circle at <span class="number">50%</span> <span class="number">50%</span>, transparent <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">115</span>, <span class="number">124</span>, <span class="number">153</span>, <span class="number">0.4</span>) <span class="number">54%</span>, <span class="number">#c2cadf</span> <span class="number">54%</span>),</span><br><span class="line">    <span class="built_in">linear-gradient</span>(<span class="number">210deg</span>, <span class="number">#8590b3</span> <span class="number">32%</span>, transparent <span class="number">32%</span>), <span class="built_in">linear-gradient</span>(<span class="number">150deg</span>, <span class="number">#8590b3</span> <span class="number">32%</span>, transparent <span class="number">32%</span>),</span><br><span class="line">    <span class="built_in">linear-gradient</span>(to right, <span class="number">#8590b3</span> <span class="number">22%</span>, transparent <span class="number">22%</span>, transparent <span class="number">78%</span>, <span class="number">#8590b3</span> <span class="number">78%</span>), <span class="built_in">linear-gradient</span>(</span><br><span class="line">      to bottom,</span><br><span class="line">      <span class="number">#fcfaf9</span> <span class="number">44%</span>,</span><br><span class="line">      transparent <span class="number">44%</span>,</span><br><span class="line">      transparent <span class="number">65%</span>,</span><br><span class="line">      <span class="number">#fcfaf9</span> <span class="number">65%</span>,</span><br><span class="line">      <span class="number">#fcfaf9</span> <span class="number">71%</span>,</span><br><span class="line">      <span class="number">#8590b3</span> <span class="number">71%</span></span><br><span class="line">    ), <span class="built_in">linear-gradient</span>(to right, transparent <span class="number">28%</span>, <span class="number">#fcfaf9</span> <span class="number">28%</span>, <span class="number">#fcfaf9</span> <span class="number">34%</span>, <span class="number">#8590b3</span> <span class="number">34%</span>, <span class="number">#8590b3</span> <span class="number">40%</span>, <span class="number">#fcfaf9</span> <span class="number">40%</span>, <span class="number">#fcfaf9</span></span><br><span class="line">        <span class="number">47%</span>, <span class="number">#8590b3</span> <span class="number">47%</span>, <span class="number">#8590b3</span> <span class="number">53%</span>, <span class="number">#fcfaf9</span> <span class="number">53%</span>, <span class="number">#fcfaf9</span> <span class="number">60%</span>, <span class="number">#8590b3</span> <span class="number">60%</span>, <span class="number">#8590b3</span> <span class="number">66%</span>, <span class="number">#fcfaf9</span> <span class="number">66%</span>, <span class="number">#fcfaf9</span> <span class="number">72%</span>, transparent</span><br><span class="line">        <span class="number">72%</span>);</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#8590b3</span>;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--front-y-multiplier) * <span class="number">0.3181818182rem</span> / <span class="number">2</span>)) <span class="built_in">scaleY</span>(<span class="built_in">var</span>(--front-scale-multiplier));</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__front</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">var</span>(--front-y-multiplier);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__middle</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#737c99</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--middle-y-multiplier) * <span class="number">0.3181818182rem</span> / <span class="number">2</span>)) <span class="built_in">scaleY</span>(<span class="built_in">var</span>(--middle-scale-multiplier));</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__back</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(circle at <span class="number">50%</span> <span class="number">50%</span>, transparent <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">115</span>, <span class="number">124</span>, <span class="number">153</span>, <span class="number">0.4</span>) <span class="number">54%</span>, <span class="number">#c2cadf</span> <span class="number">54%</span>),</span><br><span class="line">    <span class="built_in">radial-gradient</span>(circle at <span class="number">50%</span> <span class="number">40%</span>, <span class="number">#fcfaf9</span> <span class="number">23%</span>, transparent <span class="number">23%</span>), <span class="built_in">radial-gradient</span>(circle at <span class="number">50%</span> <span class="number">100%</span>, <span class="number">#fcfaf9</span> <span class="number">35%</span>, transparent</span><br><span class="line">        <span class="number">35%</span>);</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#8590b3</span>;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--back-y-multiplier) * <span class="number">0.3181818182rem</span> / <span class="number">2</span>)) <span class="built_in">scaleY</span>(<span class="built_in">var</span>(--back-scale-multiplier));</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin__back</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">var</span>(--back-y-multiplier);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">radial-gradient</span>(circle at <span class="number">25%</span> <span class="number">65%</span>, transparent <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.9</span>) <span class="number">90%</span>), <span class="built_in">linear-gradient</span>(<span class="number">55deg</span>, transparent</span><br><span class="line">        <span class="built_in">calc</span>(<span class="built_in">var</span>(--shine-bg-multiplier) + <span class="number">0%</span>), <span class="number">#e9f4ff</span> <span class="built_in">calc</span>(<span class="built_in">var</span>(--shine-bg-multiplier) + <span class="number">0%</span>), transparent <span class="built_in">calc</span>(<span class="built_in">var</span>(</span><br><span class="line">              --shine-bg-multiplier</span><br><span class="line">            ) + <span class="number">50%</span>));</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="built_in">var</span>(--shine-opacity-multiplier);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--middle-y-multiplier) * <span class="number">0.3181818182rem</span> / -<span class="number">2</span>)) <span class="built_in">scaleY</span>(<span class="built_in">var</span>(--middle-scale-multiplier))</span><br><span class="line">    <span class="built_in">rotate</span>(<span class="built_in">calc</span>(<span class="built_in">var</span>(--coin-rotation-multiplier) * <span class="number">1deg</span>));</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">10</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.coin</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#737c99</span>;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0.3181818182rem</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">50%</span>);</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">2</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> shake &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">4deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">66%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">4deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏最近文章修改-4"><p>新建<code>[Blogroot]\source\js\coin\coin.js</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> tipButtons = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&quot;.tip-button&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">coinAudio</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> coinAudio = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;coinAudio&quot;</span>);</span><br><span class="line">  <span class="keyword">if</span> (coinAudio) &#123;</span><br><span class="line">    coinAudio.<span class="title function_">play</span>(); <span class="comment">//有音频时播放</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Loop through all buttons (allows for multiple buttons on page)</span></span><br><span class="line">tipButtons.<span class="title function_">forEach</span>(<span class="function"><span class="params">button</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">var</span> coin = button.<span class="title function_">querySelector</span>(<span class="string">&quot;.coin&quot;</span>);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// The larger the number, the slower the animation</span></span><br><span class="line">  coin.<span class="property">maxMoveLoopCount</span> = <span class="number">90</span>;</span><br><span class="line"></span><br><span class="line">  button.<span class="title function_">addEventListener</span>(<span class="string">&quot;click&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="regexp">/Android|webOS|BlackBerry/i</span>.<span class="title function_">test</span>(navigator.<span class="property">userAgent</span>)) <span class="keyword">return</span> <span class="literal">true</span>; <span class="comment">//媒体选择</span></span><br><span class="line">    <span class="keyword">if</span> (button.<span class="property">clicked</span>) <span class="keyword">return</span>;</span><br><span class="line">    button.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;clicked&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Wait to start flipping th coin because of the button tilt animation</span></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// Randomize the flipping speeds just for fun</span></span><br><span class="line">      coin.<span class="property">sideRotationCount</span> = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">5</span>) * <span class="number">90</span>;</span><br><span class="line">      coin.<span class="property">maxFlipAngle</span> = (<span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">4</span>) + <span class="number">3</span>) * <span class="title class_">Math</span>.<span class="property">PI</span>;</span><br><span class="line">      button.<span class="property">clicked</span> = <span class="literal">true</span>;</span><br><span class="line">      <span class="title function_">flipCoin</span>();</span><br><span class="line">      <span class="title function_">coinAudio</span>();</span><br><span class="line">    &#125;, <span class="number">50</span>);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> <span class="title function_">flipCoin</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    coin.<span class="property">moveLoopCount</span> = <span class="number">0</span>;</span><br><span class="line">    <span class="title function_">flipCoinLoop</span>();</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> <span class="title function_">resetCoin</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--coin-x-multiplier&quot;</span>, <span class="number">0</span>);</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--coin-scale-multiplier&quot;</span>, <span class="number">0</span>);</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--coin-rotation-multiplier&quot;</span>, <span class="number">0</span>);</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--shine-opacity-multiplier&quot;</span>, <span class="number">0.4</span>);</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--shine-bg-multiplier&quot;</span>, <span class="string">&quot;50%&quot;</span>);</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;opacity&quot;</span>, <span class="number">1</span>);</span><br><span class="line">    <span class="comment">// Delay to give the reset animation some time before you can click again</span></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      button.<span class="property">clicked</span> = <span class="literal">false</span>;</span><br><span class="line">    &#125;, <span class="number">300</span>);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> <span class="title function_">flipCoinLoop</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    coin.<span class="property">moveLoopCount</span>++;</span><br><span class="line">    <span class="keyword">var</span> percentageCompleted = coin.<span class="property">moveLoopCount</span> / coin.<span class="property">maxMoveLoopCount</span>;</span><br><span class="line">    coin.<span class="property">angle</span> = -coin.<span class="property">maxFlipAngle</span> * <span class="title class_">Math</span>.<span class="title function_">pow</span>(percentageCompleted - <span class="number">1</span>, <span class="number">2</span>) + coin.<span class="property">maxFlipAngle</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Calculate the scale and position of the coin moving through the air</span></span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--coin-y-multiplier&quot;</span>, -<span class="number">11</span> * <span class="title class_">Math</span>.<span class="title function_">pow</span>(percentageCompleted * <span class="number">2</span> - <span class="number">1</span>, <span class="number">4</span>) + <span class="number">11</span>);</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--coin-x-multiplier&quot;</span>, percentageCompleted);</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--coin-scale-multiplier&quot;</span>, percentageCompleted * <span class="number">0.6</span>);</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--coin-rotation-multiplier&quot;</span>, percentageCompleted * coin.<span class="property">sideRotationCount</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Calculate the scale and position values for the different coin faces</span></span><br><span class="line">    <span class="comment">// The math uses sin/cos wave functions to similate the circular motion of 3D spin</span></span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--front-scale-multiplier&quot;</span>, <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="title class_">Math</span>.<span class="title function_">cos</span>(coin.<span class="property">angle</span>), <span class="number">0</span>));</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--front-y-multiplier&quot;</span>, <span class="title class_">Math</span>.<span class="title function_">sin</span>(coin.<span class="property">angle</span>));</span><br><span class="line"></span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--middle-scale-multiplier&quot;</span>, <span class="title class_">Math</span>.<span class="title function_">abs</span>(<span class="title class_">Math</span>.<span class="title function_">cos</span>(coin.<span class="property">angle</span>), <span class="number">0</span>));</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--middle-y-multiplier&quot;</span>, <span class="title class_">Math</span>.<span class="title function_">cos</span>((coin.<span class="property">angle</span> + <span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">2</span>) % <span class="title class_">Math</span>.<span class="property">PI</span>));</span><br><span class="line"></span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--back-scale-multiplier&quot;</span>, <span class="title class_">Math</span>.<span class="title function_">max</span>(<span class="title class_">Math</span>.<span class="title function_">cos</span>(coin.<span class="property">angle</span> - <span class="title class_">Math</span>.<span class="property">PI</span>), <span class="number">0</span>));</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--back-y-multiplier&quot;</span>, <span class="title class_">Math</span>.<span class="title function_">sin</span>(coin.<span class="property">angle</span> - <span class="title class_">Math</span>.<span class="property">PI</span>));</span><br><span class="line"></span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--shine-opacity-multiplier&quot;</span>, <span class="number">4</span> * <span class="title class_">Math</span>.<span class="title function_">sin</span>((coin.<span class="property">angle</span> + <span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">2</span>) % <span class="title class_">Math</span>.<span class="property">PI</span>) - <span class="number">3.2</span>);</span><br><span class="line">    coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;--shine-bg-multiplier&quot;</span>, -<span class="number">40</span> * (<span class="title class_">Math</span>.<span class="title function_">cos</span>((coin.<span class="property">angle</span> + <span class="title class_">Math</span>.<span class="property">PI</span> / <span class="number">2</span>) % <span class="title class_">Math</span>.<span class="property">PI</span>) - <span class="number">0.5</span>) + <span class="string">&quot;%&quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Repeat animation loop</span></span><br><span class="line">    <span class="keyword">if</span> (coin.<span class="property">moveLoopCount</span> &lt; coin.<span class="property">maxMoveLoopCount</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (coin.<span class="property">moveLoopCount</span> === coin.<span class="property">maxMoveLoopCount</span> - <span class="number">6</span>) button.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;shrink-landing&quot;</span>);</span><br><span class="line">      <span class="variable language_">window</span>.<span class="title function_">requestAnimationFrame</span>(flipCoinLoop);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      button.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&quot;coin-landed&quot;</span>);</span><br><span class="line">      coin.<span class="property">style</span>.<span class="title function_">setProperty</span>(<span class="string">&quot;opacity&quot;</span>, <span class="number">0</span>);</span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        button.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&quot;clicked&quot;</span>, <span class="string">&quot;shrink-landing&quot;</span>, <span class="string">&quot;coin-landed&quot;</span>);</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">          <span class="title function_">resetCoin</span>();</span><br><span class="line">        &#125;, <span class="number">300</span>);</span><br><span class="line">      &#125;, <span class="number">1500</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏最近文章修改-5"><p>修改<code>_config.butterfly.yml</code>,添加音频文件配置项，添加 CDN 配置项：</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">  # Sponsor/reward</span><br><span class="line">  reward:</span><br><span class="line">    enable: true</span><br><span class="line"><span class="addition">+   coinAudio: https://cdn.cbd.int/akilar-candyassets@1.0.36/audio/aowu.m4a</span></span><br><span class="line">    QR_code:</span><br><span class="line">      - img: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-weichat.png</span><br><span class="line">        link:</span><br><span class="line">        text: wechat</span><br><span class="line">      - img: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-alipay.png</span><br><span class="line">        link:</span><br><span class="line">        text: alipay</span><br><span class="line">  CDN:</span><br><span class="line">    # main</span><br><span class="line">    main_css: /css/index.css</span><br><span class="line">    jquery: https://cdn.cbd.int/jquery@latest/dist/jquery.min.js</span><br><span class="line">    main: /js/main.js</span><br><span class="line">    utils:/js/utils.js</span><br><span class="line">    option:</span><br><span class="line"><span class="addition">+     # 打赏按钮投币效果</span></span><br><span class="line"><span class="addition">+     coin_js: /js/coin/coin.js</span></span><br><span class="line"><span class="addition">+     coin_css: /css/coin/coin.css</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏最近文章修改-6"><p>现在的打赏按钮样式需要稍作适配，当前若提示语太长，悬停时会无法显示完全。需要微调一下,修改<code>[Blogroot]\themes\butterfly\source\css\_layout\reward.styl</code>，整体替换为以下内容：</p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.post-reward</span></span><br><span class="line">  <span class="attribute">position</span>: relative</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">4rem</span></span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span></span><br><span class="line">  <span class="attribute">text-align</span>: center</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.reward-button</span></span><br><span class="line">    <span class="attribute">display</span>: inline-block</span><br><span class="line">    <span class="attribute">padding</span>: .<span class="number">2rem</span> <span class="number">1.2rem</span></span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">var</span>(--btn-bg)</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--btn-color)</span><br><span class="line">    <span class="attribute">cursor</span>: pointer</span><br><span class="line">    <span class="attribute">transition</span>: all .<span class="number">4s</span></span><br><span class="line"></span><br><span class="line">    <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">      <span class="attribute">box-shadow</span>: inset <span class="number">15em</span> <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="built_in">var</span>(--btn-hover-color)</span><br><span class="line"></span><br><span class="line">      <span class="selector-class">.reward-main</span></span><br><span class="line">        <span class="attribute">display</span>: block</span><br><span class="line"></span><br><span class="line">    <span class="selector-class">.reward-main</span></span><br><span class="line">      <span class="attribute">position</span>: absolute</span><br><span class="line">      <span class="attribute">bottom</span>: <span class="number">40px</span></span><br><span class="line">      <span class="attribute">left</span>: -<span class="number">25%</span></span><br><span class="line">      <span class="attribute">z-index</span>: <span class="number">100</span></span><br><span class="line">      <span class="attribute">display</span>: none</span><br><span class="line">      <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">15px</span></span><br><span class="line">      <span class="attribute">width</span>: <span class="number">150%</span></span><br><span class="line"></span><br><span class="line">      <span class="selector-class">.reward-all</span></span><br><span class="line">        <span class="attribute">display</span>: inline-block</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">0</span></span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">1rem</span> .<span class="number">5rem</span></span><br><span class="line">        <span class="attribute">border-radius</span>: <span class="number">4px</span></span><br><span class="line">        <span class="attribute">background</span>: <span class="built_in">var</span>(--reward-pop)</span><br><span class="line"></span><br><span class="line">        <span class="selector-pseudo">&amp;:before</span></span><br><span class="line">          <span class="attribute">position</span>: absolute</span><br><span class="line">          <span class="attribute">bottom</span>: -<span class="number">10px</span></span><br><span class="line">          <span class="attribute">left</span>: <span class="number">0</span></span><br><span class="line">          <span class="attribute">width</span>: <span class="number">100%</span></span><br><span class="line">          <span class="attribute">height</span>: <span class="number">20px</span></span><br><span class="line">          <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"></span><br><span class="line">        <span class="selector-pseudo">&amp;:after</span></span><br><span class="line">          <span class="attribute">position</span>: absolute</span><br><span class="line">          <span class="attribute">right</span>: <span class="number">0</span></span><br><span class="line">          <span class="attribute">bottom</span>: <span class="number">2px</span></span><br><span class="line">          <span class="attribute">left</span>: <span class="number">0</span></span><br><span class="line">          <span class="attribute">margin</span>: <span class="number">0</span> auto</span><br><span class="line">          <span class="attribute">width</span>: <span class="number">0</span></span><br><span class="line">          <span class="attribute">height</span>: <span class="number">0</span></span><br><span class="line">          <span class="attribute">border-top</span>: <span class="number">13px</span> solid <span class="built_in">var</span>(--reward-pop)</span><br><span class="line">          <span class="attribute">border-right</span>: <span class="number">13px</span> solid transparent</span><br><span class="line">          <span class="attribute">border-left</span>: <span class="number">13px</span> solid transparent</span><br><span class="line">          <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line"></span><br><span class="line">        <span class="selector-class">.reward-item</span></span><br><span class="line">          <span class="attribute">display</span>: inline-block</span><br><span class="line">          <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">8px</span></span><br><span class="line">          <span class="attribute">list-style-type</span>: none</span><br><span class="line">          <span class="attribute">vertical-align</span>: top</span><br><span class="line"></span><br><span class="line">          <span class="selector-tag">img</span></span><br><span class="line">            <span class="attribute">width</span>: <span class="number">130px</span></span><br><span class="line">            <span class="attribute">height</span>: <span class="number">130px</span></span><br><span class="line"></span><br><span class="line">          <span class="selector-class">.post-qr-code-desc</span></span><br><span class="line">            <span class="attribute">padding-top</span>: .<span class="number">4rem</span></span><br><span class="line">            <span class="attribute">width</span>: <span class="number">130px</span></span><br><span class="line">            <span class="attribute">color</span>: <span class="variable">$reward</span>-pop-up-color</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><details class="folding-tag" ><summary> 点击查看碎碎念 </summary>              <div class='content'>              <p>还可以针对自己的情况适度调整以下内容：</p><ul><li><p>修改悬停打赏按钮时的颜色填充长度：</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">  .reward-button</span><br><span class="line">    display: inline-block</span><br><span class="line">    padding: .2rem 1.2rem</span><br><span class="line">    background: var(--btn-bg)</span><br><span class="line">    color: var(--btn-color)</span><br><span class="line">    cursor: pointer</span><br><span class="line">    transition: all .4s</span><br><span class="line"></span><br><span class="line">    &amp;:hover</span><br><span class="line"><span class="deletion">-     box-shadow: inset 9em 0 0 0 var(--btn-hover-color)</span></span><br><span class="line"><span class="addition">+     box-shadow: inset 20em 0 0 0 var(--btn-hover-color)</span></span><br></pre></td></tr></table></figure></li><li><p>修改打赏二维码的样式（仅针对 2 张二维码的情况，单张不用改动。两张以上需要自己调试这两个参数）</p></li></ul><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">  .reward-main</span><br><span class="line">    position: absolute</span><br><span class="line">    bottom: 40px</span><br><span class="line"><span class="deletion">-   left: 0</span></span><br><span class="line"><span class="addition">+   left: -25%</span></span><br><span class="line">    z-index: 100</span><br><span class="line">    display: none</span><br><span class="line">    padding: 0 0 15px</span><br><span class="line"><span class="deletion">-   width: 100%</span></span><br><span class="line"><span class="addition">+   width: 150%</span></span><br></pre></td></tr></table></figure>              </div>            </details>              </div>            </details><h2 id="每页单独配置背景图"><a href="#每页单独配置背景图" class="headerlink" title="每页单独配置背景图"></a>每页单独配置背景图</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left"><u><a href="https://akilar.top/posts/23fdf850/">每页单独配置背景图</a></u></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看每页单独配置背景图魔改教程 </summary>              <div class='content'>              <ol><li>修改<code>[Blogroot]\themes\butterfly\layout\includes\layout.pug</code></li></ol><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">  if theme.background</span><br><span class="line"><span class="deletion">-   #web_bg</span></span><br><span class="line"><span class="addition">+   if page.background</span></span><br><span class="line"><span class="addition">+     #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)</span></span><br><span class="line"><span class="addition">+   else</span></span><br><span class="line"><span class="addition">+     #web_bg</span></span><br></pre></td></tr></table></figure><ol start="2"><li>如此即可在每个页面的<code>markdown</code>文件的<code>front-matter</code>中使用<code>background</code>配置项单独配置页面背景了,不写或留空则使用主题配置文件中的默认背景。</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 使用 Github Pages 和 Hexo 搭建自己的独立博客</span><br><span class="line">tags: Hexo</span><br><span class="line">cover: &quot;https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/banner.jpg&quot;</span><br><span class="line">keywords: &quot;使用 Github Pages 和 Hexo 搭建自己的独立博客,博客,hexo,github,搭博客&quot;</span><br><span class="line">description: 记录搭建博客的经历~</span><br><span class="line">abbrlink: ddae</span><br><span class="line">date: 2021-03-31 13:26:54</span><br><span class="line">background: url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/banner.jpg)</span><br><span class="line"><span class="section">swiper<span class="emphasis">_index: 4</span></span></span><br><span class="line"><span class="emphasis"><span class="section">---</span></span></span><br></pre></td></tr></table></figure><ol start="3"><li>开了 pjax 的用户会发现背景变了以后就变不回去了，需要刷新才行。因此为了实现期望的效果，这里还要再把<code>#web_bg</code>加到<code>pjax</code>选择器中。<br>修改<code>[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug</code></li></ol><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">  script(src=url_for(theme.CDN.pjax))</span><br><span class="line">  script.</span><br><span class="line">    let pjaxSelectors = [</span><br><span class="line">      &#x27;title&#x27;,</span><br><span class="line">      &#x27;#config-diff&#x27;,</span><br><span class="line">      &#x27;#body-wrap&#x27;,</span><br><span class="line">      &#x27;#rightside-config-hide&#x27;,</span><br><span class="line">      &#x27;#rightside-config-show&#x27;,</span><br><span class="line"><span class="addition">+     &#x27;#web_bg&#x27;,</span></span><br><span class="line">      &#x27;.js-pjax&#x27;</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="菜单栏多色图标配置教程"><a href="#菜单栏多色图标配置教程" class="headerlink" title="菜单栏多色图标配置教程"></a>菜单栏多色图标配置教程</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left"><u><a href="https://akilar.top/posts/23fdf850">菜单栏多色图标配置教程</a></u></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看菜单栏多色图标配置教程 </summary>              <div class='content'>              <ol><li>配置项</li></ol><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Inject</span></span><br><span class="line"><span class="comment"># Insert the code to head (before &#x27;&lt;/head&gt;&#x27; tag) and the bottom (before &#x27;&lt;/body&gt;&#x27; tag)</span></span><br><span class="line"><span class="comment"># 插入代码到头部 &lt;/head&gt; 之前 和 底部 &lt;/body&gt; 之前</span></span><br><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="comment"># 公共css</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/css/custom.css&quot;&quot;&gt;</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;https://cdn.cbd.int/qweather-icons@1.1.1/font/qweather-icons.css&quot;&gt;</span></span><br><span class="line">    <span class="comment"># - &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/custom.css&quot; media=&quot;defer&quot; onload=&quot;this.media=&#x27;all&#x27;&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="comment"># 控制台打印消息</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">rel=&quot;prefetch&quot;</span> <span class="string">src=&quot;/js/console.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line">    <span class="comment"># 标题卖萌</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">src=&quot;/js/diytitle.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line">    <span class="comment"># 站点公祭日自动变灰判定</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">src=&quot;/js/grayscale.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line">    <span class="comment"># 浮动动画特效</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">async</span> <span class="string">data-pjax</span> <span class="string">src=&quot;/js/floatpanel.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line">    <span class="comment"># aplayer音乐</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;div</span> <span class="string">class=&quot;aplayer</span> <span class="literal">no</span><span class="string">-destroy&quot;</span> <span class="string">data-id=&quot;8152976493&quot;</span> <span class="string">data-server=&quot;netease&quot;</span> <span class="string">data-type=&quot;playlist&quot;</span>   <span class="string">data-order=&quot;list&quot;</span> <span class="string">data-fixed=&quot;true&quot;</span> <span class="string">data-preload=&quot;auto&quot;</span> <span class="string">data-autoplay=&quot;false&quot;</span> <span class="string">data-mutex=&quot;true&quot;</span> <span class="string">&gt;&lt;/div&gt;</span></span><br></pre></td></tr></table></figure><ol start="2"><li>替换全部内容修改<code>[Blogroot]\themes\butterfly\layout\includes\header\menu_item.pug</code>,本方案默认使用观感最佳的悬停父元素触发子元素动画效果。默认动画为<code>faa-tada</code>。</li></ol><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> theme.menu</span><br><span class="line">  //- <span class="keyword">for</span> mobile sidebar</span><br><span class="line">  - let sidebarChildHide = theme.hide_sidebar_menu_child ? <span class="string">&#x27;hide&#x27;</span> : <span class="string">&#x27;&#x27;</span></span><br><span class="line"></span><br><span class="line">  .menus_items</span><br><span class="line">    each value, label <span class="keyword">in</span> theme.menu</span><br><span class="line">      <span class="keyword">if</span> typeof value !== <span class="string">&#x27;object&#x27;</span></span><br><span class="line">        .menus_item</span><br><span class="line">          a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">0</span>])))</span><br><span class="line">            <span class="keyword">if</span> value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">1</span>]</span><br><span class="line">              - var icon_value = trim(value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">1</span>])</span><br><span class="line">              - var anima_value = value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">2</span>] ? trim(value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">2</span>]) : <span class="string">&#x27;faa-tada&#x27;</span></span><br><span class="line">              <span class="keyword">if</span> icon_value.substring(<span class="number">0</span>,<span class="number">2</span>)==<span class="string">&quot;fa&quot;</span></span><br><span class="line">                i.fa-fw(<span class="keyword">class</span>=icon_value + <span class="string">&#x27; &#x27;</span> + anima_value)</span><br><span class="line">              <span class="keyword">else</span> <span class="keyword">if</span> icon_value.substring(<span class="number">0</span>,<span class="number">4</span>)==<span class="string">&quot;icon&quot;</span></span><br><span class="line">                svg.icon(aria-hidden=<span class="string">&quot;true&quot;</span> <span class="keyword">class</span>=anima_value)</span><br><span class="line">                  use(xlink:href=`<span class="comment">#`+ icon_value)</span></span><br><span class="line">            span=<span class="string">&#x27; &#x27;</span>+label</span><br><span class="line">      <span class="keyword">else</span></span><br><span class="line">        .menus_item</span><br><span class="line">          a.site-page.faa-parent.animated-hover(href=<span class="string">&#x27;javascript:void(0);&#x27;</span>)</span><br><span class="line">            <span class="keyword">if</span> label.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">1</span>]</span><br><span class="line">              - var icon_label = trim(label.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">1</span>])</span><br><span class="line">              - var anima_label = label.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">2</span>] ? trim(label.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">2</span>]) : <span class="string">&#x27;faa-tada&#x27;</span></span><br><span class="line">              <span class="keyword">if</span> icon_label.substring(<span class="number">0</span>,<span class="number">2</span>)==<span class="string">&quot;fa&quot;</span></span><br><span class="line">                i.fa-fw(<span class="keyword">class</span>=icon_label + <span class="string">&#x27; &#x27;</span> + anima_label)</span><br><span class="line">              <span class="keyword">else</span> <span class="keyword">if</span> icon_label.substring(<span class="number">0</span>,<span class="number">4</span>)==<span class="string">&quot;icon&quot;</span></span><br><span class="line">                svg.icon(aria-hidden=<span class="string">&quot;true&quot;</span> <span class="keyword">class</span>=anima_label)</span><br><span class="line">                  use(xlink:href=`<span class="comment">#`+ icon_label)</span></span><br><span class="line">            span=<span class="string">&#x27; &#x27;</span>+ trim(label.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">0</span>])</span><br><span class="line">            i.fas.fa-chevron-down.expand(<span class="keyword">class</span>=sidebarChildHide)</span><br><span class="line">          ul.menus_item_child</span><br><span class="line">            each val,lab <span class="keyword">in</span> value</span><br><span class="line">              li</span><br><span class="line">                a.site-page.child.faa-parent.animated-hover(href=url_for(trim(val.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">0</span>])))</span><br><span class="line">                  <span class="keyword">if</span> val.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">1</span>]</span><br><span class="line">                    - var icon_val = trim(val.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">1</span>])</span><br><span class="line">                    - var anima_val = val.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">2</span>] ? trim(val.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">2</span>]) : <span class="string">&#x27;faa-tada&#x27;</span></span><br><span class="line">                    <span class="keyword">if</span> icon_val.substring(<span class="number">0</span>,<span class="number">2</span>)==<span class="string">&quot;fa&quot;</span></span><br><span class="line">                      i.fa-fw(<span class="keyword">class</span>=icon_val + <span class="string">&#x27; &#x27;</span> + anima_val)</span><br><span class="line">                    <span class="keyword">else</span> <span class="keyword">if</span> icon_val.substring(<span class="number">0</span>,<span class="number">4</span>)==<span class="string">&quot;icon&quot;</span></span><br><span class="line">                      svg.icon(aria-hidden=<span class="string">&quot;true&quot;</span> <span class="keyword">class</span>=anima_val)</span><br><span class="line">                        use(xlink:href=`<span class="comment">#`+ icon_val)</span></span><br><span class="line">                  span=<span class="string">&#x27; &#x27;</span>+ lab</span><br></pre></td></tr></table></figure><ol start="3"><li>修改配置项</li></ol><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><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 class="string">||</span> <span class="string">faa-tada</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">/artitalk/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-comment-dots</span></span><br><span class="line">  <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="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="comment"># List||fas fa-list:</span></span><br><span class="line">  <span class="comment">#   Music: /music/ || fas fa-music</span></span><br><span class="line">  <span class="comment">#   Movie: /movies/ || fas fa-video</span></span><br><span class="line"></span><br><span class="line">  <span class="string">朋友圈:</span> <span class="string">/fcircle/</span> <span class="string">||</span> <span class="string">fab</span> <span class="string">fa-artstation</span></span><br><span class="line">  <span class="string">留言板:</span> <span class="string">/comments/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-envelope</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="comment"># 闲言碎语: /hpptalk/ || fas fa-comment-dots</span></span><br><span class="line">  <span class="string">追番:</span> <span class="string">/bangumis/</span> <span class="string">||</span> <span class="string">icon-bilibili1</span></span><br><span class="line">  <span class="string">关于:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">icon-zhifeiji</span></span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="Social-卡片彩色图标引入"><a href="#Social-卡片彩色图标引入" class="headerlink" title="Social 卡片彩色图标引入"></a>Social 卡片彩色图标引入</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于店长方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">店长原教程</td><td align="left"><u><a href="https://akilar.top/posts/23fdf850/">Social 卡片彩色图标引入</a></u></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看Social 卡片彩色图标引入魔改教程 </summary>              <div class='content'>              <ol><li>重写<code>[Blogroot]\themes\butterfly\layout\includes\header\social.pug</code>,替换为以下代码：</li></ol><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">each value, title <span class="keyword">in</span> theme.social</span><br><span class="line">  a.social-icon.faa-parent.animated-hover(href=url_for(trim(value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">0</span>])) target=<span class="string">&quot;_blank&quot;</span> title=title === undefined ? <span class="string">&#x27;&#x27;</span> : trim(title))</span><br><span class="line">    <span class="keyword">if</span> value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">1</span>]</span><br><span class="line">      - var icon_value = trim(value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">1</span>])</span><br><span class="line">      - var anima_value = value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">2</span>] ? trim(value.split(<span class="string">&#x27;||&#x27;</span>)[<span class="number">2</span>]) : <span class="string">&#x27;faa-tada&#x27;</span></span><br><span class="line">      <span class="keyword">if</span> icon_value.substring(<span class="number">0</span>,<span class="number">2</span>)==<span class="string">&quot;fa&quot;</span></span><br><span class="line">        i.fa-fw(<span class="keyword">class</span>=icon_value + <span class="string">&#x27; &#x27;</span> + anima_value)</span><br><span class="line">      <span class="keyword">else</span> <span class="keyword">if</span> icon_value.substring(<span class="number">0</span>,<span class="number">4</span>)==<span class="string">&quot;icon&quot;</span></span><br><span class="line">        svg.icon(aria-hidden=<span class="string">&quot;true&quot;</span> <span class="keyword">class</span>=anima_value)</span><br><span class="line">          use(xlink:href=`<span class="comment">#`+ icon_value)</span></span><br></pre></td></tr></table></figure><ol start="2"><li>以下为对应的<code>social</code>配置项。写法沿用<code>menu_item</code>的写法示例。<del>早就想吐槽 butterfly 里 menu 和 social 截然相反的配置项写法了</del>。修改<code>[Blogroot]\_config.butterfly.yml</code>的<code>social</code>配置项。</li></ol><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># social settings (社交图标设置)</span></span><br><span class="line"><span class="comment"># formal:</span></span><br><span class="line"><span class="comment">#   icon: link || the description</span></span><br><span class="line"><span class="attr">social:</span></span><br><span class="line">  <span class="attr">Github:</span> <span class="string">https://github.com/anzhiyu-c</span> <span class="string">||</span> <span class="string">icon-gitHub</span> <span class="string">||</span> <span class="string">faa-tada</span></span><br><span class="line">  <span class="attr">Email:</span> <span class="string">https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=2268025923@qq.com</span> <span class="string">||</span> <span class="string">icon-youxiang</span> <span class="string">||</span> <span class="string">faa-tada</span></span><br><span class="line">  <span class="attr">RSS:</span> <span class="string">atom.xml</span> <span class="string">||</span> <span class="string">icon-rss</span> <span class="string">||</span> <span class="string">faa-tada</span></span><br><span class="line">  <span class="attr">BiliBili:</span> <span class="string">https://space.bilibili.com/372204786</span> <span class="string">||</span> <span class="string">icon-bilibili</span> <span class="string">||</span> <span class="string">faa-tada</span></span><br><span class="line">  <span class="attr">QQ:</span> <span class="string">tencent://Message/?Uin=2268025923&amp;amp;websiteName=local.edu.com:8888=&amp;amp;Menu=yes</span> <span class="string">||</span> <span class="string">icon-QQ1</span> <span class="string">||</span> <span class="string">faa-tada</span></span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="404-页面展示最近文章"><a href="#404-页面展示最近文章" class="headerlink" title="404 页面展示最近文章"></a>404 页面展示最近文章</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于<a href="https://blog.zhheo.com/">HEO</a>方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">洪哥原教程</td><td align="left"><u><a href="https://blog.zhheo.com/p/f48e518b.html">Butterfly 魔改：404 页面展示最近文章</a></u></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看魔改404页面展示最近文章教程 </summary>              <div class='content'>              <p>替换<code>themes\butterfly\layout\includes\404.pug</code>为以下代码</p><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">- var top_img = theme.error_404.background || theme.default_top_img</span><br><span class="line">- var bg_img = `background-image: url(<span class="string">&#x27;$&#123;url_for(top_img)&#125;&#x27;</span>)`</span><br><span class="line"></span><br><span class="line"><span class="comment">#body-wrap.error</span></span><br><span class="line">  div(style=<span class="string">&#x27;display: none&#x27;</span>)</span><br><span class="line">    include ./header/index.pug</span><br><span class="line"></span><br><span class="line">  <span class="comment">#error-wrap</span></span><br><span class="line">    .error-content</span><br><span class="line">      .error-img(style=bg_img)</span><br><span class="line">      .error-info</span><br><span class="line">        h1.error_title= <span class="string">&#x27;404&#x27;</span></span><br><span class="line">        .error_subtitle= theme.error_404.subtitle</span><br><span class="line">        a.button--animated(href=config.root)</span><br><span class="line">          i.fas.fa-rocket</span><br><span class="line">          = _p(<span class="string">&#x27;返回主页&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  .aside-<span class="built_in">list</span></span><br><span class="line">    .aside-<span class="built_in">list</span>-group</span><br><span class="line">        - let postLimit = theme.aside.card_recent_post.limit === <span class="number">0</span> ? site.posts.length : theme.aside.card_recent_post.limit || <span class="number">5</span></span><br><span class="line">        - let sort = theme.aside.card_recent_post.sort === <span class="string">&#x27;updated&#x27;</span> ? <span class="string">&#x27;updated&#x27;</span> : <span class="string">&#x27;date&#x27;</span></span><br><span class="line">        - site.posts.sort(sort, -<span class="number">1</span>).limit(postLimit).each(function(article)&#123;</span><br><span class="line">          - let link = article.link || article.path</span><br><span class="line">          - let title = article.title || _p(<span class="string">&#x27;no_title&#x27;</span>)</span><br><span class="line">          - let no_cover = article.cover === false || !theme.cover.aside_enable ? <span class="string">&#x27;no-cover&#x27;</span> : <span class="string">&#x27;&#x27;</span></span><br><span class="line">          - let post_cover = article.cover</span><br><span class="line">          .aside-<span class="built_in">list</span>-item(<span class="keyword">class</span>=no_cover)</span><br><span class="line">            <span class="keyword">if</span> post_cover &amp;&amp; theme.cover.aside_enable</span><br><span class="line">              a.thumbnail(href=url_for(link) title=title)</span><br><span class="line">                img(src=url_for(post_cover) onerror=`this.onerror=null;this.src=<span class="string">&#x27;$&#123;url_for(theme.error_img.post_page)&#125;&#x27;</span>` alt=title)</span><br><span class="line">            .content</span><br><span class="line">              a.title(href=url_for(link) title=title)= title</span><br><span class="line">              <span class="keyword">if</span> theme.aside.card_recent_post.sort === <span class="string">&#x27;updated&#x27;</span></span><br><span class="line">                time(datetime=date_xml(article.updated) title=_p(<span class="string">&#x27;post.updated&#x27;</span>) + <span class="string">&#x27; &#x27;</span> + full_date(article.updated)) <span class="comment">#[=date(article.updated, config.date_format)]</span></span><br><span class="line">              <span class="keyword">else</span></span><br><span class="line">                time(datetime=date_xml(article.date) title=_p(<span class="string">&#x27;post.created&#x27;</span>) + <span class="string">&#x27; &#x27;</span> + full_date(article.date)) <span class="comment">#[=date(article.date, config.date_format)]</span></span><br><span class="line">        - &#125;)</span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="random-js-随机跳转一篇文章"><a href="#random-js-随机跳转一篇文章" class="headerlink" title="random.js 随机跳转一篇文章"></a>random.js 随机跳转一篇文章</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <p>基于<a href="https://blog.zhheo.com/">HEO</a>方案进行修改</p><table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">洪哥原教程</td><td align="left"><u><a href="https://blog.zhheo.com/p/c116857c.html">Hexo 的 Butterfly 魔改：随机网页跳转（无缝版）</a></u></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> random.js随机跳转一篇文章 </summary>              <div class='content'>              <p>目前博主已将该内容集成在<a href="https://www.npmjs.com/package/hexo-butterfly-swiper-anzhiyu">hexo-butterfly-swiper-anzhiyu</a>中, 如果你有安装该插件，那么你将无需魔改该内容即可在任意位置使用<code>toRandomPost()</code>方法来实现跳转随意一篇文章。</p><p>创建<code>themes/butterfly/scripts/helpers/random.js</code>文件</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">hexo.<span class="property">extend</span>.<span class="property">generator</span>.<span class="title function_">register</span>(<span class="string">&quot;random&quot;</span>, <span class="keyword">function</span> (<span class="params">locals</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> config = hexo.<span class="property">config</span>.<span class="property">random</span> || &#123;&#125;;</span><br><span class="line">  <span class="keyword">const</span> posts = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> post <span class="keyword">of</span> locals.<span class="property">posts</span>.<span class="property">data</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (post.<span class="property">random</span> !== <span class="literal">false</span>) posts.<span class="title function_">push</span>(post.<span class="property">path</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="attr">path</span>: config.<span class="property">path</span> || <span class="string">&quot;zhheo/random.js&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: <span class="string">`var posts=<span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(</span></span></span><br><span class="line"><span class="subst"><span class="string">      posts</span></span></span><br><span class="line"><span class="subst"><span class="string">    )&#125;</span>;function toRandomPost()&#123;pjax.loadUrl(&#x27;/&#x27;+posts[Math.floor(Math.random() * posts.length)]);&#125;;`</span>,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>如果你没有开启<code>pjax</code>用下面的代码：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">hexo.<span class="property">extend</span>.<span class="property">generator</span>.<span class="title function_">register</span>(<span class="string">&quot;random&quot;</span>, <span class="keyword">function</span> (<span class="params">locals</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> config = hexo.<span class="property">config</span>.<span class="property">random</span> || &#123;&#125;;</span><br><span class="line">  <span class="keyword">const</span> posts = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> post <span class="keyword">of</span> locals.<span class="property">posts</span>.<span class="property">data</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (post.<span class="property">random</span> !== <span class="literal">false</span>) posts.<span class="title function_">push</span>(post.<span class="property">path</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="attr">path</span>: config.<span class="property">path</span> || <span class="string">&quot;anzhiyu/random.js&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: <span class="string">`var posts=<span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(</span></span></span><br><span class="line"><span class="subst"><span class="string">      posts</span></span></span><br><span class="line"><span class="subst"><span class="string">    )&#125;</span>;function toRandomPost()&#123;window.open(&#x27;/&#x27;+posts[Math.floor(Math.random() * posts.length)],&quot;_self&quot;);&#125;;`</span>,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>在主题配置文件引入<code>themes/butterfly/_config.yml</code>，<code>inject</code>的<code>bottom</code>里添加</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&lt;script</span> <span class="string">src=&quot;/anzhiyu/random.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p><strong>调用</strong><br>在需要调用的位置执行<code>toRandomPost()</code>函数即可。</p><p>比如任意<code>dom</code>添加<code>onclick=&quot;toRandomPost()&quot;</code></p>              </div>            </details><h2 id="右键菜单魔改"><a href="#右键菜单魔改" class="headerlink" title="右键菜单魔改"></a>右键菜单魔改</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">洪哥</td><td align="left"><u><a href="https://blog.zhheo.com/p/5e931b65.html">Butterfly 魔改：自定义右键菜单</a></u></td></tr><tr><td align="left">LYX 原教程</td><td align="left"><u><a href="https://yisous.xyz/posts/11eb4aac/">butterfly 博客自定义右键菜单升级版</a></u></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看右键菜单魔改教程 </summary>              <div class='content'>              <p><code>themes/butterfly/source/js/search/local-search.js</code>添加以下代码（站内搜索 🔍）</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const searchClickFn = () =&gt; &#123;</span><br><span class="line">  document.querySelector(&#x27;#search-button &gt; .search&#x27;).addEventListener(&#x27;click&#x27;, openSearch)</span><br><span class="line"><span class="addition">+ document.querySelector(&#x27;#menu-search&#x27;).addEventListener(&#x27;click&#x27;, openSearch)</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><code>themes/butterfly/layout/includes/layout.pug</code>添加以下代码</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">  include ./rightside.pug</span><br><span class="line">  !=partial(&#x27;includes/third-party/search/index&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span><br><span class="line"><span class="addition">+ !=partial(&#x27;includes/anzhiyu/rightmenu&#x27;, &#123;&#125;, &#123;cache:true&#125;)</span></span><br><span class="line">  include ./additional-js.pug</span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="评论弹幕"><a href="#评论弹幕" class="headerlink" title="评论弹幕"></a>评论弹幕</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">LYX 原教程</td><td align="left"><u><a href="https://yisous.xyz/posts/69707535/">Butterfly 主题的留言弹幕界面增强版（支持 Twikoo、Waline、Valine）</a></u></td></tr></tbody></table>              </div>            </details><h2 id="文章双栏"><a href="#文章双栏" class="headerlink" title="文章双栏"></a>文章双栏</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">小冰博客</td><td align="left"><u><a href="https://zfe.space/post/hexo-butterfly-article-double-row.html">教程：butterfly 主题文章双栏布局插件</a></u></td></tr></tbody></table>              </div>            </details><details class="folding-tag" ><summary> 点击查看文章双栏教程 </summary>              <div class='content'>              <p>执行以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm i hexo-butterfly-article-double-row --save</span><br><span class="line"></span><br><span class="line"><span class="comment"># 或者</span></span><br><span class="line"></span><br><span class="line">cnpm i hexo-butterfly-article-double-row --save</span><br></pre></td></tr></table></figure><p>注意，一定要加 –save，不然本地预览的时候可能不会显示！！！</p><p>新增网站根目录_config 配置项 (不是主题的)：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">butterfly_article_double_row:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="站外链接-tag"><a href="#站外链接-tag" class="headerlink" title="站外链接 tag"></a>站外链接 tag</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">洪哥原教程</td><td align="left"><u><a href="https://blog.zhheo.com/p/ccaf9148.html">Hexo 的 Butterfly 魔改：网址卡片外挂标签</a></u></td></tr></tbody></table>              </div>            </details><h2 id="bilibili-视频适配"><a href="#bilibili-视频适配" class="headerlink" title="bilibili 视频适配"></a>bilibili 视频适配</h2><details class="folding-tag" blue><summary> 效果预览 </summary>              <div class='content'>              <div align=center class="aspect-ratio">    <iframe src="https://player.bilibili.com/player.html?aid=556933559&&page=1&as_wide=1&high_quality=1&danmaku=0"     scrolling="no"     border="0"     frameborder="no"     framespacing="0"     high_quality=1    danmaku=1     allowfullscreen="true">     </iframe></div>              </div>            </details><details class="folding-tag" blue><summary> 点击查看bilibili视频适配 </summary>              <div class='content'>              <div class="tabs" id="bilibili视频适配"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#bilibili视频适配-1">文章页面插入html代码</button></li><li class="tab"><button type="button" data-href="#bilibili视频适配-2">修改css样式</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="bilibili视频适配-1"><p>直接复制插入你的 <code>md</code> 文章就行，修改里面的 aid 为你的视频 id：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">align</span>=<span class="string">&quot;center&quot;</span> <span class="attr">class</span>=<span class="string">&quot;aspect-ratio&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">iframe</span></span></span><br><span class="line"><span class="tag">    <span class="attr">src</span>=<span class="string">&quot;https://player.bilibili.com/player.html?aid=556933559&amp;&amp;page=1&amp;as_wide=1&amp;high_quality=1&amp;danmaku=0&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">scrolling</span>=<span class="string">&quot;no&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">border</span>=<span class="string">&quot;0&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">frameborder</span>=<span class="string">&quot;no&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">framespacing</span>=<span class="string">&quot;0&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">high_quality</span>=<span class="string">&quot;1&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">danmaku</span>=<span class="string">&quot;1&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">allowfullscreen</span>=<span class="string">&quot;true&quot;</span></span></span><br><span class="line"><span class="tag">  &gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="bilibili视频适配-2"><p>记得去 <code>blog/source/css/custom.css</code> 里，添加上述的样式：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*哔哩哔哩视频适配*/</span></span><br><span class="line"><span class="selector-class">.aspect-ratio</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding-bottom</span>: <span class="number">75%</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">3%</span> auto;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aspect-ratio</span> <span class="selector-tag">iframe</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="文章页局部-html-代码不渲染"><a href="#文章页局部-html-代码不渲染" class="headerlink" title="文章页局部 html 代码不渲染"></a>文章页局部 html 代码不渲染</h2><details class="folding-tag" blue><summary> 点击查看文章页局部 html 代码不渲染代码 </summary>              <div class='content'>              <p>md 文章页，部分内容不想经过 Hexo 渲染，则包一层 <code>raw</code> 标签：</p><figure class="highlight md"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% raw %&#125;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;&quot;</span>&gt;</span></span>你的一些代码...<span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span>你的一些代码...<span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">&#123;% endraw %&#125;</span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="文章置顶"><a href="#文章置顶" class="headerlink" title="文章置顶"></a>文章置顶</h2><p>想要在首页置顶某篇文章，只需在文章头部信息添加以下内容：</p><figure class="highlight md"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sticky: 1</span><br></pre></td></tr></table></figure><h2 id="文章页-H1-H6-图标风车样式效果"><a href="#文章页-H1-H6-图标风车样式效果" class="headerlink" title="文章页 H1-H6 图标风车样式效果"></a>文章页 H1-H6 图标风车样式效果</h2><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><div class="videos" col='1'><div class="video"><video controls preload><source src='/video/风车样式效果预览.mp4' type='video/mp4'>Your browser does not support the video tag.</video></div></div></div></div></div><details class="folding-tag" ><summary> 点击查看文章页H1-H6图标风车样式效果魔改教程 </summary>              <div class='content'>              <div class="tabs" id="本站小风车样式"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#本站小风车样式-1">主题配置文件</button></li><li class="tab"><button type="button" data-href="#本站小风车样式-2">让小风车转起来</button></li><li class="tab"><button type="button" data-href="#本站小风车样式-3">小风车颜色、大小修改</button></li><li class="tab"><button type="button" data-href="#本站小风车样式-4">小风车hover效果</button></li><li class="tab"><button type="button" data-href="#本站小风车样式-5">小风车hover效果</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="本站小风车样式-1"><p>本站使用了风车样式</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><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">post</span> <span class="comment"># site/post</span></span><br><span class="line">  <span class="comment"># title-prefix-icon: &#x27;\f0c1&#x27; 原内容</span></span><br><span class="line">  <span class="attr">title-prefix-icon:</span> <span class="string">&#x27;\f863&#x27;</span></span><br><span class="line">  <span class="attr">title-prefix-icon-color:</span> <span class="string">&quot;#F47466&quot;</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="本站小风车样式-2"><p>在上文的 blog&#x2F;source&#x2F;css&#x2F;custom.css 文件中，加入以下代码即可。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 文章页H1-H6图标样式效果 */</span></span><br><span class="line"><span class="selector-tag">h1</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-tag">h2</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-tag">h3</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-tag">h4</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-tag">h5</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-tag">h6</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">animation</span>: ccc <span class="number">1.6s</span> linear infinite;</span><br><span class="line">  <span class="attribute">animation</span>: ccc <span class="number">1.6s</span> linear infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@-webkit-keyframes</span> ccc &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">to</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">1turn</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">1turn</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> ccc &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-tag">to</span> &#123;</span><br><span class="line">    -webkit-<span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">1turn</span>);</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(-<span class="number">1turn</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="本站小风车样式-3"><p>本站使用了风车样式,添加以下 css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h1</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ef50a8</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">1.55rem</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.3rem</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: -<span class="number">0.23rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h2</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fb7061</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">1.35rem</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.1rem</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: -<span class="number">0.12rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h3</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ffbf00</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">1.22rem</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.95rem</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: -<span class="number">0.09rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h4</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#a9e000</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">1.05rem</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.8rem</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: -<span class="number">0.09rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h5</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#57c850</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">0.9rem</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.7rem</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">0rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h6</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#5ec1e0</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: -<span class="number">0.9rem</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.66rem</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">0rem</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="本站小风车样式-4"><p>鼠标碰到小风车转速变慢及变色<br>设置鼠标碰到标题时，小风车跟随标题变色，且像是被光标阻碍了，转速变慢。鼠标离开恢复转速。也可以设置为 none 鼠标碰到停止转动。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h1</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h2</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h3</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h4</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h5</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h6</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h1</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h2</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h3</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h4</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h5</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-id">#content-inner</span><span class="selector-class">.layout</span> <span class="selector-tag">h6</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#3b70fc</span>;</span><br><span class="line">  -webkit-<span class="attribute">animation</span>: ccc <span class="number">3.2s</span> linear infinite;</span><br><span class="line">  <span class="attribute">animation</span>: ccc <span class="number">3.2s</span> linear infinite;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="本站小风车样式-5"><p>右下角设置 icon 转的太快了，让它慢一点吧。继续添加：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 页面设置icon转动速度调整 */</span></span><br><span class="line"><span class="selector-id">#rightside_config</span> <span class="selector-tag">i</span><span class="selector-class">.fas</span><span class="selector-class">.fa-cog</span><span class="selector-class">.fa-spin</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: fa-spin <span class="number">5s</span> linear infinite;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="侧边栏标签修改"><a href="#侧边栏标签修改" class="headerlink" title="侧边栏标签修改"></a>侧边栏标签修改</h2><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/03/6312d3e52835c.webp"></p></div></div></div><details class="folding-tag" ><summary> 点击查看侧边栏标签修改魔改教程 </summary>              <div class='content'>              <div class="tabs" id="侧边栏标签修改"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#侧边栏标签修改-1">修改page.js</button></li><li class="tab"><button type="button" data-href="#侧边栏标签修改-2">css</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="侧边栏标签修改-1"><p>打开<code>themes/butterfly/scripts/helpers/page.js</code>修改第 52 行左右, 其中 &lt;sup&gt; 表示上标，&lt;sub&gt; 表示下标。开启了排序。</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">  const length = sizes.length - 1</span><br><span class="line"><span class="deletion">- source.forEach(tag =&gt; &#123;</span></span><br><span class="line"><span class="addition">+ source.sort(&#x27;name&#x27;).forEach(tag =&gt; &#123;</span></span><br><span class="line">    const ratio = length ? sizes.indexOf(tag.length) / length : 0</span><br><span class="line">    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)</span><br><span class="line">    let style = `font-size: $&#123;parseFloat(size.toFixed(2))&#125;$&#123;unit&#125;;`</span><br><span class="line">    const color = &#x27;rgb(&#x27; + Math.floor(Math.random() * 201) + &#x27;, &#x27; + Math.floor(Math.random() * 201) + &#x27;, &#x27; + Math.floor(Math.random() * 201) + &#x27;)&#x27; // 0,0,0 -&gt; 200,200,200</span><br><span class="line">    style += ` color: $&#123;color&#125;`</span><br><span class="line"><span class="deletion">-   result += `&lt;a href=&quot;$&#123;env.url_for(tag.path)&#125;&quot; style=&quot;$&#123;style&#125;&quot;&gt;$&#123;tag.name&#125;&lt;/a&gt;`</span></span><br><span class="line"><span class="addition">+   result += `&lt;a href=&quot;$&#123;env.url_for(tag.path)&#125;&quot; style=&quot;$&#123;style&#125;&quot;&gt;$&#123;tag.name&#125;&lt;sup&gt;$&#123;tag.length&#125;&lt;/sup&gt;&lt;/a&gt;`</span></span><br><span class="line">  &#125;)</span><br><span class="line">  return result</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏标签修改-2"><p>加入以下 css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* tags样式 */</span></span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-tag-cloud</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-fontcolor) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.05rem</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-tag-cloud</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white) <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-theme);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">1300px</span>) &#123;</span><br><span class="line">  <span class="selector-id">#aside-content</span> <span class="selector-class">.card-tag-cloud</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.03</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#aside-content</span> <span class="selector-class">.card-tag-cloud</span> <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0.97</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-tag-cloud</span> <span class="selector-tag">a</span> <span class="selector-tag">sup</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.4</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">2px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="侧边栏归档修改"><a href="#侧边栏归档修改" class="headerlink" title="侧边栏归档修改"></a>侧边栏归档修改</h2><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/03/6312d3e528353.webp"></p></div></div></div><details class="folding-tag" ><summary> 点击查看侧边栏标签修改魔改教程 </summary>              <div class='content'>              <div class="tabs" id="侧边栏归档修改"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#侧边栏归档修改-1">修改page.js</button></li><li class="tab"><button type="button" data-href="#侧边栏归档修改-2">css</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="侧边栏归档修改-1"><p>打开<code>themes/butterfly/scripts/helpers/aside_archives.js</code>修改第 92 行左右, 其中 &lt;sup&gt; 表示上标，&lt;sub&gt; 表示下标。开启了排序。</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">result += transform ? transform(item.name) : item.name</span><br><span class="line">result += &#x27;&lt;/span&gt;&#x27;</span><br><span class="line"></span><br><span class="line">if (showCount) &#123;</span><br><span class="line"><span class="deletion">- result += `&lt;span class=&quot;card-archive-list-count&quot;&gt;$&#123;item.count&#125;&lt;/span&gt;`</span></span><br><span class="line"><span class="addition">+ result += `&lt;div class=&quot;card-archive-list-count-group&quot;&gt;&lt;span class=&quot;card-archive-list-count&quot;&gt;$&#123;item.count&#125;&lt;/span&gt;&lt;span&gt;篇&lt;/span&gt;&lt;/div&gt;`</span></span><br><span class="line">&#125;</span><br><span class="line">result += &#x27;&lt;/a&gt;&#x27;</span><br><span class="line">result += &#x27;&lt;/li&gt;&#x27;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏归档修改-2"><p>加入以下 css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 归档样式 */</span></span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.card-archive-list-count</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: auto;</span><br><span class="line">  <span class="attribute">text-align</span>: left;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.5rem</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">0.9</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.card-archive-list-count-group</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row;</span><br><span class="line">  <span class="attribute">align-items</span>: baseline;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-archives</span> <span class="selector-tag">ul</span><span class="selector-class">.card-archive-list</span> &gt; <span class="selector-class">.card-archive-list-item</span> <span class="selector-tag">a</span> <span class="selector-tag">span</span><span class="selector-pseudo">:last-child</span>,</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-categories</span> <span class="selector-tag">ul</span><span class="selector-class">.card-category-list</span> &gt; <span class="selector-class">.card-category-list-item</span> <span class="selector-tag">a</span> <span class="selector-tag">span</span><span class="selector-pseudo">:last-child</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: fit-content;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">4px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-class">.card-archive-list-count</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: auto;</span><br><span class="line">  <span class="attribute">text-align</span>: left;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">1.1rem</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">0.9</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.card-archive-list-date</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0.6</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-class">.card-archive-list-item</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">flex</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">48%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-archives</span> <span class="selector-tag">ul</span><span class="selector-class">.card-archive-list</span> &gt; <span class="selector-class">.card-archive-list-item</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-categories</span> <span class="selector-tag">ul</span><span class="selector-class">.card-category-list</span> &gt; <span class="selector-class">.card-category-list-item</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">var</span>(--anzhiyu-theme);</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-theme);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">0.5rem</span>;</span><br><span class="line">  <span class="attribute">padding-right</span>: <span class="number">0.5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">1300px</span>) &#123;</span><br><span class="line">  <span class="selector-id">#aside-content</span> <span class="selector-class">.card-archives</span> <span class="selector-tag">ul</span><span class="selector-class">.card-archive-list</span> &gt; <span class="selector-class">.card-archive-list-item</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line">  <span class="selector-id">#aside-content</span> <span class="selector-class">.card-categories</span> <span class="selector-tag">ul</span><span class="selector-class">.card-category-list</span> &gt; <span class="selector-class">.card-category-list-item</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.03</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#aside-content</span> <span class="selector-class">.card-archives</span> <span class="selector-tag">ul</span><span class="selector-class">.card-archive-list</span> &gt; <span class="selector-class">.card-archive-list-item</span> <span class="selector-tag">a</span><span class="selector-pseudo">:active</span>,</span><br><span class="line">  <span class="selector-id">#aside-content</span> <span class="selector-class">.card-categories</span> <span class="selector-tag">ul</span><span class="selector-class">.card-category-list</span> &gt; <span class="selector-class">.card-category-list-item</span> <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0.97</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-archives</span> <span class="selector-tag">ul</span><span class="selector-class">.card-archive-list</span> &gt; <span class="selector-class">.card-archive-list-item</span> <span class="selector-tag">a</span>,</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-categories</span> <span class="selector-tag">ul</span><span class="selector-class">.card-category-list</span> &gt; <span class="selector-class">.card-category-list-item</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">4px</span> <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: column;</span><br><span class="line">  <span class="attribute">align-content</span>: space-between;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-archives</span> <span class="selector-tag">ul</span><span class="selector-class">.card-archive-list</span> &gt; <span class="selector-class">.card-archive-list-item</span> <span class="selector-tag">a</span> <span class="selector-tag">span</span><span class="selector-pseudo">:first</span>-child,</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-categories</span> <span class="selector-tag">ul</span><span class="selector-class">.card-category-list</span> &gt; <span class="selector-class">.card-category-list-item</span> <span class="selector-tag">a</span> <span class="selector-tag">span</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">  <span class="attribute">width</span>: auto;</span><br><span class="line">  <span class="attribute">flex</span>: inherit;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-archives</span> <span class="selector-tag">ul</span><span class="selector-class">.card-archive-list</span>,</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.card-categories</span> <span class="selector-tag">ul</span><span class="selector-class">.card-category-list</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex-direction</span>: row;</span><br><span class="line">  <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">  <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="侧边栏最近文章修改"><a href="#侧边栏最近文章修改" class="headerlink" title="侧边栏最近文章修改"></a>侧边栏最近文章修改</h2><div class="note info simple"><div class="hide-block"><button type="button" class="hide-button" style="">预览效果    </button><div class="hide-content"><p><img src="https://img02.anheyu.com/adminuploads/1/2022/09/04/63146d071bcf7.webp"></p></div></div></div><details class="folding-tag" ><summary> 点击查看侧边栏最近文章修改魔改教程 </summary>              <div class='content'>              <div class="tabs" id="侧边栏最近文章修改"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#侧边栏最近文章修改-1">修改index.pug布局</button></li><li class="tab"><button type="button" data-href="#侧边栏最近文章修改-2">css</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="侧边栏最近文章修改-1"><p>去除首页最近文章显示，改为文章页显示，修改<code>themes/butterfly/layout/includes/widget/index.pug</code></p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">else</span><br><span class="line">//- page</span><br><span class="line"><span class="addition">!=partial(&#x27;includes/widget/card_author&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span></span><br><span class="line"><span class="addition">!=partial(&#x27;includes/widget/card_announcement&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span></span><br><span class="line"><span class="addition">!=partial(&#x27;includes/widget/card_top_self&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span></span><br><span class="line"></span><br><span class="line">.sticky_layout</span><br><span class="line">  if showToc</span><br><span class="line">    include ./card_post_toc.pug</span><br><span class="line"><span class="deletion">- !=partial(&#x27;includes/widget/card_recent_post&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span></span><br><span class="line">  !=partial(&#x27;includes/widget/card_ad&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span><br><span class="line">  !=partial(&#x27;includes/widget/card_newest_comment&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span><br><span class="line">  !=partial(&#x27;includes/widget/card_categories&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span><br><span class="line">  !=partial(&#x27;includes/widget/card_tags&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="侧边栏最近文章修改-2"><p>加入以下 css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span> <span class="selector-class">.content</span> &gt; <span class="selector-tag">time</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span> <span class="selector-class">.content</span> &gt; <span class="selector-class">.title</span> &#123;</span><br><span class="line">  -webkit-line-clamp: <span class="number">3</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">2px</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">padding-top</span>: <span class="number">6px</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">padding-bottom</span>: <span class="number">6px</span> <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">4px</span> <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">1300px</span>) &#123;</span><br><span class="line">  <span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.03</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0.97</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.thumbnail</span> &gt; <span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span><span class="selector-pseudo">:not</span>(<span class="selector-pseudo">:last-child</span>) &#123;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">0</span> dashed <span class="built_in">var</span>(--anzhiyu-background) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span> <span class="selector-class">.thumbnail</span> &#123;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-blue-main);</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-main);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aside-content</span> <span class="selector-class">.aside-list</span> &gt; <span class="selector-class">.aside-list-item</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.card-widget</span><span class="selector-class">.card-recent-post</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.4rem</span> <span class="number">0.6rem</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h2 id="加载渐变条"><a href="#加载渐变条" class="headerlink" title="加载渐变条"></a>加载渐变条</h2><details class="folding-tag" ><summary> 点击查看参考教程 </summary>              <div class='content'>              <table><thead><tr><th align="left">参考方向</th><th align="left">教程原贴</th></tr></thead><tbody><tr><td align="left">轻笑 Chuckle</td><td align="left"><u><a href="https://www.chuckle.top/article/13d6481a.html">给 Butterfly 加上顶部加载条</a></u></td></tr></tbody></table>              </div>            </details><p>引入以下<code>progress_bar</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.pace</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">pointer-events</span>: none;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">  -webkit-user-select: none;</span><br><span class="line">  -moz-user-select: none;</span><br><span class="line">  user-select: none;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">2000</span>;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">  <span class="attribute">margin</span>: auto;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">4rem</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#eaecf2</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> <span class="number">#e3e8f7</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.pace-inactive</span> <span class="selector-class">.pace-progress</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span> ease-in;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.pace</span> <span class="selector-class">.pace-progress</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  -moz-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  -ms-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  -o-<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  -webkit-<span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  -moz-<span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  -ms-<span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  -o-<span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translate3d</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">200px</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">2000</span>;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(-<span class="number">45deg</span>, <span class="number">#ee7752</span>, <span class="number">#e73c7e</span>, <span class="number">#23a6d5</span>, <span class="number">#23d5ab</span>);</span><br><span class="line">  <span class="attribute">animation</span>: gradient <span class="number">1.5s</span> ease infinite;</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">200%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.pace</span><span class="selector-class">.pace-inactive</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">0.3s</span>;</span><br><span class="line">  <span class="attribute">top</span>: -<span class="number">8px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> gradient &#123;</span><br><span class="line">  <span class="number">0%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">50%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">0%</span> <span class="number">50%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在<code>inject</code>中引入 js</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 顶部小进度条</span></span><br><span class="line"><span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">data-pjax</span> <span class="string">src=&quot;//npm.elemecdn.com/pace-js@1.2.4/pace.min.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><h2 id="侧边栏个人卡片渐变色"><a href="#侧边栏个人卡片渐变色" class="headerlink" title="侧边栏个人卡片渐变色"></a>侧边栏个人卡片渐变色</h2><p>添加自定义 css</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#aside-content</span> &gt; <span class="selector-class">.card-widget</span><span class="selector-class">.card-info</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(-<span class="number">45deg</span>, <span class="built_in">var</span>(--anzhiyu-main), <span class="number">#031764</span>, <span class="number">#150136</span>, <span class="number">#67044d</span>);</span><br><span class="line">  <span class="attribute">background-size</span>: <span class="number">400%</span>;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="built_in">var</span>(--anzhiyu-shadow-black);</span><br><span class="line">  <span class="attribute">animation</span>: gradient <span class="number">15s</span> ease infinite;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.site-data</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.headline</span>,</span><br><span class="line"><span class="selector-class">.site-data</span> &gt; <span class="selector-tag">a</span> <span class="selector-class">.length-num</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-white);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="群聊"><a href="#群聊" class="headerlink" title="群聊"></a>群聊</h2><p>如果还是有问题 🤨，老规矩，进群答案 （<code>akilar.top 店长yyds！</code>）<br><img src="https://img02.anheyu.com/adminuploads/1/2022/10/15/634a1fda3c5a5.jpg"></p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>cloudreve网盘魔改前置教程</title>
      <link href="/posts/xoan.html"/>
      <url>/posts/xoan.html</url>
      
        <content type="html"><![CDATA[<p>Cloudreve 是一款非常非常牛皮的网盘系统, Cloudreve 可以让您快速搭建起公私兼备的网盘系统。Cloudreve 在底层支持不同的云存储平台，用户在实际使用时无须关心物理存储方式。你可以使用 Cloudreve 搭建个人用网盘、文件分享系统，亦或是针对大小团体的公有云系统。</p><span class='p center logo large'>Cloudreve</span><p>文档地址；<a href="https://docs.cloudreve.org/">https://docs.cloudreve.org/</a></p><p>以下教程 基于 cloudreve pro（amd64 linux 版本）其他版本请自行测试</p><div class="note red anzhiyu-icon-fan simple"><p>既然要魔改我们当然得先安装环境</p></div><h2 id="安装环境"><a href="#安装环境" class="headerlink" title="安装环境"></a>安装环境</h2><details class="folding-tag" blue><summary> 安装 node.js </summary>              <div class='content'>              <p>安装完 node 以后会自动存在 npm</p><p>进入 node.js 官网：<a href="https://nodejs.org/en/download/">Node.js 官网</a><br>按照自己的机器选择对应的版本下载，我是 windous 64 位</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/2.png"></p><p>然后差不多就是一直下一步 hhh~</p><p>具体可以参考<a href="https://www.cnblogs.com/pengpengdeyuan/p/14434559.html">Node.js 安装教程</a></p><p>如果遇到什么问题，一般百度都能解决，这里就不在赘述.</p>              </div>            </details><details class="folding-tag" blue><summary> 安装 Git </summary>              <div class='content'>              <p>这是 Git 官网：<a href="https://git-scm.com/downloads">Git 官网</a></p><p>Git 的安装请参考：<a href="https://www.cnblogs.com/jytx/p/5602927.html">Git 安装教程</a></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/3.png"></p><p>具体的 git 学习可以访问：<a href="http://git.oschina.net/progit/">Pro Git 中文版</a></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/4.png"></p>              </div>            </details><h2 id="检验环境是否安装成功"><a href="#检验环境是否安装成功" class="headerlink" title="检验环境是否安装成功"></a>检验环境是否安装成功</h2><p>同时按下 Win 键和 R 键打开运行窗口,输入 <code>cmd</code> ，然后输入以下命令，有相应版本信息显示则安装成功，若不正确可以卸载软件重新安装。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git --version</span><br><span class="line">node -v</span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/5.png"></p><p>此外若安装成功，在桌面右键鼠标，可以看到菜单里多了 <code>Git GUI Here</code> 和 <code>Git Bash Here</code>两个选项，第一个是<code>图形界面的Git操作</code>，另一个<code>是命令行</code>，我们一般使用第二个</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/6.png"></p><h2 id="前端源代码依赖安装"><a href="#前端源代码依赖安装" class="headerlink" title="前端源代码依赖安装"></a>前端源代码依赖安装</h2><p>将 couldreve 的前端源码下载下来<br>地址：<a href="https://github.com/cloudreve/Cloudreve/releases/">https://github.com/cloudreve/Cloudreve/releases/</a></p><p>pro 版本的请自行去管理面板下载文件夹名称为 frontend-pro-master 的文件夹</p><p>将该文件夹放到一个你容易找到的地方, 我这里放在 F 盘<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/cloudreve/01.png"></p><p>如：我的文件夹为：F:\Cloudreve\frontend-pro-master, 前端源码储存在此文件夹下，在该文件夹下右键鼠标，点击 Git Bash Here，输入以下 npm 命令即可安装,第一次可能需要久一点输入命令后等一等，再输入第二条命令</p><details class="folding-tag" blue><summary> 安装 yarn </summary>              <div class='content'>              <p>如已安装可跳过这一步</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g yarn</span><br></pre></td></tr></table></figure>              </div>            </details><details class="folding-tag" blue><summary> 使用yarn安装所有依赖 </summary>              <div class='content'>              <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn install</span><br></pre></td></tr></table></figure>              </div>            </details><details class="folding-tag" blue><summary> 使用yarn安装styled-components </summary>              <div class='content'>              <p>魔改部分样式依赖于 styled-components (如不魔改提现等功能, 只修改图标, 图片可以不安装) 默认是 5.3.5 版本</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add styled-components</span><br></pre></td></tr></table></figure>              </div>            </details>]]></content>
      
      
      
        <tags>
            
            <tag> cloudreve </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>数据结构复习题</title>
      <link href="/posts/8645.html"/>
      <url>/posts/8645.html</url>
      
        <content type="html"><![CDATA[<div class="note orange icon-padding flat"><i class="note-icon fas fa-battery-half"></i><p>由于我实在是太菜了，于是就有了这篇文章，仅供参考，不说了，充电了~</p></div><span class='p center logo large'>数据结构</span><h1 id="练习题一"><a href="#练习题一" class="headerlink" title="练习题一"></a>练习题一</h1><details class="folding-tag" open><summary> 选择题 </summary>              <div class='content'>              <ol><li>线性结构中数据元素之间是（ ）关系。<br>A.一对多 B.多对多 C.多对一 D.一对一<br>答：<psw>D</psw></li><li>数据结构中与所使用的计算机无关的是数据的（ ）结构。<br>A.存储 B.物理 C.逻辑 D.物理和存储<br>答：<psw>C</psw></li><li>算法分析的目的是（ ）。<br>A.找出数据结构的合理性<br>B.研究算法中的输入和输出的关系<br>C.分析算法的效率以求改进<br>D.分析算法的易懂性和文档性<br>答：<psw>C</psw></li><li>算法分析的两个主要方面是（ ）。<br>A.空间复杂性和时间复杂性<br>B.正确性和简明性<br>C.可读性和文档性<br>D.数据复杂性和程序复杂性<br>答：<psw>A</psw></li><li>计算机算法指的是（ ）。<br>A.计算方法<br>B. 排序方法<br>C.求解问题的有限运算序列<br>D.调度方法<br>答：<psw>C</psw></li><li>计算机算法必须具备输入、输出和（ ）等 5 个特性。<br>A.可行性、可移植性和可扩充性<br>B.可行性、确定性和有穷性<br>C.确定性、有穷性和稳定性<br>D.易读性、稳定性和安全性<br>答：<psw>B</psw></li></ol>              </div>            </details><details class="folding-tag" ><summary> 填空题 </summary>              <div class='content'>              <ol><li><p>数据结构包括数据的 <psw>逻辑结构</psw> 、数据的 <psw>存储结构</psw> 和数据的 <psw>运算</psw> 这三个方面的内容。</p></li><li><p>数据结构按逻辑结构可分为两大类，它们分别是 <psw>线性结构</psw> 和 <psw>非线性结构</psw> 。</p></li><li><p>数据结构被形式地定义为（D,R），其中 D 是 <psw>数据元素</psw> 的有限集合，R 是 D 上的 <psw>关系</psw> 有限集合。</p></li><li><p>在<emp>线性结构</emp>中，第一个结点 <psw>没有</psw> 前驱结点，其余每个结点有且只有 1 个前驱结点；最后一个结点 <psw>没有</psw> 后继结点，其余每个结点有且只有 1 个后继结点。</p></li><li><p>在<emp>树形结构</emp>中，树根结点没有 <psw>前驱</psw> 结点，其余每个结点有且只有 <psw>1</psw> 个前驱结点；叶子结点没有 <psw>后继</psw> 结点，其余每个结点的后继结点数可以是 <psw>任意多个</psw> 。</p></li><li><p>在<emp>图形结构</emp>中，每个结点的前驱结点数和后继结点数可以是（ <psw>任意多个</psw> ）。</p></li><li><p>数据的存储结构主要有四种，它们分别是 <psw>顺序</psw> 、 <psw>链式</psw> 、 <psw>索引</psw> 和 <psw>哈希</psw> 存储结构。</p></li><li><p>一个算法的效率可分为 <psw>时间</psw> 效率和 <psw>空间</psw> 效率。</p></li></ol>              </div>            </details><details class="folding-tag" ><summary> 简答题 </summary>              <div class='content'>              <ol><li><p>数据结构和数据类型两个概念之间有区别吗？<br><psw>简单地说，数据结构定义了一组按某些关系结合在一起的数组元素的集合。数据类型不仅定义了一组数据元素，而且还在其上定义了一组操作。</psw></p></li><li><p>简述线性结构、树形结构和图形结构的不同点。<br><psw>线性结构反映结点间的逻辑关系是一对一的，树形线性结构反映结点间的逻辑关系是一对多的，图在结构反映结点间的逻辑关系是多对多的。</psw></p></li><li><p>设有采用二元组表示的数据逻辑结构 S&#x3D;(D,R)，其中 D&#x3D;{a,b,…,i}，R&#x3D;{(a,b),(a,c),(c,d),(c,f),(f,h),(d,e),(f,g),(h,i)}，问相对于关系 R，哪些结点是开始结点，哪些结点是终端结点？<br><psw>该逻辑结构为树形结构，其中 a 结点没有前驱结点，称为根结点，b、e、g、i 结点没有后继结点，是终端结点，也称为叶子结点。</psw></p></li><li><p>以下各函数是算法中语句的执行频度，n 为问题规模，给出对应的时间复杂度：</p></li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">T1(n)=nlog2n-1000log2n</span><br><span class="line">T2(n)=n的log2为底3次方-1000log2n</span><br><span class="line">T3(n)=n2-1000log2n</span><br><span class="line">T4(n)=2nlog2n-1000log2n</span><br></pre></td></tr></table></figure><p><psw>T1(n)&#x3D;O(nlog2n)，T2(n)&#x3D;O(n的log2为底3次方)，T3(n)&#x3D;O(n2)，T4(n)&#x3D;O(nlog2n)。</psw></p><ol start="5"><li>分析下面程序段中循环语句的执行次数。</li></ol><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">int</span> j=<span class="number">0</span>,s=<span class="number">0</span>,n=<span class="number">100</span>;</span><br><span class="line"><span class="keyword">do</span></span><br><span class="line">&#123;</span><br><span class="line">   j=j+<span class="number">1</span>;</span><br><span class="line">   s=s+<span class="number">10</span>*j;</span><br><span class="line">&#125; <span class="keyword">while</span> (j&lt;n &amp;&amp; s&lt;n);</span><br></pre></td></tr></table></figure><p><psw>j&#x3D;0，第 1 次循环：j&#x3D;1，s&#x3D;10。第 2 次循环：j&#x3D;2，s&#x3D;30。第 3 次循环：j&#x3D;3，s&#x3D;60。第 4 次循环：j&#x3D;4，s&#x3D;100。while 条件不再满足。所以，其中循环语句的执行次数为 4。</psw></p><ol start="6"><li>执行下面的语句时，语句 s++的执行次数为多少？</li></ol><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">int</span> s=<span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (i=<span class="number">1</span>;i&lt;n<span class="number">-1</span>;i++)</span><br><span class="line">   <span class="keyword">for</span> (j=n;j&gt;=i;j--)</span><br><span class="line">      s++;</span><br></pre></td></tr></table></figure><p><psw>语句 s 的执行次数。(n+3)(n-2)&#x2F;2</psw></p><ol start="7"><li>设 n 为问题规模，求以下算法的时间复杂度。</li></ol><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="type">void</span> <span class="title">fun1</span><span class="params">(<span class="type">int</span> n)</span></span></span><br><span class="line"><span class="function"></span>&#123; <span class="type">int</span> x=<span class="number">0</span>,i;</span><br><span class="line"><span class="keyword">for</span> (i=<span class="number">1</span>;i&lt;=n;i++)</span><br><span class="line"><span class="keyword">for</span> (j=i+<span class="number">1</span>;j&lt;=n;j++)</span><br><span class="line">x++;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><psw>其中 x++语句属基本运算语句，n(n-1)&#x2F;2&#x3D;O(n2)。</psw></p><ol start="8"><li>设 n 为问题规模，是一个正偶数，试计算以下算法结束时 m 的值，并给出该算法的时间复杂度。</li></ol><figure class="highlight c++"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="type">void</span> <span class="title">fun2</span><span class="params">(<span class="type">int</span> n)</span></span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">   <span class="type">int</span> m=<span class="number">0</span>;</span><br><span class="line">   <span class="keyword">for</span> (i=<span class="number">1</span>;i&lt;=n;i++)</span><br><span class="line">      <span class="keyword">for</span> (j=<span class="number">2</span>\*i;j&lt;=n;j++)</span><br><span class="line">         m++;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><psw>由于内循环 j 的取值范围，所以 i≤n&#x2F;2，则m&#x3D;n的平方&#x2F;4，该程序段的时间复杂度为 O(n2)。</psw></p>              </div>            </details>]]></content>
      
      
      <categories>
          
          <category> 大学生涯 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 数据结构 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>彻底搞懂 HTTPS 的加密原理</title>
      <link href="/posts/aa28.html"/>
      <url>/posts/aa28.html</url>
      
        <content type="html"><![CDATA[<p>HTTPS（SSL&#x2F;TLS）的加密机制虽然是大家都应了解的基本知识，但网上很多相关文章总会忽略一些内容，没有阐明完整的逻辑脉络，我当年学习它的时候也废了挺大功夫。</p><p>对称与非对称加密、数字签名、数字证书等，在学习过程中，除了了解“它是什么”，你是否有想过“为什么是它”？我认为理解了后者才真正理解了 HTTPS 的加密机制。</p><p>本文以问题的形式逐步展开，一步步解开 HTTPS 的面纱，希望能帮助你彻底搞懂 HTTPS。</p><h2 id="为什么需要加密？"><a href="#为什么需要加密？" class="headerlink" title="为什么需要加密？"></a><strong>为什么需要加密？</strong></h2><p>因为 http 的内容是明文传输的，明文数据会经过中间代理服务器、路由器、wifi 热点、通信服务运营商等多个物理节点，如果信息在传输过程中被劫持，传输的内容就完全暴露了。劫持者还可以篡改传输的信息且不被双方察觉，这就是<code>中间人攻击</code>。所以我们才需要对信息进行加密。最容易理解的就是<code>对称加密</code> 。</p><h2 id="什么是对称加密？"><a href="#什么是对称加密？" class="headerlink" title="什么是对称加密？"></a><strong>什么是对称加密？</strong></h2><p>简单说就是有一个密钥，它可以加密一段信息，也可以对加密后的信息进行解密，和我们日常生活中用的钥匙作用差不多。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/https/1.jpg">对称加密（<a href="https://sectigostore.com/blog/types-of-encryption-what-to-know-about-symmetric-vs-asymmetric-encryption/%EF%BC%89">https://sectigostore.com/blog/types-of-encryption-what-to-know-about-symmetric-vs-asymmetric-encryption/）</a></p><h2 id="用对称加密可行吗？"><a href="#用对称加密可行吗？" class="headerlink" title="用对称加密可行吗？"></a><strong>用对称加密可行吗？</strong></h2><p><strong>如果通信双方都各自持有同一个密钥，且没有别人知道，这两方的通信安全当然是可以被保证的（除非密钥被破解）。</strong></p><p>然而最大的问题就是<strong>这个密钥怎么让传输的双方知晓，同时不被别人知道</strong>。如果由服务器生成一个密钥并传输给浏览器，那在这个传输过程中密钥被别人劫持到手了怎么办？之后他就能用密钥解开双方传输的任何内容了，所以这么做当然不行。</p><p>换种思路？试想一下，如果浏览器内部就预存了网站 A 的密钥，且可以确保除了浏览器和网站 A，不会有任何外人知道该密钥，那理论上用对称加密是可以的，这样浏览器只要预存好世界上所有 HTTPS 网站的密钥就行了！这么做显然不现实。<br>怎么办？所以我们就需要<code>非对称加密</code> 。</p><h2 id="什么是非对称加密？"><a href="#什么是非对称加密？" class="headerlink" title="什么是非对称加密？"></a><strong>什么是非对称加密？</strong></h2><p>简单说就是有两把密钥，通常一把叫做公钥、一把叫私钥，用公钥加密的内容必须用私钥才能解开，同样，私钥加密的内容只有公钥能解开。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/https/2.jpg">非对称加密（<a href="https://sectigostore.com/blog/types-of-encryption-what-to-know-about-symmetric-vs-asymmetric-encryption/%EF%BC%89">https://sectigostore.com/blog/types-of-encryption-what-to-know-about-symmetric-vs-asymmetric-encryption/）</a></p><h2 id="用非对称加密可行吗？"><a href="#用非对称加密可行吗？" class="headerlink" title="用非对称加密可行吗？"></a>用非对称加密可行吗？</h2><p>鉴于非对称加密的机制，我们可能会有这种思路：服务器先把公钥以明文方式传输给浏览器，之后浏览器向服务器传数据前都先用这个公钥加密好再传，这条数据的安全似乎可以保障了！<strong>因为只有服务器有相应的私钥能解开公钥加密的数据</strong>。</p><p>然而反过来<strong>由服务器到浏览器的这条路怎么保障安全？</strong>如果服务器用它的私钥加密数据传给浏览器，那么浏览器用公钥可以解密它，而这个公钥是一开始通过明文传输给浏览器的，若这个公钥被中间人劫持到了，那他也能用该公钥解密服务器传来的信息了。所以<strong>目前似乎只能保证由浏览器向服务器传输数据的安全性</strong>（其实仍有漏洞，下文会说），那利用这点你能想到什么解决方案吗？</p><h2 id="改良的非对称加密方案，似乎可以？"><a href="#改良的非对称加密方案，似乎可以？" class="headerlink" title="改良的非对称加密方案，似乎可以？"></a><strong>改良的非对称加密方案，似乎可以？</strong></h2><p>我们已经理解通过一组公钥私钥，可以保证单个方向传输的安全性，那用两组公钥私钥，是否就能保证双向传输都安全了？请看下面的过程：</p><ol><li>某网站服务器拥有公钥 A 与对应的私钥 A’；浏览器拥有公钥 B 与对应的私钥 B’。</li><li>浏览器把公钥 B 明文传输给服务器。</li><li>服务器把公钥 A 明文给传输浏览器。</li><li>之后浏览器向服务器传输的内容都用公钥 A 加密，服务器收到后用私钥 A’解密。由于只有服务器拥有私钥 A’，所以能保证这条数据的安全。</li><li>同理，服务器向浏览器传输的内容都用公钥 B 加密，浏览器收到后用私钥 B’解密。同上也可以保证这条数据的安全。</li></ol><p>的确可以！抛开这里面仍有的漏洞不谈（下文会讲），HTTPS 的加密却没使用这种方案，为什么？很重要的原因是非对称加密算法非常耗时，而对称加密快很多。那我们能不能运用非对称加密的特性解决前面提到的对称加密的漏洞？</p><h2 id="非对称加密-对称加密？"><a href="#非对称加密-对称加密？" class="headerlink" title="非对称加密+对称加密？"></a><strong>非对称加密+对称加密？</strong></h2><p>既然非对称加密耗时，那非对称加密+对称加密结合可以吗？而且得尽量减少非对称加密的次数。当然是可以的，且非对称加密、解密各只需用一次即可。<br>请看一下这个过程：</p><ol><li>某网站拥有用于非对称加密的公钥 A、私钥 A’。</li><li>浏览器向网站服务器请求，服务器把公钥 A 明文给传输浏览器。</li><li>浏览器随机生成一个用于对称加密的密钥 X，用公钥 A 加密后传给服务器。</li><li>服务器拿到后用私钥 A’解密得到密钥 X。</li><li>这样双方就都拥有密钥 X 了，且别人无法知道它。之后双方所有数据都通过密钥 X 加密解密即可。</li></ol><p>完美！HTTPS 基本就是采用了这种方案。完美？还是有漏洞的。</p><h2 id="中间人攻击"><a href="#中间人攻击" class="headerlink" title="中间人攻击"></a><strong>中间人攻击</strong></h2><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/https/3.jpg">中间人攻击（<a href="https://blog.pradeo.com/man-in-the-middle-attack%EF%BC%89">https://blog.pradeo.com/man-in-the-middle-attack）</a></p><p>如果在数据传输过程中，中间人劫持到了数据，此时他的确无法得到浏览器生成的密钥 X，这个密钥本身被公钥 A 加密了，只有服务器才有私钥 A’解开它，然而中间人却完全不需要拿到私钥 A’就能干坏事了。请看：</p><ol><li>某网站有用于非对称加密的公钥 A、私钥 A’。</li><li>浏览器向网站服务器请求，服务器把公钥 A 明文给传输浏览器。</li><li><strong>中间人劫持到公钥 A，保存下来，把数据包中的公钥 A 替换成自己伪造的公钥 B（它当然也拥有公钥 B 对应的私钥 B’）</strong>。</li><li>浏览器生成一个用于对称加密的密钥 X，用<strong>公钥 B</strong>（浏览器无法得知公钥被替换了）加密后传给服务器。</li><li><strong>中间人劫持后用私钥 B’解密得到密钥 X，再用公钥 A 加密后传给服务器</strong>。</li><li>服务器拿到后用私钥 A’解密得到密钥 X。</li></ol><p>这样在双方都不会发现异常的情况下，中间人通过一套“狸猫换太子”的操作，掉包了服务器传来的公钥，进而得到了密钥 X。<strong>根本原因是浏览器无法确认收到的公钥是不是网站自己的，</strong>因为公钥本身是明文传输的，难道还得对公钥的传输进行加密？这似乎变成鸡生蛋、蛋生鸡的问题了。解法是什么？</p><h2 id="如何证明浏览器收到的公钥一定是该网站的公钥？"><a href="#如何证明浏览器收到的公钥一定是该网站的公钥？" class="headerlink" title="如何证明浏览器收到的公钥一定是该网站的公钥？"></a><strong>如何证明浏览器收到的公钥一定是该网站的公钥？</strong></h2><p>其实所有证明的源头都是一条或多条不证自明的“公理”（可以回想一下数学上公理），由它推导出一切。比如现实生活中，若想证明某身份证号一定是小明的，可以看他身份证，而身份证是由政府作证的，这里的“公理”就是“政府机构可信”，这也是社会正常运作的前提。</p><p>那能不能类似地有个机构充当互联网世界的“公理”呢？让它作为一切证明的源头，给网站颁发一个“身份证”？</p><p>它就是<strong>CA 机构</strong>，它是如今互联网世界正常运作的前提，而 CA 机构颁发的“身份证”就是<strong>数字证书</strong>。</p><h2 id="数字证书"><a href="#数字证书" class="headerlink" title="数字证书"></a><strong>数字证书</strong></h2><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/https/4.jpg"></p><p>网站在使用 HTTPS 前，需要向<strong>CA 机构</strong>申领一份<strong>数字证书</strong>，数字证书里含有证书持有者信息、公钥信息等。服务器把证书传输给浏览器，浏览器从证书里获取公钥就行了，证书就如身份证，证明“该公钥对应该网站”。而这里又有一个显而易见的问题，“<strong>证书本身的传输过程中，如何防止被篡改”</strong>？即如何证明证书本身的真实性？身份证运用了一些防伪技术，而数字证书怎么防伪呢？解决这个问题我们就接近胜利了！</p><h2 id="如何放防止数字证书被篡改？"><a href="#如何放防止数字证书被篡改？" class="headerlink" title="如何放防止数字证书被篡改？"></a><strong>如何放防止数字证书被篡改？</strong></h2><p>我们把证书原本的内容生成一份“签名”，比对证书内容和签名是否一致就能判别是否被篡改。这就是数字证书的“防伪技术”，这里的“签名”就叫<code>数字签名</code>：</p><h2 id="数字签名"><a href="#数字签名" class="headerlink" title="数字签名"></a><strong>数字签名</strong></h2><p>这部分内容建议看下图并结合后面的文字理解，图中左侧是数字签名的制作过程，右侧是验证过程：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/https/5.jpg">数字签名的生成与验证（<a href="https://cheapsslsecurity.com/blog/digital-signature-vs-digital-certificate-the-difference-explained/%EF%BC%89">https://cheapsslsecurity.com/blog/digital-signature-vs-digital-certificate-the-difference-explained/）</a></p><p>数字签名的制作过程：</p><ol><li>CA 机构拥有非对称加密的私钥和公钥。</li><li>CA 机构对证书明文数据 T 进行 hash。</li><li>对 hash 后的值用私钥加密，得到数字签名 S。</li></ol><p>明文和数字签名共同组成了数字证书，这样一份数字证书就可以颁发给网站了。<br>那浏览器拿到服务器传来的数字证书后，如何验证它是不是真的？（有没有被篡改、掉包）</p><p>浏览器验证过程：</p><ol><li>拿到证书，得到明文 T，签名 S。</li><li>用 CA 机构的公钥对 S 解密（由于是浏览器信任的机构，所以浏览器保有它的公钥。详情见下文），得到 S’。</li><li>用证书里指明的 hash 算法对明文 T 进行 hash 得到 T’。</li><li>显然通过以上步骤，T’应当等于 S‘，除非明文或签名被篡改。所以此时比较 S’是否等于 T’，等于则表明证书可信。</li></ol><p>为何么这样可以保证证书可信呢？我们来仔细想一下。</p><h2 id="中间人有可能篡改该证书吗？"><a href="#中间人有可能篡改该证书吗？" class="headerlink" title="中间人有可能篡改该证书吗？"></a><strong>中间人有可能篡改该证书吗？</strong></h2><p>假设中间人篡改了证书的原文，由于他没有 CA 机构的私钥，所以无法得到此时加密后签名，无法相应地篡改签名。浏览器收到该证书后会发现原文和签名解密后的值不一致，则说明证书已被篡改，证书不可信，从而终止向服务器传输信息，防止信息泄露给中间人。</p><p>既然不可能篡改，那整个证书被掉包呢？</p><h2 id="中间人有可能把证书掉包吗？"><a href="#中间人有可能把证书掉包吗？" class="headerlink" title="中间人有可能把证书掉包吗？"></a><strong>中间人有可能把证书掉包吗？</strong></h2><p>假设有另一个网站 B 也拿到了 CA 机构认证的证书，它想劫持网站 A 的信息。于是它成为中间人拦截到了 A 传给浏览器的证书，然后替换成自己的证书，传给浏览器，之后浏览器就会错误地拿到 B 的证书里的公钥了，这确实会导致上文“中间人攻击”那里提到的漏洞？</p><p>其实这并不会发生，因为证书里包含了网站 A 的信息，包括域名，浏览器把证书里的域名与自己请求的域名比对一下就知道有没有被掉包了。</p><h2 id="为什么制作数字签名时需要-hash-一次？"><a href="#为什么制作数字签名时需要-hash-一次？" class="headerlink" title="为什么制作数字签名时需要 hash 一次？"></a><strong>为什么制作数字签名时需要 hash 一次？</strong></h2><p>我初识 HTTPS 的时候就有这个疑问，因为似乎那里的 hash 有点多余，把 hash 过程去掉也能保证证书没有被篡改。</p><p>最显然的是性能问题，前面我们已经说了非对称加密效率较差，证书信息一般较长，比较耗时。而 hash 后得到的是固定长度的信息（比如用 md5 算法 hash 后可以得到固定的 128 位的值），这样加解密就快很多。</p><p>当然也有安全上的原因，这部分内容相对深一些，感兴趣的可以看这篇解答：<a href="https://crypto.stackexchange.com/a/12780">crypto.stackexchange.com&#x2F;a&#x2F;12780</a></p><h2 id="怎么证明-CA-机构的公钥是可信的？"><a href="#怎么证明-CA-机构的公钥是可信的？" class="headerlink" title="怎么证明 CA 机构的公钥是可信的？"></a><strong>怎么证明 CA 机构的公钥是可信的？</strong></h2><p>你们可能会发现上文中说到 CA 机构的公钥，我几乎一笔带过，“浏览器保有它的公钥”，这是个什么保有法？怎么证明这个公钥是否可信？</p><p>让我们回想一下数字证书到底是干啥的？没错，为了证明某公钥是可信的，即“该公钥是否对应该网站”，那 CA 机构的公钥是否也可以用数字证书来证明？没错，操作系统、浏览器本身会预装一些它们信任的根证书，如果其中会有 CA 机构的根证书，这样就可以拿到它对应的可信公钥了。</p><p>实际上证书之间的认证也可以不止一层，可以 A 信任 B，B 信任 C，以此类推，我们把它叫做<code>信任链</code>或<code>数字证书链</code>。也就是一连串的数字证书，由根证书为起点，透过层层信任，使终端实体证书的持有者可以获得转授的信任，以证明身份。</p><p>另外，不知你们是否遇到过网站访问不了、提示需安装证书的情况？这里安装的就是根证书。说明浏览器不认给这个网站颁发证书的机构，那么你就得手动下载安装该机构的根证书（风险自己承担 XD）。安装后，你就有了它的公钥，就可以用它验证服务器发来的证书是否可信了。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/https/6.jpg">信任链（<a href="https://publib.boulder.ibm.com/tividd/td/TRM/GC32-1323-00/en_US/HTML/admin230.htm%EF%BC%89">https://publib.boulder.ibm.com/tividd/td/TRM/GC32-1323-00/en_US/HTML/admin230.htm）</a></p><h2 id="每次进行-HTTPS-请求时都必须在-SSL-x2F-TLS-层进行握手传输密钥吗？"><a href="#每次进行-HTTPS-请求时都必须在-SSL-x2F-TLS-层进行握手传输密钥吗？" class="headerlink" title="每次进行 HTTPS 请求时都必须在 SSL&#x2F;TLS 层进行握手传输密钥吗？"></a><strong>每次进行 HTTPS 请求时都</strong>必须<strong>在 SSL&#x2F;TLS 层进行握手传输密钥吗？</strong></h2><p>这也是我当时的困惑之一，显然每次请求都经历一次密钥传输过程非常耗时，那怎么达到只传输一次呢？</p><p>服务器会为每个浏览器（或客户端软件）维护一个 session ID，在 TLS 握手阶段传给浏览器，浏览器生成好密钥传给服务器后，服务器会把该密钥存到相应的 session ID 下，之后浏览器每次请求都会携带 session ID，服务器会根据 session ID 找到相应的密钥并进行解密加密操作，这样就不必要每次重新制作、传输密钥了！</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a><strong>总结</strong></h2><p>可以看下这张图，梳理一下整个流程（SSL、TLS 握手有一些区别，不同版本间也有区别，不过大致过程就是这样）：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/https/7.jpg"></p><p>（<a href="http://www.extremetech.com)/">www.extremetech.com）</a></p><p>至此，我们已自上而下地打通了 HTTPS 加密的整体脉络以及核心知识点，不知你是否真正搞懂了 HTTPS 呢？<br>找几个时间，多看、多想、多理解几次就会越来越清晰的！<br>那么，下面的问题你是否已经可以解答了呢？</p><ol><li>为什么要用对称加密+非对称加密？</li><li>为什么不能只用非对称加密？</li><li>为什么需要数字证书？</li><li>为什么需要数字签名？<br>…</li></ol><p>当然，由于篇幅和能力所限，一些更深入的内容没有覆盖到。但我认为一般对于前后端开发人员来说，了解到这步就够了，有兴趣的可以再深入研究~如有疏漏之处，欢迎指出。</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> HTTPS </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>京东自动签到实现教程</title>
      <link href="/posts/3830.html"/>
      <url>/posts/3830.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>前段时间在某论坛上看到关于京东签到脚本的实现方式，于是就进行了记录部署过程</p></blockquote><div class="tip warning"><p>任何脚本都是有风险的，实践之前请注意，京东 cokies 代表的即是你本人，不要轻易将你的 cokies 交给其他人，下面示例中使用的是 Github<a href="https://github.com/zero205">zero205</a>搬运的代码，内置了该搬运工的助力码，也就是使用改代码必会帮他助力（不过人家不能用爱发电 hhh，更新速度也很快）</p></div><div class="tip warning"><p>该教程仅供学习使用，请于 24 小时内删除该代码！</p></div><p>有两种部署方式，如果你有自己的服务器建议使用第二种部署方式，第一种部署方式可能会产生部分费用但是相对第二种部署方式较为简单</p><h1 id="部署方式-1：利用腾讯云或阿里云函数实现"><a href="#部署方式-1：利用腾讯云或阿里云函数实现" class="headerlink" title="部署方式 1：利用腾讯云或阿里云函数实现"></a>部署方式 1：利用腾讯云或阿里云函数实现</h1><p>如果你没有服务器，并且也不想折腾的很麻烦，建议使用此方式进行部署</p><p>首先我们先来了解什么是：Github Action</p><details class="folding-tag" blue><summary> Github Action </summary>              <div class='content'>              <p><a href="https://link.zhihu.com/?target=https://github.com/features/actions">Github Action</a></p><p>Github Actions 是由 Github 创建的 CI&#x2F;CD 服务。 它的目的是使所有软件开发工作流程的自动化变得容易。 直接从 GitHub 构建，测试和部署代码。CI（持续集成）由很多操作组成，比如代码合并、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为 actions。</p><p>很多操作在不同项目里面是类似的，完全可以共享。GitHub 允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。</p><p>如果你需要某个 action，不必自己写复杂的脚本，直接引用他人写好的 action 即可，整个持续集成过程，就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。</p><p>GitHub 做了一个<a href="https://link.zhihu.com/?target=https://github.com/marketplace?type=actions">GitHub Marketplace</a> ，可以搜索到他人提交的 actions。另外，还有一个<a href="https://link.zhihu.com/?target=https://github.com/sdras/awesome-actions">Awesome Actions</a>的仓库，也可以找到不少 action。</p><p><strong>基础概念</strong></p><p>GitHub Actions 有一些自己的术语。</p><ul><li>workflow （工作流程）：持续集成一次运行的过程。</li><li>job （任务）：一个 workflow 由一个或多个 job 构成，含义是一次持续集成的运行，可以完成多个任务。</li><li>step（步骤）：每个 job 由多个 step 构成，一步步完成。</li><li>action （动作）：每个 step 可以依次执行一个或多个命令（action）。</li></ul><p><strong>虚拟环境</strong></p><p>GitHub Ac­tions 为每个任务 (job) 都提供了一个虚拟机来执行，每台虚拟机都有相同的硬件资源：</p><ul><li>2-core CPU, 7 GB RAM 内存, 14 GB SSD 硬盘空间</li><li>硬盘总容量为 90G 左右，可用空间为 30G 左右，评测详见：《GitHub Actions 虚拟服务器环境简单评测》</li></ul><p>使用限制：</p><ul><li>每个仓库只能同时支持 20 个 workflow 并行。</li><li>每小时可以调用 1000 次 GitHub API 。</li><li>每个 job 最多可以执行 6 个小时。</li><li>免费版的用户最大支持 20 个 job 并发执行，macOS 最大只支持 5 个。</li><li>私有仓库每月累计使用时间为 2000 分钟，超过后$ 0.008&#x2F;分钟，公共仓库则无限制。</li><li>操作系统方面可选择 Win­dows server、Linux、ma­cOS，并预装了大量软件包和工具。</li></ul><blockquote><p>TIPS： 虽然名称叫持续集成，但当所有任务终止和完成时，虚拟环境内的数据会随之清空，并不会持续。即每个新任务都是一个全&gt;新的虚拟环境。</p></blockquote><p><strong>workflow 文件</strong></p><p>GitHub Ac­tions 的配置文件叫做 work­flow 文件，存放在代码仓库的<code>.github/workflows</code> 目录中。</p><p>work­flow 文件采用 YAML 格式，文件名可以任意取，但是后缀名统一为.yml，比如 <code>build.yml</code>。一个库可以有多个 work­flow 文件，GitHub 只要发现<code>.github/workflows</code> 目录里面有<code>.yml</code> 文件，就会按照文件中所指定的触发条件在符合条件时自动运行该文件中的工作流程。</p><p>在 Ac­tions 页面可以看到很多种语言的 work­flow 文件的模版，可以用于简单的构建与测试。下面是一个简单的 work­flow 文件示例：</p><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">name: Hello World</span><br><span class="line">on: push</span><br><span class="line"><span class="built_in">jobs</span>:</span><br><span class="line">  my_first_job:</span><br><span class="line">    name: My first job</span><br><span class="line">    runs-on: ubuntu-latest</span><br><span class="line">    steps:</span><br><span class="line">    - name: checkout</span><br><span class="line">      uses: actions/checkout@master</span><br><span class="line">    - name: Run a single-line script</span><br><span class="line">      run: <span class="built_in">echo</span> <span class="string">&quot;Hello World!&quot;</span></span><br><span class="line">  my_second_job:</span><br><span class="line">    name: My second job</span><br><span class="line">    runs-on: macos-latest</span><br><span class="line">    steps:</span><br><span class="line">    - name: Run a multi-line script</span><br><span class="line">      <span class="built_in">env</span>:</span><br><span class="line">        MY_VAR: Hello World!</span><br><span class="line">        MY_NAME: P3TERX</span><br><span class="line">      run: |</span><br><span class="line">        <span class="built_in">echo</span> <span class="variable">$MY_VAR</span></span><br><span class="line">        <span class="built_in">echo</span> My name is <span class="variable">$MY_NAME</span></span><br></pre></td></tr></table></figure><p><strong>workflow 语法</strong></p><p>(1) name</p><p>name 字段是 work­flow 的名称。若忽略此字段，则默认会设置为 work­flow 文件名。</p><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">name: GitHub Actions Demo</span><br></pre></td></tr></table></figure><p>(2) on</p><p>on 字段指定 work­flow 的触发条件，通常是某些事件，比如示例中的触发事件是 push，即在代码 push 到仓库后被触发。on 字段也可以是事件的数组，多种事件触发，比如在 push 或 pull_request 时触发：</p><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">on: [push, pull_request]</span><br></pre></td></tr></table></figure><ul><li>push 指定分支触发</li></ul><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">on:</span><br><span class="line">  push:</span><br><span class="line">    branches:</span><br><span class="line">      - master</span><br></pre></td></tr></table></figure><ul><li>push tag 时触发</li></ul><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">on:</span><br><span class="line">  push:</span><br><span class="line">    tags:</span><br><span class="line">    - <span class="string">&#x27;v*&#x27;</span></span><br></pre></td></tr></table></figure><p>完整的事件列表，请查看<a href="https://link.zhihu.com/?target=https://docs.github.com/en/actions/reference/events-that-trigger-workflows">官方文档</a>。除了代码库事件，GitHub Actions 也支持外部事件触发，或者定时运行。</p><p>(3) jobs</p><p>jobs 表示要执行的一项或多项任务。每一项任务必须关联一个 ID (job<em>id)，比如示例中的 my_first_job 和 my_second_job。job_id 里面的 name 字段是任务的名称。job_id 不能有空格，只能使用数字、英文字母和 - 或</em>符号，而 name 可以随意，若忽略 name 字段，则默认会设置为 job_id。</p><p>当有多个任务时，可以指定任务的依赖关系，即运行顺序，否则是同时运行。</p><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">jobs</span>:</span><br><span class="line">  job1:</span><br><span class="line">  job2:</span><br><span class="line">    needs: job1</span><br><span class="line">  job3:</span><br><span class="line">    needs: [job1, job2]</span><br></pre></td></tr></table></figure><p>上面代码中，job1 必须先于 job2 完成，而 job3 等待 job1 和 job2 的完成才能运行。因此，这个 work­flow 的运行顺序依次为：job1、job2、job3。</p><p>(4) runs-on</p><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">runs-on: ubuntu-18.04</span><br></pre></td></tr></table></figure><p>runs-on 字段指定任务运行所需要的虚拟服务器环境，是必填字段，目前可用的虚拟机如下：</p><p>（5）steps</p><p>steps 字段指定每个任务的运行步骤，可以包含一个或多个步骤。步骤开头使用 - 符号。每个步骤可以指定以下字段:</p><ul><li>name：步骤名称。</li><li>uses：该步骤引用的 action 或 Docker 镜像。</li><li>run：该步骤运行的 bash 命令。</li><li>env：该步骤所需的环境变量。 其中 uses 和 run 是必填字段，每个步骤只能有其一。同样名称也是可以忽略的。</li></ul><p><strong>action</strong></p><p>action 是 GitHub Ac­tions 中的重要组成部分，这点从名称中就可以看出，actions 是 action 的复数形式。它是已经编写好的步骤脚本，存放在 GitHub 仓库中。</p><p>对于初学者来说可以直接引用其它开发者已经写好的 action，可以在官方 action 仓库或者 <a href="https://link.zhihu.com/?target=https://github.com/marketplace?type=actions">GitHub Marketplace</a> 去获取。此外 <a href="https://link.zhihu.com/?target=https://github.com/sdras/awesome-actions">Awesome Actions</a> 这个项目收集了很多非常不错的 action。 既然 action 是代码仓库，当然就有版本的概念。引用某个具体版本的 action：</p><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">steps:</span><br><span class="line">  - uses: actions/setup-node@74bc508 <span class="comment"># 指定一个 commit</span></span><br><span class="line">  - uses: actions/setup-node@v1.2    <span class="comment"># 指定一个 tag</span></span><br><span class="line">  - uses: actions/setup-node@master  <span class="comment"># 指定一个分支</span></span><br></pre></td></tr></table></figure>              </div>            </details><p>了解了 什么是 Github action 之后，我们就可以开始进行操作了。</p><p>第一步我们需要先拉取仓库</p><details class="folding-tag" yellow><summary> 拉取仓库并将scf分支作为主分支步骤 </summary>              <div class='content'>              <p>进入<a href="https://github.com/">https://github.com/</a></p><ol><li><p>注册账号后右上角<a href="https://github.com/new">导入仓库</a>，如图 ( 有能力的自己新建仓库 然后拉取代码后手动执行一次工作流 ）</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/1.png"></p></li><li><p>点击<a href="https://github.com/new/import">Import a repository.</a></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/2.png"></p></li><li><p>在 Your old repository’s clone URL 输入下面链接</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://github.com/zero205/JD_tencent_scf</span><br></pre></td></tr></table></figure><p>Repository name 仓库名字随便起名，将仓库改为私有，然后点击 Begin import，完成导入</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/3.png"></p></li></ol><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/4.png"></p><ol start="4"><li>将分支切换为 main 分支后，在下拉菜单中点击最下方’view all branches’，点击’Default branch’最右侧箭头,然后在新页面继续点击箭头,再弹出框中选择’scf’为主分支<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/5.png"><br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/6.png"><br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/7.png"> 5. 点击 Updata 后，确定更改 scf 为主分支<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/8.png"> 6. 然后回到代码仓库中，在仓库页面点击’main’分支,在下拉菜单中点击最下方’view all branches’,点击’maim’分支右侧垃圾桶,确认删除分支<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/9.png"> 7. 点击刚才页面’scf’分支右侧笔图标,将其重命名为’main’<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/10.png"></li></ol>              </div>            </details><p>第二步同步<a href="https://github.com/zero205">zero205</a>仓库的代码</p><p>通过 reposync 方式进行代码同步</p><details class="folding-tag" blue><summary> 同步zero205仓库的代码 </summary>              <div class='content'>              <ol><li><p><strong>PAT(Personal Access Token)模式</strong><br>即用私人访问命令的形式来判断该账户是否有权限接触仓库。通过 github 配置有一定限制性的密钥，并将其发放给其他开发人员，以共同完成代码仓库的开发和管理。</p><blockquote><p>注意 PAT 的隐私性，PAT 只会在生成时显示一次！保证你的 PAT 权限只勾选了你所需要的权限，永远不要将所有权限都开放给未知的人和事物，永远不要泄露你的 PAT！</p></blockquote></li><li><p><strong>申请 PAT</strong><br><a href="https://github.com/settings/tokens/new">点此来生成一个 token</a> ，把 <code>repo</code>和<code>workflow</code> 两部分勾上，然后点击最下面的创建按钮。</p></li><li><p><strong>填写 PAT 到 Secrets</strong>申请完毕后，在分支中点击<code>Settings</code>-<code>Secrets</code>-<code>New secret</code></p><p><code>name</code>填<code>PAT</code>，<code>Value</code>填入上方申请到的 PAT,保存即可</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/11.png"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/12.png"></p></li><li><p><strong>手动触发一次代码同步</strong>点击<code>Actions</code>，执行<code>Run Workflows</code></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/13.png"></p><p>等待两分钟左右,能够发现代码全部同步过来</p></li></ol>              </div>            </details><p>在部署之前我们需要为 Github Action 配置一些 secrets 变量</p><details class="folding-tag" blue><summary> 配置步骤 </summary>              <div class='content'>              <p>依次登录 <a href="https://console.cloud.tencent.com/scf">SCF 云函数控制台</a> 和 <a href="https://console.cloud.tencent.com/sls">SLS 控制台</a> 开通相关服务，确保账户下已开通服务并创建相应<a href="https://console.cloud.tencent.com/cam/role">服务角色</a> <strong>SCF_QcsRole、SLS_QcsRole</strong></p><blockquote><p>注意！为了确保权限足够，获取这两个参数时不要使用子账户！此外，腾讯云账户需要<a href="https://console.cloud.tencent.com/developer/auth">实名认证</a>。</p></blockquote><p><strong>新建腾讯云密钥（用于身份识别）</strong></p><p>在这里新建一个访问密钥 <a href="https://console.cloud.tencent.com/cam/capi">新建密钥</a></p><p>新建完成后你可以得到你的<code>SecretId</code>和<code>SecretKey</code></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/14.png"></p><blockquote><p>将 SecretId 和 SecretKey 分别配置在仓库的 secrets 变量里面</p><p>TENCENT_SECRET_ID 对应你的 SecretId 的值</p><p>TENCENT_SECRET_KEY 对应你的 SecretKey 的值</p></blockquote><p>在 github 中配置 secrets 变量</p><p><strong>secrets 变量位置 : <code>Settings</code>–<code>左边栏的Secrets</code>–<code>右上角New repository secret</code>–<code>Name填变量名称,Value填变量值</code></strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/15.png"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/16.png"></p>              </div>            </details><h3 id="获取京东-cookie"><a href="#获取京东-cookie" class="headerlink" title="获取京东 cookie"></a>获取京东 cookie</h3><p>配置完腾讯云的两个参数之后还需要配置京东的 cookie</p><p>这里有两种获取方式，自己选一种合适方便的获取京东 的 cookie 就好了</p><details class="folding-tag" blue><summary> 方法一 </summary>              <div class='content'>              <p><strong>浏览器获取京东 cookie</strong></p><p><strong>以下浏览器都行</strong></p><ul><li>Chrome 浏览器</li><li>新版 Edge 浏览器</li><li>国产 360，QQ 浏览器切换到极速模式</li></ul><p><strong>操作步骤</strong></p><ol><li><p>电脑浏览器打开京东网址 <a href="https://m.jd.com/">https://m.jd.com/</a></p></li><li><p>按键盘 F12 键打开开发者工具，然后点下图中的图标<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/17.png"></p></li><li><p>此时是未登录状态(使用手机短信验证码登录)，如已登录请忽略此步骤</p><ul><li>使用手机短信验证码登录(此方式 cookie 有效时长大概 31 天，其他登录方式比较短)</li></ul></li><li><p>登录后，选择 Network,有很多链接的话点箭头这里清空下<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/18.png"></p></li><li><p>然后再点我的，链接就变少了<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/19.png"></p></li><li><p>点第一个链接(log.gif)进去，找到 cookie，复制出来，新建一个 TXT 文本临时保存一下，下面需要用到<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/20.png"></p></li><li><p>第六步复制出来的 cookie 比较长，我们只需要<code>pt_pin=xxxx;</code>和 <code>pt_key=xxxx;</code>部分的内容即可(注:英文引号<code>;</code>是必要的)。可以用下面的脚本，在 Chrome 浏览器按 F12，console 里面输入下面脚本按 enter 回车键<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/21.png"></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="variable constant_">CV</span> = <span class="string">&quot;单引号里面放第六步拿到的cookie&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> <span class="title class_">CookieValue</span> = <span class="variable constant_">CV</span>.<span class="title function_">match</span>(<span class="regexp">/pt_pin=.+?;/</span>) + <span class="variable constant_">CV</span>.<span class="title function_">match</span>(<span class="regexp">/pt_key=.+?;/</span>);</span><br><span class="line"><span class="title function_">copy</span>(<span class="title class_">CookieValue</span>);</span><br></pre></td></tr></table></figure></li><li><p>这样子整理出关键的的 cookie 已经在你的剪贴板上， 可直接粘贴</p></li><li><p>如果需获取第二个京东账号的 cookie,不要在刚才的浏览器上面退出登录账号一(否则刚才获取的 cookie 会失效),需另外换一个浏览器(Chrome 浏览器 <code>ctr+shift+n</code> 打开无痕模式也行),然后继续按上面步骤操作即可</p></li></ol>              </div>            </details><details class="folding-tag" blue><summary> 方法二 </summary>              <div class='content'>              <p><strong>插件获取京东 cookie</strong></p><blockquote><p>此教程内容由 tg 用户@wukongdada 提供,特此感谢</p></blockquote><p><strong>以下浏览器都行</strong></p><ul><li>Chrome 浏览器</li><li>新版 Edge 浏览器(chrome 内核)</li></ul><p><strong>操作步骤</strong></p><ol><li>电脑浏览器打开京东网址 <a href="https://m.jd.com/">https://m.jd.com/</a></li><li>Chrome 类浏览器安装 EditThisCookie 插件<ul><li>Chrome 插件商店搜 EditThisCookie, 或者<a href="https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?utm_source=chrome-ntp-icon">打开此网站</a> 进行安装</li><li>仅使用百分浏览器，谷歌浏览器测试过，其他谷歌类浏览器请自行测试。</li><li>无法登录 Chrome 插件商店或者打不开网址建议使用 edge chrome 版。</li></ul></li><li>edge chrome 浏览器安装 Cookie Editor 插件 - edge 插件商店搜 Cookie Editor，或<a href="https://microsoftedge.microsoft.com/addons/detail/cookie-editor/ajfboaconbpkglpfanbmlfgojgndmhmc?hl=zh-CN">打开以下网址</a> 完成插件安装</li><li>输入的网址是 <code>jd.com</code></li><li>现在点击回到京东触屏版，再点击 EditThisCookie&#x2F;Cookie Editor，再点击搜索，输入 key 或 pin，如下图所示的 pt_key，复制 pt_key 的 value 值。此插件可以看到 cookie 的有效期。<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/22.png"></li><li>按照以下格式形成自己的 jd_cookie<ul><li><code>pt_key=复制插件搜索出来的key值;pt_pin=复制插件搜索出来的pin值;</code> ,后面的英文引号<code>;</code>是必须要的</li><li>给一个京东 cookie 具体示例 <code>pt_key=jdDC2F833333EFDGTCE5BD4AD1A952D4F4DF84A46052;pt_pin=jd_123456;</code></li></ul></li><li>如果需获取第二个京东账号的 cookie,不要在刚才的浏览器上面退出登录账号一(否则刚才获取的 cookie 会失效),需另外换一个浏览器(Chrome 浏览器 <code>ctr+shift+n</code> 打开无痕模式也行),然后继续按上面步骤操作即可</li></ol>              </div>            </details><p>京东的环境变量名为<code>JD_COOKIE</code>，必填！在 secrets 里面加上我们刚刚获取到的 cookie</p><p>如果涉及一个变量配置多个值，如多个 cookie，互助码，多个取消订阅关键字，去掉里面的 <strong>空格</strong> 和 <strong>换行</strong> 使用 <code>&amp;</code> 连接</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/23.png"></p><h3 id="额外的-secrets-变量"><a href="#额外的-secrets-变量" class="headerlink" title="额外的 secrets 变量"></a>额外的 secrets 变量</h3><p>除了腾讯云的参数和京东的 cookie 之外可能还需要配 secrets，这些变量都有默认值但是可能与你的预期有出入</p><details class="folding-tag" blue><summary> 配置secrets变量 </summary>              <div class='content'>              <p>secret 变量有三个<strong>选填变量</strong> <code>SCF_REGION</code>,<code>TENCENT_FUNCTION_NAME</code>,<code>TENCENTSCF_MEMORYSIZE</code>.都有默认值,可不修改.</p><p><code>SCF_REGION</code>用于控制部署区域的选择，默认值为<code>ap-guangzhou</code>，其他地区具体参数代码填写可以自行查找官方说明 <a href="https://cloud.tencent.com/document/product/213/6091">地域和可用区</a></p><p><code>TENCENT_FUNCTION_NAME</code>用于控制部署到云函数后函数名的命名,别瞎改,改名的话确保之前的已经删除 默认值为<code>JD</code></p><p><code>TENCENTSCF_MEMORYSIZE</code>值为运行内存大小的设定值，默认值为<code>64</code>，需求更大内存的可填入<code>128</code>，云函数有 128MB 就能满足了</p><p>请注意<strong>提高内存设定值相应地也会加快消耗云函数的免费额度，超出免费额度将会产生费用</strong></p>              </div>            </details><h3 id="执行-action-workflow-进行部署"><a href="#执行-action-workflow-进行部署" class="headerlink" title="执行 action workflow 进行部署"></a>执行 action workflow 进行部署</h3><p>workflow 未报错即部署成功</p><details class="folding-tag" blue><summary> 部署并测试 </summary>              <div class='content'>              <p><strong>下图 workflow 名字现在叫做 Deploy</strong><br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/24.png"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/25.png"></p><p><strong>查看和测试</strong></p><p>登录后，在 <a href="https://console.cloud.tencent.com/scf/index">腾讯云函数地址</a> 点击管理控制台，查看最新部署的函数。</p><p>在左侧栏的日志查询中，可以查看到触发的日志，包括是否打卡成功等。</p><p><strong>请点击右下角切换旧版编辑器!</strong><br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/26.png"></p><p><strong>自己参照图内填写测试脚本名称,不带后缀,测什么,填什么</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/27.png"></p><blockquote><p>如果出错了，排查问题第一步先看自己<a href="https://console.cloud.tencent.com/scf/list-detail?rid=5&ns=default&id=jd">腾讯云函数</a>那边的环境变量跟自己在仓库配置的 <code>secrets</code> 是否一致</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/28.png"></p></blockquote>              </div>            </details><h2 id="部署方式-2：青龙面板"><a href="#部署方式-2：青龙面板" class="headerlink" title="部署方式 2：青龙面板"></a>部署方式 2：青龙面板</h2><p>如果本教程看不懂或者操作出现问题，证明您的计算机专业知识并不支持本文章的搭建操作。</p><p><strong>第一步 购买云服务器</strong></p><p>个人推荐阿里云服务器 1 核 2G 即可 搞活动一年一百来块钱 系统选择 CentOs 8 （CentOs 8 自带 dnf 命令）等待配置完成。</p><p>百度搜索 Finalshell 下载安装好。在 finalshell 新建连接 选择 SSH 连接。成功连接上如图</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/29.png"><br><strong>接下来在命令窗口，一条一条输入指令，输入完一条指令后需要等待指令操作完成再输入另外一条指令</strong><br>首先安装 docker</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">sudo yum check-update</span><br><span class="line">curl -fsSL https://get.docker.com/ | sh</span><br><span class="line">sudo systemctl start docker</span><br><span class="line">sudo systemctl status docker</span><br><span class="line">sudo systemctl <span class="built_in">enable</span> docker</span><br></pre></td></tr></table></figure><p>安装完成后配置青龙面板</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">docker run -dit \</span><br><span class="line">  --name QL \</span><br><span class="line">  --hostname QL \</span><br><span class="line">  --restart always \</span><br><span class="line">  -p 5700:5700 \</span><br><span class="line">  -v <span class="variable">$PWD</span>/QL/config:/ql/config \</span><br><span class="line">  -v <span class="variable">$PWD</span>/QL/log:/ql/log \</span><br><span class="line">  -v <span class="variable">$PWD</span>/QL/db:/ql/db \</span><br><span class="line">  -v <span class="variable">$PWD</span>/QL/scripts:/ql/scripts \</span><br><span class="line">  -v <span class="variable">$PWD</span>/QL/jbot:/ql/jbot \</span><br><span class="line">  whyour/qinglong:latest</span><br></pre></td></tr></table></figure><p>等待一段时间后，在浏览器输入 ip:5700 即可登录青龙面板<br>用户名为 admin 密码是 adminadmin</p><p><strong>重置密码</strong></p><p>登录成功后，在&#x2F;root&#x2F;QL&#x2F;config 中找到 auth.json<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/jd/30.png"><br>打开文件查看已重置的密码 登录即可。</p><h3 id="Script-脚本列表"><a href="#Script-脚本列表" class="headerlink" title="Script 脚本列表"></a>Script 脚本列表</h3><p><strong>说明</strong></p><ol><li>其中 <a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_bean_sign.js">jd_bean_sign.js</a> 可 N 个京东账号，Node.js 专用，核心脚本是 JD_DailyBonus.js， IOS 软件用户请使用 NobyDa 的 <a href="https://raw.githubusercontent.com/NobyDa/Script/master/JD-DailyBonus/JD_DailyBonus.js">JD_DailyBonus.js</a></li><li>以字母排序。</li></ol><details class="folding-tag" blue><summary> Script 脚本列表 </summary>              <div class='content'>              <table><thead><tr><th>序号</th><th>文件</th><th>名称</th><th>活动入口</th></tr></thead><tbody><tr><td>1</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_bean_change.js">jd_bean_change.js</a></td><td>京东资产变动通知</td><td></td></tr><tr><td>2</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_bean_home.js">jd_bean_home.js</a></td><td>领京豆额外奖励</td><td>京东 APP 首页-领京豆</td></tr><tr><td>3</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_bean_sign.js">jd_bean_sign.js</a></td><td>京东多合一签到</td><td>各处的签到汇总</td></tr><tr><td>4</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_beauty.js">jd_beauty.js</a></td><td>美丽研究院</td><td>京东 app 首页-美妆馆-底部中间按钮</td></tr><tr><td>5</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_blueCoin.js">jd_blueCoin.js</a></td><td>东东超市兑换奖品</td><td>京东 APP 我的-更多工具-东东超市</td></tr><tr><td>6</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_bookshop.js">jd_bookshop.js</a></td><td>口袋书店</td><td>京东 app 首页-京东图书-右侧口袋书店</td></tr><tr><td>7</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_car.js">jd_car.js</a></td><td>京东汽车</td><td>京东 APP 首页-京东汽车-屏幕右中部，车主福利</td></tr><tr><td>8</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_car_exchange.js">jd_car_exchange.js</a></td><td>京东汽车兑换</td><td>京东 APP 首页-京东汽车-屏幕右中部，车主福利</td></tr><tr><td>9</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_cash.js">jd_cash.js</a></td><td>签到领现金</td><td>京东 APP 搜索领现金进入</td></tr><tr><td>10</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_cfd.js">jd_cfd.js</a></td><td>京喜财富岛</td><td>京喜 APP-我的-京喜财富岛</td></tr><tr><td>11</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_club_lottery.js">jd_club_lottery.js</a></td><td>摇京豆</td><td>京东 APP 首页-领京豆-摇京豆&#x2F;京东 APP 首页-我的-京东会员-摇京豆</td></tr><tr><td>12</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_crazy_joy.js">jd_crazy_joy.js</a></td><td>crazyJoy 任务</td><td>京东 APP 我的-更多工具-疯狂的 JOY</td></tr><tr><td>13</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_crazy_joy_bonus.js">jd_crazy_joy_bonus.js</a></td><td>监控 crazyJoy 分红</td><td>京东 APP 我的-更多工具-疯狂的 JOY</td></tr><tr><td>14</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_crazy_joy_coin.js">jd_crazy_joy_coin.js</a></td><td>crazyJoy 挂机</td><td>京东 APP 我的-更多工具-疯狂的 JOY</td></tr><tr><td>15</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_daily_egg.js">jd_daily_egg.js</a></td><td>天天提鹅</td><td>京东金融-天天提鹅</td></tr><tr><td>16</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_delCoupon.js">jd_delCoupon.js</a></td><td>删除优惠券</td><td>京东 APP 我的-优惠券</td></tr><tr><td>17</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_dreamFactory.js">jd_dreamFactory.js</a></td><td>京喜工厂</td><td>京东 APP-游戏与互动-查看更多-京喜工厂</td></tr><tr><td>18</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_dreamFactory2.js">jd_dreamFactory2.js</a></td><td>京喜工厂</td><td>京东 APP-游戏与互动-查看更多-京喜工厂</td></tr><tr><td>19</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_family.js">jd_family.js</a></td><td>京东家庭号</td><td>玩一玩-家庭号</td></tr><tr><td>20</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_fruit.js">jd_fruit.js</a></td><td>东东农场</td><td>京东 APP 我的-更多工具-东东农场</td></tr><tr><td>21</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_get_share_code.js">jd_get_share_code.js</a></td><td>获取互助码</td><td></td></tr><tr><td>22</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_global.js">jd_global.js</a></td><td>环球挑战赛</td><td>京东 app 搜索京东国际-环球挑战赛</td></tr><tr><td>23</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_global_mh.js">jd_global_mh.js</a></td><td>京东国际盲盒</td><td>京东 app 首页浮动窗口</td></tr><tr><td>24</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_jdfactory.js">jd_jdfactory.js</a></td><td>东东工厂</td><td>京东 APP 首页-数码电器-东东工厂</td></tr><tr><td>25</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_jdzz.js">jd_jdzz.js</a></td><td>京东赚赚</td><td>京东赚赚小程序</td></tr><tr><td>26</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_joy.js">jd_joy.js</a></td><td>宠汪汪</td><td>京东 APP 我的-更多工具-宠汪汪</td></tr><tr><td>27</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_joy_feedPets.js">jd_joy_feedPets.js</a></td><td>宠汪汪 🐕 喂食</td><td>京东 APP 我的-更多工具-宠汪汪</td></tr><tr><td>28</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_joy_help.js">jd_joy_help.js</a></td><td>宠汪汪强制为别人助力</td><td>京东 APP 我的-更多工具-宠汪汪</td></tr><tr><td>29</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_joy_reward.js">jd_joy_reward.js</a></td><td>宠汪汪积分兑换奖品</td><td>京东 APP 我的-更多工具-宠汪汪</td></tr><tr><td>30</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_joy_run.js">jd_joy_run.js</a></td><td>宠汪汪赛跑</td><td>京东 APP 我的-更多工具-宠汪汪</td></tr><tr><td>31</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_jxd.js">jd_jxd.js</a></td><td>京小兑</td><td>微信搜索小程序-京小兑</td></tr><tr><td>32</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_jxnc.js">jd_jxnc.js</a></td><td>京喜农场</td><td>京喜 APP 我的-京喜农场</td></tr><tr><td>33</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_kd.js">jd_kd.js</a></td><td>京东快递签到</td><td><a href="https://jingcai-h5.jd.com/#/">活动地址</a></td></tr><tr><td>34</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_live.js">jd_live.js</a></td><td>京东直播</td><td>京东 APP 首页-京东直播</td></tr><tr><td>35</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_live_redrain.js">jd_live_redrain.js</a></td><td>超级直播间红包雨</td><td></td></tr><tr><td>36</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_lotteryMachine.js">jd_lotteryMachine.js</a></td><td>京东抽奖机</td><td>京东 APP 中各种抽奖活动的汇总</td></tr><tr><td>37</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_mohe.js">jd_mohe.js</a></td><td>5G 超级盲盒</td><td><a href="https://isp5g.m.jd.com/">活动地址</a></td></tr><tr><td>38</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_moneyTree.js">jd_moneyTree.js</a></td><td>京东摇钱树</td><td>京东 APP 我的-更多工具-摇钱树</td></tr><tr><td>39</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_ms.js">jd_ms.js</a></td><td>京东秒秒币</td><td>京东 app-京东秒杀-签到领红包</td></tr><tr><td>40</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_necklace.js">jd_necklace.js</a></td><td>点点券</td><td>京东 APP-领券中心&#x2F;券后 9.9-领点点券</td></tr><tr><td>41</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_nzmh.js">jd_nzmh.js</a></td><td>女装盲盒抽京豆</td><td>京东 app-女装馆-赢京豆</td></tr><tr><td>42</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_pet.js">jd_pet.js</a></td><td>东东萌宠</td><td>京东 APP 我的-更多工具-东东萌宠</td></tr><tr><td>43</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_pigPet.js">jd_pigPet.js</a></td><td>金融养猪</td><td>京东金融养猪猪</td></tr><tr><td>44</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_plantBean.js">jd_plantBean.js</a></td><td>京东种豆得豆</td><td>京东 APP 我的-更多工具-种豆得豆</td></tr><tr><td>45</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_price.js">jd_price.js</a></td><td>京东保价</td><td>京东保价</td></tr><tr><td>46</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_rankingList.js">jd_rankingList.js</a></td><td>京东排行榜</td><td>京东 APP 首页-更多频道-排行榜-悬浮按钮</td></tr><tr><td>47</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_redPacket.js">jd_redPacket.js</a></td><td>京东全民开红包</td><td>京东 APP 首页-领券-锦鲤红包</td></tr><tr><td>48</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_sgmh.js">jd_sgmh.js</a></td><td>闪购盲盒</td><td>京东 APP 首页-闪购-闪购盲盒</td></tr><tr><td>49</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_shop.js">jd_shop.js</a></td><td>进店领豆</td><td>京东 APP 首页-领京豆-进店领豆</td></tr><tr><td>50</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_sign.js">jd_sign.js</a></td><td>京东卡包签到</td><td></td></tr><tr><td>51</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_small_home.js">jd_small_home.js</a></td><td>东东小窝</td><td>京东 APP 我的-游戏与更多-东东小窝</td></tr><tr><td>52</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_speed.js">jd_speed.js</a></td><td>✈️ 天天加速</td><td>京东 APP 我的-更多工具-天天加速</td></tr><tr><td>53</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_speed_sign.js">jd_speed_sign.js</a></td><td>京东极速版</td><td>京东极速版 app-现金签到</td></tr><tr><td>54</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_superMarket.js">jd_superMarket.js</a></td><td>东东超市</td><td>京东 APP 首页-京东超市-底部东东超市</td></tr><tr><td>55</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_syj.js">jd_syj.js</a></td><td>赚京豆</td><td>赚京豆(微信小程序)-赚京豆-签到领京豆</td></tr><tr><td>56</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jd_unsubscribe.js">jd_unsubscribe.js</a></td><td>取关京东店铺和商品</td><td></td></tr><tr><td>57</td><td><a href="https://gitee.com/lxk0301/jd_scripts/raw/master/jx_sign.js">jx_sign.js</a></td><td>京喜签到</td><td></td></tr></tbody></table>              </div>            </details><h3 id="环境变量说明"><a href="#环境变量说明" class="headerlink" title="环境变量说明"></a>环境变量说明</h3><details class="folding-tag" blue><summary> 环境变量说明 </summary>              <div class='content'>              <p><strong>京东(必须)</strong></p><table><thead><tr><th>Name</th><th>归属</th><th>属性</th><th>说明</th></tr></thead><tbody><tr><td><code>JD_COOKIE</code></td><td>京东</td><td>必须</td><td>京东 cookie,多个账号的 cookie 使用<code>&amp;</code>隔开。具体获取参考<a href="https://github.com/lukesyy/jd_yun/blob/main/backUp/GetJdCookie.md">浏览器获取京东 cookie 教程</a> 或者 <a href="https://github.com/lukesyy/jd_yun/blob/main/backUp/GetJdCookie2.md">插件获取京东 cookie 教程</a></td></tr></tbody></table><p><strong>京东隐私安全 环境变量</strong></p><table><thead><tr><th>Name</th><th>归属</th><th>属性</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>JD_DEBUG</code></td><td>脚本打印 log</td><td>非必须</td><td>true</td><td>运行脚本时，是否显示 log,默认显示。改成 false 表示不显示，注重隐私的人可以设置 JD_DEBUG 为 false</td></tr><tr><td><code>JD_USER_AGENT</code></td><td>京东</td><td>非必须</td><td></td><td>自定义此库里京东系列脚本的 UserAgent，不懂不知不会 UserAgent 的请不要随意填写内容。如需使用此功能建议填写京东 APP 的 UA</td></tr></tbody></table><p><strong>推送通知环境变量(目前提供<code>微信server酱</code>、<code>pushplus(推送加)</code>、<code>iOS Bark APP</code>、<code>telegram机器人</code>、<code>钉钉机器人</code>、<code>企业微信机器人</code>、<code>iGot</code>等通知方式)</strong></p><table><thead><tr><th>Name</th><th>归属</th><th>属性</th><th>说明</th></tr></thead><tbody><tr><td><code>PUSH_KEY</code></td><td>微信 server 酱推送</td><td>非必须</td><td>server 酱的微信通知<a href="http://sc.ftqq.com/3.version">官方文档</a>，已兼容 <a href="https://sct.ftqq.com/">Server 酱·Turbo 版</a></td></tr><tr><td><code>BARK_PUSH</code></td><td><a href="https://apps.apple.com/us/app/bark-customed-notifications/id1403753865">BARK 推送</a></td><td>非必须</td><td>IOS 用户下载 BARK 这个 APP,填写内容是 app 提供的<code>设备码</code>，例如：<a href="https://api.day.app/123">https://api.day.app/123</a> ，那么此处的设备码就是<code>123</code>，再不懂看 <a href="https://github.com/lukesyy/jd_yun/blob/main/icon/bark.jpg">这个图</a>（注：支持自建填完整链接即可）</td></tr><tr><td><code>BARK_SOUND</code></td><td><a href="https://apps.apple.com/us/app/bark-customed-notifications/id1403753865">BARK 推送</a></td><td>非必须</td><td>bark 推送声音设置，例如<code>choo</code>,具体值请在<code>bark</code>-<code>推送铃声</code>-<code>查看所有铃声</code></td></tr><tr><td><code>BARK_GROUP</code></td><td><a href="https://apps.apple.com/us/app/bark-customed-notifications/id1403753865">BARK 推送</a></td><td>非必须</td><td>bark 推送消息分组，例如<code>jd_scripts</code></td></tr><tr><td><code>TG_BOT_TOKEN</code></td><td>telegram 推送</td><td>非必须</td><td>tg 推送(需设备可连接外网),<code>TG_BOT_TOKEN</code>和<code>TG_USER_ID</code>两者必需,填写自己申请<a href="https://t.me/BotFather">@BotFather</a>的 Token,如<code>10xxx4:AAFcqxxxxgER5uw</code> , <a href="https://github.com/lukesyy/jd_yun/blob/main/backUp/TG_PUSH.md">具体教程</a></td></tr><tr><td><code>TG_USER_ID</code></td><td>telegram 推送</td><td>非必须</td><td>tg 推送(需设备可连接外网),<code>TG_BOT_TOKEN</code>和<code>TG_USER_ID</code>两者必需,填写<a href="https://t.me/getuseridbot">@getuseridbot</a>中获取到的纯数字 ID, <a href="https://github.com/lukesyy/jd_yun/blob/main/backUp/TG_PUSH.md">具体教程</a></td></tr><tr><td><code>DD_BOT_TOKEN</code></td><td>钉钉推送</td><td>非必须</td><td>钉钉推送(<code>DD_BOT_TOKEN</code>和<code>DD_BOT_SECRET</code>两者必需)<a href="https://developers.dingtalk.com/document/app/custom-robot-access">官方文档</a> ,只需<code>https://oapi.dingtalk.com/robot/send?access_token=XXX</code> 等于<code>=</code>符号后面的 XXX 即可</td></tr><tr><td><code>DD_BOT_SECRET</code></td><td>钉钉推送</td><td>非必须</td><td>(<code>DD_BOT_TOKEN</code>和<code>DD_BOT_SECRET</code>两者必需) ,密钥，机器人安全设置页面，加签一栏下面显示的 SEC 开头的<code>SECXXXXXXXXXX</code>等字符 , 注:钉钉机器人安全设置只需勾选<code>加签</code>即可，其他选项不要勾选,再不懂看 <a href="https://github.com/lukesyy/jd_yun/blob/main/icon/DD_bot.png">这个图</a></td></tr><tr><td><code>QYWX_KEY</code></td><td>企业微信机器人推送</td><td>非必须</td><td>密钥，企业微信推送 webhook 后面的 key <a href="https://work.weixin.qq.com/api/doc/90000/90136/91770">详见官方说明文档</a></td></tr><tr><td><code>QYWX_AM</code></td><td>企业微信应用消息推送</td><td>非必须</td><td>corpid,corpsecret,touser,agentid,素材库图片 id <a href="http://note.youdao.com/s/HMiudGkb">参考文档 1</a> <a href="http://note.youdao.com/noteshare?id=1a0c8aff284ad28cbd011b29b3ad0191">参考文档 2</a> 素材库图片填 0 为图文消息, 填 1 为纯文本消息</td></tr><tr><td><code>IGOT_PUSH_KEY</code></td><td>iGot 推送</td><td>非必须</td><td>iGot 聚合推送，支持多方式推送，确保消息可达。 <a href="https://wahao.github.io/Bark-MP-helper">参考文档</a></td></tr><tr><td><code>PUSH_PLUS_TOKEN</code></td><td>pushplus 推送</td><td>非必须</td><td>微信扫码登录后一对一推送或一对多推送下面的 token(您的 Token) <a href="http://www.pushplus.plus/">官方网站</a></td></tr><tr><td><code>PUSH_PLUS_USER</code></td><td>pushplus 推送</td><td>非必须</td><td>一对多推送的“群组编码”（一对多推送下面-&gt;您的群组(如无则新建)-&gt;群组编码）注:(1、需订阅者扫描二维码 2、如果您是创建群组所属人，也需点击“查看二维码”扫描绑定，否则不能接受群组消息推送)，只填<code>PUSH_PLUS_TOKEN</code>默认为一对一推送</td></tr><tr><td><code>TG_PROXY_HOST</code></td><td>Telegram 代理的 IP</td><td>非必须</td><td>代理类型为 http。例子：http 代理 <a href="http://127.0.0.1:1080/">http://127.0.0.1:1080</a> 则填写 127.0.0.1</td></tr><tr><td><code>TG_PROXY_PORT</code></td><td>Telegram 代理的端口</td><td>非必须</td><td>例子：http 代理 <a href="http://127.0.0.1:1080/">http://127.0.0.1:1080</a> 则填写 1080</td></tr></tbody></table><p><strong>互助码类环境变量</strong></p><table><thead><tr><th>Name</th><th>归属</th><th>属性</th><th>需要助力次数&#x2F;可提供助力次数</th><th>说明</th></tr></thead><tbody><tr><td><code>FRUITSHARECODES</code></td><td>东东农场 互助码</td><td>非必须</td><td>5&#x2F;3</td><td>填写规则请看<a href="https://github.com/lukesyy/jd_yun/blob/main/jdFruitShareCodes.js">jdFruitShareCodes.js</a>或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>PETSHARECODES</code></td><td>东东萌宠 互助码</td><td>非必须</td><td>5&#x2F;5</td><td>填写规则和上面类似或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>PLANT_BEAN_SHARECODES</code></td><td>种豆得豆 互助码</td><td>非必须</td><td>9&#x2F;3</td><td>填写规则和上面类似或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>DDFACTORY_SHARECODES</code></td><td>东东工厂 互助码</td><td>非必须</td><td>5&#x2F;3</td><td>填写规则和上面类似或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>DREAM_FACTORY_SHARE_CODES</code></td><td>京喜工厂 互助码</td><td>非必须</td><td>不固定&#x2F;3</td><td>填写规则和上面类似或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>JDZZ_SHARECODES</code></td><td>京东赚赚 互助码</td><td>非必须</td><td>5&#x2F;2</td><td>填写规则和上面类似，或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>JDJOY_SHARECODES</code></td><td>疯狂的 JOY 互助码</td><td>非必须</td><td>6&#x2F;</td><td>填写规则和上面类似，或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>BOOKSHOP_SHARECODES</code></td><td>京东书店 互助码</td><td>非必须</td><td>10&#x2F;</td><td>填写规则和上面类似，或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>JD_CASH_SHARECODES</code></td><td>签到领现金 互助码</td><td>非必须</td><td>10&#x2F;</td><td>填写规则和上面类似，或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>JXNC_SHARECODES</code></td><td>京喜农场 互助码</td><td>非必须</td><td>&#x2F;</td><td>注意：京喜农场种植种子发生变化的时候，互助码也会变！！ 每个账号 shareCode 是一个 json， json 需要用单引号包裹且是一行字符串， 否则设置环境变量时会出错， 示例：’{“smp”:”22bdadsfaadsfadse8a”, “active”:”jdnc_1_btorange210113_2”,”joinnum”:”1”}’， 多账单间使用<code>&amp;</code>或换行分开。 详细说明参见<a href="https://github.com/LXK9301/jd_scripts/pull/202">#Pr202</a> 如果使用<code>docker-compose</code>部署就不需要在互助码两端加单引号。详细参见 Issues<a href="https://gitee.com/lxk0301/jd_scripts/issues/I35AG8">#I35AG8</a></td></tr><tr><td><code>JDSGMH_SHARECODES</code></td><td>闪购盲盒 互助码</td><td>非必须</td><td>10&#x2F;</td><td>填写规则和上面类似，或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>JDCFD_SHARECODES</code></td><td>京喜财富岛 互助码</td><td>非必须</td><td>未知&#x2F;未知</td><td>填写规则和上面类似，或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr><tr><td><code>dyjCode</code></td><td>大赢家 互助码</td><td>非必须</td><td>未知&#x2F;未知</td><td>仅支持单个互助码，，暂不支持多号。格式：redEnvelopeId@markedPin</td></tr><tr><td><code>TYT_PACKETID</code></td><td>推一推 互助码</td><td>非必须</td><td>未知&#x2F;未知</td><td>仅支持单个互助码，暂不支持多号</td></tr><tr><td><code>MONEYTREE_SHARECODES</code></td><td>摇钱树 互助码</td><td>非必须</td><td>未知&#x2F;未知</td><td>填写规则和上面类似，或见下方<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E4%BA%92%E5%8A%A9%E7%A0%81%E7%9A%84%E5%A1%AB%E5%86%99%E8%A7%84%E5%88%99">互助码的填写规则</a></td></tr></tbody></table><p><strong>控制脚本功能环境变量</strong></p><table><thead><tr><th>Name</th><th>归属</th><th>属性</th><th>说明</th></tr></thead><tbody><tr><td><code>JD_BEAN_STOP</code></td><td>京东多合一签到</td><td>非必须</td><td><code>jd_bean_sign.js</code>自定义延迟签到,单位毫秒.默认分批并发无延迟， 延迟作用于每个签到接口，如填入延迟则切换顺序签到(耗时较长)， 如需填写建议输入数字<code>1</code>，详见<a href="https://github.com/NobyDa/Script/blob/master/JD-DailyBonus/JD_DailyBonus.js#L93">此处说明</a></td></tr><tr><td><code>JD_BEAN_SIGN_STOP_NOTIFY</code></td><td>京东多合一签到</td><td>非必须</td><td><code>jd_bean_sign.js</code>脚本运行后不推送签到结果通知，默认推送，填<code>true</code>表示不发送通知</td></tr><tr><td><code>JD_BEAN_SIGN_NOTIFY_SIMPLE</code></td><td>京东多合一签到</td><td>非必须</td><td><code>jd_bean_sign.js</code>脚本运行后推送签到结果简洁版通知， 默认推送全部签到结果，填<code>true</code>表示推送简洁通知，<a href="https://github.com/lukesyy/jd_yun/blob/main/icon/bean_sign_simple.jpg">效果图</a></td></tr><tr><td><code>PET_NOTIFY_CONTROL</code></td><td>东东萌宠 推送开关</td><td>非必须</td><td>控制京东萌宠是否静默运行, <code>false</code>为否(发送推送通知消息),<code>true</code>为是(即：不发送推送通知消息)</td></tr><tr><td><code>FRUIT_NOTIFY_CONTROL</code></td><td>东东农场 推送开关</td><td>非必须</td><td>控制京东农场是否静默运行, <code>false</code>为否(发送推送通知消息),<code>true</code>为是(即：不发送推送通知消息)</td></tr><tr><td><code>JD_JOY_REWARD_NOTIFY</code></td><td>宠汪汪 兑换京豆推送开关</td><td>非必须</td><td>控制<code>jd_joy_reward.js</code>脚本是否静默运行, <code>false</code>为否(发送推送通知消息),<code>true</code>为是(即：不发送推送通知消息)</td></tr><tr><td><code>JOY_FEED_COUNT</code></td><td>宠汪汪喂食数量</td><td>非必须</td><td>控制<code>jd_joy_feedPets.js</code>脚本喂食数量,可以填的数字 10,20,40,80,其他数字不可.</td></tr><tr><td><code>JOY_HELP_FEED</code></td><td>宠汪汪帮好友喂食</td><td>非必须</td><td>控制<code>jd_joy_steal.js</code>脚本是否给好友喂食,<code>false</code>为否,<code>true</code>为是(给好友喂食)</td></tr><tr><td><code>JOY_RUN_FLAG</code></td><td>宠汪汪是否赛跑</td><td>非必须</td><td>控制<code>jd_joy.js</code>脚本是否参加赛跑(默认参加双人赛跑), <code>false</code>为否,<code>true</code>为是，脚本默认是<code>true</code></td></tr><tr><td><code>JOY_TEAM_LEVEL</code></td><td>宠汪汪 参加什么级别的赛跑</td><td>非必须</td><td>控制<code>jd_joy.js</code>脚本参加几人的赛跑,可选数字为<code>2</code>,<code>10</code>,<code>50</code>， 其中 2 代表参加双人 PK 赛，10 代表参加 10 人突围赛， 50 代表参加 50 人挑战赛(注：此项功能在<code>JOY_RUN_FLAG</code>为 true 的时候才生效)， 如若想设置不同账号参加不同类别的比赛则用&amp;区分即可(如下三个账号：<code>2&amp;10&amp;50</code>)</td></tr><tr><td><code>JOY_RUN_NOTIFY</code></td><td>宠汪汪 宠汪汪赛跑获胜后是否推送通知</td><td>非必须</td><td>控制<code>jd_joy.js</code>脚本宠汪汪赛跑获胜后是否推送通知， <code>false</code>为否(不推送通知消息),<code>true</code>为是(即：发送推送通知消息)</td></tr><tr><td><code>JOY_RUN_HELP_MYSELF</code></td><td>宠汪汪 赛跑自己账号内部互助</td><td>非必须</td><td>输入<code>true</code>为开启内部互助</td></tr><tr><td><code>JD_JOY_REWARD_NAME</code></td><td>宠汪汪 积分兑换多少京豆</td><td>非必须</td><td>目前可填值为<code>20</code>或者<code>500</code>,脚本默认<code>20</code>,<code>0</code>表示不兑换京豆</td></tr><tr><td><code>MARKET_COIN_TO_BEANS</code></td><td>东东超市 兑换京豆数量</td><td>非必须</td><td>控制<code>jd_blueCoin.js</code>兑换京豆数量, 可输入值为<code>20</code>或者<code>1000</code>的数字或者其他商品的名称,例如<code>碧浪洗衣凝珠</code></td></tr><tr><td><code>MARKET_REWARD_NOTIFY</code></td><td>东东超市 兑换奖品推送开关</td><td>非必须</td><td>控制<code>jd_blueCoin.js</code>兑换奖品成功后是否静默运行, <code>false</code>为否(发送推送通知消息),<code>true</code>为是(即：不发送推送通知消息)</td></tr><tr><td><code>JOIN_PK_TEAM</code></td><td>东东超市 自动参加 PK 队伍</td><td>非必须</td><td>每次 pk 活动参加作者创建的 pk 队伍,<code>true</code>表示参加,<code>false</code>表示不参加</td></tr><tr><td><code>SUPERMARKET_LOTTERY</code></td><td>东东超市抽奖</td><td>非必须</td><td>每天运行脚本是否使用金币去抽奖,<code>true</code>表示抽奖,<code>false</code>表示不抽奖</td></tr><tr><td><code>FRUIT_BEAN_CARD</code></td><td>农场 使用水滴换豆卡</td><td>非必须</td><td>农场使用水滴换豆卡(如果出现限时活动时 100g 水换 20 豆,此时比浇水划算,推荐换豆), <code>true</code>表示换豆(不浇水),<code>false</code>表示不换豆(继续浇水),脚本默认是浇水</td></tr><tr><td><code>UN_SUBSCRIBES</code></td><td>jd_unsubscribe.js</td><td>非必须</td><td>共四个参数,换行隔开.四个参数分别表示 <code>取关商品数量</code>,<code>取关店铺数量</code>,<code>遇到此商品不再进行取关</code>,<code>遇到此店铺不再进行取关</code>，<a href="https://github.com/lukesyy/jd_yun/blob/main/githubAction.md#%E5%8F%96%E5%85%B3%E5%BA%97%E9%93%BAsecret%E7%9A%84%E8%AF%B4%E6%98%8E">具体使用往下看</a></td></tr><tr><td><code>JDJOY_HELPSELF</code></td><td>疯狂的 JOY 循环助力</td><td>非必须</td><td>疯狂的 JOY 循环助力，<code>true</code>表示循环助力,<code>false</code>表示不循环助力，默认不开启循环助力。</td></tr><tr><td><code>JDJOY_APPLYJDBEAN</code></td><td>疯狂的 JOY 京豆兑换</td><td>非必须</td><td>疯狂的 JOY 京豆兑换，目前最小值为 2000 京豆(详情请查看活动页面-提现京豆)， 默认数字<code>0</code>不开启京豆兑换。</td></tr><tr><td><code>BUY_JOY_LEVEL</code></td><td>疯狂的 JOY 购买 joy 等级</td><td>非必须</td><td>疯狂的 JOY 自动购买什么等级的 JOY</td></tr><tr><td><code>MONEY_TREE_SELL_FRUIT</code></td><td>摇钱树 是否卖出金果</td><td>非必须</td><td>控制摇钱树脚本是否自动卖出金果兑换成金币，<code>true</code>卖出，<code>false</code>不卖出，默认<code>false</code></td></tr><tr><td><code>FACTORAY_WANTPRODUCT_NAME</code></td><td>东东工厂 心仪商品</td><td>非必须</td><td>提供心仪商品名称(请尽量填写完整和别的商品有区分度)，达到条件后兑换， 如不提供则会兑换当前所选商品</td></tr><tr><td><code>DREAMFACTORY_FORBID_ACCOUNT</code></td><td>京喜工厂 控制哪个京东账号不运行此脚本</td><td>非必须</td><td>输入<code>1</code>代表第一个京东账号不运行，多个使用<code>&amp;</code>连接，例：<code>1&amp;3</code>代表账号 1 和账号 3 不运行京喜工厂脚本，注：输入<code>0</code>，代表全部账号不运行京喜工厂脚本</td></tr><tr><td><code>JDFACTORY_FORBID_ACCOUNT</code></td><td>东东工厂 控制哪个京东账号不运行此脚本</td><td>非必须</td><td>输入<code>1</code>代表第一个京东账号不运行，多个使用<code>&amp;</code>连接，例：<code>1&amp;3</code>代表账号 1 和账号 3 不运行东东工厂脚本，注：输入<code>0</code>，代表全部账号不运行东东工厂脚本</td></tr><tr><td><code>CFD_NOTIFY_CONTROL</code></td><td>京喜财富岛 控制是否运行脚本后通知</td><td>非必须</td><td>输入<code>true</code>为通知,不填则为不通知</td></tr><tr><td><code>JD_JOY_PARK</code></td><td>汪汪乐园 控制是否运行此脚本,默认是</td><td>非必须</td><td>输入<code>false</code>为不运行</td></tr><tr><td><code>JD_TRY</code></td><td>京东试用 控制是否运行此脚本,默认否</td><td>非必须</td><td>输入<code>true</code>为运行</td></tr><tr><td><code>NOT_RUN</code></td><td>禁止运行某脚本 控制是否运行此脚本</td><td>非必须</td><td>输入<code>对应脚本名称，多个脚本用&amp;连接</code></td></tr></tbody></table>              </div>            </details><h3 id="互助码的填写规则"><a href="#互助码的填写规则" class="headerlink" title="互助码的填写规则"></a>互助码的填写规则</h3><blockquote><p>互助码如何获取：运行相应脚本后，在日志里面可以找到。</p></blockquote><p>同一个京东账号的好友互助码用@隔开,不同京东账号互助码用&amp;或者换行隔开,下面给一个文字示例和具体互助码示例说明</p><p>两个账号各两个互助码的文字示例：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">京东账号1的shareCode1@京东账号1的shareCode2&amp;京东账号2的shareCode1@京东账号2的shareCode2</span><br></pre></td></tr></table></figure><p>两个账号各两个互助码的真实示例：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">0a74407df5df4fa99672a037eec61f7e@dbb21614667246fabcfd9685b6f448f3&amp;6fbd26cc27ac44d6a7fed34092453f77@61ff5c624949454aa88561f2cd721bf6&amp;6fbd26cc27ac44d6a7fed34092453f77@61ff5c624949454aa88561f2cd721bf6</span><br></pre></td></tr></table></figure><h3 id="取关店铺-secret-的说明"><a href="#取关店铺-secret-的说明" class="headerlink" title="取关店铺 secret 的说明"></a>取关店铺 secret 的说明</h3><blockquote><p>secret 依次是<code>取关商品数</code>,<code>取关店铺数</code>,<code>遇到此商品不再进行取关</code>,<code>遇到此店铺不再进行取关</code></p></blockquote><p>例如我要取关 <code>100</code>个商品，<code>100</code>个店铺，商品遇到商品关键字 <code>iPhone12</code> 停止取关，店铺遇到 <code>Apple京东自营旗舰店</code> 不再取关 则使用<code>换行</code>或者<code>&amp;</code>隔开即可, 下面给出换行隔开示例:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">100</span><br><span class="line">100</span><br><span class="line">iPhone12</span><br><span class="line">Apple京东自营旗舰店</span><br></pre></td></tr></table></figure><p>下面给出<code>&amp;</code>符号隔开示例:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">100&amp;100&amp;iPhone12&amp;Apple京东自营旗舰店</span><br></pre></td></tr></table></figure><h3 id="关于脚本推送通知频率"><a href="#关于脚本推送通知频率" class="headerlink" title="关于脚本推送通知频率"></a>关于脚本推送通知频率</h3><blockquote><p>如果你填写了推送通知方式中的某一种通知所需环境变量，那么脚本通知情况如下：</p></blockquote><blockquote><p>目前默认只有 jd_fruit.js,jd_pet.js,jd_bean_sign.js,jd_bean_change.js,jd_jxnc.js 这些脚本(默认)每次运行后都通知</p></blockquote><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">其余的脚本平常运行都是不通知，只有在京东cookie失效以及达到部分条件后，才会推送通知</span><br></pre></td></tr></table></figure><h2 id="一些依赖可供参考"><a href="#一些依赖可供参考" class="headerlink" title="一些依赖可供参考"></a>一些依赖可供参考</h2><h3 id="1-NodeJs-下"><a href="#1-NodeJs-下" class="headerlink" title="1.NodeJs 下"></a>1.NodeJs 下</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">一个一个复制安装</span><br><span class="line">crypto-js</span><br><span class="line">prettytable</span><br><span class="line">dotenv</span><br><span class="line">jsdom</span><br><span class="line">date-fns</span><br><span class="line">tough-cookie</span><br><span class="line">tslib</span><br><span class="line">ws@7.4.3</span><br><span class="line">ts-md5</span><br><span class="line">jsdom -g</span><br><span class="line">jieba</span><br><span class="line">fs</span><br><span class="line">form-data</span><br><span class="line">json5</span><br><span class="line">global-agent</span><br><span class="line">png-js</span><br><span class="line">@types/node</span><br><span class="line">require</span><br><span class="line">typescript</span><br><span class="line">js-base64</span><br><span class="line">axios</span><br></pre></td></tr></table></figure><h3 id="2-Python3-下"><a href="#2-Python3-下" class="headerlink" title="2.Python3 下"></a>2.Python3 下</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">一个一个复制安装</span><br><span class="line">requests</span><br><span class="line">canvas</span><br><span class="line">ping3</span><br><span class="line">jieba</span><br></pre></td></tr></table></figure><h3 id="3-Linux-下"><a href="#3-Linux-下" class="headerlink" title="3.Linux 下"></a>3.Linux 下</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">一个一个复制安装</span><br><span class="line">bizCode</span><br><span class="line">bizMsg</span><br><span class="line">lxml</span><br></pre></td></tr></table></figure><h2 id="一些定时规则"><a href="#一些定时规则" class="headerlink" title="一些定时规则"></a>一些定时规则</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">*/5 * * * * ?    #每隔 5 秒执行一次</span><br><span class="line">0 */1 * * * ?    #每隔 1 分钟执行一次</span><br><span class="line">0 0 2 1 * ? *    #每月 1 日的凌晨 2 点执行一次</span><br><span class="line">0 15 10 ? *    #MON-FRI 周一到周五每天上午 10：15 执行</span><br><span class="line">0 15 10 ? 6L    #2002-2006 2002 年至 2006 年的每个月的最后一个星期五上午 10:15 执行</span><br><span class="line">0 0 23 * * ?    #每天 23 点执行一次</span><br><span class="line">0 0 1 * * ?    #每天凌晨 1 点执行一次</span><br><span class="line">0 0 1 1 * ?     #每月 1 日凌晨 1 点执行一次</span><br><span class="line">0 0 23 L * ?    #每月最后一天 23 点执行一次</span><br><span class="line">0 0 1 ? * L    #每周星期天凌晨 1 点执行一次</span><br><span class="line">0 26,29,33 * * * ?    #在 26 分、29 分、33 分执行一次</span><br><span class="line">0 0 0,13,18,21 * * ?    #每天的 0 点、13 点、18 点、21 点都执行一次</span><br><span class="line">0 0 10,14,16 * * ?    #每天上午 10 点，下午 2 点，4 点执行一次</span><br><span class="line">0 0/30 9-17 * * ?    #朝九晚五工作时间内每半小时执行一次</span><br><span class="line">0 0 12 ? * WED    #每个星期三中午 12 点执行一次</span><br><span class="line">0 0 12 * * ?    #每天中午 12 点触发</span><br><span class="line">0 15 10 ? * *    #每天上午 10:15 触发</span><br><span class="line">0 15 10 * * ?    #每天上午 10:15 触发</span><br><span class="line">0 15 10 * * ? *    #每天上午 10:15 触发</span><br><span class="line">0 15 10 * * ?    #2005 2005 年的每天上午 10:15 触发</span><br><span class="line">0 * 14 * * ?    #每天下午 2 点到 2:59 期间的每 1 分钟触发</span><br><span class="line">0 0/5 14 * * ?    #每天下午 2 点到 2:55 期间的每 5 分钟触发</span><br><span class="line">0 0/5 14,18 * * ?    #每天下午 2 点到 2:55 期间和下午 6 点到 6:55 期间的每 5 分钟触发</span><br><span class="line">0 0-5 14 * * ?    #每天下午 2 点到 2:05 期间的每 1 分钟触发</span><br><span class="line">0 10,44 14 ? 3 WED    #每年三月的星期三的下午 2:10 和 2:44 触发</span><br><span class="line">0 15 10 ? * MON-FRI    #周一至周五的上午 10:15 触发</span><br><span class="line">0 15 10 15 * ?    #每月 15 日上午 10:15 触发</span><br><span class="line">0 15 10 L * ?    #每月最后一日的上午 10:15 触发</span><br><span class="line">0 15 10 ? * 6L    #每月的最后一个星期五上午 10:15 触发</span><br><span class="line">0 15 10 ? * 6L    #2002-2005 2002 年至 2005 年的每月的最后一个星期五上午 10:15 触发</span><br><span class="line">0 15 10 ? * 6#3    #每月的第三个星期五上午 10:15 触发</span><br></pre></td></tr></table></figure><h3 id="获取京东-cookie-代码"><a href="#获取京东-cookie-代码" class="headerlink" title="获取京东 cookie 代码"></a>获取京东 cookie 代码</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="variable constant_">CV</span> = <span class="string">&quot;单引号里面放第六步拿到的cookie&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> <span class="title class_">CookieValue</span> = <span class="variable constant_">CV</span>.<span class="title function_">match</span>(<span class="regexp">/pt_pin=.+?;/</span>) + <span class="variable constant_">CV</span>.<span class="title function_">match</span>(<span class="regexp">/pt_key=.+?;/</span>);</span><br><span class="line"><span class="title function_">copy</span>(<span class="title class_">CookieValue</span>);</span><br></pre></td></tr></table></figure>]]></content>
      
      
      
        <tags>
            
            <tag> 薅羊毛 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>完全搞懂this的指向</title>
      <link href="/posts/222.html"/>
      <url>/posts/222.html</url>
      
        <content type="html"><![CDATA[<p>在此感谢 coderwhy 老师，嘿嘿</p><blockquote><p>this 是 JavaScript 中的一个关键字，但是又一个相对比较特别的关键字，不像 function、var、for、if 这些关键字一样，可以很清楚的搞清楚它到底是如何使用的。</p><p>this 会在执行上下文中绑定一个对象，但是是根据什么条件绑定的呢？在不同的执行条件下会绑定不同的对象，这也是让人捉摸不定的地方。</p><p>这一次，我们一起来彻底搞定 this 到底是如何绑定的吧！</p></blockquote><h2 id="理解-this"><a href="#理解-this" class="headerlink" title="理解 this"></a>理解 this</h2><h3 id="为什么使用-this"><a href="#为什么使用-this" class="headerlink" title="为什么使用 this"></a>为什么使用 this</h3><p>在常见的编程语言中，几乎都有 this 这个关键字（Objective-C 中使用的是 self），但是 JavaScript 中的 this 和常见的面向对象语言中的 this 不太一样：</p><ul><li>常见面向对象的编程语言中，比如 Java、C++、Swift、Dart 等等一系列语言中，this 通常只会出现在<code>类的方法</code>中。</li><li>也就是你需要有一个类，类中的方法（特别是实例方法）中，this 代表的是当前调用对象。</li><li>但是 JavaScript 中的 this 更加灵活，无论是它出现的位置还是它代表的含义。</li></ul><p>使用 this 有什么意义呢？下面的代码中，我们通过对象字面量创建出来一个对象，当我们调用对象的方法时，希望将对象的名称一起进行打印。</p><p>如果没有 this，那么我们的代码会是下面的写法：</p><ul><li>在方法中，为了能够获取到 name 名称，必须通过 obj 的引用（变量名称）来获取。</li><li>但是这样做有一个很大的弊端：如果我将 obj 的名称换成了 info，那么所有的方法中的 obj 都需要换成 info。</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">  <span class="attr">running</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span> + <span class="string">&quot; running&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">eating</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span> + <span class="string">&quot; eating&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">studying</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">name</span> + <span class="string">&quot; studying&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>事实上，上面的代码，在实际开发中，我们都会使用 this 来进行优化：</p><ul><li>当我们通过 obj 去调用 running、eating、studying 这些方法时，this 就是指向的 obj 对象</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">  <span class="attr">running</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot; running&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">eating</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot; eating&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">studying</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot; studying&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>所以我们会发现，在某些函数或者方法的编写中，this 可以让我们更加便捷的方式来引用对象，在进行一些 API 设计时，代码更加的简洁和易于复用。</p><p>当然，上面只是应用 this 的一个场景而已，开发中使用到 this 的场景到处都是，这也是为什么它不容易理解的原因。</p><h3 id="this-指向什么"><a href="#this-指向什么" class="headerlink" title="this 指向什么"></a>this 指向什么</h3><p>我们先说一个最简单的，this 在全局作用域下指向什么？</p><ul><li>这个问题非常容易回答，在浏览器中测试就是指向 window</li><li>所以，在全局作用域下，我们可以认为 this 就是指向的 window</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> name = <span class="string">&quot;安知鱼&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>); <span class="comment">// 安知鱼</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">window</span>.<span class="property">name</span>); <span class="comment">// 安知鱼</span></span><br></pre></td></tr></table></figure><p>但是，开发中很少直接在全局作用域下去使用 this，通常都是在<strong>函数中使用</strong>。</p><p>所有的函数在被调用时，都会创建一个执行上下文：</p><ul><li>这个上下文中记录着函数的调用栈、函数的调用方式、传入的参数信息等；</li><li>this 也是其中的一个属性；</li></ul><p>我们先来看一个让人困惑的问题：</p><ul><li>定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义一个函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.调用方式一: 直接调用</span></span><br><span class="line"><span class="title function_">foo</span>(); <span class="comment">// window</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.调用方式二: 将foo放到一个对象中,再调用</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">  <span class="attr">foo</span>: foo,</span><br><span class="line">&#125;;</span><br><span class="line">obj.<span class="title function_">foo</span>(); <span class="comment">// obj对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3.调用方式三: 通过call/apply调用</span></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="string">&quot;abc&quot;</span>); <span class="comment">// String &#123;&quot;abc&quot;&#125;对象</span></span><br></pre></td></tr></table></figure><p>上面的案例可以给我们什么样的启示呢？</p><ul><li>1.函数在调用时，JavaScript 会默认给 this 绑定一个值；</li><li>2.this 的绑定和定义的位置（编写的位置）没有关系；</li><li>3.this 的绑定和调用方式以及调用的位置有关系；</li><li>4.this 是在运行时被绑定的；</li></ul><p>那么 this 到底是怎么样的绑定规则呢？一起来学习一下吧</p><h2 id="this-绑定规则"><a href="#this-绑定规则" class="headerlink" title="this 绑定规则"></a>this 绑定规则</h2><blockquote><p>我们现在已经知道 this 无非就是在函数调用时被绑定的一个对象，我们就需要知道它在不同的场景下的绑定规则即可。</p></blockquote><h3 id="默认绑定"><a href="#默认绑定" class="headerlink" title="默认绑定"></a>默认绑定</h3><p>什么情况下使用默认绑定呢？独立函数调用。</p><ul><li>独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；</li></ul><p><strong>案例一：普通函数调用</strong></p><ul><li>该函数直接被调用，并没有进行任何的对象关联；</li><li>这种独立的函数调用会使用默认绑定，通常默认绑定时，函数中的 this 指向全局对象（window）；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">foo</span>();</span><br></pre></td></tr></table></figure><p><strong>案例二：函数调用链（一个函数又调用另外一个函数）</strong></p><ul><li>所有的函数调用都没有被绑定到某个对象上；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2.案例二:</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test1</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span><br><span class="line">  <span class="title function_">test2</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test2</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span><br><span class="line">  <span class="title function_">test3</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">test3</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">test1</span>();</span><br></pre></td></tr></table></figure><p><strong>案例三：将函数作为参数，传入到另一个函数中</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">func</span>) &#123;</span><br><span class="line">  <span class="title function_">func</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">bar</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">foo</span>(bar);</span><br></pre></td></tr></table></figure><p>我们对案例进行一些修改，考虑一下打印结果是否会发生变化：</p><ul><li>这里的结果依然是 window，为什么呢？</li><li>原因非常简单，在真正函数调用的位置，并没有进行任何的对象绑定，只是一个独立函数的调用；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params">func</span>) &#123;</span><br><span class="line">  <span class="title function_">func</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">  <span class="attr">bar</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="title function_">foo</span>(obj.<span class="property">bar</span>);</span><br></pre></td></tr></table></figure><h3 id="隐式绑定"><a href="#隐式绑定" class="headerlink" title="隐式绑定"></a>隐式绑定</h3><p>另外一种比较常见的调用方式是通过某个对象进行调用的：</p><ul><li>也就是它的调用位置中，是通过某个对象发起的函数调用。</li></ul><p><strong>案例一：通过对象调用函数</strong></p><ul><li>foo 的调用位置是 obj.foo()方式进行调用的</li><li>那么 foo 调用时 this 会隐式的被绑定到 obj 对象上</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// obj对象</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">  <span class="attr">foo</span>: foo,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">obj.<span class="title function_">foo</span>();</span><br></pre></td></tr></table></figure><p><strong>案例二：案例一的变化</strong></p><ul><li>我们通过 obj2 又引用了 obj1 对象，再通过 obj1 对象调用 foo 函数；</li><li>那么 foo 调用的位置上其实还是 obj1 被绑定了 this；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// obj对象</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;obj1&quot;</span>,</span><br><span class="line">  <span class="attr">foo</span>: foo,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;obj2&quot;</span>,</span><br><span class="line">  <span class="attr">obj1</span>: obj1,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">obj2.<span class="property">obj1</span>.<span class="title function_">foo</span>();</span><br></pre></td></tr></table></figure><p><strong>案例三：隐式丢失</strong></p><ul><li>结果最终是 window，为什么是 window 呢？</li><li>因为 foo 最终被调用的位置是 bar，而 bar 在进行调用时没有绑定任何的对象，也就没有形成隐式绑定；</li><li>相当于是一种默认绑定；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;obj1&quot;</span>,</span><br><span class="line">  <span class="attr">foo</span>: foo,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 讲obj1的foo赋值给bar</span></span><br><span class="line"><span class="keyword">var</span> bar = obj1.<span class="property">foo</span>;</span><br><span class="line"><span class="title function_">bar</span>();</span><br></pre></td></tr></table></figure><h3 id="显示绑定"><a href="#显示绑定" class="headerlink" title="显示绑定"></a>显示绑定</h3><p>隐式绑定有一个前提条件：</p><ul><li>必须在调用的<code>对象内部</code>有一个对函数的引用（比如一个属性）；</li><li>如果没有这样的引用，在进行调用时，会报找不到该函数的错误；</li><li>正是通过这个引用，间接的将 this 绑定到了这个对象上；</li></ul><p>如果我们不希望在 <strong>对象内部</strong> 包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？</p><ul><li><p>JavaScript 所有的函数都可以使用 call 和 apply 方法（这个和 Prototype 有关）。</p></li><li><ul><li>它们两个的区别这里不再展开；</li><li>其实非常简单，第一个参数是相同的，后面的参数，apply 为数组，call 为参数列表；</li></ul></li><li><p>这两个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给 this 准备的。</p></li><li><p>在调用这个函数时，会将 this 绑定到这个传入的对象上。</p></li></ul><p>因为上面的过程，我们明确的绑定了 this 指向的对象，所以称之为 <strong>显示绑定</strong>。</p><h4 id="call、apply"><a href="#call、apply" class="headerlink" title="call、apply"></a>call、apply</h4><p><strong>通过 call 或者 apply 绑定 this 对象</strong></p><ul><li>显示绑定后，this 就会明确的指向绑定的对象</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="variable language_">window</span>); <span class="comment">// window</span></span><br><span class="line">foo.<span class="title function_">call</span>(&#123; <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span> &#125;); <span class="comment">// &#123;name: &quot;安知鱼&quot;&#125;</span></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="number">123</span>); <span class="comment">// Number对象,存放时123</span></span><br></pre></td></tr></table></figure><h4 id="bind-函数"><a href="#bind-函数" class="headerlink" title="bind 函数"></a>bind 函数</h4><p><strong>如果我们希望一个函数总是显示的绑定到一个对象上，可以怎么做呢？</strong></p><p>方案一：自己手写一个辅助函数（了解）</p><ul><li>我们手动写了一个 bind 的辅助函数</li><li>这个辅助函数的目的是在执行 foo 时，总是让它的 this 绑定到 obj 对象上</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">bind</span>(<span class="params">func, obj</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> func.<span class="title function_">apply</span>(obj, <span class="variable language_">arguments</span>);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> bar = <span class="title function_">bind</span>(foo, obj);</span><br><span class="line"></span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">// obj对象</span></span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">// obj对象</span></span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">// obj对象</span></span><br></pre></td></tr></table></figure><p>方案二：使用 Function.prototype.bind</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> bar = foo.<span class="title function_">bind</span>(obj);</span><br><span class="line"></span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">// obj对象</span></span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">// obj对象</span></span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">// obj对象</span></span><br></pre></td></tr></table></figure><h4 id="内置函数"><a href="#内置函数" class="headerlink" title="内置函数"></a>内置函数</h4><p>有些时候，我们会调用一些 JavaScript 的内置函数，或者一些第三方库中的内置函数。</p><ul><li>这些内置函数会要求我们传入另外一个函数；</li><li>我们自己并不会显示的调用这些函数，而且 JavaScript 内部或者第三方库内部会帮助我们执行；</li><li>这些函数中的 this 又是如何绑定的呢？</li></ul><p><strong>案例一：setTimeout</strong></p><ul><li>setTimeout 中会传入一个函数，这个函数中的 this 通常是 window</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span><br><span class="line">&#125;, <span class="number">1000</span>);</span><br></pre></td></tr></table></figure><p>为什么这里是 window 呢？</p><ul><li>这个和 setTimeout 源码的内部调用有关；</li><li>setTimeout 内部是通过 apply 进行绑定的 this 对象，并且绑定的是全局对象；</li></ul><p><strong>案例二：数组的 forEach</strong></p><p>数组有一个高阶函数 forEach，用于函数的遍历：</p><ul><li>在 forEach 中传入的函数打印的也是 Window 对象；</li><li>这是因为默认情况下传入的函数是自动调用函数（默认绑定）；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> names = [<span class="string">&quot;abc&quot;</span>, <span class="string">&quot;cba&quot;</span>, <span class="string">&quot;nba&quot;</span>];</span><br><span class="line">names.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// 三次window</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>我们是否可以改变该函数的 this 指向呢？</p><p>forEach 参数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> names = [<span class="string">&quot;abc&quot;</span>, <span class="string">&quot;cba&quot;</span>, <span class="string">&quot;nba&quot;</span>];</span><br><span class="line"><span class="keyword">var</span> obj = &#123; <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span> &#125;;</span><br><span class="line">names.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">item</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// 三次obj对象</span></span><br><span class="line">&#125;, obj);</span><br></pre></td></tr></table></figure><p><strong>案例三：div 的点击</strong></p><p>如果我们有一个 div 元素：</p><ul><li>注意：省略了部分代码</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">  .<span class="property">box</span> &#123;</span><br><span class="line">    <span class="attr">width</span>: 200px;</span><br><span class="line">    <span class="attr">height</span>: 200px;</span><br><span class="line">    background-<span class="attr">color</span>: red;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>获取元素节点，并且监听点击：</p><ul><li>在点击事件的回调中，this 指向谁呢？box 对象；</li><li>这是因为在发生点击时，执行传入的回调函数被调用时，会将 box 对象绑定到该函数中；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;.box&quot;</span>);</span><br><span class="line">box.<span class="property">onclick</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// box对象</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>所以传入到内置函数的回调函数 this 如何确定呢？</p><ul><li>某些内置的函数，我们很难确定它内部是如何调用传入的回调函数；</li><li>一方面可以通过分析源码来确定，另一方面我们可以通过经验（见多识广）来确定；</li><li>但是无论如何，通常都是我们之前讲过的规则来确定的；</li></ul><h3 id="new-绑定"><a href="#new-绑定" class="headerlink" title="new 绑定"></a>new 绑定</h3><p>JavaScript 中的函数可以当做一个类的构造函数来使用，也就是使用 new 关键字。</p><p>使用 new 关键字来调用函数时，会执行如下的操作：</p><ul><li>1.创建一个全新的对象；</li><li>2.这个新对象会被执行 Prototype 连接；</li><li>3.这个新对象会绑定到函数调用的 this 上（this 的绑定在这个步骤完成）；</li><li>4.如果函数没有返回其他对象，表达式会返回这个新对象；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建Person</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// Person &#123;&#125;</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name; <span class="comment">// Person &#123;name: &quot;安知鱼&quot;&#125;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;安知鱼&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(p);</span><br></pre></td></tr></table></figure><h3 id="规则优先级"><a href="#规则优先级" class="headerlink" title="规则优先级"></a>规则优先级</h3><p>学习了四条规则，接下来开发中我们只需要去查找函数的调用应用了哪条规则即可，但是如果一个函数调用位置应用了多条规则，优先级谁更高呢？</p><p><strong>1.默认规则的优先级最低</strong></p><p>毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定 this</p><p><strong>2.显示绑定优先级高于隐式绑定</strong></p><p>显示绑定和隐式绑定哪一个优先级更高呢？这个我们可以测试一下：</p><ul><li>结果是 obj2，说明是显示绑定生效了</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;obj1&quot;</span>,</span><br><span class="line">  <span class="attr">foo</span>: foo,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;obj2&quot;</span>,</span><br><span class="line">  <span class="attr">foo</span>: foo,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 隐式绑定</span></span><br><span class="line">obj1.<span class="title function_">foo</span>(); <span class="comment">// obj1</span></span><br><span class="line">obj2.<span class="title function_">foo</span>(); <span class="comment">// obj2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 隐式绑定和显示绑定同时存在</span></span><br><span class="line">obj1.<span class="property">foo</span>.<span class="title function_">call</span>(obj2); <span class="comment">// obj2, 说明显式绑定优先级更高</span></span><br></pre></td></tr></table></figure><p><strong>3.new 绑定优先级高于隐式绑定</strong></p><ul><li>结果是 foo，说明是 new 绑定生效了</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">  <span class="attr">foo</span>: foo,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> obj.<span class="title function_">foo</span>(); <span class="comment">// foo对象, 说明new绑定优先级更高</span></span><br></pre></td></tr></table></figure><p><strong>4.new 绑定优先级高于 bind</strong></p><p>new 绑定和 call、apply 是不允许同时使用的，所以不存在谁的优先级更高</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;obj&quot;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> foo = <span class="keyword">new</span> foo.<span class="title function_">call</span>(obj);</span><br></pre></td></tr></table></figure><p>new 和 call 同时使用</p><p>但是 new 绑定是否可以和 bind 后的函数同时使用呢？可以</p><ul><li>结果显示为 foo，那么说明是 new 绑定生效了</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;obj&quot;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// var foo = new foo.call(obj);</span></span><br><span class="line"><span class="keyword">var</span> bar = foo.<span class="title function_">bind</span>(obj);</span><br><span class="line"><span class="keyword">var</span> foo = <span class="keyword">new</span> <span class="title function_">bar</span>(); <span class="comment">// 打印foo, 说明使用的是new绑定</span></span><br></pre></td></tr></table></figure><p>优先级总结：</p><ul><li>new 绑定 &gt; 显示绑定（bind）&gt; 隐式绑定 &gt; 默认绑定</li></ul><h2 id="this-规则之外"><a href="#this-规则之外" class="headerlink" title="this 规则之外"></a>this 规则之外</h2><blockquote><p>我们讲到的规则已经足以应付平时的开发，但是总有一些语法，超出了我们的规则之外。（神话故事和动漫中总是有类似这样的人物）</p></blockquote><h3 id="忽略显示绑定"><a href="#忽略显示绑定" class="headerlink" title="忽略显示绑定"></a>忽略显示绑定</h3><p>如果在显示绑定中，我们传入一个 null 或者 undefined，那么这个显示绑定会被忽略，使用默认规则：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;安知鱼&quot;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">foo.<span class="title function_">call</span>(obj); <span class="comment">// obj对象</span></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="literal">null</span>); <span class="comment">// window</span></span><br><span class="line">foo.<span class="title function_">call</span>(<span class="literal">undefined</span>); <span class="comment">// window</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> bar = foo.<span class="title function_">bind</span>(<span class="literal">null</span>);</span><br><span class="line"><span class="title function_">bar</span>(); <span class="comment">// window</span></span><br></pre></td></tr></table></figure><h3 id="间接函数引用"><a href="#间接函数引用" class="headerlink" title="间接函数引用"></a>间接函数引用</h3><p>另外一种情况，创建一个函数的 <code>间接引用</code>，这种情况使用默认绑定规则。</p><p>我们先来看下面的案例结果是什么？</p><ul><li>(num2 &#x3D; num1)的结果是 num1 的值；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num1 = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> num2 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> result = (num2 = num1);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">// 100</span></span><br></pre></td></tr></table></figure><p>我们来下面的函数赋值结果：</p><ul><li>赋值(obj2.foo &#x3D; obj1.foo)的结果是 foo 函数；</li><li>foo 函数被直接调用，那么是默认绑定；</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj1 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;obj1&quot;</span>,</span><br><span class="line">  <span class="attr">foo</span>: foo,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj2 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;obj2&quot;</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">obj1.<span class="title function_">foo</span>(); <span class="comment">// obj1对象</span></span><br><span class="line">(obj2.<span class="property">foo</span> = obj1.<span class="property">foo</span>)(); <span class="comment">// window</span></span><br></pre></td></tr></table></figure><h3 id="ES6-箭头函数"><a href="#ES6-箭头函数" class="headerlink" title="ES6 箭头函数"></a>ES6 箭头函数</h3><p>在 ES6 中新增一个非常好用的函数类型：箭头函数</p><ul><li>这里不再具体介绍箭头函数的用法，可以自行学习。</li></ul><p>箭头函数不使用 this 的四种标准规则（也就是不绑定 this），而是根据外层作用域来决定 this。</p><p>我们来看一个模拟网络请求的案例：</p><ul><li>这里我使用 setTimeout 来模拟网络请求，请求到数据后如何可以存放到 data 中呢？</li><li>我们需要拿到 obj 对象，设置 data；</li><li>但是直接拿到的 this 是 window，我们需要在外层定义：<code>var _this = this</code></li><li>在 setTimeout 的回调函数中使用_this 就代表了 obj 对象</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">data</span>: [],</span><br><span class="line">  <span class="attr">getData</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> _this = <span class="variable language_">this</span>;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="comment">// 模拟获取到的数据</span></span><br><span class="line">      <span class="keyword">var</span> res = [<span class="string">&quot;abc&quot;</span>, <span class="string">&quot;cba&quot;</span>, <span class="string">&quot;nba&quot;</span>];</span><br><span class="line">      _this.<span class="property">data</span>.<span class="title function_">push</span>(...res);</span><br><span class="line">    &#125;, <span class="number">1000</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">obj.<span class="title function_">getData</span>();</span><br></pre></td></tr></table></figure><p>上面的代码在 ES6 之前是我们最常用的方式，从 ES6 开始，我们会使用箭头函数：</p><ul><li>为什么在 setTimeout 的回调函数中可以直接使用 this 呢？</li><li>因为箭头函数并不绑定 this 对象，那么 this 引用就会从上层作用域中找到对应的 this</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">data</span>: [],</span><br><span class="line">  <span class="attr">getData</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 模拟获取到的数据</span></span><br><span class="line">      <span class="keyword">var</span> res = [<span class="string">&quot;abc&quot;</span>, <span class="string">&quot;cba&quot;</span>, <span class="string">&quot;nba&quot;</span>];</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">data</span>.<span class="title function_">push</span>(...res);</span><br><span class="line">    &#125;, <span class="number">1000</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">obj.<span class="title function_">getData</span>();</span><br></pre></td></tr></table></figure><p>思考：如果 getData 也是一个箭头函数，那么 setTimeout 中的回调函数中的 this 指向谁呢？</p><ul><li>答案是 window；</li><li>依然是不断的从上层作用域找，那么找到了全局作用域；</li><li>在全局作用域内，this 代表的就是 window</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">data</span>: [],</span><br><span class="line">  <span class="attr">getData</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// window</span></span><br><span class="line">    &#125;, <span class="number">1000</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">obj.<span class="title function_">getData</span>();</span><br></pre></td></tr></table></figure><h2 id="this-面试题"><a href="#this-面试题" class="headerlink" title="this 面试题"></a>this 面试题</h2><h3 id="面试题一："><a href="#面试题一：" class="headerlink" title="面试题一："></a>面试题一：</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">&quot;window&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;person&quot;</span>,</span><br><span class="line">  <span class="attr">sayName</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayName</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> sss = person.<span class="property">sayName</span>;</span><br><span class="line">  <span class="title function_">sss</span>();</span><br><span class="line">  person.<span class="title function_">sayName</span>();</span><br><span class="line">  person.<span class="title function_">sayName</span>();</span><br><span class="line">  (b = person.<span class="property">sayName</span>)();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">sayName</span>();</span><br></pre></td></tr></table></figure><p>这道面试题非常简单，无非就是绕一下，希望把面试者绕晕：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sayName</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> sss = person.<span class="property">sayName</span>;</span><br><span class="line">  <span class="comment">// 独立函数调用，没有和任何对象关联</span></span><br><span class="line">  <span class="title function_">sss</span>(); <span class="comment">// window</span></span><br><span class="line">  <span class="comment">// 关联</span></span><br><span class="line">  person.<span class="title function_">sayName</span>(); <span class="comment">// person</span></span><br><span class="line">  person.<span class="title function_">sayName</span>(); <span class="comment">// person</span></span><br><span class="line">  (b = person.<span class="property">sayName</span>)(); <span class="comment">// window</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="面试题二："><a href="#面试题二：" class="headerlink" title="面试题二："></a>面试题二：</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">&quot;window&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> person1 = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;person1&quot;</span>,</span><br><span class="line">  <span class="attr">foo1</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">foo2</span>: <span class="function">() =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>),</span><br><span class="line">  <span class="attr">foo3</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">foo4</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person2 = &#123; <span class="attr">name</span>: <span class="string">&quot;person2&quot;</span> &#125;;</span><br><span class="line"></span><br><span class="line">person1.<span class="title function_">foo1</span>();</span><br><span class="line">person1.<span class="property">foo1</span>.<span class="title function_">call</span>(person2);</span><br><span class="line"></span><br><span class="line">person1.<span class="title function_">foo2</span>();</span><br><span class="line">person1.<span class="property">foo2</span>.<span class="title function_">call</span>(person2);</span><br><span class="line"></span><br><span class="line">person1.<span class="title function_">foo3</span>()();</span><br><span class="line">person1.<span class="property">foo3</span>.<span class="title function_">call</span>(person2)();</span><br><span class="line">person1.<span class="title function_">foo3</span>().<span class="title function_">call</span>(person2);</span><br><span class="line"></span><br><span class="line">person1.<span class="title function_">foo4</span>()();</span><br><span class="line">person1.<span class="property">foo4</span>.<span class="title function_">call</span>(person2)();</span><br><span class="line">person1.<span class="title function_">foo4</span>().<span class="title function_">call</span>(person2);</span><br></pre></td></tr></table></figure><p>下面是代码解析：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 隐式绑定，肯定是person1</span></span><br><span class="line">person1.<span class="title function_">foo1</span>(); <span class="comment">// person1</span></span><br><span class="line"><span class="comment">// 隐式绑定和显示绑定的结合，显示绑定生效，所以是person2</span></span><br><span class="line">person1.<span class="property">foo1</span>.<span class="title function_">call</span>(person2); <span class="comment">// person2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// foo2()是一个箭头函数，不适用所有的规则</span></span><br><span class="line">person1.<span class="title function_">foo2</span>(); <span class="comment">// window</span></span><br><span class="line"><span class="comment">// foo2依然是箭头函数，不适用于显示绑定的规则</span></span><br><span class="line">person1.<span class="property">foo2</span>.<span class="title function_">call</span>(person2); <span class="comment">// window</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取到foo3，但是调用位置是全局作用于下，所以是默认绑定window</span></span><br><span class="line">person1.<span class="title function_">foo3</span>()(); <span class="comment">// window</span></span><br><span class="line"><span class="comment">// foo3显示绑定到person2中</span></span><br><span class="line"><span class="comment">// 但是拿到的返回函数依然是在全局下调用，所以依然是window</span></span><br><span class="line">person1.<span class="property">foo3</span>.<span class="title function_">call</span>(person2)(); <span class="comment">// window</span></span><br><span class="line"><span class="comment">// 拿到foo3返回的函数，通过显示绑定到person2中，所以是person2</span></span><br><span class="line">person1.<span class="title function_">foo3</span>().<span class="title function_">call</span>(person2); <span class="comment">// person2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// foo4()的函数返回的是一个箭头函数</span></span><br><span class="line"><span class="comment">// 箭头函数的执行找上层作用域，是person1</span></span><br><span class="line">person1.<span class="title function_">foo4</span>()(); <span class="comment">// person1</span></span><br><span class="line"><span class="comment">// foo4()显示绑定到person2中，并且返回一个箭头函数</span></span><br><span class="line"><span class="comment">// 箭头函数找上层作用域，是person2</span></span><br><span class="line">person1.<span class="property">foo4</span>.<span class="title function_">call</span>(person2)(); <span class="comment">// person2</span></span><br><span class="line"><span class="comment">// foo4返回的是箭头函数，箭头函数只看上层作用域</span></span><br><span class="line">person1.<span class="title function_">foo4</span>().<span class="title function_">call</span>(person2); <span class="comment">// person1</span></span><br></pre></td></tr></table></figure><h3 id="面试题三"><a href="#面试题三" class="headerlink" title="面试题三:"></a>面试题三:</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">&quot;window&quot;</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">  (<span class="variable language_">this</span>.<span class="property">foo1</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">  &#125;),</span><br><span class="line">    (<span class="variable language_">this</span>.<span class="property">foo2</span> = <span class="function">() =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>)),</span><br><span class="line">    (<span class="variable language_">this</span>.<span class="property">foo3</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;),</span><br><span class="line">    (<span class="variable language_">this</span>.<span class="property">foo4</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;person1&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> person2 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;person2&quot;</span>);</span><br><span class="line"></span><br><span class="line">person1.<span class="title function_">foo1</span>();</span><br><span class="line">person1.<span class="property">foo1</span>.<span class="title function_">call</span>(person2);</span><br><span class="line"></span><br><span class="line">person1.<span class="title function_">foo2</span>();</span><br><span class="line">person1.<span class="property">foo2</span>.<span class="title function_">call</span>(person2);</span><br><span class="line"></span><br><span class="line">person1.<span class="title function_">foo3</span>()();</span><br><span class="line">person1.<span class="property">foo3</span>.<span class="title function_">call</span>(person2)();</span><br><span class="line">person1.<span class="title function_">foo3</span>().<span class="title function_">call</span>(person2);</span><br><span class="line"></span><br><span class="line">person1.<span class="title function_">foo4</span>()();</span><br><span class="line">person1.<span class="property">foo4</span>.<span class="title function_">call</span>(person2)();</span><br><span class="line">person1.<span class="title function_">foo4</span>().<span class="title function_">call</span>(person2);</span><br></pre></td></tr></table></figure><p>下面是代码解析：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 隐式绑定</span></span><br><span class="line">person1.<span class="title function_">foo1</span>(); <span class="comment">// peron1</span></span><br><span class="line"><span class="comment">// 显示绑定优先级大于隐式绑定</span></span><br><span class="line">person1.<span class="property">foo1</span>.<span class="title function_">call</span>(person2); <span class="comment">// person2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// foo是一个箭头函数，会找上层作用域中的this，那么就是person1</span></span><br><span class="line">person1.<span class="title function_">foo2</span>(); <span class="comment">// person1</span></span><br><span class="line"><span class="comment">// foo是一个箭头函数，使用call调用不会影响this的绑定，和上面一样向上层查找</span></span><br><span class="line">person1.<span class="property">foo2</span>.<span class="title function_">call</span>(person2); <span class="comment">// person1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用位置是全局直接调用，所以依然是window（默认绑定）</span></span><br><span class="line">person1.<span class="title function_">foo3</span>()(); <span class="comment">// window</span></span><br><span class="line"><span class="comment">// 最终还是拿到了foo3返回的函数，在全局直接调用（默认绑定）</span></span><br><span class="line">person1.<span class="property">foo3</span>.<span class="title function_">call</span>(person2)(); <span class="comment">// window</span></span><br><span class="line"><span class="comment">// 拿到foo3返回的函数后，通过call绑定到person2中进行了调用</span></span><br><span class="line">person1.<span class="title function_">foo3</span>().<span class="title function_">call</span>(person2); <span class="comment">// person2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// foo4返回了箭头函数，和自身绑定没有关系，上层找到person1</span></span><br><span class="line">person1.<span class="title function_">foo4</span>()(); <span class="comment">// person1</span></span><br><span class="line"><span class="comment">// foo4调用时绑定了person2，返回的函数是箭头函数，调用时，找到了上层绑定的person2</span></span><br><span class="line">person1.<span class="property">foo4</span>.<span class="title function_">call</span>(person2)(); <span class="comment">// person2</span></span><br><span class="line"><span class="comment">// foo4调用返回的箭头函数，和call调用没有关系，找到上层的person1</span></span><br><span class="line">person1.<span class="title function_">foo4</span>().<span class="title function_">call</span>(person2); <span class="comment">// person1</span></span><br></pre></td></tr></table></figure><h3 id="面试题四："><a href="#面试题四：" class="headerlink" title="面试题四："></a>面试题四：</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">&quot;window&quot;</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">obj</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;obj&quot;</span>,</span><br><span class="line">    <span class="attr">foo1</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">foo2</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;person1&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> person2 = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;person2&quot;</span>);</span><br><span class="line"></span><br><span class="line">person1.<span class="property">obj</span>.<span class="title function_">foo1</span>()();</span><br><span class="line">person1.<span class="property">obj</span>.<span class="property">foo1</span>.<span class="title function_">call</span>(person2)();</span><br><span class="line">person1.<span class="property">obj</span>.<span class="title function_">foo1</span>().<span class="title function_">call</span>(person2);</span><br><span class="line"></span><br><span class="line">person1.<span class="property">obj</span>.<span class="title function_">foo2</span>()();</span><br><span class="line">person1.<span class="property">obj</span>.<span class="property">foo2</span>.<span class="title function_">call</span>(person2)();</span><br><span class="line">person1.<span class="property">obj</span>.<span class="title function_">foo2</span>().<span class="title function_">call</span>(person2);</span><br></pre></td></tr></table></figure><p>下面是代码解析：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// obj.foo1()返回一个函数</span></span><br><span class="line"><span class="comment">// 这个函数在全局作用于下直接执行（默认绑定）</span></span><br><span class="line">person1.<span class="property">obj</span>.<span class="title function_">foo1</span>()(); <span class="comment">// window</span></span><br><span class="line"><span class="comment">// 最终还是拿到一个返回的函数（虽然多了一步call的绑定）</span></span><br><span class="line"><span class="comment">// 这个函数在全局作用于下直接执行（默认绑定）</span></span><br><span class="line">person1.<span class="property">obj</span>.<span class="property">foo1</span>.<span class="title function_">call</span>(person2)(); <span class="comment">// window</span></span><br><span class="line">person1.<span class="property">obj</span>.<span class="title function_">foo1</span>().<span class="title function_">call</span>(person2); <span class="comment">// person2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 拿到foo2()的返回值，是一个箭头函数</span></span><br><span class="line"><span class="comment">// 箭头函数在执行时找上层作用域下的this，就是obj</span></span><br><span class="line">person1.<span class="property">obj</span>.<span class="title function_">foo2</span>()(); <span class="comment">// obj</span></span><br><span class="line"><span class="comment">// foo2()的返回值，依然是箭头函数，但是在执行foo2时绑定了person2</span></span><br><span class="line"><span class="comment">// 箭头函数在执行时找上层作用域下的this，找到的是person2</span></span><br><span class="line">person1.<span class="property">obj</span>.<span class="property">foo2</span>.<span class="title function_">call</span>(person2)(); <span class="comment">// person2</span></span><br><span class="line"><span class="comment">// foo2()的返回值，依然是箭头函数</span></span><br><span class="line"><span class="comment">// 箭头函数通过call调用是不会绑定this，所以找上层作用域下的this是obj</span></span><br><span class="line">person1.<span class="property">obj</span>.<span class="title function_">foo2</span>().<span class="title function_">call</span>(person2); <span class="comment">// obj</span></span><br></pre></td></tr></table></figure>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> JavaScript </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>前端面试题（一）</title>
      <link href="/posts/ff46.html"/>
      <url>/posts/ff46.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>浏览器里，从用户输入 url 到用户看到页面结果的过程，发生了什么？</p></blockquote><p><strong>1、域名解析</strong></p><p>域名解析的过程：</p><p>（1）查询浏览器自身 DNS 缓存</p><p>（2）若上面没有找到，则搜索操作系统自身的 DNS 缓存</p><p>（3）若上面没有找到，则尝试读取 hosts 文件</p><p>（4）若上面没有找到，向本地配置的首选 DNS 服务器发送请求</p><p>（5）win 系统 若上面没有找到，操作系统查找 NetBIOS name cache</p><p>（6）win 系统 若上面没有找到，查询 wins 服务器</p><p>（7）win 系统 若上面没有找到，广播查找</p><p>（8）win 系统 若上面没有找到，读取 LMHOSTS 文件</p><p>若以上都没有找到，解析失败。</p><p><strong>2、TCP 三次握手</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/interview-client01/1.png"></p><p><strong>3、浏览器向服务器发送 http 请求</strong></p><p>一旦建立了 TCP 连接，web 浏览器就会向 web 服务器发送请求命令。例如：</p><p>GET&#x2F;sample&#x2F;hello.jsp HTTP&#x2F;1.1</p><p><strong>4、浏览器发送请求头信息</strong></p><p>浏览器发送请求命令之后，还要以头信息的形式向 web 服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。</p><p><strong>5、服务器处理请求</strong></p><p>服务器收到 http 请求，确定执行什么（asp.net、php、ruby、java 等）来处理他。读取参数并进行逻辑操作后，生成指定的数据。</p><p><strong>6、服务器做出应答</strong></p><p>客户机向服务器发出请求后，服务器会向客户机回送应答，HTTP&#x2F;1.1 200 OK，应答的第一部分是协议的版本号和应答状态码</p><p><strong>7、服务器发送应答头信息</strong></p><p>正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。</p><p><strong>8、服务器发送数据</strong></p><p>web 服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发生到此为结束，接着，它就以 Content-Type 应答头信息所描述的格式发送用户所请求的实际数据。</p><p><strong>9、tcp 连接关闭</strong></p><p>一般情况下，一旦 web 服务器向浏览器发送了请求数据，它就要关闭 tcp 连接，然后如果浏览器或者服务器在其头信息加入了这行代码：</p><p>Connection keep-alive</p><p>TCP 连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。</p><h1 id="浏览器渲染页面的过程"><a href="#浏览器渲染页面的过程" class="headerlink" title="浏览器渲染页面的过程"></a>浏览器渲染页面的过程</h1><ul><li>根据 <code>HTML</code> 结构生成 <code>DOM Tree</code></li><li>根据 <code>CSS</code> 生成 <code>CSSOM</code></li><li>将 <code>DOM</code> 和 <code>CSSOM</code> 整合形成 <code>RenderTree</code></li><li>根据 <code>RenderTree</code> 开始渲染和展示</li><li>遇到 <code>&lt;script&gt;</code> 时，会执行并阻塞渲染，因为 Javascript 代码有权利改变<code>DOM</code>树</li></ul><h2 id="浏览器如何渲染网页"><a href="#浏览器如何渲染网页" class="headerlink" title="浏览器如何渲染网页"></a>浏览器如何渲染网页</h2><p>要了解浏览器渲染页面的过程，首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接收请求来的 HTML、CSS、javascript 等资源，然后解析、构建树、渲染布局、绘制，最后呈现给用户能看到的界面这整个过程。</p><p>用户看到页面实际上可以分为两个阶段：页面内容加载完成和页面资源加载完成，分别对应于<code>DOMContentLoaded</code>和<code>Load</code>。</p><ul><li><code>DOMContentLoaded</code>事件触发时，仅当 DOM 加载完成，不包括样式表，图片等</li><li><code>load</code>事件触发时，页面上所有的 DOM，样式表，脚本，图片都已加载完成</li></ul><p>浏览器渲染的过程主要包括以下五步：</p><ol><li>浏览器将获取的 HTML 文档解析成 DOM 树。</li><li>处理 CSS 标记，构成层叠样式表模型 CSSOM(CSS Object Model)。</li><li>将 DOM 和 CSSOM 合并为渲染树(<code>rendering tree</code>)，代表一系列将被渲染的对象。</li><li>渲染树的每个元素包含的内容都是计算过的，它被称之为布局<code>layout</code>。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。</li><li>将渲染树的各个节点绘制到屏幕上，这一步被称为绘制<code>painting</code>。</li></ol><p>需要注意的是，以上五个步骤并不一定一次性顺序完成，比如 DOM 或 CSSOM 被修改时，亦或是哪个过程会重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中，JavaScript 和 CSS 的某些操作往往会多次修改 DOM 或者 CSSOM。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/interview-client01/2.webp"></p><p>webkit 渲染引擎流程</p><h2 id="浏览器渲染网页的具体流程"><a href="#浏览器渲染网页的具体流程" class="headerlink" title="浏览器渲染网页的具体流程"></a>浏览器渲染网页的具体流程</h2><h3 id="构建-DOM-树"><a href="#构建-DOM-树" class="headerlink" title="构建 DOM 树"></a>构建 DOM 树</h3><p>当浏览器接收到服务器响应来的 HTML 文档后，会遍历文档节点，生成 DOM 树。<br>需要注意以下几点：</p><ul><li>DOM 树在构建的过程中可能会被 CSS 和 JS 的加载而执行阻塞</li><li><code>display:none</code>的元素也会在 DOM 树中</li><li>注释也会在 DOM 树中</li><li><code>script</code>标签会在 DOM 树中</li></ul><p>无论是 DOM 还是 CSSOM，都是要经过<code>Bytes→characters→tokens→nodes→object model</code>这个过程。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/interview-client01/3.webp"></p><p>当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。</p><h3 id="构建-CSSOM-规则树"><a href="#构建-CSSOM-规则树" class="headerlink" title="构建 CSSOM 规则树"></a>构建 CSSOM 规则树</h3><p>浏览器解析 CSS 文件并生成 CSSOM，每个 CSS 文件都被分析成一个 StyleSheet 对象，每个对象都包含 CSS 规则。CSS 规则对象包含对应于 CSS 语法的选择器和声明对象以及其他对象。<br>在这个过程需要注意的是：</p><ul><li>CSS 解析可以与 DOM 解析同时进行。</li><li>CSS 解析与<code>script</code>的执行互斥 。</li><li>在 Webkit 内核中进行了<code>script</code>执行优化，只有在 JS 访问 CSS 时才会发生互斥。</li></ul><h3 id="构建渲染树（Render-Tree）"><a href="#构建渲染树（Render-Tree）" class="headerlink" title="构建渲染树（Render Tree）"></a>构建渲染树（Render Tree）</h3><p>通过 DOM 树和 CSS 规则树，浏览器就可以通过它两构建渲染树了。浏览器会先从 DOM 树的根节点开始遍历每个可见节点，然后对每个可见节点找到适配的 CSS 样式规则并应用。<br>有以下几点需要注意：</p><ul><li>Render Tree 和 DOM Tree 不完全对应</li><li><code>display: none</code>的元素不在 Render Tree 中</li><li><code>visibility: hidden</code>的元素在 Render Tree 中</li></ul><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/interview-client01/4.webp"></p><p>渲染树生成后，还是没有办法渲染到屏幕上，渲染到屏幕需要得到各个节点的位置信息，这就需要布局（Layout）的处理了。</p><h3 id="渲染树布局-layout-of-the-render-tree"><a href="#渲染树布局-layout-of-the-render-tree" class="headerlink" title="渲染树布局(layout of the render tree)"></a>渲染树布局(layout of the render tree)</h3><p>布局阶段会从渲染树的根节点开始遍历，由于渲染树的每个节点都是一个 Render Object 对象，包含宽高，位置，背景色等样式信息。所以浏览器就可以通过这些样式信息来确定每个节点对象在页面上的确切大小和位置，布局阶段的输出就是我们常说的盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。需要注意的是：</p><ul><li><code>float</code>元素，<code>absoulte</code>元素，<code>fixed</code>元素会发生位置偏移。</li><li>我们常说的脱离文档流，其实就是脱离 Render Tree。</li></ul><h3 id="渲染树绘制（Painting-the-render-tree）"><a href="#渲染树绘制（Painting-the-render-tree）" class="headerlink" title="渲染树绘制（Painting the render tree）"></a>渲染树绘制（Painting the render tree）</h3><p>在绘制阶段，浏览器会遍历渲染树，调用渲染器的<code>paint()</code>方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的 UI 后端组件完成的。</p><h2 id="浏览器渲染网页的那些事儿"><a href="#浏览器渲染网页的那些事儿" class="headerlink" title="浏览器渲染网页的那些事儿"></a>浏览器渲染网页的那些事儿</h2><h3 id="浏览器主要组件结构"><a href="#浏览器主要组件结构" class="headerlink" title="浏览器主要组件结构"></a>浏览器主要组件结构</h3><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/interview-client01/5.webp"></p><p>浏览器主要组件</p><p>渲染引擎主要有两个：webkit 和 Gecko<br>Firefox 使用 Geoko，Mozilla 自主研发的渲染引擎。Safari 和 Chrome 都使用 webkit。Webkit 是一款开源渲染引擎，它本来是为 linux 平台研发的，后来由 Apple 移植到 Mac 及 Windows 上。<br>虽然主流浏览器渲染过程叫法有区别，但是主要流程还是相同的。</p><h3 id="渲染阻塞"><a href="#渲染阻塞" class="headerlink" title="渲染阻塞"></a>渲染阻塞</h3><p>JS 可以操作 DOM 来修改 DOM 结构，可以操作 CSSOM 来修改节点样式，这就导致了浏览器在遇到<code>&lt;script&gt;</code>标签时，DOM 构建将暂停，直至脚本完成执行，然后继续构建 DOM。如果脚本是外部的，会等待脚本下载完毕，再继续解析文档。现在可以在<code>script</code>标签上增加属性<code>defer</code>或者<code>async</code>。脚本解析会将脚本中改变 DOM 和 CSS 的地方分别解析出来，追加到 DOM 树和 CSSOM 规则树上。</p><p>每次去执行 JavaScript 脚本都会严重地阻塞 DOM 树的构建，如果 JavaScript 脚本还操作了 CSSOM，而正好这个 CSSOM 还没有下载和构建，浏览器甚至会延迟脚本执行和构建 DOM，直至完成其 CSSOM 的下载和构建。所以，<code>script</code>标签的位置很重要。</p><p>JS 阻塞了构建 DOM 树，也阻塞了其后的构建 CSSOM 规则树，整个解析进程必须等待 JS 的执行完成才能够继续，这就是所谓的 JS 阻塞页面。</p><p>由于 CSSOM 负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM 是完备的，这种完备是指所有的 CSS（内联、内部和外部）都已经下载完，并解析完，只有 CSSOM 和 DOM 的解析完全结束，浏览器才会进入下一步的渲染，这就是 CSS 阻塞渲染。</p><p>CSS 阻塞渲染意味着，在 CSSOM 完备前，页面将一直处理白屏状态，这就是为什么样式放在<code>head</code>中，仅仅是为了更快的解析 CSS，保证更快的首次渲染。</p><p>需要注意的是，即便你没有给页面任何的样式声明，CSSOM 依然会生成，默认生成的 CSSOM 自带浏览器默认样式。</p><p>当解析 HTML 的时候，会把新来的元素插入 DOM 树里面，同时去查找 CSS，然后把对应的样式规则应用到元素上，查找样式表是按照从右到左的顺序去匹配的。</p><p>例如：<code>div p &#123;font-size: 16px&#125;</code>，会先寻找所有<code>p</code>标签并判断它的父标签是否为<code>div</code>之后才会决定要不要采用这个样式进行渲染）。<br>所以，我们平时写 CSS 时，尽量用<code>id</code>和<code>class</code>，千万不要过渡层叠。</p><h4 id="回流和重绘（reflow-和-repaint）"><a href="#回流和重绘（reflow-和-repaint）" class="headerlink" title="回流和重绘（reflow 和 repaint）"></a>回流和重绘（reflow 和 repaint）</h4><p>我们都知道 HTML 默认是流式布局的，但 CSS 和 JS 会打破这种布局，改变 DOM 的外观样式以及大小和位置。因此我们就需要知道两个概念：<code>replaint</code>和<code>reflow</code>。</p><h3 id="reflow（回流）"><a href="#reflow（回流）" class="headerlink" title="reflow（回流）"></a>reflow（回流）</h3><p>当浏览器发现布局发生了变化，这个时候就需要倒回去重新渲染，这个回退的过程叫<code>reflow</code>。<code>reflow</code>会从<code>html</code>这个<code>root frame</code>开始递归往下，依次计算所有的结点几何尺寸和位置，以确认是渲染树的一部分发生变化还是整个渲染树。<code>reflow</code>几乎是无法避免的，因为只要用户进行交互操作，就势必会发生页面的一部分的重新渲染，且通常我们也无法预估浏览器到底会<code>reflow</code>哪一部分的代码，因为他们会相互影响。</p><h3 id="repaint（重绘）"><a href="#repaint（重绘）" class="headerlink" title="repaint（重绘）"></a>repaint（重绘）</h3><p><code>repaint</code>则是当我们改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸和位置没有发生改变。</p><p>需要注意的是，<code>display:none</code>会触发<code>reflow</code>，而<code>visibility: hidden</code>属性则并不算是不可见属性，它的语义是隐藏元素，但元素仍然占据着布局空间，它会被渲染成一个空框。所以<code>visibility:hidden</code>只会触发<code>repaint</code>，因为没有发生位置变化。</p><p>另外有些情况下，比如修改了元素的样式，浏览器并不会立刻<code>reflow</code>或<code>repaint</code>一次，而是会把这样的操作积攒一批，然后做一次<code>reflow</code>，这又叫异步<code>reflow</code>或增量异步<code>reflow</code>。但是在有些情况下，比如<code>resize</code>窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行<code>reflow</code>。</p><h3 id="引起-reflow"><a href="#引起-reflow" class="headerlink" title="引起 reflow"></a>引起 reflow</h3><p>现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流。</p><ul><li>页面第一次渲染（初始化）</li><li>DOM 树变化（如：增删节点）</li><li>Render 树变化（如：<code>padding</code>改变）</li><li>浏览器窗口<code>resize</code></li><li>获取元素的某些属性</li></ul><p>浏览器为了获得正确的值也会提前触发回流，这样就使得浏览器的优化失效了，这些属性包括<code>offsetLeft、offsetTop、offsetWidth、offsetHeight、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height</code>、调用了<code>getComputedStyle()</code>。</p><h3 id="引起-repaint"><a href="#引起-repaint" class="headerlink" title="引起 repaint"></a>引起 repaint</h3><p><code>reflow</code>回流必定引起<code>repaint</code>重绘，重绘可以单独触发。<br>背景色、颜色、字体改变（注意：字体大小发生变化时，会触发回流）</p><h4 id="减少-reflow、repaint-触发次数"><a href="#减少-reflow、repaint-触发次数" class="headerlink" title="减少 reflow、repaint 触发次数"></a>减少 reflow、repaint 触发次数</h4><ul><li>用<code>transform</code>做形变和位移可以减少<code>reflow</code></li><li>避免逐个修改节点样式，尽量一次性修改</li><li>使用<code>DocumentFragment</code>将需要多次修改的 DOM 元素缓存，最后一次性<code>append</code>到真实 DOM 中渲染</li><li>可以将需要多次修改的 DOM 元素设置<code>display:none</code>，操作完再显示。（因为隐藏元素不在<code>render</code>树内，因此修改隐藏元素不会触发回流重绘）</li><li>避免多次读取某些属性</li><li>通过绝对位移将复杂的节点元素脱离文档流，形成新的 Render Layer，降低回流成本</li></ul><h2 id="几条关于优化渲染效率的建议"><a href="#几条关于优化渲染效率的建议" class="headerlink" title="几条关于优化渲染效率的建议"></a>几条关于优化渲染效率的建议</h2><p>结合上文有以下几点可以优化渲染效率。</p><ul><li>合法地去书写 HTML 和 CSS ，且不要忘了文档编码类型。</li><li>样式文件应当在<code>head</code>标签中，而脚本文件在<code>body</code>结束前，这样可以防止阻塞的方式。</li><li>简化并优化 CSS 选择器，尽量将嵌套层减少到最小。</li><li>DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。</li><li>如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。</li><li>不要一条条地改变样式，而要通过改变<code>class</code>，或者<code>csstext</code>属性，一次性地改变样式。</li><li>尽量用<code>transform</code>来做形变和位移</li><li>尽量使用离线 DOM，而不是真实的网页 DOM，来改变元素样式。比如，操作<code>Document Fragment</code>对象，完成后再把这个对象加入 DOM。再比如，使用<code>cloneNode()</code>方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。</li><li>先将元素设为<code>display: none</code>（需要 1 次重排和重绘），然后对这个节点进行 100 次操作，最后再恢复显示（需要 1 次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达 100 次的重新渲染。</li><li><code>position</code>属性为<code>absolute</code>或<code>fixed</code>的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。</li><li>只在必要的时候，才将元素的<code>display</code>属性为可见，因为不可见的元素不影响重排和重绘。另外，<code>visibility : hidden</code>的元素只对重绘有影响，不影响重排。</li><li>使用<code>window.requestAnimationFrame()</code>、<code>window.requestIdleCallback()</code>这两个方法调节重新渲染。</li></ul><h1 id="箭头函数和普通函数的区别"><a href="#箭头函数和普通函数的区别" class="headerlink" title="箭头函数和普通函数的区别"></a>箭头函数和普通函数的区别</h1><ol><li>箭头函数没有自己的 this,继承外层代码块的 this。</li><li>不能当做构造函数，也就是说不可以使用 new 命令，否则会报错的。</li><li>不能使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。</li><li>不能使用 yield 命令，因此箭头函数不能用作 Generator（生成器） 函数。</li><li>因为没有 this,所以不能使用 call、bind、apply 来改变 this 的指向。</li></ol><h1 id="数组常用方法"><a href="#数组常用方法" class="headerlink" title="数组常用方法"></a>数组常用方法</h1><blockquote><p>Array 对象属性</p></blockquote><ol><li><p>constructor 属性返回对创建此对象的数组函数的引用。</p></li><li><p>prototype 属性使您有能力向对象添加属性和方法。</p></li><li><p>length 属性可设置或返回数组中元素的数目。</p></li></ol><p>设置 length 属性可改变数组的大小。如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。</p><h2 id="一、改变原来数组的方法"><a href="#一、改变原来数组的方法" class="headerlink" title="一、改变原来数组的方法"></a>一、改变原来数组的方法</h2><ol><li><code>pop()</code> <strong>获取数组最后一个元素（改变原数组）、删除数组最后一个元素</strong></li></ol><p>arrayObject.pop()</p><p>js 内置的 pop()方法可用于删除并并返回数组的最后一个元素，注意这里获取了数组的最后一个元素的同时也将原数组的最后一个元素删除了。如果数组为空，则该方法不改变数组，并返回 undefined</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> list = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> last = list.<span class="title function_">pop</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(list); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(last); <span class="comment">// 4</span></span><br></pre></td></tr></table></figure><ol start="2"><li><code>push</code> <strong>数组尾部添加元素（返回数组的新长度）</strong></li></ol><p>push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arrayObject.<span class="title function_">push</span>(newelement1,newelement2,....,newelementX)</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 尾部添加数组元素</span></span><br><span class="line"><span class="keyword">let</span> arr6 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> arr7 = arr6.<span class="title function_">push</span>(<span class="number">4</span>, <span class="number">5</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr6, arr7); <span class="comment">//  [1, 2, 3, 4, 5] 5</span></span><br><span class="line">arr6.<span class="title function_">push</span>(<span class="number">6</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr6); <span class="comment">//  [1, 2, 3, 4, 5, 6]</span></span><br><span class="line">arr6 = arr6.<span class="title function_">push</span>(<span class="number">7</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr6); <span class="comment">// 7</span></span><br></pre></td></tr></table></figure><ol start="3"><li><code>reverse</code> <strong>颠倒数组的顺序（改变原数组）</strong></li></ol><p>arrayObject.reverse()</p><p>reverse() 方法用于颠倒数组中元素的顺序。该方法会改变原来的数组，而不会创建新的数组。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr8 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="keyword">let</span> arr9 = arr8.<span class="title function_">reverse</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr8, arr9); <span class="comment">// [6, 5, 4, 3, 2, 1]  [6, 5, 4, 3, 2, 1]</span></span><br></pre></td></tr></table></figure><ol start="4"><li><code>shift</code> <strong>获取数组的第一个元素（改变原数组）、删除数组第一个元素</strong></li></ol><p>arrayObject.shift()</p><p>shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 删除第一个元素,并返回第一个元素的值</span></span><br><span class="line"><span class="keyword">let</span> arr10 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> arr11 = arr10.<span class="title function_">shift</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr10, arr11); <span class="comment">// [2, 3, 4] 1</span></span><br></pre></td></tr></table></figure><ol start="5"><li><code>splice</code> <strong>向数组中添加或删除元素（改变原数组），然后返回被删除的元素</strong></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arrayObject.<span class="title function_">splice</span>(index,howmany,item1,.....,itemX)</span><br></pre></td></tr></table></figure><p><code>index</code>：必需。整数，规定添加&#x2F;删除项目的位置，使用负数可从数组结尾处规定位置。</p><p><code>howmany</code>：必需。要删除的项目数量。如果设置为 0，则不会删除项目。</p><p><code>item1</code>, …, itemX：可选。向数组添加的新项目。</p><p><code>splice() </code>方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。</p><p>如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。</p><p>所有主流浏览器都支持 splice() 方法。</p><p>注释：请注意，splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//  从数组中添加/删除项目，然后返回被删除的项目</span></span><br><span class="line"><span class="keyword">let</span> arr19 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="keyword">let</span> arr20 = arr19.<span class="title function_">splice</span>(<span class="number">1</span>, <span class="number">4</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr20, arr19); <span class="comment">// [2, 3, 4, 5]  [1, 6]</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr21 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="keyword">let</span> arr22 = arr21.<span class="title function_">splice</span>(<span class="number">1</span>, <span class="number">4</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">666</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr22, arr21); <span class="comment">//  [2, 3, 4, 5]  [1,222,333,666,6]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">6</span>);</span><br><span class="line">arr[<span class="number">0</span>] = <span class="string">&quot;George&quot;</span>;</span><br><span class="line">arr[<span class="number">1</span>] = <span class="string">&quot;John&quot;</span>;</span><br><span class="line">arr[<span class="number">2</span>] = <span class="string">&quot;Thomas&quot;</span>;</span><br><span class="line">arr[<span class="number">3</span>] = <span class="string">&quot;James&quot;</span>;</span><br><span class="line">arr[<span class="number">4</span>] = <span class="string">&quot;Adrew&quot;</span>;</span><br><span class="line">arr[<span class="number">5</span>] = <span class="string">&quot;Martin&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">write</span>(arr + <span class="string">&quot;&lt;br /&gt;&quot;</span>);</span><br><span class="line">arr.<span class="title function_">splice</span>(<span class="number">2</span>, <span class="number">0</span>, <span class="string">&quot;William&quot;</span>);</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">write</span>(arr + <span class="string">&quot;&lt;br /&gt;&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="title class_">George</span>, <span class="title class_">John</span>, <span class="title class_">Thomas</span>, <span class="title class_">James</span>, <span class="title class_">Adrew</span>, <span class="title class_">Martin</span>;</span><br><span class="line"><span class="title class_">George</span>, <span class="title class_">John</span>, <span class="title class_">William</span>, <span class="title class_">Thomas</span>, <span class="title class_">James</span>, <span class="title class_">Adrew</span>, <span class="title class_">Martin</span>;</span><br></pre></td></tr></table></figure><ol start="6"><li><code>unshift</code> <strong>向数组的开头添加一个或更多元素(改变原数组)，并返回新的长度</strong></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arrayObject.<span class="title function_">unshift</span>(newelement1,newelement2,....,newelementX)</span><br></pre></td></tr></table></figure><p>第一个参数必填。向数组添加的元素</p><p>unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。</p><p>该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。</p><p>请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。</p><p>注释：该方法会改变数组的长度。</p><p>注释：unshift() 方法无法在 Internet Explorer 中正确地工作</p><ol start="7"><li><code>sort</code> <strong>对数组元素进行排序（改变原数组）</strong></li></ol><p>arrayObject.sort(sortby)</p><p>对数组的引用。请注意，数组在原数组上进行排序，不生成副本。</p><p>参数可选。规定排序顺序。必须是函数。</p><p>如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。</p><p>要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组的排序</span></span><br><span class="line"><span class="keyword">let</span> arr = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">6</span>);</span><br><span class="line">arr[<span class="number">0</span>] = <span class="string">&quot;George&quot;</span>;</span><br><span class="line">arr[<span class="number">1</span>] = <span class="string">&quot;John&quot;</span>;</span><br><span class="line">arr[<span class="number">2</span>] = <span class="string">&quot;Thomas&quot;</span>;</span><br><span class="line">arr[<span class="number">3</span>] = <span class="string">&quot;James&quot;</span>;</span><br><span class="line">arr[<span class="number">4</span>] = <span class="string">&quot;Adrew&quot;</span>;</span><br><span class="line">arr[<span class="number">5</span>] = <span class="string">&quot;Martin&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> arr16 = arr.<span class="title function_">sort</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr16, arr);</span><br><span class="line"><span class="comment">// [&quot;Adrew&quot;, &quot;George&quot;, &quot;James&quot;, &quot;John&quot;, &quot;Martin&quot;, &quot;Thomas&quot;]</span></span><br><span class="line"><span class="comment">// [&quot;Adrew&quot;, &quot;George&quot;, &quot;James&quot;, &quot;John&quot;, &quot;Martin&quot;, &quot;Thomas&quot;]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr17 = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">6</span>);</span><br><span class="line">arr17[<span class="number">0</span>] = <span class="string">&quot;10&quot;</span>;</span><br><span class="line">arr17[<span class="number">1</span>] = <span class="string">&quot;5&quot;</span>;</span><br><span class="line">arr17[<span class="number">2</span>] = <span class="string">&quot;40&quot;</span>;</span><br><span class="line">arr17[<span class="number">3</span>] = <span class="string">&quot;25&quot;</span>;</span><br><span class="line">arr17[<span class="number">4</span>] = <span class="string">&quot;1000&quot;</span>;</span><br><span class="line">arr17[<span class="number">5</span>] = <span class="string">&quot;1&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr17.<span class="title function_">sort</span>());</span><br><span class="line"><span class="comment">//  [&quot;1&quot;, &quot;10&quot;, &quot;1000&quot;, &quot;25&quot;, &quot;40&quot;, &quot;5&quot;]</span></span><br></pre></td></tr></table></figure><p>如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。</p><p>比较函数应该具有两个参数 a 和 b，其返回值如下：</p><p>若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。</p><p>若 a 等于 b，则返回 0。</p><p>若 a 大于 b，则返回一个大于 0 的值。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sortNumber</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> a - b;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arr18 = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">6</span>);</span><br><span class="line">arr18[<span class="number">0</span>] = <span class="string">&quot;10&quot;</span>;</span><br><span class="line">arr18[<span class="number">1</span>] = <span class="string">&quot;5&quot;</span>;</span><br><span class="line">arr18[<span class="number">2</span>] = <span class="string">&quot;40&quot;</span>;</span><br><span class="line">arr18[<span class="number">3</span>] = <span class="string">&quot;25&quot;</span>;</span><br><span class="line">arr18[<span class="number">4</span>] = <span class="string">&quot;1000&quot;</span>;</span><br><span class="line">arr18[<span class="number">5</span>] = <span class="string">&quot;1&quot;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr18.<span class="title function_">sort</span>(sortNumber)); <span class="comment">// [&quot;1&quot;, &quot;5&quot;, &quot;10&quot;, &quot;25&quot;, &quot;40&quot;, &quot;1000&quot;]</span></span><br></pre></td></tr></table></figure><h2 id="二、不改变原来数组的方法"><a href="#二、不改变原来数组的方法" class="headerlink" title="二、不改变原来数组的方法"></a>二、不改变原来数组的方法</h2><ol><li><code>concat</code> <strong>连接多个数组或元素（不改变原数组）</strong></li></ol><p>arrayObject.concat(arrayX,arrayX,……,arrayX)</p><p>concat() 方法用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。</p><p>该参数可以是具体的值，也可以是数组对象。可以是任意多个。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> arr2 = [<span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="comment">// 1. 数组的合并</span></span><br><span class="line"><span class="keyword">let</span> arr3 = arr1.<span class="title function_">concat</span>(arr2);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr1, arr2, arr3);</span><br><span class="line"><span class="comment">// [1,2,3] [4,5]  [1,2,3,4,5]</span></span><br><span class="line"></span><br><span class="line">arr3 = arr3.<span class="title function_">concat</span>(<span class="number">6</span>, <span class="number">7</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr3); <span class="comment">// [1, 2, 3, 4, 5, 6, 7]</span></span><br></pre></td></tr></table></figure><ol start="2"><li><code>join</code> <strong>将数组用分隔符连接成字符串（不改变原数组）</strong></li></ol><p>arrayObject.join(separator)</p><p>join() 方法用于把数组中的所有元素放入一个字符串。</p><p>元素是通过指定的分隔符进行分隔的。</p><p>该参数<code>可选</code>。</p><p>指定要使用的分隔符，如果省略该参数，则使用逗号作为分隔符。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//   数组转换成字符串，并使用分隔符连接</span></span><br><span class="line"><span class="keyword">let</span> arr4 = [<span class="number">2019</span>, <span class="number">3</span>, <span class="number">14</span>];</span><br><span class="line"><span class="keyword">let</span> arr5 = arr4.<span class="title function_">join</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr4, arr5); <span class="comment">// [2019, 3, 14] &quot;2019,3,14&quot;</span></span><br><span class="line">arr4 = arr4.<span class="title function_">join</span>(<span class="string">&quot;.&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr4); <span class="comment">// 2019.3.14</span></span><br></pre></td></tr></table></figure><ol start="3"><li><code>slice</code> <strong>截取原数组中某段元素（不改变原数组）</strong></li></ol><p>arrayObject.slice(start,end)</p><p><code>slice()</code> 方法可从已有的数组中返回选定的元素。</p><p>返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。</p><p>start：<code>必需</code>。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。</p><p>end：<code>可选</code>。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。</p><p>请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 从原数组中返回选定的元素</span></span><br><span class="line"><span class="keyword">let</span> arr12 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> arr13 = arr12.<span class="title function_">slice</span>(<span class="number">1</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr12, arr13); <span class="comment">// [1, 2, 3, 4]  [2, 3, 4]</span></span><br><span class="line"><span class="keyword">let</span> arr14 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> arr15 = arr14.<span class="title function_">slice</span>(-<span class="number">1</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr14, arr15); <span class="comment">// [1, 2, 3, 4]  4</span></span><br></pre></td></tr></table></figure><ol start="4"><li><code>toString</code> <strong>把数组转换为字符串，并返回结果（不改变原数组）</strong></li></ol><p>arrayObject.toString()</p><p>toString() 方法可把数组转换为字符串，并返回结果。</p><p>arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。</p><p>当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下，需要显式地调用该方法。</p><p>注释：数组中的元素之间用逗号分隔</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 将数组转换成字符串</span></span><br><span class="line"><span class="keyword">let</span> arr23 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> arr24 = arr23.<span class="title function_">toString</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr23, arr24); <span class="comment">// [1, 2, 3, 4] &quot;1,2,3,4&quot;</span></span><br></pre></td></tr></table></figure><ol start="5"><li><code>toLocaleString</code> <strong>把数组转换为本地字符串(不改变原数组)</strong></li></ol><p>arrayObject.toLocaleString()</p><p>arrayObject 的本地字符串表示。首先调用每个数组元素的 toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 把数组转换为本地字符串  返回格式化对象后的字符串，该字符串格式因语言不同返回值也会不同，可以通过传参决定返回的语言及具体的表现</span></span><br><span class="line"><span class="keyword">let</span> arr25 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> arr26 = arr25.<span class="title function_">toLocaleString</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr25, arr26); <span class="comment">// [1, 2, 3, 4] &quot;1,2,3,4&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = <span class="number">12222</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a.<span class="title function_">toLocaleString</span>()); <span class="comment">// 12,222 (整数部分每三位加一个逗号)</span></span><br></pre></td></tr></table></figure>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 面试经验 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>vue面试题</title>
      <link href="/posts/bd4e.html"/>
      <url>/posts/bd4e.html</url>
      
        <content type="html"><![CDATA[<p>20 道常见的面试题</p><p>摘自 boss 直聘<code>陈大鱼头</code></p><blockquote><p>尽量减少 data 中的数据，data 中的数据都会增加 getter 和 setter，会收集对应的 watcher</p></blockquote><p>从镜片的厚度和黄黑相见的格子衬衫我察觉到，面前坐着的这位面试官应该是来者不善。我像以往一样，准备花 3 分钟的时间进行自我介绍。</p><p>在此期间，为了避免尴尬，我盯着面试官的眉毛中间，不过面试官明显对我的经历不是很感兴趣。他在 1 分半的时候打断了我。</p><blockquote><p><strong>你觉得自己最擅长的技术栈是什么？</strong></p></blockquote><p>Vue 吧，我很喜欢尤大，最近刚发布了 Vue 的首部纪录片，真的很好看。</p><h3 id="那你能讲一讲-MVVM-吗？"><a href="#那你能讲一讲-MVVM-吗？" class="headerlink" title="那你能讲一讲 MVVM 吗？"></a><strong>那你能讲一讲 MVVM 吗？</strong></h3><p>MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件，</p><p>ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。</p><h3 id="简单说一下-Vue2-x-响应式数据原理"><a href="#简单说一下-Vue2-x-响应式数据原理" class="headerlink" title="简单说一下 Vue2.x 响应式数据原理"></a><strong>简单说一下 Vue2.x 响应式数据原理</strong></h3><p>Vue 在初始化数据时，会使用 Object.defineProperty 重新定义 data 中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的 watcher)</p><p>如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。</p><h3 id="那你知道-Vue3-x-响应式数据原理吗？"><a href="#那你知道-Vue3-x-响应式数据原理吗？" class="headerlink" title="那你知道 Vue3.x 响应式数据原理吗？"></a><strong>那你知道 Vue3.x 响应式数据原理吗？</strong></h3><p>(还好我有看，这个难不倒我)</p><p>Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。</p><p>并且作为新标准将受到浏览器厂商重点持续的性能优化。</p><blockquote><p>“ Proxy 只会代理对象的第一层，那么 Vue3 又是怎样处理这个问题的呢？”</p></blockquote><p>（很简单啊）</p><p>判断当前 Reflect.get 的返回值是否为 Object，如果是则再通过 reactive 方法做代理， 这样就实现了深度观测。</p><blockquote><p>“ 监测数组的时候可能触发多次 get&#x2F;set，那么如何防止触发多次呢？”</p></blockquote><p>我们可以判断 key 是否为当前被代理对象 target 自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行 trigger。</p><p>面试官抬起了头。心里暗想</p><p>(这小子还行，比上两个强，应该是多多少少看过 Vue3 的源码了)</p><h3 id="再说一下-vue2-x-中如何监测数组变化"><a href="#再说一下-vue2-x-中如何监测数组变化" class="headerlink" title="再说一下 vue2.x 中如何监测数组变化"></a><strong>再说一下 vue2.x 中如何监测数组变化</strong></h3><p>使用了函数劫持的方式，重写了数组的方法，Vue 将 data 中的数组进行了原型链重写，指向了自己定义的数组原型方法。</p><p>这样当调用数组 api 时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。</p><p>（能问到这的面试官都比较注重深度，这些常规操作要记牢）</p><p>（原型链的细节可以参考我的另一篇专栏）</p><h3 id="nextTick-知道吗，实现原理是什么？"><a href="#nextTick-知道吗，实现原理是什么？" class="headerlink" title="nextTick 知道吗，实现原理是什么？"></a><strong>nextTick 知道吗，实现原理是什么？</strong></h3><p>在下次 DOM 更新循环结束之后执行延迟回调。nextTick 主要使用了宏任务和微任务。根据执行环境分别尝试采用</p><p>Promise</p><p>MutationObserver</p><p>setImmediate</p><p>如果以上都不行则采用 setTimeout</p><p>定义了一个异步方法，多次调用 nextTick 会将方法存入队列中，通过这个异步方法清空当前队列。</p><p>（关于宏任务和微任务以及事件循环可以参考我的另两篇专栏）</p><p>(看到这你就会发现，其实问框架最终还是考验你的原生 JavaScript 功底)</p><h3 id="说一下-Vue-的生命周期"><a href="#说一下-Vue-的生命周期" class="headerlink" title="说一下 Vue 的生命周期"></a><strong>说一下 Vue 的生命周期</strong></h3><p>beforeCreate 是 new Vue()之后触发的第一个钩子，在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。</p><p>created 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发 updated 函数。</p><p>可以做一些初始数据的获取，在当前阶段无法与 Dom 进行交互，如果非要想，可以通过 vm.$nextTick 来访问 Dom。</p><p>beforeMount 发生在挂载之前，在这之前 template 模板已导入渲染函数编译。而当前阶段虚拟 Dom 已经创建完成，即将开始渲染。</p><p>在此时也可以对数据进行更改，不会触发 updated。</p><p>mounted 在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom 节点，使用$refs 属性对 Dom 进行操作。</p><p>beforeUpdate 发生在更新之前，也就是响应式数据发生更新，虚拟 dom 重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。</p><p>updated 发生在更新完成之后，当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。</p><p>beforeDestroy 发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。</p><p>destroyed 发生在实例销毁之后，这个时候只剩下了 dom 空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。</p><p>(关于 Vue 的生命周期详解感兴趣的也请移步我的另一篇专栏)</p><h3 id="你的接口请求一般放在哪个生命周期中？"><a href="#你的接口请求一般放在哪个生命周期中？" class="headerlink" title="你的接口请求一般放在哪个生命周期中？"></a><strong>你的接口请求一般放在哪个生命周期中？</strong></h3><p>接口请求一般放在 mounted 中，但需要注意的是服务端渲染时不支持 mounted，需要放到 created 中。</p><h3 id="再说一下-Computed-和-Watch"><a href="#再说一下-Computed-和-Watch" class="headerlink" title="再说一下 Computed 和 Watch"></a><strong>再说一下 Computed 和 Watch</strong></h3><p>Computed 本质是一个具备缓存的 watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。</p><p>当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。</p><p>Watch 没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开 deep：true 选项，</p><p>这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用 unWatch 手动注销哦。</p><h3 id="说一下-v-if-和-v-show-的区别"><a href="#说一下-v-if-和-v-show-的区别" class="headerlink" title="说一下 v-if 和 v-show 的区别"></a><strong>说一下 v-if 和 v-show 的区别</strong></h3><p>当条件不成立时，v-if 不会渲染 DOM 元素，v-show 操作的是样式(display)，切换当前 DOM 的显示和隐藏。</p><h3 id="组件中的-data-为什么是一个函数？"><a href="#组件中的-data-为什么是一个函数？" class="headerlink" title="组件中的 data 为什么是一个函数？"></a><strong>组件中的 data 为什么是一个函数？</strong></h3><p>一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果 data 是对象的话，对象属于引用类型，会影响到所有的实例。</p><p>所以为了保证组件不同的实例之间 data 不冲突，data 必须是一个函数。</p><h3 id="说一下-v-model-的原理"><a href="#说一下-v-model-的原理" class="headerlink" title="说一下 v-model 的原理"></a><strong>说一下 v-model 的原理</strong></h3><p>v-model 本质就是一个语法糖，可以看成是 value + input 方法的语法糖。可以通过 model 属性的 prop 和 event 属性来进行自定义。</p><p>原生的 v-model，会根据标签的不同生成不同的事件和属性。</p><h3 id="Vue-事件绑定原理说一下"><a href="#Vue-事件绑定原理说一下" class="headerlink" title="Vue 事件绑定原理说一下"></a><strong>Vue 事件绑定原理说一下</strong></h3><p>原生事件绑定是通过 addEventListener 绑定给真实元素的，组件事件绑定是通过 Vue 自定义的$on 实现的。</p><blockquote><p>“ 面试官：(这小子基础还可以，接下来我得上上难度了） ”</p></blockquote><h3 id="Vue-模版编译原理知道吗，能简单说一下吗？"><a href="#Vue-模版编译原理知道吗，能简单说一下吗？" class="headerlink" title="Vue 模版编译原理知道吗，能简单说一下吗？"></a><strong>Vue 模版编译原理知道吗，能简单说一下吗？</strong></h3><p>简单说，Vue 的编译过程就是将 template 转化为 render 函数的过程。会经历以下阶段：</p><p>生成 AST 树</p><p>优化</p><p>codegen</p><p>首先解析模版，生成 AST 语法树(一种用 JavaScript 对象的形式来描述整个模板)。使用大量的正则表达式对模板进行解析，</p><p>遇到标签、文本的时候都会执行对应的钩子进行相关处理。</p><p>Vue 的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的 DOM 也不会变化。</p><p>那么优化过程就是深度遍历 AST 树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。</p><p>编译的最后一步是将优化后的 AST 树转换为可执行的代码。</p><blockquote><p>“ 面试官：(精神小伙啊，有点东西，难度提升，不信难不倒你）”</p></blockquote><h3 id="Vue2-x-和-Vue3-x-渲染器的-diff-算法分别说一下"><a href="#Vue2-x-和-Vue3-x-渲染器的-diff-算法分别说一下" class="headerlink" title="Vue2.x 和 Vue3.x 渲染器的 diff 算法分别说一下"></a><strong>Vue2.x 和 Vue3.x 渲染器的 diff 算法分别说一下</strong></h3><p>简单来说，diff 算法有以下过程</p><p>同级比较，再比较子节点</p><p>先判断一方有子节点一方没有子节点的情况(如果新的 children 没有子节点，将旧的子节点移除)</p><p>比较都有子节点的情况(核心 diff)</p><p>递归比较子节点</p><p>正常 Diff 两个树的时间复杂度是 O(n^3)，但实际情况下我们很少会进行跨层级的移动 DOM，所以 Vue 将 Diff 进行了优化，从 O(n^3) -&gt; O(n)，</p><p>只有当新旧 children 都为多个子节点时才需要用核心的 Diff 算法进行同层级比较。</p><p>Vue2 的核心 Diff 算法采用了双端比较的算法，同时从新旧 children 的两端开始进行比较，借助 key 值找到可复用的节点，再进行相关操作。</p><p>相比 React 的 Diff 算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。</p><p>Vue3.x 借鉴了 ivi 算法和 inferno 算法</p><p>在创建 VNode 时就确定其类型，以及在 mount&#x2F;patch 的过程中采用位运算来判断一个 VNode 的类型，在这个基础之上再配合核心的 Diff 算法，</p><p>使得性能上较 Vue2.x 有了提升。(实际的实现可以结合 Vue3.x 源码看。)</p><p>该算法中还运用了动态规划的思想求解最长递归子序列。</p><p>(看到这你还会发现，框架内无处不蕴藏着数据结构和算法的魅力)</p><blockquote><p>“ 面试官：(可以可以，看来是个苗子，不过自我介绍属实有些无聊，下一题) ”</p></blockquote><h3 id="再说一下虚拟-Dom-以及-key-属性的作用"><a href="#再说一下虚拟-Dom-以及-key-属性的作用" class="headerlink" title="再说一下虚拟 Dom 以及 key 属性的作用"></a><strong>再说一下虚拟 Dom 以及 key 属性的作用</strong></h3><p>由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产生一定的性能问题。这就是虚拟 Dom 的产生原因。</p><p>Vue2 的 Virtual DOM 借鉴了开源库 snabbdom 的实现。</p><p>Virtual DOM 本质就是用一个原生的 JS 对象去描述一个 DOM 节点。是对真实 DOM 的一层抽象。(也就是源码中的 VNode 类，它定义在 src&#x2F;core&#x2F;vdom&#x2F;vnode.js 中。)</p><p>VirtualDOM 映射到真实 DOM 要经历 VNode 的 create、diff、patch 等阶段。</p><p>「key 的作用是尽可能的复用 DOM 元素。」</p><p>新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。</p><p>需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key 也就是 children 中节点的唯一标识。</p><h3 id="keep-alive-了解吗？"><a href="#keep-alive-了解吗？" class="headerlink" title="keep-alive 了解吗？"></a><strong>keep-alive 了解吗？</strong></h3><p>keep-alive 可以实现组件缓存，当组件切换时不会对当前组件进行卸载。</p><p>常用的两个属性 include&#x2F;exclude，允许组件有条件的进行缓存。</p><p>两个生命周期 activated&#x2F;deactivated，用来得知当前组件是否处于活跃状态。</p><p>keep-alive 的中还运用了 LRU(Least Recently Used)算法。</p><p>（又是数据结构与算法，原来算法在前端有这么多的应用）</p><h3 id="Vue-中组件生命周期调用顺序说一下"><a href="#Vue-中组件生命周期调用顺序说一下" class="headerlink" title="Vue 中组件生命周期调用顺序说一下"></a><strong>Vue 中组件生命周期调用顺序说一下</strong></h3><p>组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。</p><p>组件的销毁操作是先父后子，销毁完成的顺序是先子后父。</p><p><strong>加载渲染过程</strong></p><p>父 beforeCreate-&gt;父 created-&gt;父 beforeMount-&gt;子 beforeCreate-&gt;子 created-&gt;子 beforeMount- &gt;子 mounted-&gt;父 mounted</p><p><strong>子组件更新过程</strong></p><p>父 beforeUpdate-&gt;子 beforeUpdate-&gt;子 updated-&gt;父 updated</p><p><strong>父组件更新过程</strong></p><p>父 beforeUpdate -&gt; 父 updated</p><p><strong>销毁过程</strong></p><p>父 beforeDestroy-&gt;子 beforeDestroy-&gt;子 destroyed-&gt;父 destroyed</p><h3 id="Vue2-x-组件通信有哪些方式？"><a href="#Vue2-x-组件通信有哪些方式？" class="headerlink" title="Vue2.x 组件通信有哪些方式？"></a>Vue2.x 组件通信有哪些方式？</h3><p><strong>父子组件通信</strong></p><p>父-&gt;子 props，子-&gt;父 $on、$emit</p><p>获取父子组件实例 $parent、$children</p><p>Ref 获取实例的方式调用组件的属性或者方法</p><p>Provide、inject 官方不推荐使用，但是写组件库时很常用</p><p><strong>兄弟组件通信</strong></p><p>Event Bus 实现跨组件通信 Vue.prototype.$bus &#x3D; new Vue</p><p>Vuex</p><p><strong>跨级组件通信</strong></p><p>Vuex</p><p>$attrs、$listeners</p><p>Provide、inject</p><h3 id="SSR-了解吗？"><a href="#SSR-了解吗？" class="headerlink" title="SSR 了解吗？"></a><strong>SSR 了解吗？</strong></h3><p>SSR 也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端完成，然后再把 html 直接返回给客户端。</p><p>SSR 有着更好的 SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，</p><p>服务器端渲染只支持 beforeCreate 和 created 两个钩子，当我们需要一些外部扩展库时需要特殊处理，</p><p>服务端渲染应用程序也需要处于 Node.js 的运行环境。还有就是服务器会有更大的负载需求。</p><h3 id="你都做过哪些-Vue-的性能优化？"><a href="#你都做过哪些-Vue-的性能优化？" class="headerlink" title="你都做过哪些 Vue 的性能优化？"></a><strong>你都做过哪些 Vue 的性能优化？</strong></h3><p>编码阶段</p><p>尽量减少 data 中的数据，data 中的数据都会增加 getter 和 setter，会收集对应的 watcher</p><p>v-if 和 v-for 不能连用</p><p>如果需要使用 v-for 给每项元素绑定事件时使用事件代理</p><p>SPA 页面采用 keep-alive 缓存组件</p><p>在更多的情况下，使用 v-if 替代 v-show</p><p>key 保证唯一</p><p>使用路由懒加载、异步组件</p><p>防抖、节流</p><p>第三方模块按需导入</p><p>长列表滚动到可视区域动态加载</p><p>图片懒加载</p><p><strong>SEO 优化</strong></p><p>预渲染</p><p>服务端渲染 SSR</p><p><strong>打包优化</strong></p><p>压缩代码</p><p>Tree Shaking&#x2F;Scope Hoisting</p><p>使用 cdn 加载第三方模块</p><p>多线程打包 happypack</p><p>splitChunks 抽离公共文件</p><p>sourceMap 优化</p><p><strong>用户体验</strong></p><p>骨架屏</p><p>PWA</p><p>还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启 gzip 压缩等。</p><p>(优化是个大工程，会涉及很多方面，这里申请另开一个专栏)</p><h3 id="hash-路由和-history-路由实现原理说一下"><a href="#hash-路由和-history-路由实现原理说一下" class="headerlink" title="hash 路由和 history 路由实现原理说一下"></a><strong>hash 路由和 history 路由实现原理说一下</strong></h3><p>location.hash 的值实际就是 URL 中#后面的东西。</p><p>history 实际采用了 HTML5 中提供的 API 来实现，主要有 history.pushState()和 history.replaceState()。</p><p>面试官拿起旁边已经凉透的咖啡，喝了一口。</p><p>(我难道问不倒这小子了么)</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 面试经验 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>SASS学习</title>
      <link href="/posts/8b43.html"/>
      <url>/posts/8b43.html</url>
      
        <content type="html"><![CDATA[<h3 id="使用变量"><a href="#使用变量" class="headerlink" title="使用变量"></a>使用变量</h3><p>sass —&gt; scss</p><p><code>sass</code>让人们受益的一个重要特性就是它为<code>css</code>引入了变量。你可以把反复使用的<code>css</code>属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。</p><p><code>sass</code>使用<code>$</code>符号来标识变量(老版本的<code>sass</code>使用<code>!</code>来标识变量。改成$是多半因为<code>!highlight-color</code>看起来太丑了。)，比如<code>$highlight-color</code>和<code>$sidebar-width</code>。为什么选择<code>$</code> 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的<code>css</code>语法冲突。</p><div class="note info simple"><p>变量声明 </p></div><p><code>sass</code>变量的声明和<code>css</code>属性的声明很像：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$highlight-color: #F90;</span><br></pre></td></tr></table></figure><p>这意味着变量<code>$highlight-color</code>现在的值是<code>#F90</code>。任何可以用作<code>css</code>属性值的赋值都 可以用作<code>sass</code>的变量值，甚至是以空格分割的多个属性值，如<code>$basic-border: 1px solid black;</code>，或以逗号分割的多个属性值，如<code>$plain-font: &quot;Myriad Pro&quot;、Myriad、&quot;Helvetica Neue&quot;、Helvetica、&quot;Liberation Sans&quot;、Arial和sans-serif; sans-serif;</code>。这时变 量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。</p><p>与<code>CSS</code>属性不同，变量可以在<code>css</code>规则块定义之外存在。当变量定义在<code>css</code>规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的<code>&#123;...&#125;</code>块中（如<code>@media</code>或者<code>@font-face</code>块），情况也是如此：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">$nav-color: #F90;</span><br><span class="line">nav &#123;</span><br><span class="line">  $width: 100px;</span><br><span class="line">  width: $width;</span><br><span class="line">  color: $nav-color;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//编译后</span><br><span class="line"></span><br><span class="line">nav &#123;</span><br><span class="line">  width: 100px;</span><br><span class="line">  color: #F90;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在这段代码中，<code>$nav-color</code>这个变量定义在了规则块外边，所以在这个样式表中都可以像 <code>nav</code>规则块那样引用它。<code>$width</code>这个变量定义在了<code>nav</code>的<code>&#123; &#125;</code>规则块内，所以它只能在<code>nav</code>规则块 内使用。这意味着是你可以在样式表的其他地方定义和使用<code>$width</code>变量，不会对这里造成影响。</p><p>只声明变量其实没啥用处，我们最终的目的还是使用它们。上例已介绍了如何使用 <code>$nav-color</code>和<code>$width</code>这两个变量，接下来我们将进一步探讨变量的使用方法。</p><div class="note info simple"><p>变量引用 </p></div><p>凡是<code>css</code>属性的标准值（比如说 1px 或者 bold）可存在的地方，变量就可以使用。<code>css</code>生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$highlight-<span class="attribute">color</span>: <span class="number">#f90</span>;</span><br><span class="line"><span class="selector-class">.selected</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid $highlight-color;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//编译后</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.selected</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#f90</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>看上边示例中的<code>$highlight-color</code>变量，它被直接赋值给<code>border</code>属性，当这段代码被编译输出<code>css</code>时，<code>$highlight-color</code>会被<code>#F90</code>这一颜色值所替代。产生的效果就是给<code>selected</code>这个类一条 1 像素宽、实心且颜色值为<code>#F90</code>的边框。</p><p>在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">$highlight-color: #F90;</span><br><span class="line">$highlight-border: 1px solid $highlight-color;</span><br><span class="line">.selected &#123;</span><br><span class="line">  border: $highlight-border;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//编译后</span><br><span class="line"></span><br><span class="line">.selected &#123;</span><br><span class="line">  border: 1px solid #F90;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这里，<code>$highlight-border</code>变量的声明中使用了<code>$highlight-color</code>这个变量。产生的效 果就跟你直接为<code>border</code>属性设置了一个<code>1px</code> <code>$highlight-color solid</code>的值是一样的。 最后，我们来了解一下变量命名的实用技巧，以结束关于变量的介绍。</p><div class="note info simple"><p>变量名用中划线还是下划线分隔 </p></div><p><code>sass</code>的变量名可以与<code>css</code>中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词（如<code>$highlight-color</code>），而有些人喜欢使用下划线（如<code>$highlight_color</code>）。使用中划线的方式更为普遍，这也是<code>compass</code>和本文都用的方式。</p><p>不过，<code>sass</code>并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。这意味着即使<code>compass</code>选择用中划线的命名方式，这并不影响你在使用<code>compass</code>的样式中用下划线的命名方式进行引用：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$link-color: blue;</span><br><span class="line">a &#123;</span><br><span class="line">  color: $link_color;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//编译后</span><br><span class="line"></span><br><span class="line">a &#123;</span><br><span class="line">  color: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在上例中，<code>$link-color</code>和<code>$link_color</code>其实指向的是同一个变量。实际上，在<code>sass</code>的大多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和 Sass 函数的命名。但是在<code>sass</code>中纯<code>css</code>部分不互通，比如类名、ID 或属性名。</p><p>尽管变量自身提供了很多有用的地方，但是<code>sass</code>基于变量提供的更为强大的工具才是我们关注的焦点。只有当变量与<code>sass</code>的其他特性一起使用时，才能发挥其全部的潜能。接下来，我们将探讨其中一个非常重要的特性，即规则嵌套。</p><h3 id="嵌套-CSS-规则"><a href="#嵌套-CSS-规则" class="headerlink" title="嵌套 CSS 规则"></a>嵌套 CSS 规则</h3><p><code>css</code>中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个<code>ID</code>：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#content</span> <span class="selector-tag">article</span> <span class="selector-tag">h1</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content</span> <span class="selector-tag">article</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">1.4em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#content</span> <span class="selector-tag">aside</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#eee</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>像这种情况，<code>sass</code>可以让你只写一遍，且使样式可读性更高。在 Sass 中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。<code>sass</code>在输出<code>css</code>时会帮你把这些嵌套规则处理好，避免你的重复书写。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">#content &#123;</span><br><span class="line">  article &#123;</span><br><span class="line">    h1 &#123; color: #333 &#125;</span><br><span class="line">    p &#123; margin-bottom: 1.4em &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  aside &#123; background-color: #EEE &#125;</span><br><span class="line">&#125;</span><br><span class="line"> /* 编译后 */</span><br><span class="line">#content article h1 &#123; color: #333 &#125;</span><br><span class="line">#content article p &#123; margin-bottom: 1.4em &#125;</span><br><span class="line">#content aside &#123; background-color: #EEE &#125;</span><br></pre></td></tr></table></figure><p>上边的例子，会在输出<code>css</code>时把它转换成跟你之前看到的一样的效果。这个过程中，<code>sass</code>用了两步，每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。首先，把<code>#content</code>（父级）这个<code>id</code>放到<code>article</code>选择器（子级）和<code>aside</code>选择器（子级）的前边：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">#content &#123;</span><br><span class="line">  article &#123;</span><br><span class="line">    h1 &#123; color: #333 &#125;</span><br><span class="line">    p &#123; margin-bottom: 1.4em &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  #content aside &#123; background-color: #EEE &#125;</span><br><span class="line">&#125;</span><br><span class="line"> /* 编译后 */</span><br><span class="line">#content article h1 &#123; color: #333 &#125;</span><br><span class="line">#content article p &#123; margin-bottom: 1.4em &#125;</span><br><span class="line">#content aside &#123; background-color: #EEE &#125;</span><br></pre></td></tr></table></figure><p>然后，<code>#content article</code>里边还有嵌套的规则，<code>sass</code>重复一遍上边的步骤，把新的选择器添加到内嵌的选择器前边。</p><p>一个给定的规则块，既可以像普通的 CSS 那样包含属性，又可以嵌套其他规则块。当你同时要为一个容器元素及其子元素编写特定样式时，这种能力就非常有用了。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">#content &#123;</span><br><span class="line">  background-color: #f5f5f5;</span><br><span class="line">  aside &#123; background-color: #eee &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>容器元素的样式规则会被单独抽离出来，而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">#content &#123; background-color: #f5f5f5 &#125;</span><br><span class="line">#content aside &#123; background-color: #eee &#125;</span><br></pre></td></tr></table></figure><p>大多数情况下这种简单的嵌套都没问题，但是有些场景下不行，比如你想要在嵌套的选择器 里边立刻应用一个类似于<code>：hover</code>的伪类。为了解决这种以及其他情况，<code>sass</code>提供了一个特殊结 构<code>&amp;</code>。</p><div class="note info simple"><p>父选择器的标识符&amp; </p></div><p>一般情况下，<code>sass</code>在解开一个嵌套规则时就会把父选择器（<code>#content</code>）通过一个空格连接到子选择器的前边（<code>article</code>和<code>aside</code>）形成（<code>#content article</code>和<code>#content aside</code>）。这种在 CSS 里边被称为后代选择器，因为它选择 ID 为<code>content</code>的元素内所有命中选择器<code>article</code>和<code>aside</code>的元素。但在有些情况下你却不会希望<code>sass</code>使用这种后代选择器的方式生成这种连接。</p><p>最常见的一种情况是当你为链接之类的元素写<code>：hover</code>这种伪类时，你并不希望以后代选择器的方式连接。比如说，下面这种情况<code>sass</code>就无法正常工作：</p><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">article</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: blue;</span><br><span class="line">  <span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这意味着<code>color: red</code>这条规则将会被应用到选择器<code>article a :hover</code>，<code>article</code>元素内链接的所有子元素在被<code>hover</code>时都会变成红色。这是不正确的！你想把这条规则应用到超链接自身，而后代选择器的方式无法帮你实现。</p><p>解决之道为使用一个特殊的<code>sass</code>选择器，即父选择器。在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的<code>&amp;</code>符号，且可以放在任何一个选择器可出现的地方，比如<code>h1</code>放在哪，它就可以放在哪。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">article a &#123;</span><br><span class="line">  color: blue;</span><br><span class="line">  &amp;:hover &#123; color: red &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是<code>&amp;</code>被父选择器直接替换：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">article a &#123; color: blue &#125;</span><br><span class="line">article a:hover &#123; color: red &#125;</span><br></pre></td></tr></table></figure><p>在为父级选择器添加<code>：hover</code>等伪类时，这种方式非常有用。同时父选择器标识符还有另外一种用法，你可以在父选择器之前添加选择器。举例来说，当用户在使用 IE 浏览器时，你会通过<code>JavaScript</code>在&#96;&#96;标签上添加一个 ie 的类名，为这种情况编写特殊的样式如下：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">#content aside &#123;</span><br><span class="line">  color: red;</span><br><span class="line">  body.ie &amp; &#123; color: green &#125;</span><br><span class="line">&#125;</span><br><span class="line">/*编译后*/</span><br><span class="line">#content aside &#123;color: red&#125;;</span><br><span class="line">body.ie #content aside &#123; color: green &#125;</span><br></pre></td></tr></table></figure><p><code>sass</code>在选择器嵌套上是非常智能的，即使是带有父选择器的情况。当<code>sass</code>遇到群组选择器（由多个逗号分隔开的选择器形成）也能完美地处理这种嵌套。</p><div class="note info simple"><p>群组选择器的嵌套 </p></div><p>在<code>CSS</code>里边，选择器<code>h1``h2</code>和<code>h3</code>会同时命中 h1 元素、h2 元素和 h3 元素。与此类似，<code>.button</code> <code>button</code>会命中 button 元素和类名为.button 的元素。这种选择器称为群组选择器。群组选择器 的规则会对命中群组中任何一个选择器的元素生效。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.button</span>,</span><br><span class="line"><span class="selector-tag">button</span> &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>当看到上边这段代码时，你可能还没意识到会有重复性的工作。但会很快发现：如果你需要在一个特定的容器元素内对这样一个群组选择器进行修饰，情况就不同了。<code>css</code>的写法会让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> <span class="selector-tag">h1</span>,</span><br><span class="line"><span class="selector-class">.container</span> <span class="selector-tag">h2</span>,</span><br><span class="line"><span class="selector-class">.container</span> <span class="selector-tag">h3</span> &#123;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">0.8em</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>非常幸运，<code>sass</code>的嵌套特性在这种场景下也非常有用。当<code>sass</code>解开一个群组选择器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来：</p><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="selector-tag">h1</span>,</span><br><span class="line">  <span class="selector-tag">h2</span>,</span><br><span class="line">  <span class="selector-tag">h3</span> &#123;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">0.8em</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>首先<code>sass</code>将<code>.container</code>和<code>h1``.container</code>和<code>h2``.container</code>和<code>h3</code>分别组合，然后将三 者重新组合成一个群组选择器，生成你前边看到的普通<code>css</code>样式。对于内嵌在群组选择器内的嵌 套规则，处理方式也一样：</p><figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">nav</span>,</span><br><span class="line"><span class="selector-tag">aside</span> &#123;</span><br><span class="line">  <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>首先<code>sass</code>将<code>nav</code>和<code>a``aside</code>和<code>a</code>分别组合，然后将二者重新组合成一个群组选择器：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nav a, aside a &#123;color: blue&#125;</span><br></pre></td></tr></table></figure><p>处理这种群组选择器规则嵌套上的强大能力，正是<code>sass</code>在减少重复敲写方面的贡献之一。尤其在当嵌套级别达到两层甚至三层以上时，与普通的<code>css</code>编写方式相比，只写一遍群组选择器大大减少了工作量。</p><p>有利必有弊，你需要特别注意群组选择器的规则嵌套生成的<code>css</code>。虽然<code>sass</code>让你的样式表看上去很小，但实际生成的<code>css</code>却可能非常大，这会降低网站的速度。</p><p>关于选择器嵌套的最后一个方面，我们看看<code>sass</code>如何处理组合选择器，比如&gt;、+和~的使用。你将看到，这种场景下你甚至无需使用父选择器标识符。</p><div class="note info simple"><p>子组合选择器和同层组合选择器：&gt;、+ 和 ~ </p></div><p>上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">article section &#123; margin: 5px &#125;</span><br><span class="line">article &gt; section &#123; border: 1px solid #ccc &#125;</span><br></pre></td></tr></table></figure><p>你可以用子组合选择器&gt;选择一个元素的直接子元素。上例中，第一个选择器会选择 article 下的所有命中 section 选择器的元素。第二个选择器只会选择 article 下紧跟着的子元素中命中 section 选择器的元素。</p><p>在下例中，你可以用同层相邻组合选择器<code>+</code>选择<code>header</code>元素后紧跟的<code>p</code>元素：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">header + p &#123; font-size: 1.1em &#125;</span><br></pre></td></tr></table></figure><p>你也可以用同层全体组合选择器<code>~</code>，选择所有跟在<code>article</code>后的同层<code>article</code>元素，不管它们之间隔了多少其他元素：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">article ~ article &#123; border-top: 1px dashed #ccc &#125;</span><br></pre></td></tr></table></figure><p>这些组合选择器可以毫不费力地应用到<code>sass</code>的规则嵌套中。可以把它们放在外层选择器后边，或里层选择器前边：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">article &#123;</span><br><span class="line">  ~ article &#123; border-top: 1px dashed #ccc &#125;</span><br><span class="line">  &gt; section &#123; background: #eee &#125;</span><br><span class="line">  dl &gt; &#123;</span><br><span class="line">    dt &#123; color: #333 &#125;</span><br><span class="line">    dd &#123; color: #555 &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  nav + &amp; &#123; margin-top: 0 &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><code>sass</code>会如你所愿地将这些嵌套规则一一解开组合在一起：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">article ~ article &#123; border-top: 1px dashed #ccc &#125;</span><br><span class="line">article &gt; footer &#123; background: #eee &#125;</span><br><span class="line">article dl &gt; dt &#123; color: #333 &#125;</span><br><span class="line">article dl &gt; dd &#123; color: #555 &#125;</span><br><span class="line">nav + article &#123; margin-top: 0 &#125;</span><br></pre></td></tr></table></figure><p>在<code>sass</code>中，不仅仅<code>css</code>规则可以嵌套，对属性进行嵌套也可以减少很多重复性的工作。</p><div class="note info simple"><p>嵌套属性 </p></div><p>在<code>sass</code>中，除了 CSS 选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写<code>border-style``border-width``border-color</code>以及<code>border-*</code>等也是非常烦人的。在<code>sass</code>中，你只需敲写一遍<code>border</code>：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">nav</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: &#123;</span><br><span class="line">    style: solid;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">1px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#ccc</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个<code>&#123; &#125;</code>块，把子属性部分写在这个<code>&#123; &#125;</code>块中。就像<code>css</code>选择器嵌套一样，<code>sass</code>会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的<code>css</code>样式一样：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">nav</span> &#123;</span><br><span class="line">  <span class="attribute">border-style</span>: solid;</span><br><span class="line">  <span class="attribute">border-width</span>: <span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">border-color</span>: <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">nav &#123;</span><br><span class="line">  border: 1px solid #ccc &#123;</span><br><span class="line">  left: 0px;</span><br><span class="line">  right: 0px;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这比下边这种同等样式的写法要好：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">nav</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">  <span class="attribute">border-left</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">border-right</span>: <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>属性和选择器嵌套是非常伟大的特性，因为它们不仅大大减少了你的编写量，而且通过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。</p><p>即便如此，随着你的样式表变得越来越大，这种写法也很难保持结构清晰。有时，处理这种大量样式的唯一方法就是把它们分拆到多个文件中。<code>sass</code>通过对<code>css</code>原有<code>@import</code>规则的改进直接支持了这一特性。</p><h3 id="导入-SASS-文件"><a href="#导入-SASS-文件" class="headerlink" title="导入 SASS 文件"></a>导入 SASS 文件</h3><p><code>css</code>有一个特别不常用的特性，即<code>@import</code>规则，它允许在一个<code>css</code>文件中导入其他<code>css</code>文件。然而，后果是只有执行到<code>@import</code>时，浏览器才会去下载其他<code>css</code>文件，这导致页面加载起来特别慢。</p><p><code>sass</code>也有一个<code>@import</code>规则，但不同的是，<code>sass</code>的<code>@import</code>规则在生成<code>css</code>文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个<code>css</code>文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器（参见 2.5 节）均可在导入文件中使用。</p><p>使用<code>sass</code>的<code>@import</code>规则并不需要指明被导入文件的全名。你可以省略<code>.sass</code>或<code>.scss</code>文件后缀（见下图）。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的<code>sass</code>样式文件语法，在<code>sass</code>和<code>scss</code>语法之间随意切换。举例来说，<code>@import</code>“sidebar”;这条命令将把<code>sidebar.scss</code>文件中所有样式添加到当前样式表中。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/sass/p1.png"></p><p>本节将介绍如何使用<code>sass</code>的<code>@import</code>来处理多个<code>sass</code>文件。首先，我们将学习编写那些被导入的<code>sass</code>文件，因为在一个大型<code>sass</code>项目中，这样的文件是你最常编写的那一类。接着，了解集中导入<code>sass</code>文件的方法，使你的样式可重用性更高，包括声明可自定义的变量值，以及在某一个选择器范围内导入<code>sass</code>文件。最后，介绍如何在<code>sass</code>中使用<code>css</code>原生的<code>@import</code>命令。</p><p>通常，有些<code>sass</code>文件用于导入，你并不希望为每个这样的文件单独地生成一个<code>css</code>文件。对此，<code>sass</code>用一个特殊的约定来解决。</p><div class="note info simple"><p>使用 SASS 部分文件或局部文件 </p></div><p>当通过<code>@import</code>把<code>sass</code>样式分散到多个文件时，你通常只想生成少数几个<code>css</code>文件。那些专门为<code>@import</code>命令而编写的<code>sass</code>文件，并不需要生成对应的独立<code>css</code>文件，这样的<code>sass</code>文件称为局部文件。对此，<code>sass</code>有一个特殊的约定来命名这些文件。</p><p>此约定即，<code>sass</code>局部文件的文件名以下划线开头。这样，<code>sass</code>就不会在编译时单独编译这个文件输出<code>css</code>，而只把这个文件用作导入。当你<code>@import</code>一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入<code>themes/_night-sky.scss</code>这个局部文件里的变量，你只需在样式表中写<code>@import</code> <code>&quot;themes/night-sky&quot;;</code>。</p><p>局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，<code>sass</code>有一个功能刚好可以解决这个问题，即默认变量值。</p><div class="note info simple"><p>默认变量值 </p></div><p>一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。举例说明：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$link-color: blue;</span><br><span class="line">$link-color: red;</span><br><span class="line">a &#123;</span><br><span class="line">color: $link-color;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在上边的例子中，超链接的<code>color</code>会被设置为<code>red</code>。这可能并不是你想要的结果，假如你写了一个可被他人通过<code>@import</code>导入的<code>sass</code>库文件，你可能希望导入者可以定制修改<code>sass</code>库文件中的某些值。使用<code>sass</code>的<code>!default</code>标签可以实现这个目的。它很像<code>css</code>属性中<code>!important</code>标签的对立面，不同的是<code>!default</code>用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$fancybox-width: 400px !default;</span><br><span class="line">.fancybox &#123;</span><br><span class="line">width: $fancybox-width;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在上例中，如果用户在导入你的<code>sass</code>局部文件之前声明了一个<code>$fancybox-width</code>变量，那么你的局部文件中对<code>$fancybox-width</code>赋值<code>400px</code>的操作就无效。如果用户没有做这样的声明，则<code>$fancybox-width</code>将默认为<code>400px</code>。</p><p>接下来我们将学习嵌套导入，它允许只在某一个选择器的范围内导入<code>sass</code>局部文件。</p><div class="note info simple"><p>嵌套导入 </p></div><p>跟原生的<code>css</code>不同，<code>sass</code>允许<code>@import</code>命令写在<code>css</code>规则内。这种导入方式下，生成对应的<code>css</code>文件时，局部文件会被直接插入到<code>css</code>规则内导入它的地方。举例说明，有一个名为<code>_blue-theme.scss</code>的局部文件，内容如下：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">aside &#123;</span><br><span class="line">  background: blue;</span><br><span class="line">  color: white;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后把它导入到一个 CSS 规则内，如下所示：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">.blue-theme &#123;@import &quot;blue-theme&quot;&#125;</span><br><span class="line"></span><br><span class="line">//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。</span><br><span class="line"></span><br><span class="line">.blue-theme &#123;</span><br><span class="line">  aside &#123;</span><br><span class="line">    background: blue;</span><br><span class="line">    color: #fff;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。</p><p>有时，可用<code>css</code>原生的<code>@import</code>机制，在浏览器中下载必需的<code>css</code>文件。<code>sass</code>也提供了几种方法来达成这种需求。</p><div class="note info simple"><p>原生的 CSS 导入 </p></div><p>由于<code>sass</code>兼容原生的<code>css</code>，所以它也支持原生的<code>CSS@import</code>。尽管通常在<code>sass</code>中使用<code>@import</code>时，<code>sass</code>会尝试找到对应的<code>sass</code>文件并导入进来，但在下列三种情况下会生成原生的<code>CSS@import</code>，尽管这会造成浏览器解析<code>css</code>时的额外下载：</p><ul><li>被导入文件的名字以<code>.css</code>结尾；</li><li>被导入文件的名字是一个 URL 地址（比如<a href="http://www.sass.hk/css/css.css%EF%BC%89%EF%BC%8C%E7%94%B1%E6%AD%A4%E5%8F%AF%E7%94%A8%E8%B0%B7%E6%AD%8C%E5%AD%97%E4%BD%93API%E6%8F%90%E4%BE%9B%E7%9A%84%E7%9B%B8%E5%BA%94%E6%9C%8D%E5%8A%A1%EF%BC%9B">http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；</a></li><li>被导入文件的名字是<code>CSS</code>的 url()值。</li></ul><p>这就是说，你不能用<code>sass</code>的<code>@import</code>直接导入一个原始的<code>css</code>文件，因为<code>sass</code>会认为你想用<code>css</code>原生的<code>@import</code>。但是，因为<code>sass</code>的语法完全兼容<code>css</code>，所以你可以把原始的<code>css</code>文件改名为<code>.scss</code>后缀，即可直接导入了。</p><p>文件导入是保证<code>sass</code>的代码可维护性和可读性的重要一环。次之但亦非常重要的就是注释了。注释可以帮助样式作者记录写<code>sass</code>的过程中的想法。在原生的<code>css</code>中，注释对于其他人是直接可见的，但<code>sass</code>提供了一种方式可在生成的<code>css</code>文件中按需抹掉相应的注释。</p><h3 id="静默注释"><a href="#静默注释" class="headerlink" title="静默注释"></a>静默注释</h3><p><code>css</code>中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。</p><p><code>sass</code>另外提供了一种不同于<code>css</code>标准注释格式<code>/* ... */</code>的注释语法，即静默注释，其内容不会出现在生成的<code>css</code>文件中。静默注释的语法跟<code>JavaScript``Java</code>等类<code>C</code>的语言中单行注释的语法相同，它们以<code>//</code>开头，注释内容直到行末。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">body &#123;</span><br><span class="line">  color: #333; // 这种注释内容不会出现在生成的css文件中</span><br><span class="line">  padding: 0; /* 这种注释内容会出现在生成的css文件中 */</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>实际上，<code>css</code>的标准注释格式<code>/* ... */</code>内的注释内容亦可在生成的<code>css</code>文件中抹去。当注释出现在原生<code>css</code>不允许的地方，如在<code>css</code>属性或选择器中，<code>sass</code>将不知如何将其生成到对应<code>css</code>文件中的相应位置，于是这些注释被抹掉。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">body &#123;</span><br><span class="line">  color /* 这块注释内容不会出现在生成的css中 */: #333;</span><br><span class="line">  padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>你已经掌握了<code>sass</code>的静默注释，了解了保持<code>sass</code>条理性和可读性的最基本的三个方法：嵌套、导入和注释。现在，我们要进一步学习新特性，这样我们不但能保持条理性还能写出更好的样式。首先要介绍的内容是：使用混合器抽象你的相关样式。</p><h3 id="混合器"><a href="#混合器" class="headerlink" title="混合器"></a>混合器</h3><p>如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过<code>sass</code>的混合器实现大段样式的重用。</p><p>混合器使用<code>@mixin</code>标识符定义。看上去很像其他的<code>CSS @</code>标识符，比如说<code>@media</code>或者<code>@font-face</code>。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段<code>sass</code>代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">@mixin rounded-corners &#123;</span><br><span class="line">  -moz-border-radius: 5px;</span><br><span class="line">  -webkit-border-radius: 5px;</span><br><span class="line">  border-radius: 5px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后就可以在你的样式表中通过<code>@include</code>来使用这个混合器，放在你希望的任何地方。<code>@include</code>调用会把混合器中的所有样式提取出来放在<code>@include</code>被调用的地方。如果像下边这样写：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">notice &#123;</span><br><span class="line">  background-color: green;</span><br><span class="line">  border: 2px solid #00aa00;</span><br><span class="line">  @include rounded-corners;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//sass最终生成：</span><br><span class="line">.notice &#123;</span><br><span class="line">  background-color: green;</span><br><span class="line">  border: 2px solid #00aa00;</span><br><span class="line">  -moz-border-radius: 5px;</span><br><span class="line">  -webkit-border-radius: 5px;</span><br><span class="line">  border-radius: 5px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在<code>.notice</code>中的属性<code>border-radius``-moz-border-radius</code>和<code>-webkit-border-radius</code>全部来自<code>rounded-corners</code>这个混合器。这一节将介绍使用混合器来避免重复。通过使用参数，你可以使用混合器把你样式中的通用样式抽离出来，然后轻松地在其他地方重用。实际上，混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。</p><div class="note info simple"><p>何时使用混合器 </p></div><p>利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。</p><p>判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如<code>rounded-corners``fancy-font</code>或者<code>no-bullets</code>，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。</p><p>混合器在某些方面跟<code>css</code>类很像。都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在<code>html</code>文件中应用的，而混合器是在样式表中应用的。这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述：用来描述<code>html</code>元素的含义而不是<code>html</code>元素的外观。而另一方面，混合器是展示性的描述，用来描述一条<code>css</code>规则应用之后会产生怎样的效果。</p><p>在之前的例子中，<code>.notice</code>是一个有语义的类名。如果一个<code>html</code>元素有一个<code>notice</code>的类名，就表明了这个<code>html</code>元素的用途：向用户展示提醒信息。<code>rounded-corners</code>混合器是展示性的，它描述了包含它的<code>css</code>规则最终的视觉样式，尤其是边框角的视觉样式。混合器和类配合使用写出整洁的<code>html</code>和<code>css</code>，因为使用语义化的类名亦可以帮你避免重复使用混合器。为了保持你的<code>html</code>和<code>css</code>的易读性和可维护性，在写样式的过程中一定要铭记二者的区别。</p><p>有时候仅仅把属性放在混合器中还远远不够，可喜的是，<code>sass</code>同样允许你把<code>css</code>规则放在混合器中。</p><div class="note info simple"><p>混合器中的 CSS 规则 </p></div><p>混合器中不仅可以包含属性，也可以包含<code>css</code>规则，包含选择器和选择器中的属性，如下代码:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">@mixin no-bullets &#123;</span><br><span class="line">  list-style: none;</span><br><span class="line">  li &#123;</span><br><span class="line">    list-style-image: none;</span><br><span class="line">    list-style-type: none;</span><br><span class="line">    margin-left: 0px;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>当一个包含<code>css</code>规则的混合器通过<code>@include</code>包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。举个例子，看看下边的<code>sass</code>代码，这个例子中使用了<code>no-bullets</code>这个混合器：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">ul.plain &#123;</span><br><span class="line">  color: #444;</span><br><span class="line">  @include no-bullets;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><code>sass</code>的<code>@include</code>指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子如下代码:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">ul.plain &#123;</span><br><span class="line">  color: #444;</span><br><span class="line">  list-style: none;</span><br><span class="line">&#125;</span><br><span class="line">ul.plain li &#123;</span><br><span class="line">  list-style-image: none;</span><br><span class="line">  list-style-type: none;</span><br><span class="line">  margin-left: 0px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>混合器中的规则甚至可以使用<code>sass</code>的父选择器标识符<code>&amp;</code>。使用起来跟不用混合器时一样，<code>sass</code>解开嵌套规则时，用父规则中的选择器替代<code>&amp;</code>。</p><p>如果一个混合器只包含<code>css</code>规则，不包含属性，那么这个混合器就可以在文档的顶部调用，写在所有的<code>css</code>规则之外。如果你只是为自己写一些混合器，这并没有什么大的用途，但是当你使用一个类似于<code>Compass</code>的库时，你会发现，这是提供样式的好方法，原因在于你可以选择是否使用这些样式。</p><p>接下来你将学习如何通过给混合器传参数来让混合器变得更加灵活和可重用。</p><div class="note info simple"><p>给混合器传参 </p></div><p>混合器并不一定总得生成相同的样式。可以通过在<code>@include</code>混合器时给混合器传参，来定制混合器生成的精确样式。当<code>@include</code>混合器时，参数其实就是可以赋值给<code>css</code>属性值的变量。如果你写过<code>JavaScript</code>，这种方式跟<code>JavaScript</code>的<code>function</code>很像：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">@mixin link-colors($normal, $hover, $visited) &#123;</span><br><span class="line">  color: $normal;</span><br><span class="line">  &amp;:hover &#123; color: $hover; &#125;</span><br><span class="line">  &amp;:visited &#123; color: $visited; &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>当混合器被<code>@include</code>时，你可以把它当作一个<code>css</code>函数来传参。如果你像下边这样写：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">a &#123;</span><br><span class="line">  @include link-colors(blue, red, green);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//Sass最终生成的是：</span><br><span class="line"></span><br><span class="line">a &#123; color: blue; &#125;</span><br><span class="line">a:hover &#123; color: red; &#125;</span><br><span class="line">a:visited &#123; color: green; &#125;</span><br></pre></td></tr></table></figure><p>当你@include 混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，<code>sass</code>允许通过语法<code>$name: value</code>的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">a &#123;</span><br><span class="line">    @include link-colors(</span><br><span class="line">      $normal: blue,</span><br><span class="line">      $visited: green,</span><br><span class="line">      $hover: red</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>尽管给混合器加参数来实现定制很好，但是有时有些参数我们没有定制的需要，这时候也需要赋值一个变量就变成很痛苦的事情了。所以<code>sass</code>允许混合器声明时给参数赋默认值。</p><div class="note info simple"><p>默认参数值 </p></div><p>为了在<code>@include</code>混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用<code>$name: default-value</code>的声明形式，默认值可以是任何有效的<code>css</code>属性值，甚至是其他参数的引用，如下代码：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">@mixin link-colors(</span><br><span class="line">    $normal,</span><br><span class="line">    $hover: $normal,</span><br><span class="line">    $visited: $normal</span><br><span class="line">  )</span><br><span class="line">&#123;</span><br><span class="line">  color: $normal;</span><br><span class="line">  &amp;:hover &#123; color: $hover; &#125;</span><br><span class="line">  &amp;:visited &#123; color: $visited; &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如果像下边这样调用：<code>@include link-colors(red)</code> <code>$hover</code>和<code>$visited</code>也会被自动赋值为<code>red</code>。</p><p>混合器只是<code>sass</code>样式重用特性中的一个。我们已经了解到混合器主要用于样式展示层的重用，如果你想重用语义化的类呢？这就涉及<code>sass</code>的另一个重要的重用特性：选择器继承。</p><h3 id="使用选择器继承来精简-CSS"><a href="#使用选择器继承来精简-CSS" class="headerlink" title="使用选择器继承来精简 CSS;"></a>使用选择器继承来精简 CSS;</h3><p>使用<code>sass</code>的时候，最后一个减少重复的主要特性就是选择器继承。基于<code>Nicole Sullivan</code>面向对象的<code>css</code>的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过<code>@extend</code>语法实现，如下代码:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">//通过选择器继承继承样式</span><br><span class="line"><span class="selector-class">.error</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#fdd</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.seriousError</span> &#123;</span><br><span class="line">  <span class="keyword">@extend</span> .error;</span><br><span class="line">  <span class="attribute">border-width</span>: <span class="number">3px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>在上边的代码中，<code>.seriousError</code>将会继承样式表中任何位置处为<code>.error</code>定义的所有样式。以<code>class=&quot;seriousError&quot;</code> 修饰的<code>html</code>元素最终的展示效果就好像是<code>class=&quot;seriousError error&quot;</code>。相关元素不仅会拥有一个<code>3px</code>宽的边框，而且这个边框将变成红色的，这个元素同时还会有一个浅红色的背景，因为这些都是在<code>.error</code>里边定义的样式。</p><p><code>.seriousError</code>不仅会继承<code>.error</code>自身的所有样式，任何跟<code>.error</code>有关的组合选择器样式也会被<code>.seriousError</code>以组合选择器的形式继承，如下代码:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">//.seriousError从.error继承样式</span><br><span class="line">.error a&#123;  //应用到.seriousError a</span><br><span class="line">  color: red;</span><br><span class="line">  font-weight: 100;</span><br><span class="line">&#125;</span><br><span class="line">h1.error &#123; //应用到hl.seriousError</span><br><span class="line">  font-size: 1.2rem;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如上所示，在<code>class=&quot;seriousError&quot;</code>的<code>html</code>元素内的超链接也会变成红色和粗体。</p><p>本节将介绍与混合器相比，哪种情况下更适合用继承。接下来在探索继承的工作细节之前，我们先了解一下继承的高级用法。最后，我们将看看使用继承可能会有哪些坑，学习如何避免这些坑。</p><div class="note info simple"><p>何时使用继承 </p></div><p>上面介绍了<a href="https://www.sass.hk/guide/">混合器</a>主要用于展示性样式的重用，而类名用于语义化样式的重用。因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说<code>.seriousError</code>）表明它属于另一个类（比如说<code>.error</code>），这时使用继承再合适不过了。</p><p>这有点抽象，所以我们从几个方面来阐释一下。想象一下你正在编写一个页面，给<code>html</code>元素添加类名，你发现你的某个类（比如说<code>.seriousError</code>）另一个类（比如说<code>.error</code>）的细化。你会怎么做？</p><ul><li>你可以为这两个类分别写相同的样式，但是如果有大量的重复怎么办？使用<code>sass</code>时，我们提倡的就是不要做重复的工作。</li><li>你可以使用一个选择器组（比如说<code>.error``.seriousError</code>）给这两个选择器写相同的样式。如果.error 的所有样式都在同一个地方，这种做法很好，但是如果是分散在样式表的不同地方呢？再这样做就困难多了。</li><li>你可以使用一个混合器为这两个类提供相同的样式，但当<code>.error</code>的样式修饰遍布样式表中各处时，这种做法面临着跟使用选择器组一样的问题。这两个类也不是恰好有相同的 样式。你应该更清晰地表达这种关系。</li><li>综上所述你应该使用<code>@extend</code>。让<code>.seriousError</code>从<code>.error</code>继承样式，使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用<code>.error``.seriousError</code>都会继承其中的样式。</li></ul><p>现在你已经更好地掌握了何时使用继承，以及继承有哪些突出的优点，接下来我们看看一些高级用法。</p><div class="note info simple"><p>继承的高级用法 </p></div><p>任何<code>css</code>规则都可以继承其他规则，几乎任何<code>css</code>规则也都可以被继承。大多数情况你可能只想对类使用继承，但是有些场合你可能想做得更多。最常用的一种高级用法是继承一个<code>html</code>元素的样式。尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对<code>html</code>元素添加的所有样式都会被继承。</p><p>接下来的这段代码定义了一个名为<code>disabled</code>的类，样式修饰使它看上去像一个灰掉的超链接。通过继承 a 这一超链接元素来实现：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.disabled &#123;</span><br><span class="line">  color: gray;</span><br><span class="line">  @extend a;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>假如一条样式规则继承了一个复杂的选择器，那么它只会继承这个复杂选择器命中的元素所应用的样式。举例来说， 如果<code>.seriousError``@extend``.important.error</code> ， 那么<code>.important.error</code> 和<code>h1.important.error</code> 的样式都会被<code>.seriousError</code>继承， 但是<code>.important</code>或者<code>.error下</code>的样式则不会被继承。这种情况下你很可能希望<code>.seriousError</code>能够分别继承<code>.important</code>或者<code>.error</code>下的样式。</p><p>如果一个选择器序列（<code>#main .seriousError</code>）<code>@extend</code>另一个选择器（<code>.error</code>），那么只有完全匹配<code>#main .seriousError</code>这个选择器的元素才会继承<code>.error</code>的样式，就像单个类 名继承那样。拥有<code>class=&quot;seriousError&quot;</code>的<code>#main</code>元素之外的元素不会受到影响。</p><p>像<code>#main .error</code>这种选择器序列是不能被继承的。这是因为从<code>#main .error</code>中继承的样式一般情况下会跟直接从<code>.error</code>中继承的样式基本一致，细微的区别往往使人迷惑。</p><p>现在你已经了解了通过继承能够做些什么事情，接下来我们将学习继承的工作细节，在生成对应<code>css</code>的时候，<code>sass</code>具体干了些什么事情。</p><div class="note info simple"><p>继承的工作细节 </p></div><p>跟变量和混合器不同，继承不是仅仅用<code>css</code>样式替换@extend 处的代码那么简单。为了不让你对生成的<code>css</code>感觉奇怪，对这背后的工作原理有一定了解是非常重要的。</p><p><code>@extend</code>背后最基本的想法是，如果<code>.seriousError @extend .error</code>， 那么样式表中的任何一处<code>.error</code>都用<code>.error``.seriousError</code>这一选择器组进行替换。这就意味着相关样式会如预期那样应用到<code>.error</code>和<code>.seriousError</code>。当<code>.error</code>出现在复杂的选择器中，比如说<code>h1.error``.error a</code>或者<code>#main .sidebar input.error[type=&quot;text&quot;]</code>，那情况就变得复杂多了，但是不用担心，<code>sass</code>已经为你考虑到了这些。</p><p>关于<code>@extend</code>有两个要点你应该知道。</p><ul><li>跟混合器相比，继承生成的<code>css</code>代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的<code>css</code>体积更小。如果你非常关心你站点的速度，请牢记这一点。</li><li>继承遵从<code>css</code>层叠的规则。当两个不同的<code>css</code>规则应用到同一个<code>html</code>元素上时，并且这两个不同的<code>css</code>规则对同一属性的修饰存在不同的值，<code>css</code>层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。</li></ul><p>混合器本身不会引起<code>css</code>层叠的问题，因为混合器把样式直接放到了<code>css</code>规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。</p><div class="note info simple"><p>使用继承的最佳实践 </p></div><p>通常使用继承会让你的<code>css</code>美观、整洁。因为继承只会在生成<code>css</code>时复制选择器，而不会复制大段的<code>css</code>属性。但是如果你不小心，可能会让生成的<code>css</code>中包含大量的选择器复制。</p><p>避免这种情况出现的最好方法就是不要在<code>css</code>规则中使用后代选择器（比如<code>.foo .bar</code>）去继承<code>css</code>规则。如果你这么做，同时被继承的<code>css</code>规则有通过后代选择器修饰的样式，生成<code>css</code>中的选择器的数量很快就会失控：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">.foo .bar &#123; @extend .baz; &#125;</span><br><span class="line">.bip .baz &#123; a: b; &#125;</span><br></pre></td></tr></table></figure><p>在上边的例子中，<code>sass</code>必须保证应用到.baz 的样式同时也要应用到<code>.foo .bar</code>（位于 class&#x3D;”foo”的元素内的 class&#x3D;”bar”的元素）。例子中有一条应用到<code>.bip .baz</code>（位于 class&#x3D;”bip”的元素内的 class&#x3D;”baz”的元素）的<code>css</code>规则。当这条规则应用到<code>.foo .bar</code>时，可能存在三种情况，如下代码:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 继承可能迅速变复杂 --&gt;</span><br><span class="line">&lt;!-- Case 1 --&gt;</span><br><span class="line">&lt;div class=&quot;foo&quot;&gt;</span><br><span class="line">  &lt;div class=&quot;bip&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;bar&quot;&gt;...&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;!-- Case 2 --&gt;</span><br><span class="line">&lt;div class=&quot;bip&quot;&gt;</span><br><span class="line">  &lt;div class=&quot;foo&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;bar&quot;&gt;...&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;!-- Case 3 --&gt;</span><br><span class="line">&lt;div class=&quot;foo bip&quot;&gt;</span><br><span class="line">  &lt;div class=&quot;bar&quot;&gt;...&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure><p>为了应付这些情况，<code>sass</code>必须生成三种选择器组合（仅仅是.bip .foo .bar 不能覆盖所有情况）。如果任何一条规则里边的后代选择器再长一点，<code>sass</code>需要考虑的情况就会更多。实际上<code>sass</code>并不总是会生成所有可能的选择器组合，即使是这样，选择器的个数依然可能会变得相当大，所以如果允许，尽可能避免这种用法。</p><p>值得一提的是，只要你想，你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。</p><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><p>本文介绍了<code>sass</code>最基本部分,你可以轻松地使用<code>sass</code>编写清晰、无冗余、语义化的<code>css</code>。对于<code>sass</code>提供的工具你已经有了一个比较深入的了解，同时也掌握了何时使用这些工具的指导原则。</p><p>变量是<code>sass</code>提供的最基本的工具。通过变量可以让独立的<code>css</code>值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。变量、混合器的命名甚至<code>sass</code>的文件名，可以互换通用<code>_</code>和<code>-</code>。同样基础的是<code>sass</code>的嵌套机制。嵌套允许<code>css</code>规则内嵌套<code>css</code>规则，减少重复编写常用的选择器，同时让样式表的结构一眼望去更加清晰。<code>sass</code>同时提供了特殊的父选择器标识符<code>&amp;</code>，通过它可以构造出更高效的嵌套。</p><p>你也已经学到了<code>sass</code>的另一个重要特性，样式导入。通过样式导入可以把分散在多个<code>sass</code>文件中的内容合并生成到一个<code>css</code>文件，避免了项目中有大量的<code>css</code>文件通过原生的<code>css</code> <code>@import</code>带来的性能问题。通过嵌套导入和默认变量值，导入可以构建更强有力的、可定制的样式。混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。你不仅学到了如何使用混合器减少重复，同时学习到了如何使用混合器让你的<code>css</code>变得更加可维护和语义化。最后，我们学习了与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系，通过这些关系可以保持你的<code>css</code>的整洁和可维护性。</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>css中的字体</title>
      <link href="/posts/fe37.html"/>
      <url>/posts/fe37.html</url>
      
        <content type="html"><![CDATA[<blockquote><p><em>生活明朗，万物可爱</em></p></blockquote><h3 id="字体相关的样式"><a href="#字体相关的样式" class="headerlink" title="字体相关的样式"></a>字体相关的样式</h3><details class="folding-tag" cyan open><summary> 字体相关的样式 </summary>              <div class='content'>              <div class="tabs" id="font-related-styles"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#font-related-styles-1">color</button></li><li class="tab"><button type="button" data-href="#font-related-styles-2">font-size</button></li><li class="tab"><button type="button" data-href="#font-related-styles-3">font-family</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="font-related-styles-1"><p><strong>color</strong> 用来设置字体颜色</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">rgb</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="font-related-styles-2"><p><strong>font-size</strong> 字体的大小</p><ul><li><p><code>font-size</code>相关的单位.</p><p><em>em</em> 相当于<code>当前元素</code>的一个 font-size<br><em>rem</em> 相对于<code>根元素</code>的一个 font-size</p></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">16em</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="font-related-styles-3"><p><strong>font-family</strong> 字体族（字体的格式）</p><ul><li><p>可选值：</p><p><em>serif</em> 衬线字体</p><p><em>sans-serif</em> 非衬线字体</p><p><em>monospace</em> 等宽字体<br>指定字体的类别，浏览器会自动使用该类别下的字体</p></li><li><p>font-family 可以同时指定多个字体，多个字体间使用 <code>,</code> 隔开字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推</p></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">font-family</span>: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, <span class="string">&quot;\5B8B\4F53&quot;</span>, sans-serif;</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h3 id="font-face-自定义字体"><a href="#font-face-自定义字体" class="headerlink" title="font-face 自定义字体"></a>font-face 自定义字体</h3><details class="folding-tag" ><summary> font-face 自定义字体 </summary>              <div class='content'>              <p>font-face 可以将服务器中的字体直接提供给用户去使用</p><blockquote><p>问题： 1.加载速度 2.版权 3.字体格式（需提供多种格式满足不同浏览器）</p></blockquote><p>使用方法：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="comment">/* 指定字体的名字 */</span></span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;myfont&quot;</span>;</span><br><span class="line">  <span class="comment">/* 服务器中字体的路径 */</span></span><br><span class="line">  <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&quot;./font/ZCOOLKuaiLe-Regular.ttf&quot;</span>) <span class="built_in">format</span>(<span class="string">&quot;truetype&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="attribute">font-family</span>: myfont;</span><br></pre></td></tr></table></figure>              </div>            </details><h3 id="可供选择字体的方案"><a href="#可供选择字体的方案" class="headerlink" title="可供选择字体的方案"></a>可供选择字体的方案</h3><details class="folding-tag" ><summary> 自定义字体方案 </summary>              <div class='content'>              <ol><li><p><strong>iconfont 图标字体</strong></p><ul><li>在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活</li><li>所以在使用图标时，我们还可以将图标直接设置为字体，<br>然后通过 font-face 的形式来对字体进行引入</li><li>这样我们就可以通过使用字体的形式来使用图标</li></ul><p><em>通过伪元素来设置图标字体</em></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">li</span>&#123;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">::before</span>&#123;</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">    1.找到要设置图标的元素通过before或after选中</span></span><br><span class="line"><span class="comment">    2.在content中设置字体的编码</span></span><br><span class="line"><span class="comment">    3.设置字体的样式</span></span><br><span class="line"><span class="comment">    fas</span></span><br><span class="line"><span class="comment">    font-family: &#x27;Font Awesome 6 Free&#x27;;</span></span><br><span class="line"><span class="comment">    font-weight: 900;</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&#x27;\f1b0&#x27;</span>;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&#x27;Font Awesome 6 Free&#x27;</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: <span class="number">900</span>;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">fontawesome 使用步骤</span><br><span class="line"><span class="number">1</span>.下载 https://fontawesome.com/</span><br><span class="line"><span class="number">2</span>.解压</span><br><span class="line"><span class="number">3</span>.将css和webfonts移动到项目中</span><br><span class="line"><span class="number">4</span>.将all.css引入到网页中</span><br><span class="line"><span class="number">5</span>.使用图标字体</span><br><span class="line">- 直接通过类名来使用图标字体</span><br><span class="line">class=<span class="string">&quot;fas fa-bell&quot;</span></span><br><span class="line">class=<span class="string">&quot;fab fa-accessible-icon&quot;</span></span><br></pre></td></tr></table></figure></li><li><p><em>通过实体来使用图标字体：</em></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&amp;#x图标的编码;</span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;fas&quot;</span>&gt;</span><span class="symbol">&amp;#xf0f3;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p><em>通过类名指定</em></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fas fa-cat&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p><em>阿里图标库</em></p><ul><li>平时自己练习可以使用，相对来说图标更多，质量更好</li><li>公司做项目一定要和原作者取得联系确认版权问题</li></ul><p><em>如何使用？</em></p><p>找到你需要 icon</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/font/20210511110718.png" alt="找到你需要 icon"></p><p>加入到购物车</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/font/20210511110730.png" alt="加入到购物车"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/font/20210511110739.png" alt="将购物车中的图标加入项目"></p><p>点击我的项目</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/font/20210511111249.webp" alt="点击我的项目"></p><p>将文件下载至本地</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/font/20210511110748.png" alt="将文件下载至本地"></p><p><code>解压后得到</code></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/font/20210511111349.webp" alt="解压后得到"></p><p><code>将剩下的文件拷贝到项目中</code></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/font/20210511111412.png" alt="将剩下的文件拷贝到项目中"></p><p><code>将css文件引入</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;./iconfont/iconfont<span class="selector-class">.css</span>&quot;&gt;</span><br></pre></td></tr></table></figure><p><code>复制需要使用的图标字体的Unicode编码，注意&amp;#x是实体图标的使用方法</code><br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/font/20210511111442.png" alt="复制Unicode编码"></p><p><code>伪元素使用</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  //注意需要转义，且没有&amp;<span class="selector-id">#x</span></span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;\e625&quot;</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;iconfont&quot;</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><code>通过实体图标调用</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">i</span> class=&quot;iconfont&quot;&gt;&amp;<span class="selector-id">#xe61c</span>;&lt;/<span class="selector-tag">i</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">i</span> class=&quot;iconfont&quot;&gt;&amp;<span class="selector-id">#xe622</span>;&lt;/<span class="selector-tag">i</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">i</span> class=&quot;iconfont&quot;&gt;&amp;<span class="selector-id">#xe623</span>;&lt;/<span class="selector-tag">i</span>&gt;</span><br></pre></td></tr></table></figure><p><code>通过类名调用</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">i</span> class=&quot;iconfont <span class="attribute">icon</span>-qitalaji&quot;&gt;&lt;/<span class="selector-tag">i</span>&gt;</span><br></pre></td></tr></table></figure><p><code>在css中使用时，需复制demo测试文件中的代码</code></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/font/20210511111449.png" alt="demo中的代码"></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;iconfont&quot;</span>;</span><br><span class="line">  <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&quot;iconfont.eot&quot;</span>);</span><br><span class="line">  <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&quot;iconfont.eot?#iefix&quot;</span>) <span class="built_in">format</span>(<span class="string">&quot;embedded-opentype&quot;</span>), <span class="built_in">url</span>(<span class="string">&quot;iconfont.woff2&quot;</span>) <span class="built_in">format</span>(<span class="string">&quot;woff2&quot;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&quot;iconfont.woff&quot;</span>) <span class="built_in">format</span>(<span class="string">&quot;woff&quot;</span>), <span class="built_in">url</span>(<span class="string">&quot;iconfont.ttf&quot;</span>) <span class="built_in">format</span>(<span class="string">&quot;truetype&quot;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&quot;iconfont.svg#iconfont&quot;</span>) <span class="built_in">format</span>(<span class="string">&quot;svg&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.shopcar</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&quot;\e61c&quot;</span>;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&quot;iconfont&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><em>一定要特别注意路径问题！！！</em><br>在 css 中声明了该字体后再调用</p></li></ol>              </div>            </details>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>less学习</title>
      <link href="/posts/9ffb.html"/>
      <url>/posts/9ffb.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>看到 less 老是想起 less is more 这句话，这门语言的确是把原来很繁琐的 css 给包装成一门类似于编程语言的语言，感觉看视频只能学习到一点，关键还是看官方文档</p></blockquote><ul><li>less 是一个 css 扩展，让 css 变成支持变量，嵌套等操作的 css 语言</li><li>可以去 <a href="https://less.bootcss.com/">Less 官方文档</a> 去学习</li><li>less 是一门 css 的预处理语言</li><li>less 是一个 css 的增强版，通过 less 可以编写更少的代码实现更强大的样式</li><li>在 less 中添加了许多的新特性：像对变量的支持、对 mixin 的支持… …</li><li>less 的语法大体上和 css 语法一致，但是 less 中增添了许多对 css 的扩展，所以浏览器无法直接执行 less 代码，要执行必须向将 less 转换为 css，然后再由浏览器执行</li></ul><h2 id="less-基础"><a href="#less-基础" class="headerlink" title="less 基础"></a>less 基础</h2><ul><li><p>less 可以在浏览器端使用也可以在服务端使用</p></li><li><p>在浏览器端使用 CDN：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li></ul><p>引入</p><ul><li><p>并且需要告诉浏览器我们写的是 less 代码：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;less&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>但是上面的方法是运行时编译 (也就是运行这个网页时才把 less 文件转化为 css)，影响网页加载时间</p></li><li><p>我们想让我们写好 less 文件之后直接转换成 css 文件，这里 vscode 安装 <code>EasyLESS</code> 插件，写好之后会自动生成语义相同的 css 文件</p></li></ul><h2 id="关于-EasyLESS-扩展的配置"><a href="#关于-EasyLESS-扩展的配置" class="headerlink" title="关于 EasyLESS 扩展的配置"></a>关于 EasyLESS 扩展的配置</h2><p>在 settings.json 文件中添加以下代码（注意 json 文件中尽量不要添加中文注释，会报错）</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;less.compile&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;compress&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;sourceMap&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;out&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><ul><li><p><code>compress</code> 代表压缩 css。</p></li><li><p><code>sourceMap</code> 代表生成地图（在浏览器控制台可以追踪到 less 文件位置）</p></li><li><p><code>out</code>代表输出对应的 css 文件</p><p>所以一般全部都为 true</p><p>当然你也可以这样</p></li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;less.compile&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;out&quot;</span><span class="punctuation">:</span> <span class="string">&quot;$&#123;workspaceRoot&#125;\\src\\assets\\css\\&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><ul><li><p>‘${workspaceRoot}’ 代表的是根目录；</p></li><li><p>这样就可以更改生成.css 文件的路径了，但是上面代码配置是我的.css 文件的目录地址，这个自行配置就行；</p></li></ul><p>在 less 中导入文件用 <code>@import</code></p><p><strong>import 用来将其他的 less 引入到当前的 less</strong></p><p>可以通过 import 来将其他的 less 引入到当前的 less 中</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@import &quot;../test.less&quot;;</span><br></pre></td></tr></table></figure><details class="folding-tag" 参数（可选）><summary> 标题 </summary>              <div class='content'>              <div class="note info simple"><p>less 注释 </p></div><p>less 里面的注释分为在编译之后仍然显示和在编译以后不显示两种</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">/* 我在编译之后仍然显示 */ css中的注释，内容会被解析到css文件中 // 我在编译之后不显示</span><br><span class="line">less中的单行注释，注释中的内容不会被解析到css中</span><br></pre></td></tr></table></figure><div class="note info simple"><p>less 变量 </p></div><ul><li>less 中使用 <code>\@</code> 来定义变量</li><li>less 中的变量是<code>块级作用域</code></li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">@color:pink;</span><br></pre></td></tr></table></figure><ul><li>选择器和属性名同样可以作为变量 (但是这种形式用的很少)</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@m</span>: margin;</span><br><span class="line"><span class="keyword">@selector</span>: #wrap;</span><br><span class="line">* &#123;</span><br><span class="line">  // 使用的时候要加大括号</span><br><span class="line">  @&#123;m&#125;: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line">@&#123;selector&#125; &#123;</span><br><span class="line">  <span class="attribute">color</span>: pink;</span><br><span class="line">&#125;</span><br><span class="line">// 网址在使用的时候也要加大括号</span><br><span class="line"><span class="keyword">@image</span>: <span class="string">&quot;../image&quot;</span>;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;@&#123;image&#125;&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>变量的延迟加载 (变量提升)：less 会等到块级作用域加载完成才会替换里面的变量</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">div &#123; //可以先使用后定义 z-index: @var; @var: 3; &#125; // z-index 属性值为 3</span><br></pre></td></tr></table></figure><ul><li>变量发生重名时，会优先使用比较近的变量</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@d</span>: <span class="number">200px</span>;</span><br><span class="line"><span class="keyword">@d</span>: <span class="number">300px</span>;</span><br><span class="line"><span class="keyword">@h</span>: <span class="number">200px</span>;</span><br><span class="line"><span class="keyword">@h</span>: <span class="number">300px</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  // 变量发生重名时，会优先使用比较近的变量</span><br><span class="line">  <span class="keyword">@d</span>: <span class="number">115px</span>;</span><br><span class="line">  <span class="attribute">width</span>: @d; //此处使用<span class="number">115px</span></span><br><span class="line">  <span class="attribute">height</span>: @h; //此处使用<span class="number">115px</span></span><br><span class="line">  //可以在变量声明前就使用变量</span><br><span class="line">  <span class="keyword">@h</span>: <span class="number">115px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>其实 css3 中也支持变量，以两个横线开头定义一个变量<code>--</code></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">  <span class="comment">/* css原生也支持变量的设置 */</span></span><br><span class="line">  <span class="attr">--color</span>: <span class="number">#ff0</span>;</span><br><span class="line">  <span class="attr">--length</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><strong>新版本语法</strong><code>$</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">  // 新版的语法</span><br><span class="line">  <span class="attribute">height</span>: $width;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><a href="http://www.ruanyifeng.com/blog/2017/05/css-variables.html">css3 的变量详解</a></li></ul><div class="note info simple"><p>less 嵌套规则 </p></div><ul><li>父标签的样式可以嵌套子标签的样式 (像在 html 里面的结构一样)</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#father</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: pink;</span><br><span class="line">  <span class="selector-class">.inner</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: purple;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><p>假如要让 子元素 .inner 添加一个 hover 属性</p><p><em>&amp; 表示父类的名称</em></p></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#father</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: pink;</span><br><span class="line">  <span class="selector-class">.inner</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: purple;</span><br><span class="line">    // 不能直接在里面写 <span class="selector-pseudo">:hover</span>,这样写他会直接变成inner的子元素</span><br><span class="line">    // 要这样写</span><br><span class="line">    &amp;<span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">      <span class="attribute">background</span>: pink;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><div class="note info simple"><p>less 混合 </p></div><ul><li>混合是为了避免大量重复的样式代码，可以将一部分样式打包成代码块 (长得很像函数)</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">// 可以传参，即使没有参数也要加括号，加了括号后在 css 文件中不会显示</span><br><span class="line"><span class="selector-class">.template</span>(<span class="keyword">@w</span>,<span class="keyword">@h</span>) &#123;</span><br><span class="line">  <span class="attribute">color</span>: pink;</span><br><span class="line">  <span class="attribute">width</span>: @w;</span><br><span class="line">  <span class="attribute">height</span>: @h;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  // 上面的样式就添加到里面了</span><br><span class="line">  <span class="selector-class">.template</span>(<span class="number">100px</span>,<span class="number">100px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>less 混合支持默认参数，例如：</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.template</span>(<span class="keyword">@w</span>:100px,<span class="keyword">@h</span>:200px) &#123;</span><br><span class="line">  <span class="attribute">color</span>: pink;</span><br><span class="line">  <span class="attribute">width</span>: @w;</span><br><span class="line">  <span class="attribute">height</span>: @h;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  // 这时里面可以不用传参数</span><br><span class="line">  <span class="selector-class">.template</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>less 也支持命名参数，解决了参数不匹配的问题</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.template</span>(<span class="keyword">@w</span>:100px,<span class="keyword">@h</span>:200px,<span class="keyword">@c</span>:pink) &#123;</span><br><span class="line">  <span class="attribute">color</span>: @c;</span><br><span class="line">  <span class="attribute">width</span>: @w;</span><br><span class="line">  <span class="attribute">height</span>: @h;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  // <span class="selector-class">.template</span>(black);</span><br><span class="line">  // 显示错误，w 参数把 black 接收了过去，导致显示错误</span><br><span class="line">  <span class="selector-class">.template</span>(<span class="keyword">@c</span>:black);</span><br><span class="line">  // 正确写法</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><blockquote><p>小知识：haslayout：是 ie6 版本之前的兼容性问题，可以开启 haslayout 来解决兼容性问题 开启的方法：<code>overflow: hidden</code></p></blockquote><ul><li>less 匹配模式：例如想要弄四个方向的三角型，可以在函数的第一个参数上弄一个标识符，然后就可以定义四个混合，这时就可以根据传入的参数来判断想要用的是哪个方向的三角型</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">// 向左的三角型</span><br><span class="line"><span class="selector-class">.template</span>(L,<span class="keyword">@w</span>:100px,<span class="keyword">@h</span>:200px,<span class="keyword">@c</span>:pink) &#123;</span><br><span class="line">  // 假如里面是画三角型的方法</span><br><span class="line">  <span class="attribute">color</span>: @c;</span><br><span class="line">  <span class="attribute">width</span>: @w;</span><br><span class="line">  <span class="attribute">height</span>: @h;</span><br><span class="line">&#125;</span><br><span class="line">// 向右的三角型</span><br><span class="line"><span class="selector-class">.template</span>(R,<span class="keyword">@w</span>:100px,<span class="keyword">@h</span>:200px,<span class="keyword">@c</span>:pink) &#123;</span><br><span class="line">  // 假如里面是画三角型的方法</span><br><span class="line">  <span class="attribute">color</span>: @c;</span><br><span class="line">  <span class="attribute">width</span>: @w;</span><br><span class="line">  <span class="attribute">height</span>: @h;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  // 想要一个向左的三角型</span><br><span class="line">  <span class="selector-class">.template</span>(L);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li><p>当混合里面的第一个参数是 <code>@_</code> 时并且也拥有其他形参时，调用同名混合也会把拥有这个参数的混合调用上</p><ul><li>arguments 变量：和 js 中的 <code>arguments</code> 是一样的，是包含实参的<em>伪数组</em></li></ul></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.border</span>() &#123;</span><br><span class="line">  <span class="attribute">border</span>: @arguments;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="selector-class">.border</span>(<span class="number">1px</span>,solid,black);</span><br><span class="line">&#125;</span><br><span class="line">// 可以把合并语法传入进去</span><br></pre></td></tr></table></figure><div class="note info simple"><p>less 计算 </p></div><ul><li>在 less 中，计算的双方只需要一方带单位就可以了</li><li>例如：<code>100 + 100px == 200px</code></li><li>为了和 css 保持兼容，less 不会把 <code>calc()</code> 属性计算出来，会留到 css 中计算<br>在 less 中所有的数值都可以直接进行运算</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">  // 在less中所有的数值都可以直接进行运算</span><br><span class="line">  // + - * /</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span> + <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>/<span class="number">2</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#bfa</span>;</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.box1</span> &#123;</span><br><span class="line">    <span class="comment">/* calc()计算函数 */</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">200px</span> * <span class="number">2</span>);</span><br><span class="line">    <span class="attribute">height</span>: <span class="built_in">var</span>(--length);</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--color);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><div class="note info simple"><p>less 继承 </p></div><ul><li>继承同样是为了压缩代码，混合有时候两个类似的功能，他们的 css 代码相差不多，但是里面有很多的重复，这时我们可以使用继承来写这部分代码</li><li>在继承中不支持参数</li><li>语法格式：<code>div:extend(.jicheng)</code> (实质就是在两个选择器中加了一个逗号)</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">//:<span class="built_in">extend</span>() 对当前选择器扩展指定选择器的样式（选择器分组）</span><br><span class="line">.p2:<span class="built_in">extend</span>(.p1) &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.p3</span> &#123;</span><br><span class="line">  //直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制</span><br><span class="line">  //mixin 混合</span><br><span class="line">  <span class="selector-class">.p1</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins</span><br><span class="line"><span class="selector-class">.p4</span>() &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.p5</span> &#123;</span><br><span class="line">  <span class="selector-class">.p4</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><em>或者我们这样来看更直观</em></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">// less 文件</span><br><span class="line"><span class="selector-class">.jicheng</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.header</span>:<span class="built_in">extend</span>(.jicheng) &#123;</span><br><span class="line">  <span class="comment">/* header 里的代码 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>less 编译后</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* css 文件 */</span></span><br><span class="line"><span class="selector-class">.jicheng</span>,</span><br><span class="line"><span class="selector-class">.header</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.header</span> &#123;</span><br><span class="line">  <span class="comment">/* header 里的代码 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>想要继承类的所有状态需要在 extend 后面加上 all <code>div:extend(.jicheng all)</code></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.jicheng</span> &#123;</span><br><span class="line">  // 继承的东西...</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.jicheng</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  // <span class="selector-pseudo">:hover</span> 继承的东西...</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.header</span>:<span class="built_in">extend</span>(.jicheng all) &#123;</span><br><span class="line">  // <span class="selector-tag">header</span> 自己的样式</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><ul><li>这样就可以继承本身的和 :hover 的了</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.jicheng</span>,</span><br><span class="line"><span class="selector-class">.header</span> &#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.jicheng</span><span class="selector-pseudo">:hover</span>,</span><br><span class="line"><span class="selector-class">.header</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>              </div>            </details><h2 id="less-小技巧"><a href="#less-小技巧" class="headerlink" title="less 小技巧"></a>less 小技巧</h2><p>注释问题</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">/*编译后会被保留*/</span><br><span class="line">//编译后不会被保留</span><br></pre></td></tr></table></figure><p>适用 !important</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.nav&#123;</span><br><span class="line">    .nav-wrapper(#EFF3F7)!important;//nav-wrapper所有的样式都带上!important</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>避免编译符号 ~</p><p>在字符串前加上一个~即可使用一些 less 不认识的专有语法或者一些不正确的 css 语法。</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>我要我们在一起</title>
      <link href="/posts/9520.html"/>
      <url>/posts/9520.html</url>
      
        <content type="html"><![CDATA[<p>偶然之间看到一篇帖子, 想到了现在我和某人，不知道后来的我们, 我们的十年会不会也变成这样 🌎</p><blockquote><p>整理后的帖子相对完整，原文缺失部分</p><p>这是整理后的帖子 原文： <a href="https://www.douban.com/note/260167887/">https://www.douban.com/note/260167887/</a></p><p>原作者： <a href="https://www.douban.com/people/zmnnzgbd/">你这个贱人</a></p><p>原文地址：豆瓣：<a href="https://www.douban.com/group/topic/36139334/">http://www.douban.com/group/topic/36139334/</a> 【贱贱贱人直播】与我十年长跑的女朋友就要嫁人了。📺</p><p>故事背景地：<a href="http://www.tudou.com/programs/view/36RvNyr4TUI/">http://www.tudou.com/programs/view/36RvNyr4TUI/</a></p></blockquote><p>昨天下午凌一尧给我发来一张照片，是一件婚纱，她问好不好看，我说还行。</p><p>她说“初五举办婚礼，和我们以前想象得一样，有鲜花拱门，有红地毯，有白婚纱黑礼服，就是没有你。”</p><p>我说“要不要我去凑个份子？”</p><p>她半天之后才回复说:“不用了。</p><p>————————————————————分割线—————————————————————<br>2001 年的夏天，我十六岁，正在读高中。即便是夜晚，气温仍然高得令人辗转反侧，黑漆漆的夜晚满是室友们翻身和叹息的声音，而我咬着小电筒，蒙着一条薄被单，写下人生中唯一的一封情书。<br>我的读者叫凌一尧，马尾辫，大前额，身材娇小，细腰长腿小翘臀。要命的是，她偏偏是一位学霸，常年霸占月考名次红榜第一排，这样脑瓜子聪明又美得翻泡的妞儿绝对是众人心目中的雅典娜，只可跪舔不能直视。<br>几乎每天，我都会想入非非，幻想着各种与她搭讪的场面。其中包括她从楼梯上滚下来毁容了，我抱她朝着医院狂奔，并且发誓这辈子我都不会抛弃她，最后她在我的怀里留下了幸福的泪水。<br>送出情书的第二天，我的创作地点就转移到政教处办公室，对面坐着姚主任，我们私下管他叫“姚千岁”。他说：“吕钦扬同学啊，昨天你一夜写了三页纸，今天怎么就咬笔杆了？是不是这个环境不利于激发创作灵感，要不要拿回宿舍慢慢写？”<br>我理智地拒绝道：“不用了，这里有空调。”<br>凌一尧把我的情书送给政教处，这事做得太坑，我内心的伤痛尚未愈合，班主任跑来告诉我一个好消息：“你要上电视了！”<br>“什么电视？”我有些激动。<br>“闭路电视。经过校领导研究决定，这次纪律整顿大会的主题是杜绝早恋，你要在学校直播室做一次公开检讨。”<br>“为什么是我？不就一封情书吗？”<br>班主任思索片刻，说：“可能是别人脸皮太薄了，怕留下心理阴影。”<br>他妈的！<br>纪律整顿电视会议之前的那几天，我的心情却糟糕到极点。<br>每次远远地看见凌一尧，我都会走向旁边的岔路，不愿意与她打照面。说实话，我对她有些记恨，无法理解她为什么那样做，难道被我喜欢是一件很痛苦的事情？如果是这样，以后不喜欢你就是了呗。<br>据说历次电视会议的录像都会被妥善保存，作为我校发展历程的丰碑，为了给学妹们留下一个好印象，我特意理了一个清爽的发型，熨了一下白衬衫，还借了一双白色的耐克跑步鞋。第一次上电视，好激动。<br>那天中午政史二班的体育委员来访，对我进行亲切慰问，鼓励我好好表现。他带来一个消息，说那封情书不是被上交的，而是被他们班主任曹老太缴获的，凌一尧还被拉到办公室做了一通思想审查。<br>学校演播室中间摆着一台黑色的摄像机，镜头前面摆着一个主席台，依次坐着诸位领导以及各年级组长，而门口站着的是六名犯罪嫌疑人，其中一个就是我。那五个家伙我差不多都认识，他们的罪名比较另类，什么拿街机子儿冒充硬币买茶叶蛋，什么大半夜拿鱼竿在校园的池塘里钓鱼的，还有那位住在二楼的同学，他用大搪瓷杯装尿往院墙外面泼，墙外方圆几米的庄稼死得透透的，连野草都长不出一棵。<br>相比之下，我绝对是最纯洁的。但不知道为什么，当我说我因为写情书给女孩却被对方送给老师了，他们一个个都面露鄙夷之色，仿佛我犯下比他们更龌龊的罪行。当时我就清醒地认识到，错的不是我，而是这个世界。<br>由于早恋是今天重点批判的主题，姚千岁将我安排在最后出场。班主任对我有点不放心，还特意跑来对我进行战前动员和辅导，他说：“等会儿千万不要紧张，控制住情绪。”<br>“你怕我被吓哭？”我有种受辱的感觉。<br>班主任说：“不是，我担心你在这么严肃的地方笑场。”<br>终于轮到我了，我站到话筒前面朗读上次写的检讨，尽量不看镜头，像在给姚千岁致哀悼词。正要谢幕之时，副校长却在发表一则有关早恋危害的讲话，此时我非常困窘，傻逼似的杵在那里，被全校数千双眼睛在看不见的地方盯着，这种滋味真心痛苦。<br>不知道副校长说了什么，姚千岁突然对我发问，所有人都看着我，包括镜头。我一头雾水地“啊”了一下，此处是第二声。<br>姚千岁将问题重复一遍：“吕钦扬同学，你对自己的所作所为有没有感到后悔？”当时我就震惊了！这他妈算是什么垃圾问题？你又不是没看过我那封情书，写得感人肺腑，催人泪下，引人沉思，都发誓这辈子非凌一尧不娶了，你现在他妈的问我后不后悔？我他妈只是以大局为重，配合你演一场杀鸡儆猴的戏而已，你还真把我当冤大头了？我就算真的后悔了，不可能当众说出来啊，否则以后还怎么混？面对那黑洞洞的镜头，不，那不只一个镜头，那是数千双眼睛，我作出一个重大而深远的决定———我盯着镜头，说：“我不后悔。”<br>那天傍晚的天气非常好，走出学校演播室，西边铺天盖地的一大片火烧云，我的白衬衫都被映得红彤彤的。各个班级刚好下课，学生们像出栏的猪一样涌出教室直奔餐厅，许多认识或者不认识我的人冲着我打招呼，连年轻的男女老师都意味深长地对我哼笑。<br>经过凌一尧所在的班级，几个女生拿着饭盒走出来，其中一个便是凌一尧，她抬头看见我，立即像见了鬼似的退了回去。其他女生起哄起来，悠长的“噢哟”在走廊里回荡着。我这样一个阿 Q，经历此生最为辉煌的时刻，迈出的每一步都像踩在软绵绵的云端，仿佛自己是一个凯旋的盖世英雄。<br>我为一时的倔强付出巨大的代价———惩罚等级由警告升级为记过，礼拜一全校晨会，别人都在聆听领导训话，而我在冲洗操场角落那个简陋又瘟臭的厕所。冲完厕所以后，我淡定地走过队列前面的那条煤渣路，手里的铁皮桶吱呀吱呀地响着，相当拉轰。<br>这些举动相当幼稚，用现在的话概括这是在“作死”，但它们在当时足以让我成为全校的三大奇葩之一。更悲剧的是，入榜的是我的两个死党，“大乔”和“子石”。我之所以鼓起勇气给凌一尧写情书，其中一个原因便是和这两个傻逼打赌了，他们说如果我追到凌一尧，他们就在校园里裸奔一圈。<br>当时周杰伦才出道，大乔就果断成为铁粉，一曲《爱在西元前》日夜哼唱，最终进入全校文艺汇演的名单。然而，正式演出那天他当着数千师生的面公然忘词。他悲愤下台后并未气馁，而是继续苦练这首歌，两天以后的傍晚，他偷偷翻窗进入学校总控室，对着麦克风重新清唱一遍《爱在西元前》，那销魂的歌声传遍校园的每一个角落。子石名叫蒋慧东。他去泡隔壁职高的一个妹子，几个地痞们带着自家车床磨出的砍刀来战，他舞着泔水老汉的扁担，光着膀子把对方揍得满地找牙，连学校保安都没敢过问。但就是这样一个群架王，晚自习时突发奇想，挖了一坨清凉油抹在 JJ 上，试图达到“头悬梁锥刺股”的功效，最后他的嚎叫响彻整个教学区，从此再也没人记得他的神勇。我不知道大家如何评价的，因为我的氪金狗耳早已阵亡。之所以重点这两位仁兄，是因为他们俩正在看这个直播故事，他们希望我多褒少贬，不要破坏他们的伟岸形象，但我选择站在真相这一边。随后很长时间里，我都不太好意思和凌一尧走得太近，因为总有傻逼在旁边“矮油”“噢哟”。子石和大乔不遗余力地耍宝，烘托我的形象，而我感觉这样太小丑了，但一抬头我看见凌一尧嘴角的笑，一下子发现自己非常愿意当这个小丑。在那个年龄，无论无意的出糗还是有意的献丑，只要能博取那个人的一笑，便会欣喜若狂。而多年以后，这样的快乐已然灭绝。<br>因为有我这个炮灰的经验教训摆在这里，喜欢凌一尧的男生很多，敢于追求的却几乎没有。我们亲眼看见一个高三哥把她在圣诞节把她约到桥边，送她一盒巧克力，凌一尧怎么不肯要，三哥一怒之下把那盒巧克力丢进河里。第二天，子石和大乔把巧克力盒子捞上来，打开包装一看，嘿，没有进水。我们把巧克力分了，晚上遇到凌一尧时我拿了三块几乎被我焐软的巧克力给她，她居然没有拒绝，收下了！我本来是想恶作剧一下而已，她这样一来，我都没敢说那是昨天被丢下河的那盒巧克力。巧克力事件之后，莫名其妙地，我和她的关系出现好转，虽然彼此遇见时从来不打招呼，但她嘴角总是有一丝浅得几乎看不出来的微笑。<br>“你眼瞎啊，她一直板着脸，哪里有过微笑？”大乔非常直白地反对。子石也很困惑:“难道这就是肉笑皮不笑？”我只能慨叹这两个蠢货的无知，告诉他们有一些东西“只有相爱的人才能体会”。后来凌一尧说，那大半年里我们是在用意念恋爱，没有一句对白。<br>为了迎接素质教育检查团的视察，学校举办一次声势浩大的秋季运动会，还从体校借了一帮外援来捧场。那三天里，全校处于停课状态，对我而言这就是另一个形式的放假而已。而我发现自己有半套黄冈密卷的作业没写，科代表说运动会一结束就要交作业，我不得不加班加点地抄答案。教室里只有寥寥几人，凌一尧突然来我们班找一位学霸妹子，也是她的初中同学。我躲在高耸入云的书堆后面，看着她们低声说笑，虽然不知道她们在聊些什么，可是她一笑，我也忍不住跟着龇牙咧嘴。不料，她一扭头看见我时愣了一下，双眼瞪得大大的，就跟喵星人准备开天眼了似的。<br>我赶紧低头写试卷，再一抬头时她已经站在我旁边，我一紧张，赶紧把那份标准答案往桌肚子里塞，比被老师发现还紧张。她伸手把那份答案掏出来，说：“我还以为你在认真学习呢，原来是在抄答案。”<br>我说“偶尔为之……”<br>她又问：“你怎么从来都不和我说话的？”<br>我说：“我怕写检讨。”<br>她的小脸涨得通红，辩解道：“那个真不是我弄的！我把那信夹在英语课本里，被曹老师翻到的！”<br>我说：“你知道姚千岁说了什么不？他说我是‘害群之马’，自己不学好还去骚扰人家品学兼优的女生，是‘癞蛤蟆想吃天鹅肉’。他都这样说了，我怎么敢再和你说话？”<br>她皱起眉头，将信将疑地说：“姚主任是想用激将法吧？”<br>我哼笑一声，说：“如果我以后有出息，这就是激将法，如果我没有出息，这就是他的神机妙算，老狐狸从来不会吃亏的。不过他也没有说错，我的确是癞蛤蟆想吃天鹅肉，可能再过多少年，我还是他手里的反面教材。”<br>“你后悔了？”她低声问道。<br>我说：“不知道……”<br>运动会之后没多久，凌一尧偷偷塞给我一张字条，她说：“如果你能够考到本科，高考结束以后咱们就假装在一起，气死姚千岁！”<br>子石和大乔很快发现我的不正常，因为我很少搭理他们俩，整天埋在教室里学习，有点“不合群”了。他们俩试图拯救我于水火之中，但研究许久都未果，直到看见我与凌一尧在教学楼走廊里相视一笑，他们才若有所悟。<br>于是，我被驱逐出三大奇葩的队列。其实没有了我，他们俩照样可以玩得很嗨，譬如用煤渣块狙击操场上接吻的小情侣。整个高三，我们都保守着这个秘密，两人即便在校园里迎面走过，也从来不打一声招呼。但我看见她浅浅的笑意，我努力压抑着内心的激动，双拳握得指甲嵌入掌心。偶尔旁边没人的时候，我会自言自语地把她的姓名说出来，然后像一只疯猴子似的狂奔乱跳，那真是一件快乐到极点的事情。凌一尧，我喜欢你呀！喜欢得恨不得在教学楼里裸奔，恨不得在操场上打滚，恨不得冲进校长办公室尖叫！那一年的高考，全省数学平均分 68 分，我只考了 38 分，总分离本科线还差 9 分！填报志愿那天，我和凌一尧在美术考生画室旁边的天台上聊天，我非常沮丧地告诉她，我没能达到本科线，她不用兑现当初的约定了，但凌一尧抿着嘴巴摇头，笑盈盈的样子。她说：“只要你努力过就行了呀。”我愣了一下，不太明白她的意思。她再对我眨巴眼睛，我这时候才猛然顿悟，开心得手舞足蹈起来，而她甩着小手直打我，叫我“不要发癫”。这是她的一个口头禅，每当我或者她的朋友开心得失态，她就会很温和地笑着，在后面提醒“哎呀，不要发癫啦！”对我而言，这个分数只适合报大专，而具体哪个学校哪个专业都是无所谓，当前要务是离凌一尧近一些，于是我和她一起去了六朝古都。我们的学校不在同一个区，但坐车也就半个小时路程，平时见面还不是难事。大一的课程比较少，凌一尧突然提出来要去勤工俭学，我问她准备干点什么，她提出来的想法毫无创意，什么饭店接待，发传单，卖电话卡。<br>我问她“你知道我爷爷干嘛的么？”她摇头说不知道。我说国庆节回家，我把他的传家宝带来，到时候你就看着吧，我小学就做他的学徒了。国庆节之后，我们在大学城摆起爆米花的小摊位，摇啊摇，摇啊摇，砰！那天爆米花很好卖，特别是凌一尧心惊胆战地摇着那个摇把，就有许多人过来围观，毕竟女孩子做这个太新鲜了。不过第二天傍晚就有人把我们赶走了，因为附近停了车子，一声炸响之后就有警报器鬼叫，涉嫌扰民。<br>尽管如此，我们还是很开心，晚上去看半价电影，柜台问我们要不要爆米花，我和凌一尧傻呵呵地笑。<br>她曾经说:“如果哪天我们想要分开了，就想一想曾经一起在街头卖爆米花的日子。”<br>现在我正在想，你呢？<br>大学那几年，我们与大多数校园情侣一样，试着一起打工却总是没有头绪，吃喝玩乐又没有太多钱，经常出去玩半天都花不了五十块钱，照样穷开心。到了期末，作为一个学霸，她完全闭门不出，专心复习，而我一个学渣只要做完小抄就可以安安心心地玩游戏了。<br>就这样一直混着，我到了大三时，我们面临分道扬镳的危险。她还要一年才本科毕业，以后还要考研，而我已经面临实习。她说:“要不你考专升本吧！”我考虑好几天，最后还是决定离开校门，我说“你乖乖上学，以后还要读研，我先出去闯，等你毕业了我刚好娶你过门！”我至今不知道自己当初的决定是否正确，有时坚定地认为那是男人的担当，但一旦喝多了就会把因果联系扯得非常远，最后归根结底到我没有好好念书才会导致两相忘的结局。我第一份工作，是在一家监理公司当资料员，每月只有一千四百元的工资。当时我最喜欢听别人说“工作难找”，因为只有听到这样的话，我才觉得自己不是 loser。<br>在监理公司工作，本应是很轻松的，但不是指我们这种苦逼资料员，每天白天忙得要命，对着电脑处理各种文件，晚上凌一尧打电话过来和我聊天，我已经累得只想闷头大睡。当时我的心情的确非常焦躁，经常怀念学校里的惬意生活，所以当凌一尧喋喋不休地说着学校里发生的好玩的事情，我却没有耐心听下去，打断道:“明天再聊吧，你也早点休息。”她愣了一下，说:“你是关心我呢，还是嫌弃我呢？”我说:“我就是很累。”她呵呵冷笑一声，把电话挂了，周围一片寂静时我却睡不着了，一下子被自己吓醒了:三年了，这是我第一次这样大逆不道！凌一尧是一个性格很犟的女孩，她不轻易翻脸，但只要翻了脸，那就真是很难弥合了。她掀起的冷战持续足足一个礼拜，电话照接，但就是很冷淡，冷淡得让人觉得她一夜之间移情别恋了。我急得团团转，但她认为的惩罚时间一到，就立即打电话过来问“知道错了吗？”我说“罪该万死。”“以后还会再犯么？”我赶紧发誓，这辈子都不敢再敷衍她这个小姑奶奶，她这才给我一条生路。但是，冷战结束不等于我们之间的矛盾消失，她只需要学业和恋爱，而我刚刚开始承受来自各方面的压力，尤其是对未来的担忧。我当时是一个胸无大志的可怜虫，我最羡慕的职业只是总监，啥事不干就有人送烟酒塞红包，我这辈子就这点理想了。<br>资料员干了大半年，自我感觉非常良好，跟在监理后面混吃混喝，烟酒不断，施工单位把我们当爷爷供着。<br>有一天，凌一尧的手机被偷了，我发现自己的存款竟然不够给她买一只新手机。那种挫败感极其折磨人心，但凌一尧不介意，她买 ic 卡和我打电话，说反正平时只和我联系，叫我以后赚了大钱再给她买。有妞如此，夫复何求？可是这个“大钱”在哪里？我当时尚未感觉到紧迫感，还在盘算着自己哪天有了监理资格，该有多轻松惬意。<br>情人节那天，我和凌一尧在外面约会，经过一家婚纱店，她就把小脸贴在玻璃橱窗上看，她说“以后咱们结婚的话，就租这件婚纱走红地毯，怎样？”我得瑟地说“租什么租，直接买下来收藏就是了！”凌一尧蹲下来看角落里的标价牌，低声说“你至要不吃不喝一年半才能买下来。”我当时就脸红了，不是因为自己高估婚纱的价格，而是因为高估自己的能力。我居然要不吃不喝一年半才能给我的妻子买下婚礼上那件婚纱？说到刚毕业的那段屌丝岁月，心情有些郁闷，还是说点有趣的事情吧。那天我给凌一尧的情人节礼物是一只熊娃娃，四十五块钱。她很开心地放在家里，可是她叔叔家小孩看中那个娃娃，蛮横地抱了回去。凌一尧不好意思说不给，但她第二天坐了俩小时的车回到那个卖娃娃的小店，买了一个一模一样的，直奔她叔叔家，硬是把我送的那只换了回来。我说“两个都一样，干嘛还要换？”她说“我都给那一个取了名字，两个怎么可能一样？”<br>终于有一天，我决心辞职，离开这种安逸却庸庸碌碌的生活，原因之一是和我一起共事的监理大叔挨揍了。<br>当时监理有些严格，把施工单位惹毛了，平时称兄道弟的人按住老监理揍，最后甩下一句话:“你们这种垃圾，给脸不要脸，我们看在你们是业主的走狗的份上才丢点骨头给你们，你们还蹬鼻子上脸了？”他们没有为难我，但我被伤到了:我这辈子不可以做一个捡别人残羹冷炙的走狗。原因之二便是凌一尧考研了，我想多赚钱，争取在她研究生毕业时给她一个安稳的家。她读的是本校的研究生，于是我去南京找了工作，三年的同居生活开始了。<br>房子是凌一尧找的，四十平，月租六百。我们一起购置许多东西，比如简易折叠衣橱，厨具，餐具，以及被褥。凌一尧把两副餐具摆好，脸上满是小妻子般的认真，我躺在床上看着她忙这个忙那个，突然觉得不可思议:我十六七岁时得有多幸运才会得到这样一个小家伙的青睐！<br>凌一尧有时很像一个孩子，某个周末我去上班，她一个人在家睡到黄昏。我下班回来时她还抱着枕头睡着，我换拖鞋时她睁开眼睛，说:“吕钦扬，我最喜欢看你回家。”我说“噢”“那你什么时候最喜欢我？”我没回答上来，她有些不高兴，到了第二天早上我才告诉她“我们并肩站在镜子前一起刷牙的时候我最爱你”<br>我们那段时间的生活条件很简单，早餐是熬一小锅米粥，一小碟肉松，还有两个煮鸡蛋。我们约定谁先醒谁先去做，但每次都是她先醒，我百思不得其解，她不是那么容易自然醒的人，可是我又从来听不到闹铃声。后来我才知道，她把闹铃调成震动，把手机垫在枕头边缘，这样她就可以早起做饭又不把我吵醒。“白痴，手机会有辐射的啊！”我埋怨道。她说:“我就是喜欢喊你起床吃早饭呀！”她那得瑟的模样，就像幼儿园里得了小红花等待表扬的小朋友。<br>当时她的手机是大学室友淘汰下来送给她的，摩托罗拉的，开合时都会吱呀吱呀地响，外面的漆都掉了。我工作三个月，她的生日那天，我买了一只小的儿童蛋糕，两个人一起做了几道菜，这个生日就这样勉勉强强过掉了。 晚上，她裹着被子躺在我怀里看电视，我从枕头底下摸出一只盒子递给她，她小心翼翼地打开，里面是我攒钱买的一部夏普翻盖手机。 她盯着那手机看了半天，一句话也不说，我有些纳闷，把她掰过来时才看见她的眼泪啪嗒啪嗒地往下掉。我问道：“不喜欢？” 她还是什么话都没讲，直接搂住我的脖子，眼泪直接往我肩膀上擦，后来我才知道，前两天她同学嘲笑她的手机老土，“五十块钱卖给我都不要”，她怕我听了难过，就一直没敢告诉我。<br>哪怕已经相恋那么多年，凌一尧在我眼里依然是一个雅典娜，集性感，可爱，聪慧，与善良于一身。她穿着睡裙抬起胳膊晾晒衣裳；把我的脸假想成镜子左照右瞧的时候最可爱；她坐在台灯下一边写作业，一边与我讨论自由主义与无政府主义；她明知道行乞的人是骗子，但路过那些人面前时还是忍不住丢一枚硬币，以求自己良心的安宁。 天气转凉的时候，她开始向同学学习针织，买了毛线照着图册开始鼓捣起来，并且不允许我偷窥她的杰作。然而当作品终于完成，试穿时她才悲催地发现毛衣小了一圈，即使穿上也像猪八戒中了三个菩萨的套索似的。 我被勒得喘不过气，非常无助地看着她，她却气呼呼地拍我的肚子，说：“都怪你！养这么胖！浪费我的心血！” 为了穿上她这件开山之作，我决定努力减肥，当我觉得自己可以穿上那件毛衣，却又错过穿毛衣的季节。再后来，那件毛衣也找不着了，如今，那个为傻逼织毛衣的女孩也不见了。<br>大乔在镇江工作，而子石在宁波，有一次他们俩一起来南京玩，我们四人一起去吃傣妹。聊天时大乔说漏嘴了，说到当年他们俩和我打赌的事情，凌一尧的脸色顿时一沉，问我：“你追我就只是因为一个赌？” 我吓得脸都白了，因为我记得一些影视剧里这样的事情会导致女生彻底翻脸，大乔和子石也愣住了。 但凌一尧马上又笑起来，对大乔和子石说：“那你们俩说话算数，什么时候裸奔？”<br>子石赶紧辩解说：“等你们俩结婚了，我们就在婚礼上裸奔，好吧？” “行。”凌一尧愉快地答应。 我觉得非常欣慰，我们家尧尧是一个开得起玩笑的好孩子，但晚上回到家里，她终于收起笑脸，要我好好解释一下那个赌到底什么意思———原来她只是不想在别人面前丢我的面子，但该清算的账一个都跑不掉。 我很遗憾当时没有趁机要大乔和子石兑现诺言，现在他们再也不需要裸奔了。<br>有时我觉得凌一尧挺难揣摩的，还是一次情人节的早上，我们在南京地铁站外面看到一个男人捧着一束花向一个女孩单膝下跪，当众表达爱意。凌一尧一脸艳羡地旁观着，一口气一直提着，直到围观结束才舒畅地吐出来，啧啧地回味无穷。她看得太认真，以至于不知不觉地将嘴里的豆浆吸管咬扁了，有点郁闷，我只得去便利店买了一瓶爽歪歪，因为可以拿吸管。 我以为她喜欢这种浪漫的玩意儿，于是下午下班后也买了一束花，准备找个地方让她开心一下，不料见面后我刚把花拿出来，她吓得赶紧往旁边走，低声说：“快收起来，丢人死了！” 我有些受挫，垂头丧气地跟她一起回家，不料关门以后她一边埋怨我乱花钱，一边得瑟地把花夺过去闻了又闻，喜悦之情溢于言表。我问她为什么看别人送花表白时那么开心，她说：“喜欢看戏又不等于喜欢演戏，被人围观的时候好难为情啊，像个白痴似的。” “那我们结婚的时候怎么办？那么多人围观。。。”我问。 凌一尧想了想，居然露出紧张的神色：“是啊，还真是一道坎儿，我现在就得开始做心理准备了。”<br>凌一尧读研三的时候，她家里开始给她介绍对象，反复几次之后她终于交代说自己已经有男朋友，而且交往很久了。她家问我的具体状况，凌一尧怕被反对，于是给我虚报一些内容，尤其在收入方面，她说我的职务是部门经理，月薪八千，但事实上，但是我当时只有三千五。 “你家很在乎这个吗？”我非常脑残地问。 凌一尧白了我一眼：“在乎了又怎么样？难道现在还不是时候？” 我当时有种尊严遭到践踏，尤其是她虚报我的收入状况，觉得她瞧不起我当时的经济状况，于是自个儿生了闷气。但凌一尧也被她家里催得紧，加上做课题和找工作的压力，她的心情也非常糟糕，于是和我第一次吵开了。 我们彼此说了很伤对方的话，她说我没出息不长进，我叫她去找个小老板，不用跟着我受穷罪。最后，她气得躲在阳台上哭。我坐在房间里，看着她用了一年多的旧包，空空如也的梳妆台，还有那只我送给她的，使用两年仍然干干净净的手机，突然心酸得疼。 我走到阳台，把她拥在怀里，说了一声对不起。她没有顺从，也没有抗拒，只是望着眼前这个城市的一隅，目光里满是迷茫。我渐渐意识到，这已经不是无忧无虑的高中，也不是温饱与快乐即可安生的大学，我若是化不开她的忧虑，兴许可能永远地失去她。<br>凌一尧即将毕业时，我离开南京，因为朋友喊我一起出去闯，去海边干一个很大的围海工程。他描述了一幅美妙的蓝图，一起合伙搞土方，我在测量和预算方面有些经验，他信得过。 我当时觉得这是一个千载难逢的机会，尚未与凌一尧商量便一口答应下来，我要向她证明我不是一个安于现状的窝囊废，我终究要闯出一片天地。她知道以后非常生气，但我意已决，她也不好作出过多阻拦。她给我打包行李，又一直把我送上长途车，她没有哭，但车子开动时她站在卷起的尘土里，额发在风中飘动，抬手轻轻一挥，我整颗心都猛地沉了下去。我得有多铁石心肠，才会踏上一条离你越来越远的路呀？每当我醉了酒，天旋地晕的时候，我都会想起无数个凌一尧。 那个穿着校服扎着马尾辫，清秀又稚气的凌一尧；那个在昏暗路灯下偷偷塞字条给我的凌一尧；那个一接吻就会忍不住闭上双眼的凌一尧；那个睡到半夜突然抱住我的胳膊说“我爱你”的凌一尧。但唯有那个站在黄昏余晖中无奈地目送我远去的凌一尧，最让我寝食难安，甚至哪天让我死不瞑目。<br>海边的气候非常恶劣，紫外线强度高，而且海风像刀子一样，脚下的土地踩十秒就能踩出一个吃人的陷阱。除此以外，我们住在活动板房里，而工人们直接搭了简易窝棚，而且每一滴淡水都是稀缺资源，尽管我们面对着整片大海。 我们先请承建单位吃饭，穿得体面的都是 X 总，稍微邋遢的都是 X 工。这帮人都不是善类，他们在酒桌上的目标不是吃饭，也不是谈事，而是要把对方往死里灌，这也是朋友带我过来的原因———扛酒是我的技能之一。 这一喝，便是一顿接一顿，有时上顿的酒还没醒，下一顿的酒又开始了。 那天为了报价的事情，我们又请客吃饭，觥筹交错的时候凌一尧突然打电话来，说：“我肚子疼得厉害。”<br>“怎么了，来那个了？”我问。<br>“不是，就是疼。”<br>“是不是着凉了？要不要去医院看一下？”除了这些废话，我还能说些什么呢。<br>“你在干什么？”<br>“我在喝酒呢。”<br>凌一尧无奈地苦笑，说：“喝酒？那你继续喝吧。”然后她挂了电话，我再回拨过去，已经没人接听。此时，里面的人在喊我主持那圈酒的喝法，我只得回到包厢，然后又是喝醉。坐车回海边，一路停了四次下来呕吐，吐得魂都要丢了，却还要逞强大骂这种酱香型的酒太他妈不适应了。第二天酒醒以后，我才依稀想起凌一尧说肚子疼的事情，赶紧打电话过去慰问。她说她夜里吃了止疼片，迷迷糊糊一会儿醒一会儿睡，直到天亮才眯了一会儿。这就是恋人分离的痛苦，你不知道她有多需要你，而她不知道你有多心疼她，两个人都在各自的世界以为自己是被遗忘的那个人。大多数的矛盾都是在这种分离中诞生，若是近在咫尺，天大的矛盾，一个拥抱即可化解。“我离开这段时间你还适应吗？”我问。 她沉默片刻，说：“还好，快习惯了。就是一看见你的拖鞋，枕头，牙刷和杯子，都有些失落。以前打扫房间时在床垫底下找到你的臭袜子都会骂你，现在找不到了，却更加难过。”<br>那个围海工程相当艰苦，与大海斗智斗勇，一边铺路一边通车，潮水一来就得逃命，潮水一退就得抢工期，有时昼潮夜汐冲得猛烈，几天的血汗都白费了。那间房子的租期快到了，房东要一次交满一个季度，而我和凌一尧的八万块共同定期存款还有一个多月。她舍不得放弃利息，问我有没有现金，可我身无分文。刚好有一个堤坝等待合拢，若是潮水来了，豁口会被冲开，而抢堵的时间很有限。业主方为了避免大的损失，许诺谁去把这事操作了，可以现场支付劳务费以及机械台班费，双倍。其实这事的危险并不大，只不过潮水将至，上机操作的人会被困在堤坝上，直到潮水退去。我和另一个小伙子约好一起上了，两个人，两台大型挖掘机。一个多小时左右，豁口堵住了，我想回到岸上，但指挥部不允许，要我们呆在挖掘机上。果然，二十分钟后，潮水铺天盖地漫上来了，把黑色的编织袋堤坝淹没了，刚好把挖掘机的履带淹没一半。我四周都是茫茫的海水，海风卷着浪水往驾驶舱打，像下雨一样。没有方向感，恶心，眩晕。期间，凌一尧发短信问我在干什么，我没敢告诉她我在海水中央，我说外面在下雨，我在打牌。她说:“你不是一向不喜欢打牌吗？”<br>我说:“玩玩嘛，闲着。”她有点不高兴:“你不要沾惹那些坏习惯。”整整三个小时，潮水才渐渐退下去，我回到指挥部已经反胃得不想吃饭。拿到业主给的两千元现金，我直接开着一辆破摩托车赶往十五公里外的小镇，把钱打了过去。“我把钱打给你了。”我打电话说。“你前天不说没钱么？借的？”我说“是啊”她切地一声，说“你才不会向别人借钱呢，你不会是打牌赢来的吧？”我楞了一下，然后笑:“哈哈，被你发现了。”<br>凌一尧是一个十足的守财奴，即便她不缺钱，也不舍得在享受消费上花费过多。相处那么多年，她惦记过的名牌东西少之又少，我几乎可以数得过来。她曾经眼巴巴地惦记 IPONE4，我打算给她买一部，但她嫌贵不肯要，最后买了一个 IPOD。她一手举着 IPOD，一手举着那只被时代甩得老远的夏普翻盖，说：“这两个加起来，就是 IPONE 啦，分工还很明确呢！”<br>　　我问她：“你干嘛那么节省？”<br>　　她说：“怕把你花穷了，以后娶不起我。”<br>　　我又逗她：“如果以后咱们俩不在一起，你不是亏大了吗？”<br>　　她一边鼓捣着 IPOD，一边随口答道：“那更不能乱花了，万一别的女孩大手大脚的，你更娶不起了。我得给你攒着，不能让你打光棍。”<br>　　她当时只顾着玩游戏，没有多想，可是晚上睡觉睡到半夜，她突然一下子坐起来，把我吓了一跳。我问她：“你怎么了？”<br>　　她说：“刚才做梦，梦见你白天和我说的话，你为什么说以后咱们俩不在一起？”<br>　　我无奈地解释：“我就随口说说而已。”<br>　　她把被子往旁边一扯，睡到床的边缘，背对着我，嘀咕道：“以后不许说了，提都不能提。”<br>凌一尧从未到过海边，她印象中的海滨是蓝天白云软沙滩，海水哗哗地舔脚丫，但我这里是黄海，海水像咖啡一样浑浊，海风达到六七级是起步价。她毕业时曾经想来这里看我，但我没有让她来，只是说我一闲下来就争取回去找她。 我怕破坏她对大海的憧憬，怕她嫌弃我十天半个月不洗澡的邋遢，怕她心疼我的嘴巴因水土不服而长出一圈血痂。这里连一个女性专用的卫生间都没有。她到处找工作，尽管姿态摆得很低，却还是屡屡碰壁。有的单位觉得她的学历过高，生怕她呆得不长久，于是不录用；有的则完全将她视为一个普通的劳力，开出的待遇很低；甚至有人觊觎她的年轻漂亮，作出一些暗示。 而那段时间，我们正在和当地的一拨人开仗，他们带来几辆渣土车堵路，要包揽这里的活儿，叫我们让出便道工程。若是在城市里碰到这种飞扬跋扈的人，我兴许会躲得远远的，宁可吃一点亏也不去招惹，但这次不一样。我要生活，我赚钱，我要像野狗一样咬死所有抢我饭碗的同类。 那场架的参与者大概有四十多人，我们这边是一帮来自天南地北的年轻人，而对面都是当地的流氓。我们这边的人大都是老实的工人和斯文的技术员，要么不会打架，要么下不去手，非常吃亏。我遭到围殴，后脑被狠狠捶了几拳，整个人都懵了，拎起一块木方就挥舞，完全处于混乱状态。 那个和我一起守堤坝的小伙子被打急了，他满脸鲜血，一边吼着，一边爬上一台轮式挖掘机。油门一加，斗子的钢齿直接拍扁一辆渣土车的驾驶室，这样一个疯狂的举动，终于镇住那帮地痞，也保住我们的便道工程。 事后我才发现，我左手疼得厉害，端不起饭碗。我朋友送我去医院拍片子，虎口骨折并且肌腱撕裂。原本这事我们可以报警，让对方赔偿，甚至以故意伤害罪起诉，但是一旦如此，那个开挖机的小伙子也可能逃不脱干系。<br>老板说：“这事就算了吧，医药费我们自己付。” 而左手虎口的伤，虽然差不多治愈了，最终还是留下终生的缺陷，大拇指的反应非常迟钝，握拳执物时总是非常别扭。老板叫我不要去鉴定伤残，直接承诺补贴我五万元，有时，我们对于这个社会而言只是一个小小的工蚁，随时可以是一个牺牲品。凌一尧知道以后在电话里哭，叫我赶快回南京，但我没有听她的，固执地留了下来。我叫她再等我一段时间，只要工程结束，我拿了工资分红和伤残补贴金，就完全有能力娶她回家了。<br>凌一尧向来是一个非常隐忍的女孩，如果不是沉重得让她无法承受的坏情绪，她都不会轻易向我宣泄，顶多闹一闹小脾气就过去了。她终于找到一份算得上满意的工作，每天一个人上班下班，一个人吃饭睡觉。我从镇上搞来一个无线上网卡，夜晚闲下来时会开车开到一个搜得到信号的堤坝上，和她视频一会儿。她每次都会像约会似的认真对待，梳洗化妆，连小房间都收拾得干干净净。由于摄像头和屏幕是两回事，我们轮流看着着镜头，好让对方可以感受被“深情凝望”的滋味。有时我会说：“尧尧，我想要你了。”她说：“来吧。” 然后我们互相抖窗口，这就是相隔数百公里的性爱。有一天，她加班到十点多，往回走时遭到一个变态男人的尾随，无论走得多快，对方都紧随不舍。情急之下，柔弱的她向路边一辆车子求助，司机帮她用远光灯照那个变态，并且大声叱问，那个变态才落荒而逃。 尽管安全脱险，但凌一尧受到很大的惊吓，一整夜都没敢睡觉，她打电话与我吵架，问我到底回不回去。我给出的答案与以往一样，做完这个工程至少能带十七八万回去，只要干完就立即回去。但她不依不饶，两人开始争吵起来。 最后她说了一句狠话：“我今天要是被人强奸了，你带一百万回来又能怎么样？你口口声声说赚钱是为了娶我，我看你是为了你自己，这样的恋爱谈了还有什么用，有你没你都一样，不如分掉算了。” 那天我陷进淤泥潭里差点丢了小命，被人救援上来腰部以下几乎麻木，从小到大从未受过那样的罪，本来就满腹的委屈，被她这样一说，我也忍不住光火了：“分就分！嫌我没出息的是你，现在埋怨我不在身边的又是你，你以为我想背井离乡在这个鬼地方卖命？既然这样，你去找一个富二代好了，不愁没钱花还天天陪着你，只要拔一根毛就能把你娶走！” 她听我这样一吼，顿时被呛住了，电话那头沉默许久以后她才低声地说：“吕钦扬，你以前不是说过么？我是你辛辛苦苦追来的，几千双眼睛见证的。。。” 她说到这里就说不下去了，带着哭腔挂了电话。 而我一下子醒悟过来———高中毕业的那个暑假，我曾经说过，“你是我辛辛苦苦追来的，几千双眼睛见证的，以后只有你甩我，没有我甩你。即使你哪天说了分手，我也不会答应。” 原来她一直都记在心里。<br>当我年底离开海边，那场异地恋已经持续长达九个多月。这九个月里，我们一个在风急浪高的海边，一个在节奏匆忙的城市，过着完全迥异的生活。我提着行李包从车站里走出来，城市的喧嚣让我觉得无所适从，就像一个流放雪山多年的野人。 一看见我，凌一尧的眼圈就红了，她扑上来一把抱住我的时候，周围的人都在好奇地看着，仿佛我们是偶像剧的男女主角。当我走过一面镜子，无意中往里瞥了一眼，这才明白到底怎么回事———我穿着一件我自以为还算干净的军大衣，面部被海风和紫外线弄得又黑又粗糙，头发不自然地翘着，仅仅在路上耽误两天就长出青色的胡渣，完全是一个年轻农民工的形象。而我身边的凌一尧，衣着细致，身材窈窕，化着几乎看不出来的裸妆，完全是一个漂亮得让人忍不住多看几眼的都市女孩。不知道怎么的，她挽我胳膊时，我不自觉地往旁边避让，总是不习惯这样的亲昵。她很快感受到我的疏远，也不再勉强，打车时我们坐在后排，每人坐一边，互相不说话。她带我去买衣服，然后一起去宾馆开房，我洗澡时她帮我搓背，两人赤裸相对时我才告诉她，刚才我突然涌起一阵自卑感。凌一尧努力地搓我身上的尘垢，摸到我后背那条不慎被钢钎剌出来的狰狞伤疤，她用手指轻轻触碰着，许久都没有说话。“早知道是这样，死也不会让你去那里。”她说。我却非常希望她看到我的成就，我洋洋得意地告诉她，我已经和那个公司的领导处得很好，年后可能要被派去乌鲁木齐负责一个项目，年薪十五万。然后我自顾自地描述一个美好的未来，要考一级建造师，要赚更多的钱，要积累更多的经验和人脉，以后还要自己拉工程队单干。但凌一尧对此并不感兴趣，而她是我唯一在乎的听众。那天我们做爱了，我不记得久别重逢时的具体细节，只记得她突然狠狠地咬住我的肩膀，像被夺食的猫一样死死地咬住。我疼得连头皮都麻了，却没有反抗，我知道她心里堵着许多情绪不知如何表达。那两排细细的齿痕至今未消，一直烙在我的左肩，有时我怀疑它是一个诅咒，如影随行，一直延续到我彻底忘记她的那天。<br>不知道为什么，以往二十五六年，我一向是文艺小青年，但在海边呆了大半年以后，我突然怎么也变不回来了。即便我穿着体面的衣裳，做了好的发型，但几天以后衣裳皱巴巴了，发型也乱糟糟了。我觉得自己像一张被烫皱的透明糖纸，再也熨不平了。最让我无法接受的是，回到正常的人类文明社会，我才发现自己的肤色与周围的同龄人明显区分开来。为了恢复原先的肤色，我买了各种牌子的美白护肤品，每天早晨中午和晚上都要用一遍，甚至在堂妹的指导下学习使用面膜。可是，海边滩涂的紫外线辐射比城市高出数倍，咸海风侵袭下的肌肤就像风腊肉一样，那些措施几乎不起一点作用。我之所以那么焦躁，是因为她的父母又在给她介绍对象，我年底必须去拜会一趟，让他们认可我这个女婿。当我把内心的忧虑告诉凌一尧，她毫不在乎地安慰道：“没事的呀，我就说你是为了养我才去闯的，他们不会为难你的。”她这样一说，我才稍微安心下来，但事实证明，我此生做的最失败的事情，就是将那么重要的拜会搞砸。<br>大年二十七夜，我拎着几瓶天之蓝登门拜访，虽然她父母很热情，但我总觉得那更多是一种客套。吃饭时她爸爸问到我的学历，职业，以及家庭，我敢肯定这些问题他已经在凌一尧面前问一遍，只是想要我亲口重新给一次答案。这种技巧性的拷问让我非常不自在，但还是毕恭毕敬地回答：我大专毕业，现在做工程，家离市区还有十几公里，父母都是种植花木的农民。她爸爸说做工程赚钱，现在农村人日子过得挺好，她妈妈一直没有表态，只是叫我喝酒吃菜。酒一喝多，我就觉得自己的口风有点把不严了，于是忍住少开口，而她妈妈这个时候提及我这有碍观瞻的肤色。我的心里堵得慌，满是委屈，又不敢反驳，生怕酒劲之下言多必失。凌一尧跑回房间，拿来我以前的照片，解释说我以前不是这个样子，她爸爸则打圆场说年轻人不怕吃苦很难得，又不是天生黝黑。那原本只是一次不太完美的拜会，但下楼的时候，遇到的一件事情让这次拜会变得非常糟糕。我离开时他们送我到楼下，刚好小区里有邻居远远地打招呼，她父母都一起过去握手闲聊，凌一尧和我在原地聊天。但她妈妈很快也把凌一尧招呼过去，向对方介绍这是自家闺女，研究生毕业，在哪里哪里工作。这个时候我才发现，邻居那边有一个年轻的小伙子，皮肤白皙，一身的书生气。凌一尧在父母的指引下叫伯伯，叫婶婶，接受夸奖时礼貌地笑，不时地回头望我一眼。我看着一辆电动车后视镜里的自己，皮肤黝黑，加上酒后的模样，完全不是我自己能接受的模样。我在那里傻傻地站着，不知道该怎么办才好，最后我还是带着一身酒气，沿着墙角自个儿晃了出去。<br>凌一尧打电话来的时候，我已经坐在出租车里往回走，她问我为什么不辞而别，我呵呵地冷笑。我不敢对她父母表达内心的不满，只能把气撒在她的身上，我故意用冷漠的态度让她内疚，让她知道我不是没有尊严。可我偏偏忘了，那个愿意一边抹眼泪一边默默被我肆意伤害的凌一尧，正是那个唯一在乎我情绪的人。别人都只在意我飞得有多高，飞得有多远，只有她在意我飞得累不累，也只有她希望我停下来歇一歇。可惜，我这样一个贱人，最擅长的就是伤害身边最亲近的人。</p><p>尽管豆瓣有许多人相信星座之说，但我还是坦言，我对此丝毫不信，无法理解为什么可以用出生月份来判断复杂的人与事。但与星座学说相比，我更讨厌别人拿生肖说事，因为网络上的星座学通常是不伤人的马后炮，而生肖说则经常成为棒打鸳鸯的帮凶。同样是出生于虎年与龙年，成人之美者会说这叫龙盘虎踞，而掘坟毁婚者则说这叫龙虎相斗，有人向凌一尧灌输第二种说法。凌一尧当然不会相信这样的无稽之谈，但她妈妈非常固执地将它视为我与凌一尧不合适的理论依据之一。那个时间，刚好我与凌一尧相处得颇为不融洽，彼此明明没有一点恶意，但不知道中了什么邪，说着说着就因为一点措辞之类的小事吵得不可开交。她总是责怪我脾气太犟，而我总是埋怨她当初没有提前公开我的存在，最后不欢而散，一次又一次地验证“龙虎相斗”的说法，尽管之前的八九年都相处得那么愉快。2012 年大年初四，我去市区时打电话给她，她说在寺庙里上敬年香，要傍晚才能回去。可我真的很想她，打算当面向她道歉，化解目前我们两人之间的矛盾呢，于是守在她家楼下的凉亭里等候着。等了三个多小时，我终于看见她回来了，但坐的是别人的车，开车的就是上次那个书生气十足的男人.车子是本田歌诗图，即便我耗尽当时的积蓄也未必能够拥有.他们两个人一起下车，凌一尧似乎情绪很好，而那个男的也笑着，手里咣咣地掂着车钥匙。他们一起上楼，凌一尧家所在的那栋楼。我本来打算将她喊住，但直到他们的脚步从楼道里消失，我都没有开得了口。<br>那种失魂落魄的感觉，简直每分每秒都试图置人于死地，每一次心跳都像锤子在胸口猛敲，我难过得恨不得直接往马路躺下来，谁把我撞死谁就是我大爷。我与凌一尧恋爱的初期，我们都小心翼翼地经营着，有时也会因为一点小事儿生闷气，无端吃醋，生怕人生第一场恋爱夭折。但时间一久，慢慢磨合着，彼此之间竟然如同家人般相互依偎，从不敢想过旧人换新欢，从未想过分离的一天。</p><p>但这一天终于还是来了。<br>尽管凌一尧说那是长辈们的安排，她个人从未认同，一口咬定我是在无理取闹，但我问她那天为什么和别人一起去敬年香，为什么不直接去拜堂算了，她一下子愣住了，然后说：“你不相信我？” 我想说我当然相信她，但我只是无法忍受她与别人像情侣一样在人前出入，更不能忍受当整个世界都对我发动围剿暗算，而我认为绝不相负的那个人却站在战场的另一边。我的所有姿态，尊严和自信，都一下子垮了，就像《悟空传》里那只猴子一样，被刀劈斧砍雷劈火烧之后只剩一副躯壳屹立不死，但紫霞仙子的一句话，便让那双眼睛再也失去神色。 元宵节之前，她父亲忽然打电话给我，约我单独见一次面。</p><p>她的父亲约我在一家茶座见面，我并不知道他要聊什么，但还是努力做了准备，争取让他明白我对凌一尧的感情。<br>但我坐到他面前，才发现我根本没有为自己辩护和自荐的机会，她父亲几句话就将我堵得死死的。他说:“这段时间我虽然没有过问你们的事情，但我也看得出来，你和尧尧处得不好，她经常躲在房间里哭，不吃饭，两个人连相处都不好，还怎么一起生活？”他又说:“我选这个位置，就是想让你看看这个路口，今天还算天气不错，但雨雪天呢？严寒酷暑天呢？别的女孩坐在车子里打着空调，我们家尧尧坐在你摩托车上淋雨顶风晒太阳吃尾气？我们不是势利也不是物质，只是希望她过得好。”我终于抢话说:“我不会让她受穷，我会去赚钱，我已经有二十多万了，以后我也可以让她过上好日子！”她爸爸呵呵笑了一声，说:“以后？你没有权力要求别人等你一个空头支票啊。”<br>而后，她爸爸还说了其他一些东西，譬如我和她站在一起就没有夫妻相，她母亲也不希望凌一尧嫁给一个包工头。<br>但我已经无力听下去了，脑子里只是想着大二那年我们一起去周庄玩，吃饭时旁边一个话唠老太和我们搭话，啧啧地赞叹我们是金童玉女，以后生出来的小宝宝一定也很漂亮。当时凌一尧红着脸一直笑，而我闲得无聊与老太太扯，老太最后一拍大腿去择菜去了。当时我心口压抑得难受，担心自己一个黝黑的爷们儿当众哭出来，站起来不服气地对他拱了拱手，转身去前台结账走人。我当时心口堵得慌，胸口压着一块巨石，像一条狼狈的狗一样微微张着嘴巴，呼吸困难且短促。</p><p>那段时间，凌一尧的日子也不好过。她明确拒绝他人的安排与介绍，每天不洗漱打扮，更不出门，用这样的方式向我证明自己的立场。为此，她与母亲发生激烈的争吵，闹得左邻右舍都议论纷纷，她母亲患有支气管炎，春节还没结束就住院了。但我又能怎么办？虽然她父亲还没说完，我就起身离开了，但我明白他此行的目的绝不是对我羞辱或是嘲讽，而是要我与凌一尧停止交往。我过得黑白颠倒，不知道自己为谁而活，活着到底有什么意义，脾气变得极其暴躁。早在 2008 年，我妈妈就已经见过凌一尧，她知道我遭遇怎样的事情，几次自责自己没本事，没有为我积累财富。我没有安慰她，也没有责怪她，只是一个人独自发呆。我把所有罪责都归结到自己是一个穷小子的原因上，也是从那段日子开始，我对金钱产生无比执着的痛恨，以及无比狂热的向往。刚好朋友打电话过来，约我一起去乌鲁木齐参与一个太阳能发电站的工程，但需要提前垫资。我几乎没有犹豫，一口答应下来，决定把我和我父母所有的积蓄一起带上，孤注一掷。事到如今，我已经没有什么好畏缩的，我连凌一尧都输了，还有什么输不起的？大不了哪天形影相吊，身无分文，找一个安静的地方了结这条可笑可悲可怜可耻的贱命。临行之前，凌一尧打电话过来，她说：“吕钦扬，我们分手吧。”只是简单一句话，不由我分说，她便直接挂了电话。不知道为什么，我心里竟然一点痛楚的感觉都没有，麻木得就像一块死肉，直到许久之后手机再次震动，我才醒悟过来。凌一尧在短信说：“刚才免提说给我妈听的，你不要当真。你今天去订票，我们一起回南京。”我一下子精神起来，回复说：“要什么时候的票？”“明天中午，好吗？”她像在哀求我。我当即开摩托车赶去车站，一路狂飙七八十码，订了第二天中午 11 点 20 分去南京的长途车票。当时我的内心掺杂着各种情绪，疑虑，自责，兴奋，欣慰，以及被全世界围剿时与她一同突围的悲壮。</p><p>第二天上午十点我就在车站外面等候着，手里捏着两张车票，既期待又忐忑，就像守在高墙外即将与主公家千金私奔的狗奴才。</p><p>凌一尧一开始还低声和我打了电话，说等会儿就出来，但两个短信之后，便再也没有动静。我有些焦急，但又怕在不恰当的时刻打不恰当的电话，于是耐心地继续等。11 点 20 分过去了，车子发动了，她还是没有出现，我捏着两张过期车票傻傻地站在那个空空的检票口。大约十一点半，她终于发来短信，说:“你直接来南京，我已经在路上了。”我不知道发生什么事情，猜想今天的她一定处境混乱，于是顾不上多问，赶紧重新买了最近一班的票。<br>我颠簸一个下午，到达凌一尧那里已经快到下午七点。我们避开那些不愉快的话题，就像以前一样一起拥抱，亲吻，然后去外面吃饭。那是我第一次请她吃西餐，也是我第一次吃西餐。当厨师把牛排端上来，说他要揭盖子了，而我木然地看着他，不知道他揭盖子与我有什么关系。凌一尧解围说:“先帮我揭吧。”她把红色的餐巾挡在面前，厨师揭开盖子，油星点四溅，被餐巾挡住。我当时才想起来，这步骤我以前是知道的，只不过在外面呆久了，早已忘记。那厨师望了我一眼，又看了凌一尧一眼，虽然面无表情，一句话都没讲，但不知道怎么了，我就是莫名其妙地多想了。晚上我住在她那里，那个我们曾经一同经营的小家。与以前一样，我们一起打扫整个寒假都没人住的房间，一起铺床套被子，然后轮流洗澡，最后在床上拥吻做爱。那天我有些蛮横地占有她的身体，她似乎感受到我的情绪，一直咬着嘴唇默默承受着，但我准备退出去戴套时她却搂住我的脖子，说:“就在里面！”我问:“安全期吗？”她低声地说:“不是。”我看着她的眼睛，她目光坚定，她的手指紧紧地抓着我的肩膀，指甲嵌入肌肤，仿佛已经决定破釜沉舟，再也不回头。</p><p>那天晚上十一点多，我们都没有睡着，在被窝里牵着手，讨论以后的安排。我说我想去乌鲁木齐一趟，大约五个月的工期，只要赚到这笔钱，我就可以大大方方站在她的父母面前，用事实证明我可以让凌一尧过得好。凌一尧听说我将全家所有积蓄都搬出来拼，建议我不要去冒险，希望我在南京找一份工作。我问道：“如果我不去赌一把，守着一份少得可怜的工资，你父母永远不会瞧得起我。” 她说：“万一输了怎么办？” 我一下子被问住了，因为我当时对金钱财富充满狂热，就像一只饿极的猴子，敢于去抓万丈悬崖边的一只野果。我没有回答她，只是把她拥在怀里，把脸埋在她柔顺的长发里呼吸，一阵恐惧涌入心底。 我赌输了怎么办？ 兴许我会一死了之，把这具臭皮囊丢在新疆的戈壁滩上喂野狗吧。 正是在这个时候，她母亲打电话过来，凌一尧打开台灯，忐忑不安地接听，那头的声音也被我听得分明。她母亲询问她有没有安顿好，晚饭在哪里吃的，什么时候上班，最后才兴冲冲地说：“罗 XX 这孩子真不错，今天特意把你送到南京，回来时还给我带了南京的盐水鸭，真是很勤快。” 凌一尧很尴尬地看我一眼，敷衍道：“哦。” 然后她妈妈又说：“你和那个吕钦扬分了就分了，不要再有来往，纠缠不清的惹闲话。这个罗 XX 条件不错，又是知根知底的，你们俩再处处，平时多打打电话，或者上网聊聊，总会处出感情的。” 凌一尧只是嗯嗯地应着，不敢抬头看我了。电话挂断之后，凌一尧翻身过来抱住我，在我胸口蹭来蹭去，叫我不要介意，她只是敷衍一下而已。我的心情就是非常沮丧，甚至觉得躺在这张床上是一件很不道德的事情，我说：“你现在怎么有那么多事瞒着我？” 凌一尧说：“你以为我愿意藏那么多事？我妈问我有没车票，我说没有，她就叫罗 XX 送我了，我不告诉你是怕你多想，不肯来南京找我。” 可我那可悲的自尊心又开始作祟，脑子里老是想着她和那个人坐在那辆歌诗图里，而我像一个傻逼似的坐在长途客车上。我没有责怪她的意思，我只是恨自己为什么总是处于下风，为什么那些人非要这样巧取豪夺。 凌一尧又是安慰，又是发誓，甚至不停地挑逗我。以往她惹我生气了，只要这样一挑逗，挠我的痒痒，我便翻身将她扑倒，一场小矛盾便化为乌有。可惜，这次不奏效。她思索片刻，翻身趴到我的胸口，说：“吕钦扬，如果下个月有个人不来找我，我希望你能尽快赶回来，好吗？” 我一下子风声鹤唳地紧张起来，问道：“谁？罗 XX？”她平静地说：“我大姨妈。”我一时没反应过来，她又补充道：“或者我找你去。” 我这时候才反应过来，一把将她拥入怀中，恨不得把她勒得窒息。凌一尧呀凌一尧，我喜欢你喜欢得恨不得为你去死，我想把我赚来的每一分钱都交给你花，我想让你这辈子都不受半点委屈。我不想远走他乡，我不想颠沛流离，我不想每天早晨一睁开眼睛就很失落，不知道你在哪里，心情如何。 我想你啊 爱疯飞饿啊将发往放 PJGFKCFOIAF 哦额坟挖金风科技啊绝非挖掘 啊我佛架飞机哦额外 JPAWFJO AWIJGFAWJI AFGE A FEO KPFWO XIANG NI A A OA AF FAW FA F OF 哈哈复合肥哈额发发火佛 QFA Q 飞饿肌肤 iaf 哈哈哈 爱好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊(这里一段乱码 就是原文 估计 LZ 写到这里戳到痛处咯）。</p><p>那天凌一尧送我去车站，但她连候车大厅都没有进得去，两个人在安检口就仓促地分开了。我本来想再回头与她告别，但门口拥堵着太多旅客和工作人员，我们只能隔着长长的通道望着，最后打着手势，两人在玻璃幕墙内外杵着。我们互相听不见对方的声音，只能面对面地打电话，就像囚犯与探监者一般。她说：“我昨天把重要的东西都收拾在包里了，打算今天一直送你到站台，兴许到时候一咬牙就直接跟你一起上车，一起去乌鲁木齐。”听着她这有些孩子气的话，我不禁苦笑一声，问道：“你这是想私奔么？” 她却将脸凑近玻璃，认真地说：“我没有开玩笑，我真想过了，我也做得出来。”我伸出手指在玻璃上刮了一下，就像以往刮她鼻尖一样，检票口通知检票时，我在玻璃上哈气，写了两个反体字：“等我。”我不喜欢南京车站，我讨厌一切为了管理方便而设定的有悖人情的垃圾规定。从南京到乌鲁木齐，一共 41 小时，我睡了又醒，醒了又睡，做着各种各样的梦。其中一个梦最为蹊跷，当时一个列车员推着小车来售卖零食饮料，我刚好迷迷糊糊地睡着，做了一个非常奇怪的梦，梦见自己又回到高三，我和凌一尧迎面走来，她的嘴角洋溢着微微的笑容，我走过去大声地说：“凌一尧，我们以后会在一起，十年，我们以后还要结婚！” 然后凌一尧骂我是流氓，周围的同学都笑，连大乔和子石都笑，我非常生气地告诉他们俩这是真的。不一会儿，姚千岁大老远地跑过来，手里拎着一个棍子，我就没命地跑。按理来说，梦里的人不会跑得快，可我跑得非常快，甚至能感受到头发被风扯得嘶嘶作响。我就那样一直跑着，感觉这辈子都要用来奔跑，我很快乐，我要大声地笑。旁边人的声音陡然提高，我一下子从梦里惊醒，发现那列车员竟然仍然推着车子往这里走，前进距离不超过五米。当时我突然想起一个悲观的故事：黄粱美梦。 我真希望自己这辈子一直活在那个梦里，被姚千岁追赶着，拼命地逃命着，全校学生都在笑着，教学楼阳台和路边都黑压压地站着一大片，就在围观运动会上的三千米长跑。那时候的我还是一个勇敢的少年，而凌一尧也是一个羞涩文静的少女，我们所有的爱情都藏在那一次次擦肩而过，沉默不语的微笑里。<br>新疆的戈壁滩，开春之前的积雪淹没小腿，我戴着银行劫匪般的头罩，裹着又长又厚的军大衣，扛着沉重的仪器，在荒野里深一脚浅一脚地跋涉。海边是湿冷，这里则是干冷，但温度低得出乎我的想象，我的嘴巴不停地开裂。夜里盖着被子时脚上的冻疮痒得难受，只能伸在外面冻一会儿，冻醒了再缩回被窝里暖一会儿，痒醒了才伸出去冻。凌一尧想给我寄冻疮膏，但快递根本不可能送到，我这里太偏僻了，连蔬菜和肉都要从很远的地方拖过来。一拖就拖一卡车，一吃就是大半月。一起在这里混生计的也有与我差不多年龄的，农民工耐得住吃苦，但那些细皮嫩肉的年轻人都熬不住，没呆几天便跑得光光的。幸好我在海边干过大半年，那边的条件比这里好不到哪里，早就习惯了，何况我已经没有退路。过了没多久，凌一尧打电话告诉我，例假来了，孩子没来。她显然有些沮丧，而我说不清自己是什么心情，也不知道自己应该怀有怎样的心情。她家里还是极力试图促成她与罗 XX 在一起，我们之间偶尔还会因一点小矛盾而争吵，我的脑袋像被门板夹过似的，明明知道她与我一起抗争着，可还是忍不住一次又一次通过这种拙劣的方式来向自己证明她没有离我而去。由于工地的 GPS 仪器出了故障，我们不得不利用原始方式定位高度。我背着二十公斤的全站仪，拿着对讲机，跑出很远去寻找被大雪淹没的原始基准点。不料，我走着走着就迷失方向，我以为可以摸回营地，不料最后我连自己的脚印都找不到了，而对讲机那头的那帮人根本无法判断我的方位。这是我以往在海边从未遇到的状况，有种被人类世界抛弃的恐慌，我不敢乱走，叫那些工人赶紧回营地找人救援。但直到晚上九点，夜色已然降临，四周只剩白雪映出的冷光，还是一点进展都没有，对讲机里满是男人们乱哄哄的争吵。我以为自己的小命会丢在这里，只能背朝肆虐的寒风，用大衣裹住身体，拼命维系最后那点体温。我掏出手机给凌一尧打电话，但要么就是信号全无，要么就是无法接通，连他妈的他妈的他妈的他妈的短信都总是他妈的他妈的他妈的他妈的他妈的他妈的发送失败。我平生第一次发现自己是一个胆小鬼，这样怕死，我怕我死了以后父母没人照顾，怕自己无法被及时发现，怕凌一尧见到的是一具面目全非的残骸，更怕自己像狗一样无人问津地曝尸荒野，葬礼上连一个为我哭泣的人都没有。凌一尧啊凌一尧，如果我真的死在这里，请呼唤我的名字，把我的灵魂带回故乡吧。<br>我找了一个地势稍高的土坡，将全站仪加在坡顶，以便尽早被人发现，然后躲在北风面的凹处，能活多久就活多久。我不知道自己能不能熬过去，做好最坏的打算，用冻得几乎失去知觉的手横握着笔杆，借着雪地映出的微光，在施工日志的中页写遗书。我在这里投了多少钱，外面还有谁谁谁欠我钱，我又欠谁谁谁的钱，我的户口还在学校里没拿回来，如此而已。我本来想说对不起父母，早走一步，劝凌一尧不要悲伤，下辈子有缘再见，但我歪歪扭扭地写完那些账目，再也没精力写字了。我蜷缩在那个角落里，脑子里开始胡思乱想，想着我要是即将失去意识，应该用什么样的姿势才显得体面安详一些，不至于狼狈潦倒。有时我觉得这身体已经完全不属于我自己，四肢像木头一样无知无觉，心脏是性命寄生的最后一块阵地。也是在这个时候，我依稀听见上风口传来发动机的声音，还有人高声呼喊，以及雪地里沙沙的脚步声，随后有人从身后的土丘上冲下来，蹲在我旁边一边喊我名字一边拍我的脸。我感觉自己像被人摁在水里，所有的声音都含糊不清，灯光尤为刺眼，看不清他们到底谁是谁，也不知道自己到底算是获救了，还是正在垂死。他们把我抬起来往上一提，我整个人就像飘进太空的一块废料，所有的意识都跟着失重地飘着。他们把我抬进开着空调的车子里，盖上厚被子，让人揉捏我的四肢，不停地呼喊我，叫我保持清醒：“吕工，吕工，吕工……”我恍恍惚惚地就听见一个熟悉的声音：“吕钦扬，吕钦扬……”我一下子坐了起来，拼命地推开那些工人，瞪大眼睛努力地四处观望，发现根本没有凌一尧的身影，又颓然地倒了下去。后来，那些工人和我喝酒时经常拿这事开玩笑，说他们当时被吓了一跳，以为我是回光返照，以为我是听到勾魂小鬼的点名。我一边喝酒一边嘲笑他们的迷信愚昧，哈哈哈哈哈哈哈哈。呵呵。医院离这里太远，我被带回营地以后烤了一会儿的火也就缓过气来，他们便让我躺在床上休息，专门让烧饭的老头子来伺候我。我一觉睡到第二天下午才醒，掀开窗帘看见一轮咸鸭蛋黄般黯淡的红日，凌厉的冷风吹得活动板房的单层玻璃呜呜作响。我喝了热汤，让老头子给我手机充电，然后给凌一尧打电话。 电话一通，她便问我昨天在干嘛的，为什么只打了一声就挂了。 我说我昨天差点丢了命，连遗书都写好了。凌一尧似乎不太相信我的话，她说：“你到底是去工作还是去打仗的，为什么会有生命危险，如果真的那么危险那就回来啊！”面对这样的责问，我不知道如何应答才好，我已经把自己所有的积蓄都投入这场豪赌，怎么可能因一场意外而举手投降。我在这里扛住雨雪风霜，就是为了让她此生都活得安逸，我只希望她此生都不必感受生活的艰辛，哪怕一辈子都无法理解我此时的狂热。随后她告诉我，她父母托人在我们那个城市给她找了一份新工作，待遇相当不错，催她回去工作。她知道，这样的安排无非是让她离罗 XX 更近一些，更好地掌握两人之间的动向，于是她努力地抗争着，一天一天地拖着。她说：“今天我妈妈说了一句话，我哭了好一会儿。”</p><p>我问：“她骂你了？”她说：“不是。她说‘树欲静而风不止，子欲养而亲不待’，叫我不要等她哪天不在了，才后悔现在没有尽孝。”我愣了好一会儿，突然意识到“疏不间亲”，无论我多爱她，我的地步都很难逾越她的父母。这就是我拼死拼活地卖命，恨不得拿把刀坐在市场中央割肉兜售的结局吗？我强忍左胸口的酸痛，问道：“你想回去了？”凌一尧沉默片刻，而后低声说：“我会尽力扛。”尽力扛，只是尽力扛。呵呵。她能够与我一直走到现在，已经是仁至义尽，我没有权力要求她必须永远与我坚持到底，爱情不是靠绑架得来的。我把烧饭的老头子支了出去，然后向她保证我很快就能出头了，我们可以过得非常幸福，可以让所有人都惭愧他们现在的阻挠.我感觉自己当时的口才出奇地好，比以往任何时候都好，用亢奋的状态向她描述一个美好的未来，完全不像一个从鬼门关回来的人。但凌一尧只是安静地听着，缄默得让我一度怀疑她是否还在电话那头，我不得不傻逼兮兮地“喂”“喂”“喂”。她只是微微的叹息一声，说：“可是，我已经很累了呀。”那一瞬间，我感觉自己的天空猛然塌陷一块，自以为永远不会动摇的精神支柱摇摇欲坠，电话另一头那个让我魂牵梦萦的女孩突然变得无比陌生。我可以相信日出西方，相信江水倒流，相信六月飞雪，就是不能相信凌一尧也会决心动摇，也会有打算离我而去的一天。我忽然发现自己在雪地里对死亡的胆怯显得那么可笑，吕钦扬啊吕钦扬，你拼命地熬着忍着撑着盼着等着，终于保住这条下贱卑微的狗命，迎接你的现实就是这个模样么？生亦何欢，死亦何苦，早知道这样，为什么不干脆听从命运的安排，在老天为你选择的那块埋骨地了结此生算了？你怎么不死掉算了？你干嘛不死掉算了！！！！你死掉算了好不好！！！！啊哈哈哈哈哈哈！！！！！！！也是在那一天，我和凌一尧之间的裂纹越来越明显，分道扬镳的日子不期将至。 在戈壁滩的那段日子，我忙得不可开交，要么在施工现场东奔西跑着，要么趴在电灯泡底下看图纸，要么与工人们混在一起喝酒。偶尔闲暇下来，我傻傻地坐在房间里看着床头那个日历，一遍又一遍地推算工程完工验收的日期。另一个工程队的项目部有一台电视机，外接信号锅的，偶尔我会去那里看一会儿电视，特别喜欢看江苏卫视。不是看非诚勿扰，也不是看电视剧，只是想看一下镜头里的街景。有一天，一个专题节目介绍我家乡的特产，我硬是死死地抓住遥控器，将那帮想看抗日连续剧的家伙晾了十几分钟。最让我万分痛苦的是，凌一尧似乎对我越来越冷淡，以往她接电话时都是兴高采烈的，现在却是问：“什么事？”“你至于这样故意伤我么？”我终于不满地问.“我有吗？”“你态度这样冷淡，是不是不愿意接我电话？”她说：“我们总不可能一辈子都像初恋时那样火热吧，总有一天，你接到我的电话时会不耐烦，握我的手时也毫无感觉。”我呵呵地笑：“可能你说得对吧，但那是第几个十年呢？”凌一尧沉默许久才说：“我妈闹我闹得很凶，一闹就犯气管炎，她都要拿断绝母女关系说事儿了，我能怎么办？我以前一直觉得自己过得很好，家庭和睦，爱情美满，学业也很顺利。可是现在呢，家庭，爱情和工作都乱糟糟的，每天夜里都失眠，早上一睁眼又想着怎样把今天熬过去。我真的很累，太累了。” 我从未见过凌一尧这样暴露自己的脆弱，可我不知道如何安慰，因为我自己的心空得像一个深不见底，连回音都没有的峡谷。我很想将她牢牢抓住，可我又觉得自己像在与她的家人打一场拉锯战，每个人都打着爱她的旗号不肯撒手，却从未有人在乎她夹在其中被撕扯得多痛苦。 我说：“既然你这么为难，那就不要勉强了，回去吧。” 凌一尧愣了一下，问道：“这是你说的？” 我深呼吸一口气，努力将泪水咽了回去，说：“我说的。” 电话那头一片沉寂，而后挂断了。此后的很长时间，我们谁都倔强地不肯联系对方，直到有一天南京的房东打电话给我，问我另一把钥匙在哪里，我才知道她已经退掉房子，回家去了。我离开戈壁滩的时候积雪正在消融，我把手里的数据都交给项目部，连同那本撕掉遗书的施工日志，而我带来的垫付资金暂时只能抽走不到一半。一个关系不错的朋友开着破旧的越野车把我送了出去，一路打滑，一路颠簸，一直把我送到火车站。</p><p>从南京到乌鲁木齐，背离朝阳，冲向黄昏，而从乌鲁木齐与之相反。那四十多小时里，我一直稀里糊涂地想着心事，日落时怀疑自己离太阳越来越远是不是一个不详之兆，日出东方时又在期待这是预示我可以拥有走出困境的幸运。我很无助，感觉自己的力量微弱得几乎渺小，只能寄希望于这些毫不相干的启示。我辗转回到那座城市，没有回家，在车站旁边的宾馆住了下来。我洗澡剃须换了干净衣裳，试图逼着自己睡一会儿，好让自己与凌一尧见面时精神状态好一点。可是，我又困又累，却怎么也睡不着，一闭上眼睛就心慌气短，仿佛有人在我耳边敲着锣鼓大声聒噪:“她要离开你了！她要离开你了！”凌一尧知道我回来了，我们约在安定广场见面，面对面站着，她看着我的眼睛，说:“怎么那么多血丝？多久没睡觉了？”我不知道怎么回答，因为我最近一次超过四小时的睡觉就是从戈壁雪地里捡回小命后近乎昏厥的长睡。旁边有很多小孩子穿着旱冰鞋跑来跑去，我们生怕被撞到，于是坐到旁边的长椅上。我告诉她，我每天都很想她，已经把新疆的工程丢下了，不想再离开她了。她皱起眉头，问:“你不是在那里垫资了吗？丢下那里，你以后怎么办？”<br>我有些不高兴:“你希望我回去？”她想了想，低叹道:“我怕你人财两空，不值得。”我顿时不知道怎么说了，不停地揣测她这句话到底什么意思，可我的脑子处于混沌状态，不知道该往哪个方向思考。她随后又说:“前段时间，我和我妈吵了，把她气得犯病，我外婆都打电话过责备我，问我是不是打算闹得家人不相认，以后逢年过节都不想回家团聚，给祖宗磕头。”她抬眼看我的时候，眼泪一下子流出来，委屈地说:“我外公去年去世，今年清明节应该扫墓的，可我躲在南京就是没回来，你难道还不理解我？我小时候是外公外婆带大的，他们都说我忘恩负义，白眼狼。”我一边帮她擦眼泪，一边抚慰道:“我这个工程一结束就有钱了，我去买车，我们去给你外公磕头，挨家挨户拜访你家亲戚，我也可以很孝敬你的长辈。”她推开我的手，自己擦掉眼泪，说:“你忘了吗？我和你已经是地下恋爱了，我和罗 XX 从年初开始就是名义上的交往，我现在已经回不去了啊！我回不去了！”我们回不去了？我迷茫地看着凌一尧那张脸，那张曾经给我温柔也给我力量的面容现在满是悲伤与决绝，这也是十年来我第一次感受到近在咫尺却远在天涯的无奈。我许久才缓过神来，问道:“你要我怎么办？”凌一尧低头沉默一会儿，说:“我很累了，扛不住了，给我自由吧。”我感觉自己像被人狠狠地砸了后脑，眼前一片黑，但还是努力站起来点头说:“好，听你的。”“你会恨我的吧？”她也跟着站起来。我咬住嘴唇尽量让自己不要说话，那么多小孩子在旁边，不要当众丢人，只是张开胳膊把她搂入怀里，狠狠地抱了一下，最后一次嗅了嗅她长发的香味，然后扭头离开那个广场。凌一尧啊凌一尧，我曾经发誓要为之遮蔽风雪，此生疼爱和保护的女孩啊，你才是世界上最强大的人，你拥有轻描淡写一句话就可以将我抽空灵魂放逐天际的神力啊！从今往后，我该往哪里走，该为谁而活，我该怎样面对那么漫长那么漆黑那么毫无意义的人生啊？</p><p>随后的一个礼拜，我过着这辈子最潦倒的日子。我暂时不想回新疆，也不想去找那些熟知凌一尧的好友，但我已经把家里所有的积蓄都砸在项目上了，所以不敢回家见父母。我一直在宾馆里睡着，拉着窗帘，没日没夜地睡，实在饿得受不了，就干啃房间里本来就有的桶装方便面。</p><p>我以为自己呆在这个城市可以做些什么，但事实上我根本无从改变眼前的现实，凌一尧没有再给我发一条短信，打一个电话，我也没有再去联系她。于是，我决定出去走走。</p><p>这几年来，我一直在走，从江苏走到新疆，从荒凉的沿海滩涂走到更荒凉的戈壁滩。但我从未迷失方向，即便走在只知前后左右不知道东南西北的风雪里，我心里也依然竖着一座高高的灯塔，依然有人期待我的归去。可是现在，灯塔的光亮彻底消失，我再也找不到回去的路了。</p><p>我独自回到南京，去找以前那间房子，房东尚未将它租出去，我恳求他让我呆一晚。凌一尧离开时将房子打扫得干干净净，一些被遗弃的生活用品被整整齐齐地摆在角落里，蓝色的毛巾牙刷杯子都是我的，红色的都是她的；床头靠背还贴着当初我从新袜子包装上面撕下来的标签，她总是因此而数落我“幼稚”；台灯罩上有她用唇彩画的卡通脸，咧着嘴，没心没肺地笑着。</p><p>没有被褥，我只能裹着衣服躺在硬床板上，开着电视睡觉。我总是迷迷糊糊地听见她的声音，每次都猛然惊醒，却发现只是电视的声音。我真希望我所经历的只是一个噩梦，真希望我醒来时看见她正在阳台晾晒衣裳，黄昏余晖映出她可爱的身体轮廓，或者她忽然推门进来，手里提着的塑料袋还贴着超市的标签。可是她已经走了，不会再出现了。</p><p>第二天上午，我独自站在镜子前洗漱，将红色和蓝色的牙刷放在一个杯子里，然后带上房门离开。那天我重新踏上前往乌鲁木齐的火车，从此孑然一身，无牵无挂，这个躯体是行尸走肉，这颗心不再属于凌一尧，而这条命我敬老天爷。</p><p>回到戈壁滩，别人问我事情处理得怎样，我嘿嘿地笑着说一切妥当，一副无比幸福的模样。我不是可怜虫，我不需要博取所谓的怜悯，我已经丢了灵魂，但尖牙与利齿还在，我可以参与残酷的争夺。</p><p>我变成工地上脾气最古怪的人，工作时精力充沛，休息时嘻嘻哈哈，但监理都对我敬而远之，因为我一会儿像哈巴狗一样对他们点头哈腰叫爷爷，一会儿像疯狗一样对他们凶相毕露，甚至趁着酒劲追打吹毛求疵的小监理。合伙人经常数落我，却又纵容着我，因为他们不方便与别人翻脸，他们需要我这样的疯狗。</p><p>只是，一闲下来，我就开始发呆。同事开玩笑说，我是“墙角里的一根打狗棒”。</p><p>我们经常会请业主或者质监站之类的人吃饭，我每次都咋咋呼呼，哗众取宠地说着各种庸俗的荤段子，然后拿出同归于尽的架势来喝酒，一杯接一杯地死磕。所有人都夸我海量，年轻有为，前途不可估限，但我知道，酒场和官场都是谎言的集散地。</p><p>我蹲在一望无垠的戈壁滩上吐，然后趴在地上哭，旁边的同事都开心地笑，所有人都知道我酒劲上来就会哭，却没人知道我到底在哭什么。那几个月里，我与她完全没有联系，似乎这辈子都老死不相往来。我在遥远的新疆数着每一次日升月落，期待将她遗忘的那天，可是一旦每次喝得酩酊大醉，每次从噩梦中惊醒，我都会疯狂地想念那个熟悉的名字。</p><p>可是酒醒之后，站至人前，我还得每天强颜欢笑，听别人讲我酒后的失态模样有多么傻逼多么傻逼多么傻逼，然后我和他们一起笑得直抹眼泪。</p><p>那里的生活极其枯燥，业主项目部的司机小廖用 U 盘传给我一些歌曲，我把那些它们一股脑全装进手机里，从凤凰传奇到维塔斯，从摇滚到红歌，我毫不挑选地挨个儿听过去，在空旷的戈壁滩上一边开车一边高声嚎唱。</p><p>唯独有一首歌让我不得不将车子停在路边，捂着胸口，趴在方向盘上缓气———五月天的《你不是真正的快乐》。</p><p>电力企业是一个不差钱的豪门，但不包括 2012 年在建的太阳能发电站，由于欧美对中国光伏产品的反倾销制裁，光伏电站顿时陷入资金泥潭。新疆戈壁滩的气候恶劣，通常四月份才能正常开工，十月底就完全不具备施工条件，我们提前一个月冒着冰雪和低温开工测量放线，终于在十月基本完工。</p><p>此时的业主暴露资金极度短缺的问题，他们的注册资金是会计师操作出来的，而银行又盯着上头的政策，不敢轻易贷款。于是，我们的工程款没了着落，业主方拿资料审核说事，一天一天地拖着不肯验收。</p><p>我带着工人将业主的车子堵在工地不放行，派出所的民警一趟又一趟过来协调，反反复复八趟之后，连派出所都不太愿意来了。最终我们去骗业主里那个稍微老实的负责人，说暂时只要签字验收就行了，今年不会催要拖欠的工程款，他们刚好不堪其扰，不得不把字签了。</p><p>这个社会，老实人都是要吃亏的。签字的第二天，我们的人挤满整个业主项目部的办公室，拍着桌子催要工程款，把那个女文员吓得躲在角落里哭。我拿着一大把小锁，将他们办公室里的抽屉和资料柜都挂了锁，但挂到那个女文员那边的时候，我看见她的抽屉里摆着一只玻璃罐子，里面摆着五颜六色的许愿星，而她的桌角还有许多未完成的折纸。</p><p>我忽然想起来，凌一尧也曾经为我折过这个东西。</p><p>我像一个张牙舞爪的孩子被大人狠狠地扇了一耳光，陡然发现自己失态时的丑陋，我为什么会变成这样？曾经那个善良的温和的喜欢恶作剧从来不忍心伤害别人的吕钦扬哪里去了？这个一脸狰狞拍桌挂锁满口脏话的吕钦扬又是从哪里来的？</p><p>我没有锁那个女文员的抽屉，默默地走出那间拥挤的办公室。</p><p>十一月中旬，大雪封路之前，我提前离开戈壁滩，返回阔别半年的家乡。也是在到家的当天，我踌躇许久后终于鼓起勇气拨通那个熟悉的号码，她听到我的声音一下子愣住了，叫我稍等一会儿，然后跑回房间接听。</p><p>我说：“没想到你这个南京号码还通着。”</p><p>她说：“我每个月只交一点钱维持不停机，可惜一直没人联系这个号，这几天还在想着把这个号停掉算了。”</p><p>我愣了一下：“等我的？”</p><p>她没有说话，不肯定也不否定。</p><p>我说不禁喜出望外，迫不及待地向她展示自己柳暗花明的现状：“我已经回来了，我也赚到钱了，不是穷小子了！你不是喜欢甲壳虫吗？我们去买一辆！还有开一家书店，我们可以去物色店面！我以后除了和你出去旅行，再也不出去逛荡了，我很想你，我每天都很想你……”</p><p>我自言自语似的说了一大堆的话，想狗等待主人筷子上那块骨头一样渴望她点一下头，然后我开着摩托车狂飙过去拥抱她，我的人生从此完美无缺，我每天都要向苍天和大地感恩戴德。</p><p>可惜，凌一尧低声打断道：“我已经订婚了。”</p><p>我一下子愣住了，再也蹦不出一个字，甚至忘记收起脸上因对未来的憧憬而不知不觉地流露出的笑容。订婚了。。。未婚妻。。。妻。。。我难过得忍不住蹲了下来，用拳头抵住胸口狠狠地摁，试图抑制内心如同比万千虫蚁啃噬的痛楚。</p><p>凌一尧啊凌一尧，你真会开玩笑啊，你怎么可能告诉我这样一句话？你还是扎着马尾辫的高中生啊，你不是要跟我一起气死姚千岁吗？你不是说“妻”这个称呼好别扭可是你又很期待成为我的这个字吗？你不是说一想到这个世界终将诞生一个或者两个拥有我们两人血脉的孩子就会觉得神奇又激动吗？</p><p>我不坚强，我不自信，我不要脸，我是一个贱人，我想和一个无赖的孩子一样躺下来蹬腿哭喊，把自己全身弄得满是尘土，你回答我：你！！！！！！为！！！！！什！！！！！么！！！！！！言！！！！！！而！！！！！无！！！！信！！！！！</p><p>这近两个月里，我们依然保持着联系，过得却不是太好。她经常脾气暴躁，无缘无故地对我发火，把我所有的缺点都翻出来说一遍。有些缺点甚至是许多年以前的，我也早就已经克服，不知道是不是在戈壁滩上透支太多精力，我竟然一点都不生气，任由她自说自话地骂着。她连挂电话都没有预兆，没有再见，没有晚安。</p><p>我们仅仅见过一面，在这座小城的电影院里。那场电影的观影厅空荡荡的没几个人，我们没敢坐在一起，她坐在我的左前方，没有回头，而我几乎一直盯着她的侧影。我记得高二时语文老师给她们班代课，叫我帮他去隔壁班架一下投影仪，我一进去就有人起哄，而她低头写作业不敢抬头看我一眼。这一晃，就是十年，那个腼腆的少女即将嫁作他人妇。</p><p>但我们一直没有停止抗争，这两个月里，只是这艘船上载了太多的人，她搬不动船上的巨锚，而我无法阻止港口缓缓升起的闸。那段时间我看很多电影，读很多书，也聆听许多人的建议。有人说，你的痛苦放在人群里简直微不足道，许多人的心里都深埋着那样一段不见天日的回忆，以后她会渐渐地与丈夫相处融洽，而你也会找到另一个女人，你可以不爱她，也可以对她很好，生一个孩子，你们的心思便全在抚养孩子身上了，谁还在乎爱情是什么？</p><p>我相信那个人所说的话，可是我不要那样的人生。我不想一回家就看到一张冷漠的脸，不想在风月场所眯着醉眼牵走一个不知姓名的女孩，只因她依稀有一点尧尧的影子，我更不想哪天躺在床上奄奄一息，身边围了一大群人，但我却感觉万分孤独，只有雪白的天花板上映出那张几乎遗忘的笑脸。</p><p>凌一尧说，这大半年里她再也没有与家人吵过，但也没有再和他们撒娇谈笑过，每天上班下班，吃完饭便礼貌地放下碗筷，安静地返回自己的房间。<br>她曾经问罗 XX:“你觉得你喜欢我吗？”</p><p>罗 XX 说:“挺喜欢的吧。”</p><p>罗 XX 的人品不坏，也很斯文，他生于温室，生活自理能力还停留在少年时代，大小事宜都有自己的主见，最后还是要服从父母的安排。</p><p>就在挑选婚纱的当天，这个帖子开播的前一天，罗 XX 在她家吃饭，她也跟着喝了一点酒，然后笑了。她母亲很高兴，说尧尧今天心情不错，终于见到笑脸了。但她母亲洗碗时，她站在厨房门口说:“妈，我告诉你一件事，我这一年没有一天过得开心，我一想到以后也要这样过，就害怕得想死。”</p><p>她母亲说:“你喝多了吧，月底都快领证了还说这种话？”</p><p>凌一尧回房间给我打电话，笑着告诉我这事，她那天的话特别特别的多，一句话反反复复地说，而我沉默地听。十几分钟以后，她似乎有些自责地叹气，说:“喝多了，平时不会告诉你这些屁事的。”</p><p>然后她又突然无奈地苦笑起来，说:“我妈的反射弧真够长的，现在才开始摔盘子，我出去看看。”</p><p>我说不清这段时间自己到底什么心态，随着月底的临近，我觉得自己的心像烧尽的木炭一样渐渐黯淡。最为迷茫的是，我有时无法确定自己到底希望她婚后过得幸不幸福，许多小说和电影都说过，爱一个人就祝她幸福，可我却无法笃定地祝她幸福？我一度怀疑自己对她的感情是否足够真挚，罪责感充斥内心。</p><p>1 月 23 日那天，凌一尧和她母亲上街购物，恰巧发现一家饰品店的老板是她小学和初中的同学，冒 XX。高考之后的暑假，我和冒 XX 第一次认识，她帮我和凌一尧瞒这段感情瞒了好几年，直到两年前才渐渐失去联系。凌一尧的母亲说：“我们家尧尧初五结婚，伴娘还没定人呢，你要不要一起来玩？”</p><p>冒 XX 问凌一尧：“你和他到现在才结婚？”</p><p>凌一尧说：“不是他。”</p><p>冒 XX 用意外又惊诧的目光看着她，然后当场婉拒，说年初店里忙，走不开。凌一尧当晚打电话给我，呵呵地苦笑，说：“一共邀请了几个高中同学，一个个都说没空，蒋 XX 直接说不想来，她说以后你结婚时请她，她更不想去。”</p><p>蒋 XX 也是凌一尧初中的同学，也是我高中时的同班同学，也就是开头提到的那个学霸妹子，我抄她的作业，骗她的零食，偷翻她的日记，我一直以为她讨厌我。</p><p>凌一尧说：“我跟我妈说，我和你本来可以得到很多人的祝福，现在他们的祝福都快变成诅咒了，连一个捧场的好朋友都没有。我妈这次被我说哭了，但是没再骂我，上次她摔过盘子之后，心情就一直不太好。”</p><p>子石放假从外地回来，我约他出来吃饭，刚好舒缓内心的抑郁，随口问万一抢婚的话他去不去。子石摇头说：“如果他们真的走到那一步了，你就没必要再折腾了，一个乌烟瘴气的婚礼足够让很多人一辈子抬不起头了。不过，不是还有一个星期才领证吗？你再去努力一下，实在改变不了，那就认命吧，这个世界上有太多不如意却还是维系下去的婚姻了。”</p><p>枕边人不是心上人，心上人只是梦中人。我想到凌一尧从今往后便是别人家的贤妻良母，而我也不得不与另一个女人同床异梦地度过下半辈子，两个人此生都不敢将对方的名字念出来，不禁感到一阵胸闷气短。我可以每天逢场作戏地欢笑，当然也可以假装深情地说“我爱你”，这些都不过是作为一个演员的基本素养，但我无法忍受凌一尧躺在另一栋房子的另一张床上的另一个臂弯里，心里默念着我的名字。</p><p>除非凌一尧亲口对我说，她已经放下了。</p><p>我打电话约凌一尧出来，在这座城市一座古园林见面，和上次在电影院里一样，我们刻意保持着距离。一直走到一座高高的小土山，山坡上生长着一片竹林，坡顶有一座小凉亭，她回头看我一眼，我才紧走几步跟了上去。她说：“我讨厌这种偷偷摸摸的滋味，像在做什么不要脸的事情似的。再过几天，所有事情都已经定了，无论你怎么约我，我都不会再出来了。”</p><p>我说：“我也很憋屈，很窝火，我们本来应该光明正大地牵手逛街的，而不是现在这个样子。”</p><p>“你憋屈？呵呵，”凌一尧笑了一声，“以前有一次我和罗 XX 上街买东西，他也牵过我的手，可我觉得更像做贼一样恐慌，害怕你不知道什么时候在什么地方就突然冒出来。”</p><p>听她这样说，我鼓起勇气，恳求道：“既然这样，我们都不要放弃好吗？时间还有，感情还在，我们豁出去拼一下，把这件事情缓下来。我可以去找你爸妈谈，只要是反对我们的人，有一个算一个，我都可以去找他们谈。”</p><p>但她一直不说话，我有些心慌了，问道：“那你现在还想不想和我一起？”</p><p>凌一尧这才抬头看着我的眼睛，说：“想。”</p><p>“那你在犹豫什么？”</p><p>“怕。”</p><p>“怕什么？”</p><p>凌一尧想了一下，说：“怕很多事情，最怕的就是你现在只是不甘心，没有以前那么喜欢我了，如果是这样，我宁愿现在就散了。”</p><p>我没想到她心里竟有这样的疑虑，完全出乎我的意料，一时不知道怎么回答，片刻之后才为自己辩护道：“我们从高中就开始相处，现在已经十年了，你应该最懂我。我很少向你许诺或者发誓，但保证过的就一定会去兑现，我现在非常确定地告诉你，我对你的感情绝不是不甘心。”</p><p>凌一尧点了点头，又问：“那我爸妈和罗 XX 家怎么办？以前我以为你不回来了，又被我妈闹得难受，觉得你不在了，跟谁过都是一样过，就把这事给应了。现在我说不想结婚了，我爸妈肯定不会同意，罗 XX 家也会来闹。”</p><p>我说：“你不要担心，这事我来扛。”</p><p>凌一尧盯着我的眼睛，而后咬着嘴唇认真地点头，一开始见面时的焦躁不安消散得无影无踪，但我的内心却满是愧疚———我们都同样并非完美，性格有各自的弱点，过分的单纯与善良让她举步维艰，而我竟偏执地踏上自以为的英雄之路，留她独自在炎凉世态里苦撑。</p><p>我原本打算先去拜会凌一尧的家人，但思索再三，还是更改主意，打电话约罗 XX 出来谈一谈。约谈地点还是一家音乐茶座，他们二人一同出现的，落座时凌一尧习惯性地坐到我身边。</p><p>我对凌一尧说：“我们两人谈点事情，你先坐到他车里玩一会儿。”</p><p>罗 XX 掏出遥控钥匙递给凌一尧，但凌一尧接过去隔着落地窗摁了一下，又放回桌面上，拎着包出去了。我们一直目送她坐上车，才收回目光打量对方，一时间不知道怎么开口，最后我尴尬地笑道：“有点像给她开家长会，哈？”</p><p>罗 XX 也讪笑一声，但气氛稍微缓和一点。</p><p>我问道：“你和凌一尧相处这么久，觉得开心吗？”</p><p>他说：“还可以吧。”</p><p>“你确定你爱她？”</p><p>罗 XX 犹豫片刻，抹着鼻尖说：“反正蛮喜欢的。”</p><p>我却不客气地说：“你应该也看得出来，这大半年里凌一尧从未开心过，我和她一起走了十年，不得已的分手就像被迫离婚一样痛苦。她心里想着我，但不代表我和你之间谁比谁更优秀，而是我运气好一些，十年前就认识她了。现在我很诚恳地希望得到你的帮助，把领证结婚这事停了吧，你们俩勉强凑合在一起不会过得好。”</p><p>罗 XX 有些不服气：“那你前面这几个月干嘛去了？”</p><p>“我以前做得不对，所以现在来纠正错误。本来这事有很多解决途径，只要尧尧一口咬定不领证不结婚，我带她直接离开这个城市，难道你们还能捆绑着逼婚？之所以与你沟通商量，是希望咱们年轻人私底下把这事解决了，尽量把负面影响降到最小，不要伤害长辈，你看怎么样？”</p><p>罗 XX 保持缄默，手指一直拨弄那把车钥匙。</p><p>我给他添了茶水，说：“你们相处几个月，时间不算短了，但你对她了解多少呢？你每次向别人介绍她，第二句就是她的硕士学位；夏天你老是怂恿她穿得性感一些，可她不是你用来向哥们儿炫耀的宠物啊；还有，你总是不停地草泥马草泥马，并且认为这是时尚用语，不是脏话。这些事情都让她非常反感，可是她为什么不说出来呢？”</p><p>罗 XX 不是笨蛋，他明白我的言外之意，我也适时地停止这种攻击性的责问，将话题岔开，与他谈及我与凌一尧在高中时的趣事。罗 XX 一开始有些抵触，但听着听着，也跟着笑了起来，在他笑容最灿烂的时候，我再次严肃地向他请求道：“兄弟啊，以你的条件，再找一个漂亮女朋友不是难事，但我只有一个凌一尧，错过了她，我这辈子都会过得不安生。所以，希望你能帮我一把，恳请你帮我一把。”</p><p>罗 XX 渐渐收起笑脸，思索片刻后说：“如果我不帮忙呢？”</p><p>我说：“我刚才已经讲过了，凌一尧我是肯定要带走的。你帮忙，这事会变得好看一点，你不帮忙，这事只是稍微难看一些而已。”</p><p>罗 XX 坐在那里想了一会儿，最后叹息一声，说：“我明白了。这事我得想一想，明天再打电话给你，给你答复。”</p><p>他起身离开，刚离开座位，凌一尧就从那辆车里下来，往茶座里走来。她和罗 XX 在门口遇到，两人互相打了一声招呼，然后一个出门登车而去，一个在我对面身边坐了下来。凌一尧问：“谈得怎么样？”</p><p>我说：“我也不确定，不过既然已经把话说开了，那你以后就要做好和一条道走到黑的心理准备。”</p><p>凌一尧点了点头，而后又眯眼微笑道：“这条道不会是黑的。”</p><p>整整一天，我一直心神不宁地等着电话，甚至想过万一凌一尧被她父母软禁在家，我就喊一帮哥们儿去抢人，或者打电话报警说有人抢我的老婆。只要凌一尧点一下头，承认她想跟我走，我便再无任何顾忌，大不了从此远走高飞。</p><p>大约凌晨两点，罗 XX 没有打电话过来，却接到凌一尧的电话，她说：“罗 XX 叫我转告你，他已经向他家人说过了，他和我性格不合，两个人相处得不愉快，想取消婚约。我爸妈的态度也不太激烈，我说我也不想和罗 XX 结婚了，他们就只是叹气，没多说什么。”</p><p>“那我什么时候去你家拜会？”我问道。</p><p>“你不要急嘛，再等两天，等大家都把这事认下了，你再过来找我爸妈谈。”凌一尧停顿片刻，说，“我都把东西收拾好了，要是他们还那么固执，我就直接跟你走。”</p><p>我努力抑制内心的喜悦，问道：“你现在什么感觉？”</p><p>凌一尧拖着长音的“嗯”，最后长吸一口气，释然地说：“感觉像又活过来了。”</p><p>挂断电话之后，我张开四肢躺在床上，听着床头闹钟滴滴答答的声音，每一次声响都昭示我正在一秒一秒地远离自己的青春。可是，缱绻于心的爱情如同一个野蛮的天神，呼啸着从天而降，抓着我的衣领飞向九天云霄之外。我闭着眼睛感受这种踏步云端的喜悦，仿佛一瞬间时光倒流，我又回到许多年前的那个漫天火烧云的黄昏，满脸稚气的孩子敲着饭盒喊我的名字，年轻的老师们笑而不语，而凌一尧一脸绯红地躲在满是起哄声的教室里，就像一个即将嫁给我的小新娘。</p><p>而我内心曾经的自卑，以及对金钱的狂热，就像那只名叫“理查德帕克”的白老虎，甩一甩尾巴，轻轻一跃，消失于新疆戈壁滩的绿洲之中。</p><p>理查德.帕克，呵呵。</p><p>如果这个故事让诸位不满意，非要追根究底地质疑这样一个故事是否可信，那我重新讲一个靠谱一点的故事吧。</p><p>我从新疆回来的第三天，去安定广场闲逛，偶然发现花圃台阶旁边有一个漂亮的新娘正在拍婚纱照。她很漂亮，表情又有些木讷，像一个牵线木偶一样被摄影师指挥着，与新郎摆出各种造型。</p><p>我喊了她的名字：“凌一尧。”</p><p>她看见我时愣了一下，而后丢下那个打扮得油头粉面的新郎，提着婚纱的裙摆，快步走了过来。穿着这身单薄的婚纱，她冻得瑟瑟发抖，又有些羞赧，问道：“你哥呢？”</p><p>我说：“他在新疆没回来。”</p><p>“你还去吗？”</p><p>我点头说“还去，要去收账。”</p><p>凌一尧噢了一声，“你等我一下”，她去台阶旁边拿起自己的加长羽绒服披上，又拎来自己的包，将一张银行卡递给我，说：“这是你哥身份证办的卡，以前一起时的定期存款，你帮我带给他，他知道密码。”</p><p>“嗯。”我将银行卡接了过去，揣进口袋。</p><p>“一定要带给他。”她又强调一遍。</p><p>我用拳头按了按胸口，说：“一定。”</p><p>然后我转身离开，冷风横贯整个广场，我深呼吸试图抑制内心的痛楚，却被着实呛了一下，眼泪差点滚落下来。我的思绪一下子回到三月的戈壁滩，风雪肆虐，寒气逼人，我的步话机里断断续续地传出吕钦扬的呼喊：“你们点几个火堆，把火烧旺，给我指一下方向，我找不到回去的路了。”</p><p>我们用皮卡车拖了许多木方，以及报废的橡胶轮胎，火焰和浓烟直冲云霄，整整烧了一夜，但吕钦扬还是毫无音讯。最后一次与他通话时，他似乎有些精神恍惚，绝望地念叨着：“凌一尧，我迷路了啊……”</p><p>第二天下午，我们在十公里外的一座土丘背后找到他早已冻僵的尸体，他不停地跋涉着，可惜离营地越来越远。而他大衣里那本施工日记的中页，用凝油的圆珠笔笔尖在纸上深深地刻下他此生最潦草最歪斜的几个字：“别告诉凌一尧”。</p><p>吕钦扬，我最尊敬的学长。当初在黄海的滔天潮水中，你用挖掘机的斗子死死抵住我这台机器的侧面，以防我脚下的堤坝塌陷；你坚持不起诉那些地痞，保下我这个冲动不懂事的学弟；你将我拦了下来，扛着仪器走入茫茫雪地之中；你不停地朝着凌一尧的方向奔跑，那么坚定执着，为什么最后还是迷失方向？</p><p>愿你永远活在十年前的文津河畔，愿你灵魂安息。</p><p>今天是公元 2013 年 2 月 14 日，情人节，也是农历癸巳年正月初五，凌一尧的婚期。原本打算讲完故事就销声匿迹，让它慢慢冷却，逐渐被遗忘，但事到如今还是决定给它一个最终番，省得那么多人猜来猜去，越猜越离奇。</p><p>也在这里对某些人说一声，不要以你的生活环境作为公理定理原理来判断这个世界，譬如学龄。我是如皋小城的一个乡下孩子，入小学时不满六岁，因为运河上面没有桥梁只有渡船，在淹死几个孩子之后，学校在河东开了一所小分校，我所在的那一届，全年级不过七个人而已。后来，有一个家伙留级了，我那个年级一共只剩六个人———如果你们觉得这个事情很荒唐，那么你们以后对人对事作判断时请悠着点。</p><p>2000 年我未满十五岁，以全校第 12 名的成绩进入白蒲高中，但由于整天把心思放在踢足球上，学业受到影响，考过全班第一，也考过二三十名。也是在那里，我开始人生的初恋并且不幸被抓，饱受政教处的折腾，也得到班主任老姚的格外关照。冬天起床后为了暖一下身体，出门时我们灌了一口红酒，最后被老姚拦在门口，每人做了 20 个俯卧撑，他终于将我锁定。他后来对同寝室的阿荣说：“XXX 同学今早喝酒了，可能是因为感情受挫，你们一定要对他关心爱护。”</p><p>在此感谢千岁大人。</p><p>正如故事里所说，高考时我数学失利，只考到本二，而凌一尧正常发挥，考取名牌一本，但我至少可以与凌一尧光明正大地恋爱了。这场恋爱不伟大也不光荣，和所有的校园情侣一样，懵懵懂懂，浑浑噩噩，为了莫名其妙的小事吵架，也为了装逼矫情的小事开心。但我大学毕业之后，一切都变得陡然沉重，因为我拿着两三千的月薪，无法挣脱穷困的枷锁。</p><p>情侣之间最无法弥合的矛盾，就是为了钱而吵架。</p><p>我业余时间开始写小说，希望成为所谓的修仙小说写手，写一个少年得到神仙指点不断修炼不断进步最后成为神魔人三界主宰，这种故事非常无趣但它就是有市场，兴许可以为我赚得娶老婆的本钱。但最后，我毫无建树，因为我对此根本一点都不感兴趣，我后来出版的小说也是一个反响平平的都市爱情故事。</p><p>再后来，我去给出版社做枪手，为他人做嫁衣。写自己的故事，署他人的名，拿一笔如同售卖亲子得来的钱。这样的工作可以为我提供七八万的年薪，但我只是别人的影子，没有一点社会地位，当凌一尧的父亲问我从事什么工作，我说是出版社，可是我心里明白，出版社的员工花名册里压根儿没有我的名字。</p><p>我只是别人花钱雇来的影子武士。</p><p>在那段时间，凌一尧的父母对我说了“NO”，我与凌一尧之间也不停地发生争执，我一度出现精神抑郁的状况，整夜整夜地失眠。也是在那段时间，我与一个早年认识的北京女孩聊得较多，当初认识时她才十八九岁，素颜时很像大学时期的凌一尧。</p><p>我走进一个死胡同，我将这个北京女孩当作凌一尧，试图用一个从未谋面的人来排挤凌一尧，那段颠三倒四的日子就是这样混过去的。后来，我也不知道自己到底是在暗恋北京女孩，还是在思念凌一尧。</p><p>再后来，北京女孩长大了，她与同学创建“powerful”的品牌，而我依旧是默默无闻的吕钦扬，互相删了微博和豆瓣。</p><p>后来我遇到一个既称得上哥又称得上叔的长辈，他问我怕不怕苦，问我要不要一起去干工程，加入这个既辛苦又容易暴发的行业。当时我想钱已经想疯了，我看见运钞车都会不自觉地想一下各种可能性，我每天都渴望赚到钱但我不知道如何赚，每天都被这种矛盾折磨得无法入睡。</p><p>凌一尧试图阻止我，但我还是跟他一起走了，先去海边干围海，没有赚到现钱，政府工程的付款方式非常扯淡。再后来，我们又去新疆做光伏电站，在那里，一起趟过黄海和戈壁的技术员把命丢在那里。他比我小一岁，出来卖命的原因也是为了某个她。</p><p>因为出现伤亡事故会导致工程停滞，业主最后托关系出具自然死亡证明，80 万元私了，尸体在当地停了几天后才火化。为了把他带回江苏，我们三人轮流开车，手机按了免提摆在骨灰盒上，里面传出来自家乡老人的呼唤：“天冷霜重，快点归乡哦！”</p><p>当我回到家乡，凌一尧与别人的婚事已经是板上钉钉的事情，用她的话讲，“和他结婚或者和你结婚，现在对我而言，似乎都无所谓了”。我们打电话都要偷偷摸摸的，我们对此都非常厌烦，年底婚期将至的那段时间，凌一尧在派发请柬时难免遇到我们当时的一些老朋友，她的情绪出现波动，开始犹豫不决，甚至想过悔婚。</p><p>可是即便他不是她想要的，那现在的我就是她想要的么？</p><p>我也曾经欢欣鼓舞地认为自己的爱情可以失而复返，但最终闹腾一段时间，我们都发现，那不过是再普通不够的婚前焦虑而已。我们很久以前就各自走上背离对方的道路，只是我独自活在自己的世界里，以为两条道路在前面仍会交汇。</p><p>那个技术员经常喝酒以后和我聊他那让我一听就想打瞌睡的爱情，一提到他的女朋友以后可能和别人结婚，他就忍不住抹眼泪，说：“要是她以后和别人结婚，我一定要躺到她家门口，从我身上跨过去才让她出门。”</p><p>1 月 27 日，我做了人生里最操蛋的事情，我去了他女朋友举办婚礼的那家酒店，将一块旧红布压在迎宾门毯底下。现在你就躺在这里了，可是你阻止得了么？</p><p>至于红布是什么，我家乡的人兴许会明白。</p><p>讲完这个故事之后，我比你们任何人都无法自拔，老是梦见白蒲高中那条河，梦见她穿着蓝白相间的校服走下桥头，梦见她站在阳台上忧虑地望着远方。但那又能如何，我现在一想起她，只记得她从十五岁到二十四岁的模样，却想不起来她如今着了粉黛之后的相貌。</p><p>我的脾气也越来越坏，时而莫名其妙地摔东西，时而一个人在家唱歌，我有时都想着自己是不是有点精神分裂，怀疑自己会不会哪天睁眼醒来发现自己的一些经历只是一场梦。</p><p>昨天是家乡风俗里迎财神的日子，而今天是送财神的日子，漫天的璀璨烟火，其中便有为祝福她的未来而怒放。凌晨五点，我踏上前往上海的车子，今天在上海呆一宿，明天飞往北京，拜见几位资历厚重的前辈。</p><p>正月初五，情人节，故人着新衣，嫁作他人妇。</p><p>这只金箍，先戴为敬。</p><p>故事引用了少年派的结局，作者疑似为写手，不过这都已经不重要了，相信在 13 年那个还没那么多“故事写手”的情况下，作者带着自己的感情与爱情写下了这篇帖子，帖子的最后，楼主给了这个故事三个结局，除了直播帖一开始的结局之外，还有“<a href="https://baike.baidu.com/item/%E5%87%8C%E4%B8%80%E5%B0%A7">凌一尧</a>解除婚约，回到吕钦扬身边”和“吕钦扬丧命沙漠，遗书要求向凌一尧隐瞒死讯”两个结局。网友猜测，帖子开头的结局是真实的，大团圆结局是楼主的美好愿望，而那个残忍的结局，则是楼主希望“自己当时死了算了”的感叹。</p><p><strong>三个结局</strong><br>　　 1，男主回来，找到男二谈话，找回了爱情，男二自己放弃（这是作者和读者最想看到的结局）<br>　　 2，男主死在了新疆，男主学弟复述了这个故事，赚了很多读者的眼泪。（其实是以那个真的死去的技术员为背景写的这个结局，同时寓意自己的心已经死在新疆）<br>　　 3，男主否认了上面两种结局，这个世界上没有那么多美好的结局，也没有付出努力就得到的大笔金钱（工程真的做了，但没有赚到钱），更没有那么多让爱情变得凄美的死亡。男主在这个残酷的世界里，找不回曾经的爱情，而存在于他们心底的爱情，也没有年少时的勇气和激情能够让他们推翻抛弃一切在一起。<br>　　也许，最痛苦的，不是发现自己无力改变这个现实，而是发现，已经不那么爱了。</p><p>他们足够相爱，足够有担当，足够谦让，足够包容，拥有一切爱情所需要的，可最终还是败在了现实面前，也许生活就是这样</p><p>看完以后</p><p>所有的话语化成一句我爱你</p><p>我会用尽全力 🍖。</p>]]></content>
      
      
      <categories>
          
          <category> 生活日常 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 生活 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>五一，武汉行</title>
      <link href="/posts/7e87.html"/>
      <url>/posts/7e87.html</url>
      
        <content type="html"><![CDATA[<span class='p center logo large'>武汉行</span><span class='p center small'>一场说走就走的旅行✌️</span><p>趁着这次五一长假 📷，去武汉好好的玩一玩<del>武功山人太多了</del>，武汉我们来啦~</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/1.jpg"></p><p>下午 15 点坐上火车，晚上 20 点就到了武昌站</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/2.jpg"></p><p>一路上遇到了很多人很多事，火车真的是一个大杂烩，什么人都有，比如某不抽烟就是不信毛爷爷女子，抽烟抽了 10 多年了从没人管过之类，但也有人很好的叔叔，也有给我们让座了的好人，4 个人的旅途总之很愉快 🧊~</p><p>下了车站后，我们找到酒店放下行李，休息了一会儿后就立马前往<strong>楚河汉街</strong>。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/3.jpg"></p><p>吃了一顿不是那么好吃的烧烤和炒饭河粉（可能武汉人民的烧烤不符合我们湖南人吧 hhh），逛完楚河汉街和光谷步行街已经到了晚上 12 点，打车回酒店就直接睡了。第一天的行程就结束了。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/4.jpg"></p><p><strong>第二天</strong></p><p>第二天我们早早的起床，早早的化妆，终于在 9 点半出发 hhh，10 点左右赶到粮道街，令我们没想到的是，武汉鱿鱼老板任性的在 10 点左右开门，柒个蛋烘糕也在 10 点半开门，所以我们几乎没排什么队的就把所有小吃 🍰 吃了个遍<del>除了武汉热干面</del>，也多亏了没吃热干面 🥘，不然就吃不下这么多好吃的了，柒个蛋烘糕 🌮 针不戳，就是老板任性，有钱我不赚，哎<del>，就是玩儿</del>hhh。</p><p><strong>爆汁生煎</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/5.jpg"></p><p><strong>马丁豆豆</strong>（牛蛙肉）</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/6.jpg"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/7.jpg"></p><p><strong>鱿鱼</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/8.jpg"></p><p><strong>无骨煸鸡</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/9.jpg"></p><p><strong>蛋卷</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/10.jpg"></p><p><strong>茶百道</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/11.jpg"></p><p><strong>豆皮烧麦</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/12.jpg"></p><p>中午的时候咱们走路去了黄鹤楼，本来想常常黄鹤楼雪糕 🍦，结果没找到地方就没买了，在黄鹤楼外的小公园里面拍了很多照片，远远的拍了一张黄鹤楼的照片<del>就当我来过了</del></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/13.jpg"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/14.jpg"></p><p>接下来就是到处走，到处看，去了<code>昙华林</code>体验了一下“欧式建筑”，到处转了转，感受了当地的风土民情 🍧。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/15.jpg"></p><p>下午下起了雨</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/16.png"></p><p>迫于无奈去看了一场电影《你的婚礼》🙏，怎么样我就不说了，4 人集体 yue，直接跑路。</p><p>看完电影还想去玩，但是雨还没停，想着 4 点多了，小明大排档也快开门了，结果因为下雨 🌨️，我们走路过去晚到了 10 分钟，在我们前面排队的就有 70 桌，而小明大排档上下两层楼只有 20 桌，然后我们果断的等了半个小时后放弃直接去了一家刚开业的小龙虾大排档。</p><p>吃完饭，雨 🌨️ 还是没有停的意思，但是我们决定一定要坐渡轮，因为明天就回去了，所以我们走路去了坐渡轮的地方，别问我们为什么不打滴滴去，<del>才不是因为打不到车，打车更久</del> 走路过去的结果就是我们的 jio 都成了泡椒凤爪 💧</p><p>但是看到了渡轮 ⛵ 上的风景，也挺好看的，桥上的灯也正好在我们那一趟船开灯了</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/17.jpg"></p><div class="videos" col='2'><div class="video"><video controls preload><source src='https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/1.mp4' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/2.mp4' type='video/mp4'>Your browser does not support the video tag.</video></div></div><p>回到民宿，我们看了 🎉《羞羞的铁拳》，简直比某婚礼好看不知道多少倍</p><p>第三天，起床我们就去了吃了小川料理 ✨，简直超好吃，可惜吃不动了，某人还去面基了~</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/18.jpg"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/19.jpg"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/20.jpg"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/21.jpg"></p><p>吃了大餐后，我们去了武汉博物馆 🔔，武汉美术馆，梨园，海底世界等，以上所有地点都由于一系列原因只在门口进行了拍照留念<del>哈哈哈</del></p><p>最后我们在东湖玩了一下午，东湖之大，几个西湖装不下</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/22.jpg"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/23.jpg"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/24.jpg"></p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/25.jpg" style="height:500px;" /><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/26.jpg"></p><p>最后这趟愉快的武汉之行就结束啦~</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/wuhan/27.jpg"></p><p>这是一场说走就走的旅行 ⚽，以后也会在我们记忆的深处埋藏</p>]]></content>
      
      
      <categories>
          
          <category> 生活日常 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 生活 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>console的高级用法</title>
      <link href="/posts/3444.html"/>
      <url>/posts/3444.html</url>
      
        <content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><blockquote><p>前几天在看<a href='https://limestart.cn/'>青柠起始页</a>的时候偶然间看到它的控制台居然可以这样 👊</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/1.png"></p><p>于是就萌生了学一波 console 方法的念头，今天正好有时间就来把这几天的学习成果记录一下 😶</p></blockquote><h1 id="console-的基本用法"><a href="#console-的基本用法" class="headerlink" title="console 的基本用法"></a>console 的基本用法</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;最常见用法\n换行&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&quot;输出错误信息 会以红色显示&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">&quot;打印警告信息 会以黄色显示&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">info</span>(<span class="string">&quot;打印一般信息&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// console.clear();//清空上面的console显示</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//进阶用法</span></span><br><span class="line"><span class="comment">//console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">assert</span>(<span class="literal">false</span>, <span class="string">&quot;判断为false才显示的信息&quot;</span>);</span><br><span class="line"><span class="comment">//传入的对象或数组以表格方式显示</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">table</span>([[<span class="string">&quot;Anzhiyu&quot;</span>, <span class="string">&quot;Chen&quot;</span>], [<span class="string">&quot;好&quot;</span>]]);</span><br><span class="line"><span class="comment">//打印 调用链 fn2()调用fn1()，fn1()调用fn()</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">trace</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title function_">fn</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title function_">fn1</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn2</span>();</span><br><span class="line"></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">      console.log支持的格式标志有:</span></span><br><span class="line"><span class="comment">      %s       占位符</span></span><br><span class="line"><span class="comment">      %d 或 %i    整数</span></span><br><span class="line"><span class="comment">      %f       浮点数</span></span><br><span class="line"><span class="comment">      %o%O     object对象</span></span><br><span class="line"><span class="comment">      %c       css样式</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;%d + %d = %d&quot;</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>);</span><br><span class="line"><span class="comment">//%o%O打印dom节点时就不一样</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;%o&quot;</span>, <span class="variable language_">document</span>.<span class="property">body</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;%O&quot;</span>, <span class="variable language_">document</span>.<span class="property">body</span>);</span><br><span class="line"><span class="comment">// %c 后面的内容，增加css样式</span></span><br><span class="line"><span class="comment">//附：console.log输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式，而这个无法用%c覆盖</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;123 %c 456&quot;</span>, <span class="string">&quot;font-size:36px;color:red;&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;123 %c 4 https://anheyu.com 56 %c 789&quot;</span>, <span class="string">&quot;font-size:20px;color:#3b70fc;&quot;</span>, <span class="string">&quot;font-size：12px;color:#000&quot;</span>);</span><br><span class="line"><span class="comment">//利用css样式加载图片</span></span><br><span class="line"><span class="comment">//没法直接设置width和height样式,line-height图片高度,再调padding</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  <span class="string">&quot;%c &quot;</span>,</span><br><span class="line">  <span class="string">&#x27;background-image:url(&quot;https://cdn.jsdelivr.net/gh/waterchen520/cdn2@latest/anheyu.com.jpg&quot;);background-size:120% 120%;background-repeat:no-repeat;background-position:center center;line-height:60px;padding:30px 120px;&#x27;</span></span><br><span class="line">);</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="variable language_">console</span>.<span class="title function_">time</span>();</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">100000</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">var</span> j = i * i;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">timeEnd</span>();</span><br><span class="line"><span class="comment">//统计代码或函数被调用了多少次</span></span><br><span class="line"><span class="keyword">var</span> fn_ = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">count</span>(<span class="string">&quot;hello world&quot;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">  <span class="title function_">fn_</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//查看内存使用情况，是属性，不带括号</span></span><br><span class="line"><span class="comment">//console.memory;</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="variable language_">console</span>.<span class="title function_">group</span>(<span class="string">&quot;分组1&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;语文&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;数学&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">group</span>(<span class="string">&quot;其他科目&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;化学&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;地理&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;历史&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">groupEnd</span>(<span class="string">&quot;其他科目&quot;</span>);</span><br></pre></td></tr></table></figure><p>展开上面代码运行可以得到</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/2.png"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/3.png"></p><p>注意以上某些方法某些浏览器<psw>IE:没错就是我</psw>不支持</p><h1 id="console-详解"><a href="#console-详解" class="headerlink" title="console 详解"></a>console 详解</h1><p>让我们来看看谷歌浏览器提供的 console 方法的 API <a href="https://developer.chrome.com/docs/devtools/console/">https://developer.chrome.com/docs/devtools/console/</a></p><p>我们来重写 console，发现它里面有很多方法</p><h2 id="console-assert-expression-object"><a href="#console-assert-expression-object" class="headerlink" title="console.assert(expression, object)"></a>console.assert(expression, object)</h2><p>在被评估的表达式为 <code>false</code> 时向控制台写入一个错误。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">greaterThan</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">assert</span>(a &gt; b, &#123; <span class="attr">message</span>: <span class="string">&quot;a is not greater than b&quot;</span>, <span class="attr">a</span>: a, <span class="attr">b</span>: b &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">greaterThan</span>(<span class="number">5</span>, <span class="number">6</span>);</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/4.png"></p><h2 id="console-clear"><a href="#console-clear" class="headerlink" title="console.clear()"></a>console.clear()</h2><p>清除控制台。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">console.clear();1</span><br></pre></td></tr></table></figure><p>如果已启用 Preserve log 复选框，<code>console.clear()</code> 将停用。 不过，在控制台处于聚焦状态时，按 clear console 按钮或者输入 Ctrl+L 快捷键仍然有效。</p><h2 id="console-count-label"><a href="#console-count-label" class="headerlink" title="console.count(label)"></a>console.count(label)</h2><p>写入在同一行使用相同标签调用 <code>count()</code> 的次数。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function login(name) &#123;</span><br><span class="line">  console.count(name + &#x27; logged in&#x27;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/5.png"></p><h2 id="console-debug-object-object-…"><a href="#console-debug-object-object-…" class="headerlink" title="console.debug(object [, object, …])"></a>console.debug(object [, object, …])</h2><p>与 <code>console.log()</code> 作用相同。</p><h2 id="console-dir-object"><a href="#console-dir-object" class="headerlink" title="console.dir(object)"></a>console.dir(object)</h2><p>输出以 JavaScript 形式表示的指定对象。如果正在记录的对象是 HTML 元素，将输出其以 DOM 形式表示的属性，如下所示：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">console.dir(document.body);</span><br></pre></td></tr></table></figure><p>比 console.log 更加详细</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/6.png"></p><h2 id="console-dirxml-object"><a href="#console-dirxml-object" class="headerlink" title="console.dirxml(object)"></a>console.dirxml(object)</h2><p>如果可以，输出 object 子级元素的 XML 表示形式，否则输出其 JavaScript 表示形式。 在 HTML 和 XML 元素上调用 <code>console.dirxml()</code> 等同于调用 <code>console.log()</code>。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">dirxml</span>(<span class="variable language_">document</span>);</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/7.png"></p><h2 id="console-error-object-object-…"><a href="#console-error-object-object-…" class="headerlink" title="console.error(object [, object, …])"></a>console.error(object [, object, …])</h2><p>输出一条类似于 <code>console.log()</code> 的消息，将消息设置成错误样式，并在调用此方法的地方包含一个堆叠追踪。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">console.error(&#x27;error: name is undefined&#x27;);</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/8.png"></p><h2 id="console-group-object-object-…"><a href="#console-group-object-object-…" class="headerlink" title="console.group(object[, object, …])"></a>console.group(object[, object, …])</h2><p>启动一个带有可选标题的新日志组。以可视化方式将在 <code>console.group()</code> 后、<code>console.groupEnd()</code> 前发生的所有控制台输出组合在一起。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">name</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">group</span>(<span class="string">&quot;name&quot;</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;first: &quot;</span>, obj.<span class="property">first</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;middle: &quot;</span>, obj.<span class="property">middle</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;last: &quot;</span>, obj.<span class="property">last</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">groupEnd</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">name</span>(&#123; <span class="attr">first</span>: <span class="string">&quot;Wile&quot;</span>, <span class="attr">middle</span>: <span class="string">&quot;E&quot;</span>, <span class="attr">last</span>: <span class="string">&quot;Coyote&quot;</span> &#125;);</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/9.png"></p><p>您还可以嵌套组：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">name</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">group</span>(<span class="string">&quot;name&quot;</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;first: &quot;</span>, obj.<span class="property">first</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;middle: &quot;</span>, obj.<span class="property">middle</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;last: &quot;</span>, obj.<span class="property">last</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">groupEnd</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">doStuff</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">group</span>(<span class="string">&quot;doStuff()&quot;</span>);</span><br><span class="line">  <span class="title function_">name</span>(&#123; <span class="attr">first</span>: <span class="string">&quot;Wile&quot;</span>, <span class="attr">middle</span>: <span class="string">&quot;E&quot;</span>, <span class="attr">last</span>: <span class="string">&quot;coyote&quot;</span> &#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">groupEnd</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">doStuff</span>();</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/10.png"></p><h2 id="console-groupCollapsed-object-object-…"><a href="#console-groupCollapsed-object-object-…" class="headerlink" title="console.groupCollapsed(object[, object, …])"></a>console.groupCollapsed(object[, object, …])</h2><p>创建一个初始处于折叠状态而不是打开状态的新日志组。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">groupCollapsed</span>(<span class="string">&quot;status&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;peekaboo, you can&#x27;t see me&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">groupEnd</span>();</span><br></pre></td></tr></table></figure><h2 id="console-groupEnd"><a href="#console-groupEnd" class="headerlink" title="console.groupEnd()"></a>console.groupEnd()</h2><p>关闭日志组。相关示例请参阅 <code>console.group</code>。</p><h2 id="console-info-object-object-…"><a href="#console-info-object-object-…" class="headerlink" title="console.info(object [, object, …])"></a>console.info(object [, object, …])</h2><p>输出一条类似 <code>console.log()</code> 的消息，但同时在输出旁显示一个图标（带白色“i”的蓝色圆圈）。</p><h2 id="console-log-object-object-…"><a href="#console-log-object-object-…" class="headerlink" title="console.log(object [, object, …])"></a>console.log(object [, object, …])</h2><p>在控制台中显示一条消息。将一个或多个对象传递到此方法。每个对象都会进行评估并级联到一个由空格分隔的字符串中。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;Hello, Logs!&quot;</span>);</span><br></pre></td></tr></table></figure><h2 id="格式说明符"><a href="#格式说明符" class="headerlink" title="格式说明符"></a>格式说明符</h2><p>您传递的第一个对象可以包含一个或多个格式说明符。格式说明符由百分号 (%) 与紧跟其后面的一个字母组成，字母指示要应用的格式。</p><h2 id="console-profile-label"><a href="#console-profile-label" class="headerlink" title="console.profile([label])"></a>console.profile([label])</h2><p>启动一个带有可选标签的 JavaScript CPU 配置文件。要完成配置文件，请调用 <code>console.profileEnd()</code>。 每一个配置文件都会添加到 Profiles 面板中。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">processPixels</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">profile</span>(<span class="string">&quot;processPixels()&quot;</span>);</span><br><span class="line">  <span class="comment">// later, after processing pixels</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">profileEnd</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="console-profileEnd"><a href="#console-profileEnd" class="headerlink" title="console.profileEnd()"></a>console.profileEnd()</h2><p>停止当前的 JavaScript CPU 分析会话（如果正在进行此会话），并将报告输出到 Profiles 面板中。</p><h2 id="console-time-label"><a href="#console-time-label" class="headerlink" title="console.time(label)"></a>console.time(label)</h2><p>启动一个具有关联标签的新计时器。使用相同标签调用 console.timeEnd() 时，定时器将停止，经过的时间将显示在控制台中。计时器值精确到亚毫秒。传递到 <code>time()</code> 和 <code>timeEnd()</code> 的字符串必须匹配，否则计时器不会结束。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">time</span>(<span class="string">&quot;Array initialize&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> array = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">1000000</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = array.<span class="property">length</span> - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span><br><span class="line">  array[i] = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">timeEnd</span>(<span class="string">&quot;Array initialize&quot;</span>);</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/11.png"></p><h2 id="console-timeEnd-label"><a href="#console-timeEnd-label" class="headerlink" title="console.timeEnd(label)"></a>console.timeEnd(label)</h2><p>停止当前的计时器（如果正在运行一个计时器），并将计时器标签和经过的时间输出到控制台。</p><h2 id="console-timeStamp-label"><a href="#console-timeStamp-label" class="headerlink" title="console.timeStamp([label])"></a>console.timeStamp([label])</h2><p>在录制会话期间向 Timeline 添加一个事件。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">timeStamp</span>(<span class="string">&quot;check out this custom timestamp thanks to console.timeStamp()!&quot;</span>);</span><br></pre></td></tr></table></figure><h2 id="console-trace-object"><a href="#console-trace-object" class="headerlink" title="console.trace(object)"></a>console.trace(object)</h2><p>从调用此方法的位置输出一个堆叠追踪。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">trace</span>();</span><br></pre></td></tr></table></figure><h2 id="console-warn-object-object-…"><a href="#console-warn-object-object-…" class="headerlink" title="console.warn(object [, object, …])"></a>console.warn(object [, object, …])</h2><p>输出一条类似 <code>console.log()</code> 的消息，但同时在记录的消息旁显示一个黄色警告图标。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">&quot;user limit reached!&quot;</span>);</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/12.png"></p><h1 id="重写简单的-console-方法"><a href="#重写简单的-console-方法" class="headerlink" title="重写简单的 console 方法"></a>重写简单的 console 方法</h1><p>我们常用的有 console.log、console.info、console.group、console.warn、console.error、console.profile、console.time，现在我们来试着重写 console.log、console.info、console.group、console.warn、console.error 这几个常用的，其他的类似但比较复杂。</p><p>第一步，搭一个结构，覆盖浏览器(chrome\ie)提供的 console 功能，这样直接引用此 JS 文件即可保证浏览器(主要是 IE)中不出错：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="variable language_">console</span> = &#123;</span><br><span class="line">  <span class="attr">assert</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">clear</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">count</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">debug</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">dir</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">dirxml</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">error</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">exception</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">group</span>: <span class="keyword">function</span> (<span class="params">name</span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">groupCollapsed</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">groupEnd</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">info</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">log</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">memoryProfile</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">memoryProfileEnd</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">profile</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">profileEnd</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">table</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">time</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">timeEnd</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">timeStamp</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">trace</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">warn</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p>第二步，实现 console.log 方法。在所实现的几个方法中这个是最复杂的。</p><p>从 chrome 的 API 中我们可以看到，console.log 不仅仅可以输出信息，还提供了类似 string.Format 的功能，原文地址：<a href="https://developer.chrome.com/docs/devtools/console/api/">https://developer.chrome.com/docs/devtools/console/api/</a></p><p>Here is the complete set of patterns that you may use for string substitution:</p><table><thead><tr><th>Pattern</th><th>Type</th></tr></thead><tbody><tr><td>%s</td><td>String</td></tr><tr><td>%d, %i</td><td>Integer (numeric formatting is not yet supported)</td></tr><tr><td>%f</td><td>Floating point number (numeric formatting is not yet supported)</td></tr><tr><td>%o</td><td>Object hyperlink</td></tr><tr><td>%c</td><td>Style formatting</td></tr></tbody></table><p>其中的%c 比较特殊，是给输出添加样式的，比如我们在 Chrome 中这样写：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;%cTest output&quot;</span>, <span class="string">&quot;color:white; background-color:blue&quot;</span>);</span><br></pre></td></tr></table></figure><p>运行后的结果是这样的：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/console/13.png"></p><p>这里%c 也可以跟 %s、%d 等混用。</p><p>所以，在代码中我直接用 replace 进行替换，由于 JS 中的 replace 默认只替换第一个匹配项，这里刚好，代码如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> args = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>);</span><br><span class="line"><span class="keyword">if</span> (args.<span class="property">length</span> &gt; <span class="number">1</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> i = <span class="number">1</span>,</span><br><span class="line">    hasstyle = <span class="literal">false</span>;</span><br><span class="line">  <span class="keyword">if</span> (args[<span class="number">0</span>].<span class="title function_">indexOf</span>(<span class="string">&quot;%c&quot;</span>) == <span class="number">0</span>) &#123;</span><br><span class="line">    args[<span class="number">0</span>] = args[<span class="number">0</span>].<span class="title function_">replace</span>(<span class="regexp">/%c/</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">    i = <span class="number">2</span>;</span><br><span class="line">    hasstyle = <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (; i &lt; args.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="regexp">/%s|%d|%i|%o/</span>.<span class="title function_">test</span>(args[<span class="number">0</span>])) &#123;</span><br><span class="line">      args[<span class="number">0</span>] = args[<span class="number">0</span>].<span class="title function_">replace</span>(<span class="regexp">/%s|%d|%i|%o/</span>, args[i]);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (i &lt; args.<span class="property">length</span>) &#123;</span><br><span class="line">    args[<span class="number">0</span>] = args[<span class="number">0</span>] + <span class="string">&quot; &quot;</span> + args.<span class="title function_">slice</span>(i).<span class="title function_">join</span>(<span class="string">&quot; &quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (hasstyle) &#123;</span><br><span class="line">    consoleHelper.<span class="title function_">showlog</span>(args[<span class="number">0</span>], args[<span class="number">1</span>]);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    consoleHelper.<span class="title function_">showlog</span>(args[<span class="number">0</span>]);</span><br><span class="line">  &#125;</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (args.<span class="property">length</span> == <span class="number">1</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="variable language_">arguments</span>[<span class="number">0</span>] <span class="keyword">instanceof</span> <span class="title class_">Array</span>) &#123;</span><br><span class="line">    consoleHelper.<span class="title function_">showlog</span>(<span class="string">&quot;[&quot;</span> + args[<span class="number">0</span>] + <span class="string">&quot;]&quot;</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable language_">arguments</span>[<span class="number">0</span>] <span class="keyword">instanceof</span> <span class="title class_">Function</span>) &#123;</span><br><span class="line">    consoleHelper.<span class="title function_">showlog</span>(args[<span class="number">0</span>], <span class="literal">null</span>, <span class="string">&quot;console_log_function&quot;</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    consoleHelper.<span class="title function_">showlog</span>(args[<span class="number">0</span>]);</span><br><span class="line">  &#125;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  consoleHelper.<span class="title function_">showlog</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>由于 console.log 可以接受多个参数，且个数不确定，所以这里直接没有写形参。对于%c 虽然 Chrome 中写在中间也是有效的，这里为了简单直接只对写在开头的有效。代码中先把参数转换为数组，然后对数组进行分情况处理。</p><p>当参数个数大于 1 时，对后面的参数用 replace 进行替换，然后把剩下的参数连接(join)起来进行输出。</p><p>当参数个数为 1 时，还要分两种情况，一是数组，二是方法。对于数组，按 Chrome 中的格式，在两端加中括号，对于函数，把字的颜色变为绿色</p><p>当参数个数为 0 时，直接输出空字符串</p><p>后面的 consoleHelper.showlog 是为了输出方便另外写的一个方法，在这个方法中把各种调试信息的结果显示在页面上的一个 div(如果存在)中。</p><p>其他几个方法的思路跟这个差不多，只是样式不同，功能比这个简单，直接把参数连接起来输出即可。</p><p><strong>整个 console 类代码如下：</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="variable language_">console</span> = &#123;</span><br><span class="line">  <span class="attr">assert</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">clear</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">count</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">debug</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">dir</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">dirxml</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">error</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> args = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>);</span><br><span class="line">    consoleHelper.<span class="title function_">showerror</span>(args.<span class="title function_">join</span>(<span class="string">&quot; &quot;</span>));</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">exception</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">group</span>: <span class="keyword">function</span> (<span class="params">name</span>) &#123;</span><br><span class="line">    consoleHelper.<span class="title function_">showgroup</span>(name);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">groupCollapsed</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">groupEnd</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">info</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> args = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>);</span><br><span class="line">    <span class="keyword">if</span> (args.<span class="property">length</span> == <span class="number">1</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="variable language_">arguments</span>[<span class="number">0</span>] <span class="keyword">instanceof</span> <span class="title class_">Array</span>) &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showinfo</span>(<span class="string">&quot;[&quot;</span> + args[<span class="number">0</span>] + <span class="string">&quot;]&quot;</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable language_">arguments</span>[<span class="number">0</span>] <span class="keyword">instanceof</span> <span class="title class_">Function</span>) &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showinfo</span>(args[<span class="number">0</span>], <span class="string">&quot;console_log_function&quot;</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showinfo</span>(args[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      consoleHelper.<span class="title function_">showinfo</span>(args.<span class="title function_">join</span>(<span class="string">&quot; &quot;</span>));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">log</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> args = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>);</span><br><span class="line">    <span class="keyword">if</span> (args.<span class="property">length</span> &gt; <span class="number">1</span>) &#123;</span><br><span class="line">      <span class="keyword">var</span> i = <span class="number">1</span>,</span><br><span class="line">        hasstyle = <span class="literal">false</span>;</span><br><span class="line">      <span class="keyword">if</span> (args[<span class="number">0</span>].<span class="title function_">indexOf</span>(<span class="string">&quot;%c&quot;</span>) == <span class="number">0</span>) &#123;</span><br><span class="line">        args[<span class="number">0</span>] = args[<span class="number">0</span>].<span class="title function_">replace</span>(<span class="regexp">/%c/</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">        i = <span class="number">2</span>;</span><br><span class="line">        hasstyle = <span class="literal">true</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">for</span> (; i &lt; args.<span class="property">length</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="regexp">/%s|%d|%i|%o/</span>.<span class="title function_">test</span>(args[<span class="number">0</span>])) &#123;</span><br><span class="line">          args[<span class="number">0</span>] = args[<span class="number">0</span>].<span class="title function_">replace</span>(<span class="regexp">/%s|%d|%i|%o/</span>, args[i]);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span> (i &lt; args.<span class="property">length</span>) &#123;</span><br><span class="line">        args[<span class="number">0</span>] = args[<span class="number">0</span>] + <span class="string">&quot; &quot;</span> + args.<span class="title function_">slice</span>(i).<span class="title function_">join</span>(<span class="string">&quot; &quot;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span> (hasstyle) &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showlog</span>(args[<span class="number">0</span>], args[<span class="number">1</span>]);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showlog</span>(args[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (args.<span class="property">length</span> == <span class="number">1</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="variable language_">arguments</span>[<span class="number">0</span>] <span class="keyword">instanceof</span> <span class="title class_">Array</span>) &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showlog</span>(<span class="string">&quot;[&quot;</span> + args[<span class="number">0</span>] + <span class="string">&quot;]&quot;</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable language_">arguments</span>[<span class="number">0</span>] <span class="keyword">instanceof</span> <span class="title class_">Function</span>) &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showlog</span>(args[<span class="number">0</span>], <span class="literal">null</span>, <span class="string">&quot;console_log_function&quot;</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showlog</span>(args[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      consoleHelper.<span class="title function_">showlog</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">memoryProfile</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">memoryProfileEnd</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">profile</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">profileEnd</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">table</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">time</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">timeEnd</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">timeStamp</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">trace</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;,</span><br><span class="line">  <span class="attr">warn</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> args = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>);</span><br><span class="line">    <span class="keyword">if</span> (args.<span class="property">length</span> == <span class="number">1</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="variable language_">arguments</span>[<span class="number">0</span>] <span class="keyword">instanceof</span> <span class="title class_">Array</span>) &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showwarn</span>(<span class="string">&quot;[&quot;</span> + args[<span class="number">0</span>] + <span class="string">&quot;]&quot;</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable language_">arguments</span>[<span class="number">0</span>] <span class="keyword">instanceof</span> <span class="title class_">Function</span>) &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showwarn</span>(args[<span class="number">0</span>], <span class="string">&quot;console_log_function&quot;</span>);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        consoleHelper.<span class="title function_">showwarn</span>(args[<span class="number">0</span>]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      consoleHelper.<span class="title function_">showwarn</span>(args.<span class="title function_">join</span>(<span class="string">&quot; &quot;</span>));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p><strong>consoleHelper 代码如下：</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> consoleHelper = &#123;</span><br><span class="line">  <span class="attr">showlog</span>: <span class="keyword">function</span> (<span class="params">val, style, cla</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (cla) &#123;</span><br><span class="line">      cla = <span class="string">&quot;console_log &quot;</span> + cla;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      cla = <span class="string">&quot;console_log&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">show</span>(val, style, cla);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">showinfo</span>: <span class="keyword">function</span> (<span class="params">val, cla</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (cla) &#123;</span><br><span class="line">      cla = <span class="string">&quot;console_info &quot;</span> + cla;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      cla = <span class="string">&quot;console_info&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">show</span>(val, <span class="literal">null</span>, cla);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">showwarn</span>: <span class="keyword">function</span> (<span class="params">val, cla</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (cla) &#123;</span><br><span class="line">      cla = <span class="string">&quot;console_warn &quot;</span> + cla;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      cla = <span class="string">&quot;console_warn&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">show</span>(val, <span class="literal">null</span>, cla);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">showerror</span>: <span class="keyword">function</span> (<span class="params">val</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">show</span>(val, <span class="literal">null</span>, <span class="string">&quot;console_error&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">showgroup</span>: <span class="keyword">function</span> (<span class="params">val</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!val) &#123;</span><br><span class="line">      val = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">show</span>(val + <span class="string">&quot;:&quot;</span>, <span class="literal">null</span>, <span class="string">&quot;console_group&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">show</span>: <span class="keyword">function</span> (<span class="params">val, style, cla</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;showconsole&quot;</span>)) &#123;</span><br><span class="line">      <span class="keyword">var</span> div = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">      <span class="keyword">if</span> (div.<span class="property">setAttribute</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (style) &#123;</span><br><span class="line">          div.<span class="title function_">setAttribute</span>(<span class="string">&quot;style&quot;</span>, style);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (style) &#123;</span><br><span class="line">          div = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;&lt;div style=&quot;</span> + style + <span class="string">&quot;&gt;&quot;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span> (cla) &#123;</span><br><span class="line">        div.<span class="property">className</span> = cla;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">var</span> oText = <span class="variable language_">document</span>.<span class="title function_">createTextNode</span>(val);</span><br><span class="line">      div.<span class="title function_">appendChild</span>(oText);</span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;showconsole&quot;</span>).<span class="title function_">appendChild</span>(div);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><p><code>注：如果想在页面中看到调试信息，直接在页面上添加一个id 为 showconsole 的隐藏的div即可。</code></p><p><strong>样式(尽量跟 Chrome 保持一致)：</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.console_log</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: -<span class="number">1px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.console_info</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: -<span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;这里是info方法的小图标&quot;</span>) no-repeat scroll <span class="number">0</span> <span class="number">1px</span> <span class="number">#ebf5ff</span>;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.console_warn</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: -<span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;这里是warn方法的小图标&quot;</span>) no-repeat scroll <span class="number">0</span> <span class="number">1px</span> <span class="number">#ffffc8</span>;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.console_error</span> &#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ff0000</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">5px</span>;</span><br><span class="line">  <span class="attribute">min-height</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: -<span class="number">1px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&quot;这里是error方法的小图标&quot;</span>) no-repeat scroll <span class="number">0</span> <span class="number">1px</span> <span class="number">#ffebeb</span>;</span><br><span class="line">  <span class="attribute">padding-left</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.console_group</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: bolder;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.console_log_function</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这里为了演示方便，三个小图标直接预留了位置，大家用时可以换成图片地址。</p><h1 id="代码实现案例"><a href="#代码实现案例" class="headerlink" title="代码实现案例"></a>代码实现案例</h1><p>如果只需要一个简单的，类似我博客里的这种，你只需要写一个 js</p><p>下面是本博客控制台的 js 源码</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> now1 = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">createtime1</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> grt = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;04/01/2021 00:00:00&quot;</span>); <span class="comment">//此处修改你的建站时间或者网站上线时间</span></span><br><span class="line">  now1.<span class="title function_">setTime</span>(now1.<span class="title function_">getTime</span>() + <span class="number">250</span>);</span><br><span class="line">  <span class="keyword">var</span> days = (now1 - grt) / <span class="number">1000</span> / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>;</span><br><span class="line">  <span class="keyword">var</span> dnum = <span class="title class_">Math</span>.<span class="title function_">floor</span>(days);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> ascll = [</span><br><span class="line">    <span class="string">`欢迎来到Anzhiyu\`Blog!`</span>,</span><br><span class="line">    <span class="string">`生活明朗, 万物可爱`</span>,</span><br><span class="line">    <span class="string">`</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">  ██╗   ██╗██╗ ██████╗ ██╗     ███████╗████████╗</span></span><br><span class="line"><span class="string">  ██║   ██║██║██╔═══██╗██║     ██╔════╝╚══██╔══╝</span></span><br><span class="line"><span class="string">  ██║   ██║██║██║   ██║██║     █████╗     ██║   </span></span><br><span class="line"><span class="string">  ╚██╗ ██╔╝██║██║   ██║██║     ██╔══╝     ██║   </span></span><br><span class="line"><span class="string">   ╚████╔╝ ██║╚██████╔╝███████╗███████╗   ██║   </span></span><br><span class="line"><span class="string">    ╚═══╝  ╚═╝ ╚═════╝ ╚══════╝╚══════╝   ╚═╝   </span></span><br><span class="line"><span class="string">                                              </span></span><br><span class="line"><span class="string">`</span>,</span><br><span class="line">    <span class="string">&quot;Anzhiyu`Blog 已上线&quot;</span>,</span><br><span class="line">    dnum,</span><br><span class="line">    <span class="string">&quot;天&quot;</span>,</span><br><span class="line">    <span class="string">&quot;©2021 By Anzhiyu&quot;</span>,</span><br><span class="line">  ];</span><br><span class="line"></span><br><span class="line">  <span class="built_in">setTimeout</span>(</span><br><span class="line">    <span class="variable language_">console</span>.<span class="property">log</span>.<span class="title function_">bind</span>(</span><br><span class="line">      <span class="variable language_">console</span>,</span><br><span class="line">      <span class="string">`\n%c<span class="subst">$&#123;ascll[<span class="number">0</span>]&#125;</span> %c <span class="subst">$&#123;ascll[<span class="number">1</span>]&#125;</span> %c <span class="subst">$&#123;ascll[<span class="number">2</span>]&#125;</span> %c<span class="subst">$&#123;ascll[<span class="number">3</span>]&#125;</span>%c <span class="subst">$&#123;ascll[<span class="number">4</span>]&#125;</span>%c <span class="subst">$&#123;ascll[<span class="number">5</span>]&#125;</span>\n\n%c <span class="subst">$&#123;ascll[<span class="number">6</span>]&#125;</span>\n`</span>,</span><br><span class="line">      <span class="string">&quot;color:#3b70fc&quot;</span>,</span><br><span class="line">      <span class="string">&quot;&quot;</span>,</span><br><span class="line">      <span class="string">&quot;color:#3b70fc&quot;</span>,</span><br><span class="line">      <span class="string">&quot;color:#3b70fc&quot;</span>,</span><br><span class="line">      <span class="string">&quot;&quot;</span>,</span><br><span class="line">      <span class="string">&quot;color:#3b70fc&quot;</span>,</span><br><span class="line">      <span class="string">&quot;&quot;</span></span><br><span class="line">    )</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">createtime1</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">createtime2</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> ascll2 = [<span class="string">`NCC2-036`</span>, <span class="string">`调用前置摄像头拍照成功，识别为【小笨蛋】.`</span>, <span class="string">`Photo captured: `</span>, <span class="string">`  `</span>];</span><br><span class="line"></span><br><span class="line">  <span class="built_in">setTimeout</span>(</span><br><span class="line">    <span class="variable language_">console</span>.<span class="property">log</span>.<span class="title function_">bind</span>(</span><br><span class="line">      <span class="variable language_">console</span>,</span><br><span class="line">      <span class="string">`%c <span class="subst">$&#123;ascll2[<span class="number">0</span>]&#125;</span> %c <span class="subst">$&#123;ascll2[<span class="number">1</span>]&#125;</span> %c \n<span class="subst">$&#123;ascll2[<span class="number">2</span>]&#125;</span> %c\n<span class="subst">$&#123;ascll2[<span class="number">3</span>]&#125;</span>\n`</span>,</span><br><span class="line">      <span class="string">&quot;color:white; background-color:#4fd953&quot;</span>,</span><br><span class="line">      <span class="string">&quot;&quot;</span>,</span><br><span class="line">      <span class="string">&quot;&quot;</span>,</span><br><span class="line">      <span class="string">&#x27;background:url(&quot;https://unpkg.zhimg.com/anzhiyu-assets@latest/image/common/tinggge.gif&quot;) no-repeat;font-size:450%&#x27;</span></span><br><span class="line">    )</span><br><span class="line">  );</span><br><span class="line"></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="variable language_">console</span>.<span class="property">log</span>.<span class="title function_">bind</span>(<span class="variable language_">console</span>, <span class="string">&quot;%c WELCOME %c 你好，小笨蛋.&quot;</span>, <span class="string">&quot;color:white; background-color:#4f90d9&quot;</span>, <span class="string">&quot;&quot;</span>));</span><br><span class="line"></span><br><span class="line">  <span class="built_in">setTimeout</span>(</span><br><span class="line">    <span class="variable language_">console</span>.<span class="property">warn</span>.<span class="title function_">bind</span>(</span><br><span class="line">      <span class="variable language_">console</span>,</span><br><span class="line">      <span class="string">&quot;%c ⚡ Powered by Anzhiyu %c 你正在访问 Anzhiyu 的博客.&quot;</span>,</span><br><span class="line">      <span class="string">&quot;color:white; background-color:#f0ad4e&quot;</span>,</span><br><span class="line">      <span class="string">&quot;&quot;</span></span><br><span class="line">    )</span><br><span class="line">  );</span><br><span class="line"></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="variable language_">console</span>.<span class="property">log</span>.<span class="title function_">bind</span>(<span class="variable language_">console</span>, <span class="string">&quot;%c W23-12 %c 你已打开控制台.&quot;</span>, <span class="string">&quot;color:white; background-color:#4f90d9&quot;</span>, <span class="string">&quot;&quot;</span>));</span><br><span class="line">  <span class="built_in">setTimeout</span>(</span><br><span class="line">    <span class="variable language_">console</span>.<span class="property">warn</span>.<span class="title function_">bind</span>(<span class="variable language_">console</span>, <span class="string">&quot;%c S013-782 %c 你现在正处于监控中.&quot;</span>, <span class="string">&quot;color:white; background-color:#d9534f&quot;</span>, <span class="string">&quot;&quot;</span>)</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">createtime2</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="property">log</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;;</span><br></pre></td></tr></table></figure><p>写下这篇博客的时候 📌，已经忘记参考地址是哪里了，算是一个汇总吧，参考地址<psw>百度</psw></p><p>啦啦啦~</p><p>我一直想从你的窗子里看月亮。💡~</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> JavaScript </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>弹性盒子</title>
      <link href="/posts/eadb39c4.html"/>
      <url>/posts/eadb39c4.html</url>
      
        <content type="html"><![CDATA[<blockquote><p>弹性盒模型的一些知识</p></blockquote><h3 id="简单介绍"><a href="#简单介绍" class="headerlink" title="简单介绍"></a>简单介绍</h3><p>弹性盒模型（ <code>Flexible Box</code> 或 <code>FlexBox</code>）是一个 CSS3 新增布局模块，官方称为 CSS Flexible Box Layout Module，用于实现容器里项目的<code>对齐、方向、排序（即使在项目大小位置、动态生成的情况）, 分配空白空间</code> 。弹性盒模型最大的特性在于，能够<code>动态修改子元素的宽度和高度</code>，以满足在不同尺寸屏幕下的恰当布局。</p><p>Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。</p><p>任何一个容器都可以指定为 Flex 布局。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>行内元素也可以使用 Flex 布局。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline-flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>Webkit 内核的浏览器，必须加上<code>-webkit</code>前缀。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: -webkit-flex; <span class="comment">/* Safari */</span></span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>注意，设为 Flex 布局以后，子元素的<code>float</code>、<code>clear</code>和<code>vertical-align</code>属性将失效。</p><h3 id="基本知识"><a href="#基本知识" class="headerlink" title="基本知识"></a>基本知识</h3><p>弹性盒子是由<code>弹性容器（flex container）</code>和弹性<code>子元素（flex item）</code>组成，弹性盒子有一个<code>主轴</code>（main axis）和一个<code>纵轴</code>（cross axis），弹性子元素沿着主轴依次排列 ，<code>侧轴垂直于主轴</code>。弹性容器的主轴开始（main start）、主轴结束（main end）和侧轴开始（cross start）、侧轴结束（cross end）代表了弹性子元素排列的<code>起始和结束位置</code>。具体可以看下面的图。</p><p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做<code>main start</code>，结束位置叫做<code>main end</code>；交叉轴的开始位置叫做<code>cross start</code>，结束位置叫做<code>cross end</code>。</p><p>项目默认沿主轴排列。单个项目占据的主轴空间叫做<code>main size</code>，占据的交叉轴空间叫做<code>cross size</code>。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/flex-container.png"></p><h3 id="弹性容器的相关属性"><a href="#弹性容器的相关属性" class="headerlink" title="弹性容器的相关属性"></a>弹性容器的相关属性</h3><details class="folding-tag" cyan open><summary> 弹性容器的相关属性 </summary>              <div class='content'>              <table><thead><tr><th>属性</th><th>属性说明</th></tr></thead><tbody><tr><td>flex-direction</td><td>设置主轴方向，确定弹性子元素的排列方式</td></tr><tr><td>flex-wrap</td><td>当弹性子元素超出弹性容器范围时是否换行</td></tr><tr><td>flex-flow</td><td>flex-direction 和 flex-wrap 的快捷方式，复合属性</td></tr><tr><td>justify-content</td><td>设置弹性子元素主轴上的对齐方式</td></tr><tr><td>align-items</td><td>设置弹性子元素侧轴上的对齐方式</td></tr><tr><td>align-content</td><td>侧轴上有空白时且有多行时，设置弹性子元素侧轴的对齐方式</td></tr></tbody></table><div class="tabs" id="flex-container-attr"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#flex-container-attr-1">flex-direction</button></li><li class="tab"><button type="button" data-href="#flex-container-attr-2">flex-wrap</button></li><li class="tab"><button type="button" data-href="#flex-container-attr-3">flex-flow</button></li><li class="tab"><button type="button" data-href="#flex-container-attr-4">justify-content</button></li><li class="tab"><button type="button" data-href="#flex-container-attr-5">align-items</button></li><li class="tab"><button type="button" data-href="#flex-container-attr-6">align-content</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="flex-container-attr-1"><blockquote><p>使用方法：<code>flex-direction:row |row-reverse |column |column-reverse</code></p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>row（默认值）</td><td>主轴为水平方向。排序方向与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。</td></tr><tr><td>row-reverse</td><td>主轴为水平方向。排序方向与页面的文档顺序相反。</td></tr><tr><td>column</td><td>主轴为垂直方向。排列顺序为从上到下</td></tr><tr><td>column-reverse</td><td>主轴为垂直方向。排列顺序为从下到上</td></tr></tbody></table><p>其属性的效果图如下：<img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/flex-direction.png" alt="flex-direction"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-container-attr-2"><blockquote><p>使用方法：flex-wrap: nowrap | wrap | wrap-reverse</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>nowrap（默认值）</td><td>溢出时不换行</td></tr><tr><td>wrap</td><td>溢出时自动换行</td></tr><tr><td>wrap-reverse</td><td>溢出时自动换行，翻转排列</td></tr></tbody></table><p>其效果图如下：<img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/flex-wrap.png" alt="flex-wrap"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-container-attr-3"><blockquote><p>使用方法：flex-flow: [flex-direction] || [flex-wrap]</p><p>含义：复合属性（flex-direction 和 flex-wrap），设置弹性子元素的排列方式</p></blockquote><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-container-attr-4"><blockquote><p>使用方法：justify-content: flex-start | flex-end | center | space-between | space-around</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>flex-start（默认值）</td><td>主轴开始对齐，主轴为横轴，ltr 环境下，左对齐</td></tr><tr><td>flex-end</td><td>主轴结束对齐，主轴为横轴，ltr 环境下，右对齐</td></tr><tr><td>center</td><td>居中对齐</td></tr><tr><td>space-between</td><td>第一个、最后一个对齐弹性容器的边缘，其余均匀分布</td></tr><tr><td>space-around</td><td>全部均匀分布</td></tr></tbody></table><p>其效果图如下：<img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/justify-content.png" alt="justify-content"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-container-attr-5"><blockquote><p>使用方法：align-items: flex-start | flex-end | center | baseline | stretch</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>flex-start</td><td>侧轴开始对齐，主轴为横轴，顶对齐</td></tr><tr><td>flex-end</td><td>侧轴结束对齐</td></tr><tr><td>center</td><td>居中对齐</td></tr><tr><td>baseline</td><td>基线对齐</td></tr><tr><td>stretch（默认值）</td><td>从侧轴开始到侧轴结束铺满整个侧轴</td></tr></tbody></table><p>其效果图如下：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/align-items.png" alt="align-items"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-container-attr-6"><blockquote><p>使用方法：align-content: flex-start | flex-end | center | space-between | space-around | stretch</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>flex-start</td><td>主轴开始对齐，主轴为横轴，ltr 环境下，左对齐</td></tr><tr><td>flex-end</td><td>主轴结束对齐，主轴为横轴，ltr 环境下，右对齐</td></tr><tr><td>center</td><td>居中对齐</td></tr><tr><td>space-between</td><td>第一个、最后一个对齐弹性容器的边缘，其余均匀分布</td></tr><tr><td>space-around</td><td>全部均匀分布</td></tr><tr><td>stretch（默认值）</td><td>各行伸展以占用剩余空间。如果剩余空间是负数，该值等效于 flex-start</td></tr></tbody></table><p>其效果图如下：<img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/align-content.png" alt="align-content"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h3 id="弹性子元素的相关属性"><a href="#弹性子元素的相关属性" class="headerlink" title="弹性子元素的相关属性"></a>弹性子元素的相关属性</h3><details class="folding-tag" ><summary> 弹性子元素的相关属性 </summary>              <div class='content'>              <table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>order</td><td>控制弹性容器里子元素的顺序，数值小的排在前面，可以为负值</td></tr><tr><td>flex-grow</td><td>设置弹性子元素的扩展比率</td></tr><tr><td>flex-shrink</td><td>设置弹性子元素的收缩比率</td></tr><tr><td>flex-basis</td><td>指定弹性子元素伸缩前的默认大小值，相当于 width 和 height 属性</td></tr><tr><td>flex</td><td>flex-grow，flex-shrink 和 flex-basis 属性的复合属性</td></tr><tr><td>align-self</td><td>允许独立的弹性子元素覆盖弹性容器的默认对齐设置（align-items）</td></tr></tbody></table><div class="tabs" id="flex-item-attr"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#flex-item-attr-1">order属性</button></li><li class="tab"><button type="button" data-href="#flex-item-attr-2">flex-grow 属性</button></li><li class="tab"><button type="button" data-href="#flex-item-attr-3">flex-shrink 属性</button></li><li class="tab"><button type="button" data-href="#flex-item-attr-4">flex-basis 属性</button></li><li class="tab"><button type="button" data-href="#flex-item-attr-5">flex 属性</button></li><li class="tab"><button type="button" data-href="#flex-item-attr-6">align-self 属性</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="flex-item-attr-1"><blockquote><p>使用方法：order: integer number</p></blockquote><p>​ 其属性效果图如下：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/order.png" alt="order"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-item-attr-2"><blockquote><p>使用方法：flex-grow: number</p><p>含义：设置弹性子元素的扩展比率，不允许为负值，默认值为 0。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。</p></blockquote><p>其属性效果图如下：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/flex-grow.png" alt="flex-grow"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-item-attr-3"><blockquote><p>使用方法：flex-shrink: number</p><p>含义：设置弹性子元素的收缩比率，不允许为负值，默认值为 1。根据弹性盒子元素所设置的扩展因子作为比率来收缩空间。</p></blockquote><p>其属性效果图如下：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/flex-shrink.png" alt="flex-shrink"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-item-attr-4"><blockquote><p>使用方法：flex-basis:|| auto</p><p>含义：设置弹性子元素的伸缩基准值，不允许为负值。默认值为 auto，无特定宽度（高度）。</p></blockquote><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-item-attr-5"><blockquote><p>使用方法：flex: none | [flex-grow] || [flex-shrink] || [flex-basis</p><p>含义：复合属性，设置弹性子元素的如何分配空间</p></blockquote><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="flex-item-attr-6"><blockquote><p>使用方法：auto | flex-start | flex-end | center | baseline | stretch</p><p>含义：设置弹性子元素的在侧轴上的对齐方式，与 align-items 相同。设置某个弹性子元素的对立对齐方式。</p></blockquote><p>其属性效果图如下：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/align-self.png" alt="align-self"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><h3 id="多列属性详解"><a href="#多列属性详解" class="headerlink" title="多列属性详解"></a>多列属性详解</h3><details class="folding-tag" ><summary> 多列属性详解 </summary>              <div class='content'>              <p><strong>基础知识</strong></p><p>多列（Multi-column）是一个 CSS3 新增布局模块，官方称为 Multiple column layout，可以比较轻松的实现多列布局，比如图片瀑布流。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/Flexible/Multi-column.png" alt="Multi-column"></p><p><strong>属性一览</strong></p><table><thead><tr><th>属性</th><th>属性说明</th></tr></thead><tbody><tr><td>columns</td><td>复合属性（column-width 和 column-count），设置宽度和列数</td></tr><tr><td>column-width</td><td>设置每列的宽度</td></tr><tr><td>column-count</td><td>设置列数</td></tr><tr><td>column-gap</td><td>设置列之间的间隙</td></tr><tr><td>column-rule</td><td>复合属性（column-rule-width、column-rule-style 和 column-rule-color），设置列之间的边框样式</td></tr><tr><td>column-fill</td><td>设置列的高度是否统一</td></tr><tr><td>column-span</td><td>设置是否横跨所有列</td></tr></tbody></table><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">column-width 属性</button></li><li class="tab"><button type="button" data-href="#test1-2">column-count 属性</button></li><li class="tab"><button type="button" data-href="#test1-3">columns 属性</button></li><li class="tab"><button type="button" data-href="#test1-4">column-gap 属性</button></li><li class="tab"><button type="button" data-href="#test1-5">column-rule 属性</button></li><li class="tab"><button type="button" data-href="#test1-6">column-fill 属性</button></li><li class="tab"><button type="button" data-href="#test1-7">column-span 属性</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><blockquote><p>使用方法：column-width: length | auto</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>auto（默认值）</td><td>浏览器决定列的宽度</td></tr><tr><td>length</td><td>用长度值来定义列宽。不允许负值</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><blockquote><p>使用方法： column-count: integer number | auto</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>auto（默认值）</td><td>列数将取决于其他属性，例如：”column-width”</td></tr><tr><td>imteger number</td><td>用整数值来定义列数，列的最佳数目将其中的元素的内容无法流出。</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><blockquote><p>使用方法：columns: [column-width]｜[column-count]</p><p>含义：复合属性设置列的宽度和个数</p></blockquote><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><blockquote><p>使用方法：column-gap: length | normal</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>normal（默认值）</td><td>与 font-size 大小相同。假设该对象的 font-size 为 16px，则 normal 的值为 16px，以此类推。</td></tr><tr><td>length</td><td>用长度来定义列与列之间的间隙。不允许为负值。</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test1-5"><blockquote><p>使用方法：column-rule: [column-rule-width] || [column-rule-style] || [column-rule-color]</p><p>含义：设置列与列之间的边框，和 border 属性相似</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>column-rule-width</td><td>设置列与列之间的边框的厚度</td></tr><tr><td>column-rule-style</td><td>设置列与列之间的边框的样式</td></tr><tr><td>column-rule-color</td><td>设置列与列之间的边框的颜色</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test1-6"><blockquote><p>使用方法：column-fill: auto | balance</p><p>含义：设置所有列的高度是否统一</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>auto（默认值）</td><td>列高度自适应内容</td></tr><tr><td>balance</td><td>所有列的高度以其中最高的一列统一</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test1-7"><blockquote><p>使用方法：column-span: none | all</p><p>含义：对象元素是否横跨所有列</p></blockquote><table><thead><tr><th>属性值</th><th>含义</th></tr></thead><tbody><tr><td>none（默认值）</td><td>不跨列</td></tr><tr><td>all</td><td>横跨所有列</td></tr></tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div>              </div>            </details><p>CSS3 弹性盒子的基本知识就是这些了 👌 👌 👌</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>HTML基础</title>
      <link href="/posts/e173abca.html"/>
      <url>/posts/e173abca.html</url>
      
        <content type="html"><![CDATA[<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>生活明朗，万物可爱，勤做笔记的好习惯可不能落下，嘿嘿😉，正所谓好记性不如烂笔头✍，笔记还是要记的</p><p>就像面对自己的恋人一般，认真，专注,接下来就是我的 HTML 笔记，也就是网页的结构，下面开始充电 🔋 之旅啦~</p><h3 id="初识-WEB"><a href="#初识-WEB" class="headerlink" title="初识 WEB"></a>初识 WEB</h3><p>让我们先来了解一下什么是 web</p><details class="folding-tag" blue><summary> 认识web </summary>              <div class='content'>              <p><strong>网页</strong> 主要是由<code>文字、图像</code>和<code>超链接</code>等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及 Flash 等。</p><p><strong>浏览器</strong> 是网页显示、运行的平台。</p><p><strong>浏览器内核</strong> (排版引擎、解释引擎、渲染引擎)</p><blockquote><p>负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。</p></blockquote><table><thead><tr><th>浏览器</th><th>内核</th><th>备注</th></tr></thead><tbody><tr><td>IE</td><td>Trident</td><td>IE、猎豹安全、360 极速浏览器、百度浏览器</td></tr><tr><td>firefox</td><td>Gecko</td><td>可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友 flash、神一样的对手 chrome。</td></tr><tr><td>Safari</td><td>webkit</td><td>现在很多人错误地把 webkit 叫做 chrome 内核（即使 chrome 内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。</td></tr><tr><td>chrome</td><td>Chromium&#x2F;Blink</td><td>在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用 Blink 内核。二次开发</td></tr><tr><td>Opera</td><td>blink</td><td>现在跟随 chrome 用 blink 内核。</td></tr></tbody></table>              </div>            </details><details class="folding-tag" blue><summary> Web标准 </summary>              <div class='content'>              <p><strong>构成</strong>👉 结构标准，表现标准和行为标准</p><ul><li><code>结构标准</code>用于对网页元素进行整理和分类(HTML)</li><li><code>表现标准</code>用于设置网页元素的版式、颜色、大小等外观属性(CSS)</li><li><code>行为标准</code>用于对网页模型的定义及交互的编写(JavaScript)</li></ul><p>也就是 <code>结构+表现+行为</code></p><p><strong>Web 标准的优点</strong>👇</p><ul><li><code>易于维护</code>：只需更改 CSS 文件，就可以改变整站的样式</li><li><code>页面响应快</code>：HTML 文档体积变小，响应时间短</li><li><code>可访问性</code>：语义化的 HTML（结构和表现相分离的 HTML）编写的网页文件，更容易被屏幕阅读器识别</li><li><code>设备兼容性</code>：不同的样式表可以让网页在不同的设备上呈现不同的样式</li><li><code>搜索引擎</code>：语义化的 HTML 能更容易被搜索引擎解析，提升排名</li></ul>              </div>            </details><h3 id="初识-HTML"><a href="#初识-HTML" class="headerlink" title="初识 HTML"></a>初识 HTML</h3><p><strong>HTML</strong>(Hyper Text Markup Language):超文本标记语言</p><p><strong>所谓超文本，有 2 层含义：</strong></p><ul><li>它可以加入图片、声音、动画、多媒体等内容（<code>超越文本限制</code> ）</li><li>不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（<code>超级链接文本</code>）。</li></ul><details class="folding-tag" blue><summary> HTML规范 </summary>              <div class='content'>              <p>HTML 骨架格式</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 页面中最大的标签 根标签 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 头部标签 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 标题标签 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 文档的主体 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><p>团队约定大小写</p><ul><li>HTML 标签名、类名、标签属性和大部分属性值统一用<code>小写</code></li></ul><p>HTML 元素标签分类</p><ul><li>常规元素(双标签)</li><li>空元素(单标签)</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">常规元素(双标签)</span><br><span class="line"><span class="tag">&lt;<span class="name">标签名</span>&gt;</span> 内容 <span class="tag">&lt;/<span class="name">标签名</span>&gt;</span>   比如<span class="tag">&lt;<span class="name">body</span>&gt;</span>我是文字<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">空元素(单标签)</span><br><span class="line"><span class="tag">&lt;<span class="name">标签名</span> /&gt;</span>  比如 <span class="tag">&lt;<span class="name">br</span> /&gt;</span>或<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br></pre></td></tr></table></figure><p>HTML 标签关系</p><ul><li><code>嵌套关系</code>父子级包含关系</li><li><code>并列关系</code>兄弟级并列关系<ul><li>如果两个标签之间的关系是<code>嵌套关系</code>，子元素最好缩进一个 tab 键的身位（一个 tab 是 4 个空格）。如果是<code>并列关系</code>，最好上下对齐。</li></ul></li></ul><p>文档类型&lt;!DOCTYPE &gt;</p><p><strong>文档类型</strong>用来说明你用的 XHTML 或者 HTML 是什么版本。&lt;!DOCTYPE html&gt; 告诉浏览器按照 HTML5 标准解析页面。</p><p>页面语言 lang</p><p><code>lang</code>指定该 html 标签内容所用的语言</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">  en 定义语言为英语 zh-CN定义语言为中文</span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>lang 的作用</strong></p><ul><li>根据根据 lang 属性来设定不同语言的 css 样式，或者字体</li><li>告诉搜索引擎做精确的识别</li><li>让语法检查程序做语言识别</li><li>帮助翻译工具做识别</li><li>帮助网页阅读程序做识别</li></ul><p>字符集</p><p><strong>字符集</strong>(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。</p><ul><li>UTF-8 是目前最常用的字符集编码方式</li><li>让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的 html 内容。</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure><p>meta viewport 的用法</p><p>通常 viewport 是指视窗、视口。浏览器上(也可能是一个 app 中的 webview)用来显示网页的那部分区域。在移动端和 pc 端视口是不同的，pc 端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口</p><blockquote><p>meta 有两个属性 name 和 http-equiv</p></blockquote><p>name 属性的取值</p><ul><li>keywords(关键字) 告诉搜索引擎，该网页的关键字</li><li>description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。</li><li>viewport(移动端的窗口)</li><li>robots(定义搜索引擎爬虫的索引方式) robots 用来告诉爬虫哪些页面需要索引，哪些页面不需要索引</li><li>author(作者)</li><li>generator(网页制作软件）</li><li>copyright(版权)</li></ul><p>http-equiv 有以下参数</p><p><strong>http-equiv</strong>相当于 http 的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容</p><ul><li><strong>content-Type</strong> 设定网页字符集(Html4 用法，不推荐)</li><li><strong>Expires(期限)</strong> ,可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。</li><li><strong>Pragma(cache 模式)</strong>,是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从 Cache 中再调出</li><li><strong>Refresh(刷新)</strong>,自动刷新并指向新页面。</li><li><strong>cache-control</strong>（请求和响应遵循的缓存机制）</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure><p>HTML 标签的语义化</p><ul><li>方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰的结构。</li><li>有利于 SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。</li><li>方便其他设备解析，如盲人阅读器根据语义渲染网页</li></ul><p><strong>拓展</strong> &lt;base&gt; 标签：规定页面上所有链接的默认 URL 和设置整体链接的打开状态</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">base</span> <span class="attr">href</span>=<span class="string">&quot;http://www.baidu.com&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">base</span> <span class="attr">target</span>=<span class="string">&quot;_self&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>测试<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">  跳转到 百度</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>              </div>            </details><h3 id="HTML-常用标签"><a href="#HTML-常用标签" class="headerlink" title="HTML 常用标签"></a>HTML 常用标签</h3><p>下面列举一些常用标签</p><details class="folding-tag" blue><summary> 常用标签 </summary>              <div class='content'>              <p><strong>排版标签</strong></p><p>主要和 css 搭配使用，显示网页结构的标签，是网页布局最常用的标签。</p><ul><li>标题标签 h(h1~h6)</li><li>段落标签 p,可以把 HTML 文档分割为若干段落</li><li>水平线标签 hr</li><li>换行标签 br</li><li>div 和 span 标签:是没有语义的,是我们网页布局最主要的 2 个盒子。</li></ul><p><strong>表现标签</strong></p><ul><li><strong>b</strong>和<strong>strong</strong> 文字以粗体显示</li><li><strong>i</strong>和<strong>em</strong> 文字以斜体显示</li><li><strong>s</strong>和<strong>del</strong> 文字以加删除线显示</li><li><strong>u</strong>和<strong>ins</strong> 文字以加下划线显示</li></ul><p><strong>标签属性(行内式)</strong></p><p>使用 HTML 制作网页时，如果想让 HTML 标签提供更多的信息，可以使用 HTML 标签的属性加以设置。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">标签名</span> <span class="attr">属性1</span>=<span class="string">&quot;属性值1&quot;</span> <span class="attr">属性2</span>=<span class="string">&quot;属性值2&quot;</span> …&gt;</span> 内容 <span class="tag">&lt;/<span class="name">标签名</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">手机</span> <span class="attr">颜色</span>=<span class="string">&quot;红色&quot;</span> <span class="attr">大小</span>=<span class="string">&quot;5寸&quot;</span>&gt;</span>  <span class="tag">&lt;/<span class="name">手机</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>图像标签 img</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/html-base/1.png"></p><div class="note warning modern"><p><strong>注意：</strong></p><ul><li>标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。</li><li>属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。</li><li>采取 键值对 的格式 key&#x3D;”value” 的格式</li></ul></div><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;img src=&quot;wg.jpg&quot; width=&quot;300&quot; height=&quot;300&quot; border=&quot;3&quot; title=&quot;这是个小乌龟&quot; /&gt;</span><br></pre></td></tr></table></figure><p>链接标签(重点)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;跳转目标&quot;</span> <span class="attr">target</span>=<span class="string">&quot;目标窗口的弹出方式&quot;</span>&gt;</span>文本或图像<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">target=&quot;_self&quot; 默认窗口弹出方式 target=&quot;_blank&quot; 新窗口弹出</span><br></pre></td></tr></table></figure><table><thead><tr><th>属性</th><th>作用</th></tr></thead><tbody><tr><td>href</td><td>用于指定链接目标的 url 地址，（必须属性）当为标签应用 href 属性时，它就具有了超链接的功能</td></tr><tr><td>target</td><td>用于指定链接页面的打开方式，其取值有_self 和_blank 两种，其中_self 为默认值，_blank 为在新窗口中打开方式。</td></tr></tbody></table><p><strong>src 和 href 的区别</strong></p><p>一句话概括:<strong>src 是引入资源的 href 是跳转 url 的</strong></p><ol><li>src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。</li><li>src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。</li><li>href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。</li></ol><div class="note warning modern"><p><strong>注意</strong></p><ol><li>外部链接 需要添加 <code>http://</code> <a href="http://www.baidu.com/">www.baidu.com</a></li><li>内部链接 直接链接内部页面名称即可 比如 &lt; a href&#x3D;”index.html”&gt; 首页</li><li>如果当时没有确定链接目标时，通常将链接标签的 href 属性值定义为“#”(即 href&#x3D;”#”)，表示该链接暂时为一个空链接。</li><li>不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。</li></ol></div><p><strong>锚点定位 ：通过创建锚点链接，用户能够快速定位到目标内容。</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">1. 使用相应的id名标注跳转目标的位置。 (找目标)</span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span> <span class="attr">id</span>=<span class="string">&quot;two&quot;</span>&gt;</span>第2集<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"></span><br><span class="line">2. 使用</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#id名&quot;</span>&gt;</span>链接文本<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">创建链接文本（被点击的）</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#two&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>注释标签</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 注释语句 --&gt;</span></span><br><span class="line">快捷键是： ctrl + / 或者 ctrl +shift + /</span><br></pre></td></tr></table></figure><p><strong>团队约定</strong>：注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行</p><p>路径</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/html-base/2.png"></p>              </div>            </details><h3 id="其他知识"><a href="#其他知识" class="headerlink" title="其他知识"></a>其他知识</h3><details class="folding-tag" blue><summary> 常用标签 </summary>              <div class='content'>              <p><strong>预格式化文本 pre 标签</strong></p><p><strong>预格式化文本 pre 标签</strong>元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。格式化文本就是 ，按照我们预先写好的文字格式来显示页面， 保留空格和换行等。</p><p><strong>特殊字符</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/html-base/3.png"></p><p><strong>什么是 XHTML</strong></p><ul><li>XHTML 指<strong>可扩展超文本标签语言</strong>（EXtensible HyperText Markup Language）。</li><li>XHTML 的目标是取代 HTML。</li><li>XHTML 与 HTML 4.01 几乎是相同的。</li><li>XHTML 是更严格更纯净的 HTML 版本。</li><li>XHTML 是作为一种 XML 应用被重新定义的 HTML,是严格版本的 HTML。例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。</li><li>XHTML 是一个 W3C 标准。</li></ul><p><strong>写 HTML 代码时应注意什么？</strong></p><ul><li>尽可能少的使用无语义的标签 div 和 span；</li><li>在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；</li><li>不要使用纯样式标签，如：b、font、u 等，改用 css 设置。</li><li>需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用 CSS 指定就不用他们），strong 默认样式是加粗（不要用 b），em 是斜体（不用 i）；</li><li>使用表格时，标题要用<strong>caption</strong>，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 td；</li><li>表单域要用<strong>fieldset</strong>标签包起来，并用<strong>legend</strong>标签说明表单的用途；</li><li>每个 input 标签对应的说明文本都需要使用<strong>label</strong>标签，并且通过为 input 设置 id 属性，在 lable 标签中设置 for 来让说明文本和相对应的 input 关联起来。</li></ul>              </div>            </details><h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3><details class="folding-tag" blue><summary> 表格 </summary>              <div class='content'>              <p>现在还是较为常用的一种标签，但不是用来布局，<code>常见显示、展示表格式数据</code>。因为它可以让数据显示的非常的规整，可读性非常好。<code>特别是后台展示数据的时候表格运用是否熟练就显得很重要</code>，一个清爽简约的表格能够把繁杂的数据表现得很有条理。</p><p><strong>创建表格</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>单元格内的文字<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line">  <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure><p><code>table、tr、td</code>，他们是创建表格的基本标签，缺一不可</p><ul><li>table 用于定义一个表格标签。</li><li>tr 标签 用于定义表格中的行，必须嵌套在 table 标签中。</li><li>td 用于定义表格中的单元格，必须嵌套在<code>&lt;tr&gt;&lt;/tr&gt;</code>标签中。</li><li>字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td 像一个容器，可以容纳所有的元素。</li></ul><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/html-base/4.png"><br><strong>表头单元格标签 th</strong>:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签&lt;th&gt;&lt;&#x2F;th&gt;替代相应的单元格标签&lt;td&gt;&lt;&#x2F;td&gt;即可。<br><strong>表格标题 caption</strong>:通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。你是风儿我是沙</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">caption</span>&gt;</span>我是表格标题<span class="tag">&lt;/<span class="name">caption</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>表格属性</strong></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/html-base/5.png"><br>三参为 0，平时开发的我们这三个参数 <code>border</code> <code>cellpadding</code> <code>cellspacing</code> 为 0</p><p><strong>合并单元格</strong></p><p>合并的顺序我们按照 <code>先上 后下 先左 后右</code> 的顺序 ,合并完之后需要删除多余的单元格。</p><ul><li>跨行合并：rowspan&#x3D;”合并单元格的个数”</li><li>跨列合并：colspan&#x3D;”合并单元格的个数”</li></ul><p><strong>总结表格</strong></p><table><thead><tr><th>标签名</th><th>定义</th><th>说明</th></tr></thead><tbody><tr><td><code> &lt;table&gt;&lt;/table&gt;</code></td><td>表格标签</td><td>就是一个四方的盒子</td></tr><tr><td><code>&lt;tr&gt;&lt;/tr&gt;</code></td><td>表格行标签</td><td>行标签要再 table 标签内部才有意义</td></tr><tr><td><code>&lt;td&gt;&lt;/td&gt;</code></td><td>单元格标签</td><td>单元格标签是个容器级元素，可以放任何东西</td></tr><tr><td><code>&lt;th&gt;&lt;/th&gt;</code></td><td>表头单元格标签</td><td>它还是一个单元格，但是里面的文字会居中且加粗</td></tr><tr><td><code>&lt;caption&gt;&lt;/caption&gt;</code></td><td>表格标题标签</td><td>表格的标题，跟着表格一起走，和表格居中对齐</td></tr><tr><td><code>clospan 和 rowspan</code></td><td>合并属性</td><td>用来合并单元格的</td></tr></tbody></table><p><strong>表格划分结构</strong></p><p>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot 来标注， 这样更好的分清表格结构。</p><div class="note warning modern"><p><strong>注意</strong></p><ol><li>&lt;thead&gt;&lt;&#x2F;thead&gt;：用于定义表格的头部。用来放标题之类的东西。&lt;thead&gt; 内部必须拥有&lt;tr&gt; 标签！</li><li>&lt;tbody&gt;&lt;&#x2F;tbody&gt;：用于定义表格的主体。放数据本体 。</li><li>&lt;tfoot&gt;&lt;&#x2F;tfoot&gt;放表格的脚注之类。</li><li>以上标签都是放到 table 标签中。</li></ol></div>              </div>            </details><h3 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h3><p><strong>列表</strong><br>容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。</p><p>列表最大的特点就是整齐 、整洁、 有序，跟表格类似，但是它可组合自由度会更高。</p><details class="folding-tag" blue><summary> 列表 </summary>              <div class='content'>              <p><strong>无序列表 ul</strong></p><ul><li>&lt;ul&gt;&lt;&#x2F;ul&gt;中只能嵌套&lt;li&gt;&lt;&#x2F;li&gt;，直接在&lt;ul&gt;&lt;&#x2F;ul&gt;标签中输入其他标签或者文字的做法是不被允许的。</li><li>&lt;li&gt;与&lt;&#x2F;li&gt;之间相当于一个容器，可以容纳所有元素。</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  ......</span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>有序列表 ol</strong></p><ul><li>&lt;ol&gt;标签中的 type 属性值为排序的序列号，不添加 type 属性时，有序列表默认从数字 1 开始排序。</li><li>常用的 type 属性值分别为是 1，a，A，i，I</li><li>&lt;ol reversed&#x3D;”reversed”&gt;中的 reversed 属性能够让有序列表中的序列倒序排列。</li><li>&lt;ol start&#x3D;”3”&gt;中的 start 属性值为 3，有序列表中的第一个序列号将从 3 开始排列。</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span> <span class="attr">type</span>=<span class="string">&quot;A&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表项1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表二<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>列表三<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>自定义列表 dl</strong></p><p>定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dl</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span>&gt;</span>名词1<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词1解释1<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词1解释2<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span>&gt;</span>名词2<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词2解释1<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dd</span>&gt;</span>名词2解释2<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br></pre></td></tr></table></figure>              </div>            </details><h3 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h3><p>在 HTML 中，一个完整的表单通常由<strong>表单控件</strong>（也称为表单元素）、<strong>提示信息</strong>和<strong>表单域</strong>3 个部分构成。表单目的是为了收集用户信息。</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/html-base/6.png"></p><details class="folding-tag" blue><summary> 表单 </summary>              <div class='content'>              <p><strong>表单控件：</strong></p><p>包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。</p><p><strong>提示信息：</strong></p><p>一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。</p><p><strong>表单域：</strong></p><p>它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的 url 地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。</p><p><strong>input 控件</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;属性值&quot;</span> <span class="attr">value</span>=<span class="string">&quot;你好&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure><ul><li>input 输入的意思</li><li>&lt;input &#x2F;&gt;标签为单标签</li><li>type 属性设置不同的属性值用来指定不同的控件类型</li><li>除了 type 属性还有别的属性</li></ul><p><strong>常用属性：</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">用户名:</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> /&gt;</span></span><br><span class="line">密 码：</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure><div class="tabs" id="form-value"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#form-value-1">value</button></li><li class="tab"><button type="button" data-href="#form-value-2">name</button></li><li class="tab"><button type="button" data-href="#form-value-3">checked</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="form-value-1"><p>value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个 value 来设置。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">用户名:</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span> <span class="attr">value</span>=<span class="string">&quot;请输入用户名&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="form-value-2"><ul><li>name 表单的名字， 这样，后台可以通过这个 name 属性找到这个表单。 页面中的表单很多，name 主要作用就是用于区别不同的表单。</li><li>name 属性后面的值，是我们自己定义的。</li><li>radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦</li><li>name 属性，我们现在用的较少，但是，当我们学 ajax 和后台的时候，是必须的。</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> /&gt;</span></span><br><span class="line">男</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> /&gt;</span></span><br><span class="line">女</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="form-value-3"><p>表示默认选中状态。 较常见于 单选按钮和复选按钮。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">性 别:</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> <span class="attr">value</span>=<span class="string">&quot;男&quot;</span> <span class="attr">checked</span>=<span class="string">&quot;checked&quot;</span> /&gt;</span></span><br><span class="line">男</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> <span class="attr">value</span>=<span class="string">&quot;女&quot;</span> /&gt;</span></span><br><span class="line">女</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><p><strong>input 属性小结</strong></p><table><thead><tr><th>属性</th><th>说明</th><th>作用</th></tr></thead><tbody><tr><td>type</td><td>表单类型</td><td>用来指定不同的控件类型</td></tr><tr><td>value</td><td>表单值</td><td>表单里面默认显示的文本</td></tr><tr><td>name</td><td>表单名字</td><td>页面中的表单很多，name 主要作用就是用于区别不同的表单。</td></tr><tr><td>checked</td><td>默认选中</td><td>表示那个单选或者复选按钮一开始就被选中了</td></tr></tbody></table><p><strong>label 标签</strong></p><ul><li>label 标签为 input 元素定义标注（标签）。</li><li>label 标签主要目的是为了提高用户体验。为用户提高最优秀的服务。</li></ul><p><strong>作用</strong></p><p>用于绑定一个表单元素, 当点击 label 标签的时候, 被绑定的表单元素就会获得输入焦点。</p><p><strong>如何绑定元素呢</strong></p><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">方法一</button></li><li class="tab"><button type="button" data-href="#test1-2">方法二</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><p>用 label 标签直接包含 input 表单， 适合单个表单选择</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">  用户名：</span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;usename&quot;</span> <span class="attr">value</span>=<span class="string">&quot;请输入用户名&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><p>使用 for 属性规定 label 与哪个表单元素绑定(通过 id)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;sex&quot;</span>&gt;</span>男<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;sex&quot;</span> <span class="attr">id</span>=<span class="string">&quot;sex&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><p><strong>textarea 控件(文本域)</strong></p><ul><li>通过 textarea 控件可以轻松地创建多行文本输入框.</li><li>cols&#x3D;”每行中的字符数” rows&#x3D;”显示的行数” 我们实际开发不用<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/html-base/7.png"></li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">textarea</span>&gt;</span></span><br><span class="line">    文本内容</span><br><span class="line"><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>文本框和文本域区别</strong></p><table><thead><tr><th>表单</th><th>名称</th><th>区别</th><th>默认值显示</th><th>用于场景</th></tr></thead><tbody><tr><td>input type&#x3D;”text”</td><td>文本框</td><td>只能显示一行文本</td><td>单标签，通过 value 显示默认值</td><td>用户名、昵称、密码等</td></tr><tr><td>textarea</td><td>文本域</td><td>可以显示多行文本</td><td>双标签，默认值写到标签中间</td><td>留言板</td></tr></tbody></table><p><strong>select 下拉列表</strong></p><ul><li>如果有多个选项让用户选择，为了节约空间，我们可以使用 select 控件定义下拉列表。</li><li>在 option 中定义 selected &#x3D;” selected “时，当前项即为默认选中项。</li><li>我们实际开发会用的比较少</li></ul><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/html-base/8.png"></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span>&gt;</span>选项1<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span>&gt;</span>选项2<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span>&gt;</span>选项3<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>form 表单域</strong></p><blockquote><p>收集的用户信息怎么传递给服务器？</p></blockquote><p>通过 form 表单域</p><blockquote><p>目的</p></blockquote><p>在 HTML 中，form 标签被用于定义表单域，以实现用户信息的收集和传递，form 中的所有内容都会被提交给服务器。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;url地址&quot;</span> <span class="attr">method</span>=<span class="string">&quot;提交方式&quot;</span> <span class="attr">name</span>=<span class="string">&quot;表单名称&quot;</span>&gt;</span>各种表单控件<span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>常用属性</strong></p><p>每个表单都应该有自己表单域。后面学 <code>ajax 后台交互</code>的时候，必须需要 form 表单域。</p><table><thead><tr><th>属性</th><th>属性值</th><th>作用</th></tr></thead><tbody><tr><td>action</td><td>url 地址</td><td>用于指定接收并处理表单数据的服务器程序的 url 地址</td></tr><tr><td>method</td><td>get&#x2F;post</td><td>用于设置表单数据的提交方式，其取值为 get 或 post。</td></tr><tr><td>name</td><td>名称</td><td>用于指定表单的名称，以区分同一个页面中的多个表单。</td></tr></tbody></table><p><strong>GET 和 POST 的区别</strong></p><ul><li>GET 在浏览器回退时是无害的，而 POST 会再次提交请求。</li><li>GET 请求会被浏览器主动 cache，而 POST 不会，除非手动设置。</li><li>GET 请求只能进行 url 编码，而 POST 支持多种编码方式。</li><li>GET 请求参数会被完整保留在浏览器历史记录里，而 POST 中的参数不会被保留。</li><li>GET 请求大小一般是(1024 字节)，http 协议并没有限制，而与服务器，操作系统有关，POST 理论上来说没有大小限制，http 协议规范也没有进行大小限制，但实际上 post 所能传递的数据量根据取决于服务器的设置和内存大小。</li><li>对参数的数据类型，GET 只接受 ASCII 字符，而 POST 没有限制。</li><li>GET 比 POST 更不安全，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息。</li></ul><p><strong>团队约定</strong></p><ul><li>元素属性值使用双引号语法</li><li>元素属性值可以写上的都写上</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">// 推荐</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;name&quot;</span> <span class="attr">checked</span>=<span class="string">&quot;checked&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>              </div>            </details><h3 id="面试题"><a href="#面试题" class="headerlink" title="面试题"></a>面试题</h3><details class="folding-tag" blue><summary> 从输入url到页面展示发生了什么 </summary>              <div class='content'>              <blockquote><p>作者：Twinkle_</p><p>链接：<a href="https://juejin.im/post/6869279683230629896">https://juejin.im/post/6869279683230629896</a></p><p>来源：掘金</p></blockquote><p><strong>浏览器的多进程架构</strong></p><p>从浏览器输入 <code>URL</code> 到页面渲染的整个过程都是由 浏览器架构中的各个进程之间的配合完成。</p><ul><li><strong>浏览器主进程</strong>: 管理子进程、提供服务功能</li><li><strong>渲染进程</strong>：将 HTML、CSS、JS 渲染成界面，js 引擎 v8 和排版引擎 Blink 就在上面，他会为每一个 tab 页面创建一个渲染进程</li><li><strong>GPU 进程</strong>：本来是负责处理 3Dcss 的，后来慢慢的 UI 界面也交给 GPU 来绘制</li><li><strong>网络进程</strong>：就是负责网络请求，网络资源加载的进程</li><li><strong>插件进程</strong>：负责插件的运行的，因为插件很容易崩溃，把它放到独立的进程里不要让它影响别人</li></ul><p>从用户输入信息到页面展示的不同阶段，<code>是不同的进程在发挥作用</code>，示意图如下：<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/html-base/9.png"></p><p>从图中可以看出，整个过程是需要各个进程之间相互配合完成的，过程大致可以描述为：</p><ul><li>用户<code>输入url</code>,处理输入信息，主进程开始导航，交给<code>网络进程</code>干活</li><li>网络进程发起网络请求，其中有<code>可能会发生重定向</code></li><li>服务器响应 URL 之后，主进程就要通知渲染进程，你要开始干活了</li><li>渲染进程准备好了，要想渲染进程提交数据，这个时间叫做<code>提交文档</code></li><li>渲染进程接受到数据，完成页面渲染。</li></ul><p><strong>具体过程</strong></p><ol><li>输入 url</li></ol><ul><li>用户输入 url，处理输入信息：</li><li>如果为非 url 结构的字符串，交给浏览器<code>默认引擎</code>去搜索改字符串；</li><li>若为 url 结构的字符串，浏览器主进程会交给 <code>网络进程</code> ,开始干活。</li></ul><ol start="2"><li><p>网络进程<br>2.1 <strong>查找浏览器缓存</strong></p><ul><li><p>网络进程会先看看是否存在本地缓存，如果有就直接返回资源给浏览器进程，无则下一步 DNS-&gt; IP -&gt; TCP</p><p>2.2 <strong>DNS 解析</strong></p></li><li><p>网络进程拿到 url 后，先会进行 DNS 域名解析得到<code>IP地址</code>。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。</p><p>2.3 <strong>建立 TCP 连接，三次握手</strong></p></li><li><p>接下来就是利用 IP 地址和服务器建立 TCP 连接。连接建立之后，向服务器发送请求。</p></li></ul></li><li><p>服务器响应</p><ul><li><p>服务器收到请求信息后，会根据请求信息生成响应行、响应头、响应体，并发给网络进程。网络进程接受了响应信息之后，就开始解析响应头的内容。</p></li><li><p><code>网络进程解析响应行和响应头信息的过程：</code></p><p>3.1 <strong>重定向</strong></p></li></ul></li></ol><p>如果响应行状态码为 301（永久重定向）和 302（临时），那么说明需要重定向到其他 url。这时候网络进程会从响应头中的 Location 字段里读取重定向的地址，并重新发起网络请求。</p><p>3.2 <strong>响应数据处理</strong></p><p>导航会通过请求头的 Content-type 字段判断响应体数据的类型。浏览器通过这个来决定如何显示响应体的内容。比如：若为 application&#x2F;octet-stream，则会按照下载类型来处理这个请求，导航结束。若为 text&#x2F;html，这就告诉浏览器服务器返回的是 html 格式，浏览器会通知渲染进程，你要干活了。</p><ol start="4"><li>准备渲染进程</li></ol><ul><li>默认情况，每个页面一个渲染进程。但若处于同一站点（同根域名+协议），那么渲染进程就会复用。</li></ul><ol start="5"><li>提交文档</li></ol><ul><li>渲染进程准备好后，浏览器进程发出“提交文档的消息”，渲染进程接受了消息之后，会跟网络进程简历传输数据的管道。</li><li>等数据传输完成了，渲染进程会告诉浏览器进程，确认文档提交，这时候浏览器会更新页面，安全状态，url，前进后退的历史。</li><li>到这里导航结束，进入渲染阶段。</li></ul><div class="note warning modern"><p><strong>注意</strong><br>当浏览器刚开始加载一个地址之后，标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容，并没立即替换为百度首页的页面。因为需要等待提交文档阶段，页面内容才会被替换。</p></div>              </div>            </details><details class="folding-tag" blue><summary> iframe有哪些缺点？ </summary>              <div class='content'>              <p>iframe 是一种框架，也是一种很常见的网页嵌入方式。</p><h3 id="iframe-的优点"><a href="#iframe-的优点" class="headerlink" title="iframe 的优点"></a>iframe 的优点</h3><ul><li>iframe 能够原封不动的把嵌入的网页展现出来。</li><li>如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。</li><li>网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。</li><li>如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。</li></ul><h3 id="iframe-的缺点"><a href="#iframe-的缺点" class="headerlink" title="iframe 的缺点"></a>iframe 的缺点</h3><ul><li>会产生很多页面，不容易管理。</li><li>iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。</li><li>代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理 iframe 中的内容，所以使用 iframe 会不利于搜索引擎优化。</li><li>很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。</li><li>iframe 框架页面会增加服务器的 http 请求，对于大型网站是不可取的。</li><li>现在基本上都是用 Ajax 来代替 iframe，所以 iframe 已经渐渐的退出了前端开发。</li></ul>              </div>            </details><details class="folding-tag" blue><summary> label的作用是什么？是怎么用的？ </summary>              <div class='content'>              <p>例子 1: 点击” 用户名:” 就可以定位光标到输入框</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;myid &quot;</span>&gt;</span>用户名:<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;myid&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure><blockquote><p>for 属性功能</p></blockquote><p>表示 Label 标签要绑定的 HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。</p><blockquote><p>acesskey 属性</p></blockquote><p><strong>功能：</strong><br>表示访问 Label 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。</p><p><strong>局限性：</strong><br>accessKey 属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。</p>              </div>            </details><details class="folding-tag" blue><summary> HTML5的form如何关闭自动完成功能？ </summary>              <div class='content'>              <p>&amp;nbsp;HTML 的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。</p><p>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用 AJAX 技术从数据库搜索并列举而不是在用户的历史记录中搜索。</p><p>关闭输入框的自动完成功能有 3 种方法：</p><ol><li>在 IE 的 Internet 选项菜单里的内容–自动完成里面设置</li><li>设置 form 的 autocomplete 为”on”或者”off”来开启或者关闭自动完成功能</li><li>设置输入框的 autocomplete 为”on”或者”off”来开启或者关闭该输入框的自动完成功能</li></ol>              </div>            </details><details class="folding-tag" blue><summary> 将 HTML5 看作成开放的网络平台 </summary>              <div class='content'>              <p>面试造火箭，经典工作拧螺丝</p><ol><li>语义 - 提供更准确地描述内容。</li><li>连接 - 提供新的方式与服务器通信。</li><li>离线和存储 - 允许网页在本地存储数据并有效地离线运行。</li><li>多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。</li><li>2D&#x2F;3D 图形和特效 - 提供更多种演示选项。</li><li>性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。</li><li>设备访问 - 允许使用各种输入、输出设备。</li><li>外观 - 可以开发丰富的主题。</li></ol>              </div>            </details><details class="folding-tag" blue><summary> 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？ </summary>              <div class='content'>              <ul><li>在浏览器的 html 头部加上 manifest 属性，如果是第一次访问浏览器会根据 manifest 的内容进行下载存储离线内容，如果已经访问过则从离线存储中进行加载，然后在比对服务器如果有新内容在更新离线存储</li><li>离线的情况下，浏览器就直接使用离线存储的资源。</li></ul>              </div>            </details><details class="folding-tag" blue><summary> 浏览器的渲染过程？ </summary>              <div class='content'>              <ol><li>将获取的 html 解析成 dom 树</li><li>处理 css，构成层叠样式表模型 CSSOM</li><li>将 dom 树和 CSSOM 合并为渲染树</li><li>根据 CSSOM 将渲染树的节点布局计算</li><li>将渲染树节点样式绘制到页面上</li></ol><div class="note warning modern"><p><strong>注意</strong></p><ul><li>在渲染的过程中是自上而下渲染，</li><li>js 会阻塞页面的渲染，优先等 js 执行完成</li><li>如果在渲染的过程中改变了样式，会造成回流需要重新渲染</li></ul></div>              </div>            </details><details class="folding-tag" blue><summary> link和@import的区别？ </summary>              <div class='content'>              <ol><li>从属关系区别：<br>link 属于 html 标签，而@import 是 css 提供的。</li><li>加载顺序区别：<br>页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面被加载完再加载。</li><li>兼容性区别：<br>import 只在 IE5 以上才能识别，而 link 是 html 标签，无兼容问题。</li><li>dom 可操作性区别：<br>可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import 的方式插入样式</li><li>权重区别：<br>如果已经存在相同样式，@import 引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出 link 方式的样式权重高于@import 的权重这样的直观效果。（简而言之，link 和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）</li></ol>              </div>            </details><details class="folding-tag" blue><summary> src与href的区别？ </summary>              <div class='content'>              <ol><li>href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。</li><li>src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。</li></ol>              </div>            </details><p>❤️ 感谢大家能看到这里</p>]]></content>
      
      
      <categories>
          
          <category> 前端开发 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 开发 </tag>
            
            <tag> 前端 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Hexo部署到腾讯云或阿里云</title>
      <link href="/posts/ce6a.html"/>
      <url>/posts/ce6a.html</url>
      
        <content type="html"><![CDATA[<h3 id="部署环境与准备"><a href="#部署环境与准备" class="headerlink" title="部署环境与准备"></a>部署环境与准备</h3><p>1.环境</p><p>本地 Windows10 操作系统</p><p>腾讯云 Cenots7.6 服务器</p><p>2.准备<br>Hexo 本地博客</p><p>Xshell 链接到你的服务器</p><h3 id="云服务器配置-Git"><a href="#云服务器配置-Git" class="headerlink" title="云服务器配置 Git"></a>云服务器配置 Git</h3><details class="folding-tag" ><summary> 配置步骤 </summary>              <div class='content'>              <p>1.安装依赖库</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel</span><br></pre></td></tr></table></figure><p>2.安装编译工具</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yum install gcc perl-ExtUtils-MakeMaker package</span><br></pre></td></tr></table></figure><p>3.查看 git 的版本<br>git version 4.删除 git</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yum remove git -y</span><br></pre></td></tr></table></figure><p>5.下载解压最新版</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> /usr/local/src <span class="comment">#下载的目录</span></span><br><span class="line">wget https://www.kernel.org/pub/software/scm/git/git-2.28.0.tar.gz <span class="comment">#下载最新版</span></span><br><span class="line">tar -zxvf git-2.28.0.tar.gz <span class="comment">#解压到当前文件夹</span></span><br></pre></td></tr></table></figure><p>6.编辑并安装</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> git-2.28.0    <span class="comment">#进入文件夹</span></span><br><span class="line">make prefix=/usr/local/git all    <span class="comment">#编译源码</span></span><br><span class="line">make prefix=/usr/local/git install    <span class="comment">#安装路径</span></span><br></pre></td></tr></table></figure><p>7.配置 git 的环境变量</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">echo</span> <span class="string">&#x27;export PATH=$PATH:/usr/local/git/bin&#x27;</span> &gt;&gt; /etc/bashrc</span><br></pre></td></tr></table></figure><p>8.刷新环境变量</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">source</span> /etc/bashrc</span><br></pre></td></tr></table></figure><p>9.查看版本号</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git --version</span><br></pre></td></tr></table></figure><p>10 创建 git 用户并且修改权限</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">adduser qiqi</span><br><span class="line">passwd qiqi</span><br><span class="line"><span class="built_in">chmod</span> 740 /etc/sudoers vim /etc/sudoers root</span><br><span class="line"></span><br><span class="line">在这里加入：</span><br><span class="line">root    ALL=(ALL)       ALL</span><br><span class="line">qiqi     ALL=(ALL)       ALL</span><br></pre></td></tr></table></figure><p>11.本地 windows10 使用 Gitbash 创建密钥</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa</span><br></pre></td></tr></table></figure><p>12.将本地创建 id_rsa.pub 中文件复制</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">su qiqi</span><br><span class="line"><span class="built_in">mkdir</span> ~/.ssh</span><br><span class="line">vim ~/.ssh/authorized_keys</span><br></pre></td></tr></table></figure><p>13.本地测试</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -v qiqi@服务器ip</span><br></pre></td></tr></table></figure><p>出现 Welcome to Alibaba Cloud Elastic Compute Service !则代表部署成功</p>              </div>            </details><h3 id="云服务器网站配置"><a href="#云服务器网站配置" class="headerlink" title="云服务器网站配置"></a>云服务器网站配置</h3><p>1.创建网站目录并且设置权限</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">su root</span><br><span class="line"><span class="built_in">mkdir</span> /home/hexo</span><br><span class="line"><span class="built_in">chown</span> qiqi:qiqi -R /home/hexo</span><br></pre></td></tr></table></figure><p>2.安装 Nginx</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">yum install -y nginx</span><br><span class="line">systemctl start nginx.service    <span class="comment">#启动服务</span></span><br></pre></td></tr></table></figure><p>3.修改 Nginx 配置文件</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">vim /etc/nginx/nginx.conf</span><br><span class="line"></span><br><span class="line"> 38     server &#123;</span><br><span class="line"> 39         listen       80 default_server;</span><br><span class="line"> 40         listen       [::]:80 default_server;</span><br><span class="line"> 41         server_name  47.110.157.196;        <span class="comment">#域名或ip地址</span></span><br><span class="line"> 42         root         /home/hexo;        <span class="comment">#网站目录</span></span><br></pre></td></tr></table></figure><p>4.重启服务器</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">systemctl restart nginx.service</span><br></pre></td></tr></table></figure><p>5.建立 git 仓库</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">su root</span><br><span class="line"><span class="built_in">cd</span> /home/qiqi</span><br><span class="line">git init --bare blog.git</span><br><span class="line"><span class="built_in">chown</span> qiqi:qiqi -R blog.git</span><br></pre></td></tr></table></figure><p>6.同步网站根目录</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">vim blog.git/hooks/post-receive</span><br><span class="line"></span><br><span class="line"><span class="comment">#添加以下内容</span></span><br><span class="line"><span class="comment">#!/bin/sh</span></span><br><span class="line">git --work-tree=/home/hexo --git-dir=/home/qiqi/blog.git checkout -f</span><br></pre></td></tr></table></figure><p>7.修改权限</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">chmod</span> +x /home/qiqi/blog.git/hooks/post-receive</span><br></pre></td></tr></table></figure><p>8.在 windows10 本地 hexo 目录修改_config.yml 文件</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">  <span class="attr">repository:</span> <span class="string">qiqi@47.110.157.196:/home/qiqi/blog.git</span> <span class="comment">#用户名@服务器Ip:git仓库位置</span></span><br><span class="line">  <span class="attr">branch:</span> <span class="string">master</span></span><br></pre></td></tr></table></figure><p>9.在本机 gitbash 部署</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g -d</span><br></pre></td></tr></table></figure><h3 id="常见报错"><a href="#常见报错" class="headerlink" title="常见报错"></a>常见报错</h3><ol><li>git-upload-pack: 未找到命令</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">bash: git-upload-pack: <span class="built_in">command</span> not found</span><br><span class="line">fatal: Could not <span class="built_in">read</span> from remote repository.</span><br></pre></td></tr></table></figure><p><code>解决方法</code></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo <span class="built_in">ln</span> -s  /usr/local/git/bin/git-upload-pack  /usr/bin/git-upload-pack</span><br></pre></td></tr></table></figure><p>2.git-receive-pack: 未找到命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">bash: git-receive-pack: <span class="built_in">command</span> not found</span><br><span class="line">fatal: Could not <span class="built_in">read</span> from remote repository.</span><br></pre></td></tr></table></figure><p><code>解决方法</code></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo <span class="built_in">ln</span> -s /usr/local/git/bin/git-receive-pack  /usr/bin/git-receive-pack</span><br></pre></td></tr></table></figure><p>3.无法远程连接获取</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fatal: Could not <span class="built_in">read</span> from remote repository.</span><br></pre></td></tr></table></figure><p><code>解决方法</code></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">重试或者 删掉本地ssh公钥重新上传至服务器</span><br></pre></td></tr></table></figure><p>4.key 出错</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Host key verification failed.</span><br></pre></td></tr></table></figure><p><code>解决方法</code></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -R 你要访问的IP地址</span><br></pre></td></tr></table></figure>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>使用 Github Pages 和 Hexo 搭建自己的独立博客</title>
      <link href="/posts/ddae.html"/>
      <url>/posts/ddae.html</url>
      
        <content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>首先感谢你能来访问我的 Blog，这是我搭建的第一个博客网站，使用的是 Github Pages + Hexo 的形式搭建，从小白一路走了过来也挺不容易的 hhh，前前后后几分钟就能搭建完成了叭，现在把它记录下来，将来也许会是一种怀念叭.</p><h2 id="入门"><a href="#入门" class="headerlink" title="入门"></a>入门</h2><blockquote><p>Github</p></blockquote><p>搭建一个这样的 Blog 首先你得知道什么是 Github 和 Github Pages，你可以理解为咱们没有服务器，咱们将页面托管到了 Github 上</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/0.png"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/1.png"></p><blockquote><p>Github Pages</p></blockquote><p>Github Pages 可以被认为是用户编写的、托管在 github 上的静态网页。使用 Github Pages 可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。</p><p>这是 Github Pages 的官网 <a href="https://pages.github.com/">Github Pages</a></p><blockquote><p>Hexo</p></blockquote><p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p><p>这是 Hexo 的官网 <a href="https://hexo.io/zh-cn/">Hexo</a></p><h2 id="node-js"><a href="#node-js" class="headerlink" title="node.js"></a>node.js</h2><details class="folding-tag" blue><summary> 安装 node.js </summary>              <div class='content'>              <p>进入 node.js 官网：<a href="https://nodejs.org/en/download/">Node.js 官网</a><br>按照自己的机器选择对应的版本下载，我是 windous 64 位</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/2.png"></p><p>然后差不多就是一直下一步 hhh~</p><p>具体可以参考<a href="https://www.cnblogs.com/pengpengdeyuan/p/14434559.html">Node.js 安装教程</a></p><p>如果遇到什么问题，一般百度都能解决，这里就不在赘述.</p>              </div>            </details><h2 id="Git"><a href="#Git" class="headerlink" title="Git"></a>Git</h2><details class="folding-tag" blue><summary> 安装 Git </summary>              <div class='content'>              <p>这是 Git 官网：<a href="https://git-scm.com/downloads">Git 官网</a></p><p>一般就是下载好自己对应的版本后一直下一步就好了</p><p>Git 的安装请参考：<a href="https://www.cnblogs.com/jytx/p/5602927.html">Git 安装教程</a></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/3.png"></p><p>具体的 git 学习可以访问：<a href="http://git.oschina.net/progit/">Pro Git 中文版</a></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/4.png"></p>              </div>            </details><h2 id="检验软件是否安装成功"><a href="#检验软件是否安装成功" class="headerlink" title="检验软件是否安装成功"></a>检验软件是否安装成功</h2><p>同时按下 Win 键和 R 键打开运行窗口,输入 <code>cmd</code> ，然后输入以下命令，有相应版本信息显示则安装成功，若不正确可以卸载软件重新安装。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git --version</span><br><span class="line">node -v</span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/5.png"></p><p>此外若安装成功，在桌面右键鼠标，可以看到菜单里多了 <code>Git GUI Here</code> 和 <code>Git Bash Here</code>两个选项，第一个是<code>图形界面的Git操作</code>，另一个<code>是命令行</code>，我们一般使用第二个</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/6.png"></p><h2 id="Hexo-安装"><a href="#Hexo-安装" class="headerlink" title="Hexo 安装"></a>Hexo 安装</h2><p>选择一个磁盘，新建一个文件夹，自己重命名文件夹（如：我的文件夹为：F\QiQi_Blog），博客相关文件将储存在此文件夹下，在该文件夹下右键鼠标，点击 Git Bash Here，输入以下 npm 命令即可安装,第一次可能需要久一点输入命令后等一等，再输入第二条命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-cli -g</span><br></pre></td></tr></table></figure><p>这个命令表示安装 hexo 的脚手架，如图所示即为安装成功</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/7.png"></p><h2 id="Hexo-初始化配置"><a href="#Hexo-初始化配置" class="headerlink" title="Hexo 初始化配置"></a>Hexo 初始化配置</h2><details class="folding-tag" blue><summary> 初始化配置 Hexo </summary>              <div class='content'>              <p>第一个命令，如图所示则安装成功如果失败了就再输入一次，<del>比如说我就错了</del> ，第二个命令表示安装 hexo 部署到 git page 的 deployer</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo init</span><br><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/8.png"></p><p>Hexo 安装完成后，将会在指定文件夹中新建所需要的文件，Hexo 文件夹下的目录如下：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/9.png"></p>              </div>            </details><h2 id="本地查看效果"><a href="#本地查看效果" class="headerlink" title="本地查看效果"></a>本地查看效果</h2><p>执行以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo generate</span><br><span class="line">hexo server</span><br></pre></td></tr></table></figure><p>执行完即可登录 <a href="http://localhost:4000/">http://localhost:4000/</a> 查看效果</p><p>显示以下信息说明操作成功：<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/10.png"></p><p>登录 <a href="http://localhost:4000/">http://localhost:4000/</a> 查看效果：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/11.png"></p><h2 id="将博客部署到-Github-Pages-上"><a href="#将博客部署到-Github-Pages-上" class="headerlink" title="将博客部署到 Github Pages 上"></a>将博客部署到 Github Pages 上</h2><p>到目前为止，我们的本地博客就成功搭建了，但是现在我们只能通过本地连接查看博客，我们要做的是让其他人也能够访问我们的博客，这就需要我们将博客部署到 Github Pages 上</p><details class="folding-tag" blue><summary> 部署前置步骤 </summary>              <div class='content'>              <p>一、注册 Github 账户：点击此处访问 <a href="https://github.com/">Github 官网</a>，点击 Sign Up 注册账户</p><p>二、创建项目代码库：点击 New repository 开始创建，步骤及注意事项见图：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/12.png"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/13.png"></p><p>三、配置 <code>SSH</code> 密钥：只有配置好 <code>SSH</code> 密钥后，我们才可以通过 git 操作实现本地代码库与 Github 代码库同步，在你第一次新建的文件夹里面（如：我的文件夹为：<code>F\QiQi_Blog</code>） <code>Git Bash Here</code> 输入以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C <span class="string">&quot;your email@example.com&quot;</span></span><br><span class="line">//引号里面填写你的邮箱地址，比如我的是2268025923@qq.com</span><br></pre></td></tr></table></figure><p>之后会出现：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Generating public/private rsa key pair.</span><br><span class="line">Enter file <span class="keyword">in</span> <span class="built_in">which</span> to save the key (/c/Users/you/.ssh/id_rsa):</span><br><span class="line">//到这里可以直接回车将密钥按默认文件进行存储</span><br></pre></td></tr></table></figure><p>然后会出现：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Enter passphrase (empty <span class="keyword">for</span> no passphrase):</span><br><span class="line">//这里是要你输入密码，其实不需要输什么密码，直接回车就行</span><br><span class="line">Enter same passphrase again:</span><br></pre></td></tr></table></figure><p>接下来屏幕会显示：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Your identification has been saved <span class="keyword">in</span> /c/Users/you/.ssh/id_rsa.</span><br><span class="line">Your public key has been saved <span class="keyword">in</span> /c/Users/you/.ssh/id_rsa.pub.</span><br><span class="line">The key fingerprint is:</span><br><span class="line">这里是各种字母数字组成的字符串，结尾是你的邮箱</span><br><span class="line">The key<span class="string">&#x27;s randomart image is:</span></span><br><span class="line"><span class="string">这里也是各种字母数字符号组成的字符串</span></span><br></pre></td></tr></table></figure><p>运行以下命令，将公钥的内容复制到系统粘贴板上</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">clip &lt; ~/.ssh/id_rsa.pub</span><br></pre></td></tr></table></figure><p>四、在 GitHub 账户中添加你的公钥</p><p>1.登陆 GitHub，进入 <code>Settings</code>：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/14.png"></p><p>2.点击 <code>SSH and GPG Keys</code>：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/15.png"></p><p>3.选择 New SSH key：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/16.png"></p><p>4.粘贴密钥：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/17.png"></p><p>五、测试</p><p>直接在桌面右键 点击 Git Bash Here，输入以下命令输入以下命令：注意：<a href="mailto:&#x67;&#x69;&#x74;&#x40;&#103;&#105;&#x74;&#104;&#x75;&#x62;&#x2e;&#x63;&#x6f;&#x6d;">&#x67;&#x69;&#x74;&#x40;&#103;&#105;&#x74;&#104;&#x75;&#x62;&#x2e;&#x63;&#x6f;&#x6d;</a>不要做任何更改！</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -T git@github.com</span><br></pre></td></tr></table></figure><p>之后会显示：</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/18.png"></p><p>输入 <code>yes</code> 后会显示：<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/19.png"></p><p>此时表示设置正确</p><p>六、配置 Git 个人信息</p><p>Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成你自己的，名字可以不是 GitHub 的昵称，但为了方便记忆，建议与 GitHub 一致</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name <span class="string">&quot;此处填你的用户名&quot;</span></span><br><span class="line">git config --global user.email <span class="string">&quot;此处填你的邮箱&quot;</span></span><br></pre></td></tr></table></figure><p>到此为止 SSH Key 配置成功，本机已成功连接到 Github</p>              </div>            </details><details class="folding-tag" blue><summary> 将本地的Hexo文件更新到Github的库中 </summary>              <div class='content'>              <p>一、登录 Github 打开自己的项目 yourname.github.io</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/20.png"></p><p>二、鼠标移到 Code 按钮，点击按钮复制，或者直接把 SSH 全部复制<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/21.png"></p><p>三、一键复制地址<br><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/22.png"></p><p>四、打开你创建的 Hexo 文件夹（如：F:\QiQi_Blog\Hexo），右键用记事本（或者 Notepad++、Vs Code 等）打开该文件夹下的 _config.yml 文件</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/23.png"></p><p>五、滑到最下面,按下图修改 _config.yml 文件并保存</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/24.png"></p><p>六、在 Hexo 文件夹下分别执行以下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure><p>或者直接执行</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g -d</span><br></pre></td></tr></table></figure><p>执行完之后会让你输入你的 Github 的账号和密码，如果此时报以下错误，说明你的 deployer 没有安装成功</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ERROR Deployer not found: git</span><br></pre></td></tr></table></figure><p>需要执行以下命令再安装一次：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><p>再执行</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g -d</span><br></pre></td></tr></table></figure><p>你的博客就会部署到 Github 上了</p><p>七、访问博客</p><p>你的博客地址：https:&#x2F;&#x2F;你的用户名.github.io， 比如我的是：<a href="https://waterchen520.github.io/">https://waterchen520.github.io</a> ，现在每个人都可以通过此链接访问你的博客了</p>              </div>            </details><h2 id="如何在博客上发表文章"><a href="#如何在博客上发表文章" class="headerlink" title="如何在博客上发表文章"></a>如何在博客上发表文章</h2><p>博客已经成功搭建了，但是我们该怎么写博客呢？</p><p>一、新建一个空文章，输入以下命令，会在项目 \Hexo\source_posts 中生成 文章标题.md 文件，文章标题根据需要命名</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo n &quot;文章标题&quot;</span><br></pre></td></tr></table></figure><p>也可以直接在 \Hexo\source_posts 目录下右键鼠标新建文本文档，改后缀为 .md 即可，这种方法比较方便</p><p>二、用编辑器编写文章</p><p>md 全称 Markdown， Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法，非常的简单实用，常用的标记符号屈指可数，几分钟即可学会， .md 文件可以使用支持 Markdown 语法的编辑器编辑，然后将写好的文章（.md 文件）保存到 \Hexo\source_posts 文件夹下即可当我们用编辑器写好文章后，可以使用以下命令将其推送到服务器上</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure><p>或者将两个命令合二为一输入以下命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo d -g</span><br></pre></td></tr></table></figure><p>现在访问你的博客就可以看见写好的文章啦！</p><h2 id="如何为博客更换自己喜欢的主题"><a href="#如何为博客更换自己喜欢的主题" class="headerlink" title="如何为博客更换自己喜欢的主题"></a>如何为博客更换自己喜欢的主题</h2><p>博客也搭建好了，文章也会写了，但是！！！默认的主题并不喜欢怎么办？现在，我们就来为自己的博客更换自己喜欢的主题</p><p>比如我的主题是<code>butterfly</code><br>里面也有一些安装教程, 可以自行学习<br>butterfly 主题官网: <a href="https://butterfly.js.org/">https://butterfly.js.org/</a></p><details class="folding-tag" blue><summary> 选择主题 </summary>              <div class='content'>              <p>进入 Hexo 官网的主题专栏，我们可以看见有许多的主题供我们选择: <a href="https://hexo.io/themes/">主题商店</a></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/25.png"></p><p>我们要做的就是把主题克隆过来，在此我们以主题 butterfly 为例，点进去我们就可以看见该主题作者的博客，鼠标滑到底，我们可以看见 主题 butterfly 的字样（其他主题类似），点击 butterfly ，页面就会跳转到该主题所有的相关文件在 Github 上的地址，复制该地址</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/26.png"></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/27.png"></p><p>再打开 Hexo 文件夹下的 themes 目录（如：E:\TRHX_Blog\Hexo\themes），右键 Git Bash Here，输入以下命令：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone 此处填写你刚才复制的主题地址</span><br></pre></td></tr></table></figure><p>比如要安装 butterfly 主题，则输入命令：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone git@github.com:jerryc127/hexo-theme-butterfly.git</span><br></pre></td></tr></table></figure><p>等待下载完成后即可在 themes 目录下生成 butterfly 文件夹，然后打开 Hexo 文件夹下的配置文件 _config.yml ，找到关键字 theme，修改参数为：theme：butterfly（其他主题修改成相应名称即可），再次注意冒号后面有一个空格！</p><p>返回 Hexo 目录，右键 Git Bash Here ，输入以下命令开始部署主题：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure><p>此时打开浏览器，访问 <a href="http://localhost:4000/">http://localhost:4000/</a> 就可看见我们的主题已经更换了，如果感觉效果满意，我们就可以把它部署到 Github 上了</p><p>打开 Hexo 文件夹，右键 Git Bash Here ，输入以下命令：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">//该命令的作用是清除缓存，若不输入此命令，服务器有可能更新不了主题</span><br><span class="line">hexo g -d</span><br></pre></td></tr></table></figure><p>此时访问自己的博客即可看见更换后的主题，但我们仍然需要对主题的相关配置进行修改，比如网站标题，图标等等，Hexo 中有两份主要的配置文件，名称都是 _config.yml ，它们均是用于站点配置使用的。其中，一份位于站点根目录下（比如我的：F:\QiQi_Blog\Hexo_config.yml），主要包含 Hexo 本身整站的配置；另一份位于主题目录下（比如我的：F:\Blog\Hexo\themes\butterfly_config.yml），这份配置由主题作者提供，主要用于配置主题相关的选项，一般 _config.yml 文件里都有相关注释，按需修改即可</p>              </div>            </details><h2 id="为你的-Hexo-博客配置个性域名"><a href="#为你的-Hexo-博客配置个性域名" class="headerlink" title="为你的 Hexo 博客配置个性域名"></a>为你的 Hexo 博客配置个性域名</h2><p>为了方便用户记住我们的博客站点的话，我们可以配置域名</p><details class="folding-tag" blue><summary> 配置域名 </summary>              <div class='content'>              <p>首先我们要购买域名，<a href="https://www.aliyun.com/">阿里云</a>，<a href="https://cloud.tencent.com/">腾讯云</a>都可以，也不贵，一年几十</p><p>块钱，最便宜几块钱也能买到，以阿里云为例，我购买的域名是 anheyu.com，购买过程就不赘述了，选择阿里云的解析平台，来到阿里云的</p><p><code>域名控制台</code>，点击进入域名解析列表或者直接点击域名后面的解析</p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/28.png"></p><p><code>方法一：点击添加记录，需要添加两个记录，两个记录类型都是 CNAME ，第一个主机记录为 @ ，第二个主机记录为 www ，记录值都是填你自己的博客地址（比如我的是：[](waterchen520.github.io)），保存之后域名解析就完成了！</code></p><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/29.png"></p><p>方法二：两个记录类型为 A ，第一个主机记录为 @ ，第二个主机记录为 www，记录值都为博客的 IP 地址，IP 地址可以 cmd 中输入 ping 你的博客地址 获得（比如我的：ping waterchen520.github.io），保存之后域名解析就完成了！</p><p>为了使 GitHub 接收我们的域名，还需要在博客的根目录下添加一个名为 <strong>CNAME</strong> 的文件（<strong>注意不要加.txt，没有任何后缀名</strong>！），这个文件放到 <strong>Hexo</strong> 文件夹的 <strong>source</strong> 里面，（比如我的是：<strong>F:\QiQi_Blog\Hexo\source</strong>），文件里面填写你的域名（<strong>加不加 www 都行</strong>），比如要填写我的域名，文件里面就写：<a href="http://www.anheyu.com/">www.anheyu.com</a> 或者 anheyu.com，经过以上操作，别人就可以通过 <a href="http://www.anheyu.com/">www.anheyu.com</a> 、anheyu.com 、waterchen520.github.io 三个当中任意一个访问我的博客了！你的也一样！</p><p>有关加不加 www 的问题有以下区别：</p><ul><li><p>如果你填写的是没有 www 的，比如 anheyu.com，那么无论是访问 <a href="https://www.anheyu.com/">https://www.anheyu.com</a> 还是 <a href="https://anheyu.com/">https://anheyu.com</a> ，都会自动跳转到 <a href="https://anheyu.com/">https://anheyu.com</a></p></li><li><p>如果你填写的是带 www 的，比如 <a href="http://www.anheyu.com/">www.anheyu.com</a> ，那么无论是访问 <a href="https://www.anheyu.com/">https://www.anheyu.com</a> 还是 <a href="https://anheyu.com/">https://anheyu.com</a> ，都会自动跳转到 <a href="http://www.anheyu.com/">http://www.anheyu.com</a></p></li></ul><p><img src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/blog-construct/30.png"></p>              </div>            </details><p>教程就到这里啦，晚安</p><p>​</p>]]></content>
      
      
      
        <tags>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>阳光不燥，微风正好</title>
      <link href="/posts/b8cf1317.html"/>
      <url>/posts/b8cf1317.html</url>
      
        <content type="html"><![CDATA[<div class="note blue anzhiyu-icon-bullhorn flat"><p>在不知不觉中，我加入了程序猿这一行，说来也怪怪的，随着高考终止铃响的那一刻，我知道我该决定自己的人生了.</p></div><h2 id="兼职"><a href="#兼职" class="headerlink" title="兼职"></a>兼职</h2><div class="note red anzhiyu-icon-fan flat"><p>人嘛，总是缺少社会的毒打，我也不例外，高考结束后去做了兼职，卖过冰棒，发过传单，也在人家大门口大哭过，想明白后还是得继续站起来坐上最后一班公交回家</p></div><h2 id="迷茫"><a href="#迷茫" class="headerlink" title="迷茫"></a>迷茫</h2><div class="note orange anzhiyu-icon-plant-fill flat"><p>填志愿的时候，只想着什么最赚钱，什么前景好，耳边招生老师的话反复在回响，然后填下了软件技术这个专业，只填了一所学校，一个专业，分不够的话，就不够算了吧，想着，大不了出去打工</p></div><h2 id="懵懂"><a href="#懵懂" class="headerlink" title="懵懂"></a>懵懂</h2><div class="note purple anzhiyu-icon-fw-fire flat"><p>得知自己被录取后，在老爸的支持下买了人生第一台笔记本，换下了新手机，买下电脑的那天晚上，一个小小的种子在我心中发芽，爸妈不知在何时已有了白发，我得为父母做点什么，于是开始在网上学习 C 语言，没有任何学习方法 QWQ，就傻傻的看，想想那时候的我还挺呆的</p></div>]]></content>
      
      
      <categories>
          
          <category> 生活日常 </category>
          
      </categories>
      
      
        <tags>
            
            <tag> 生活 </tag>
            
        </tags>
      
    </entry>
    
    
  
  
</search>
