<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>realwds&#39;s blog</title>
  
  <subtitle>数学系的挨踢者</subtitle>
  <link href="https://realwds.com/atom.xml" rel="self"/>
  
  <link href="https://realwds.com/"/>
  <updated>2024-07-20T06:49:13.127Z</updated>
  <id>https://realwds.com/</id>
  
  <author>
    <name>Alejandro</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Excel 解一元一次方程</title>
    <link href="https://realwds.com/posts/7431b662.html"/>
    <id>https://realwds.com/posts/7431b662.html</id>
    <published>2021-07-03T03:40:00.000Z</published>
    <updated>2024-07-20T06:49:13.127Z</updated>
    
    <content type="html"><![CDATA[<p>今天 <code>leader</code> 扔了一个公式让我们解方程，如下，求 x 的值：</p><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/JTVDZnJhYyU.ozacxfgphu8.png"></p><ol><li><p>该方程变量为 <code>x</code>, 存放于单元格 <code>A1</code>，<code>A1</code> 即为可变单元格，此时为空。</p></li><li><p><code>A2</code> 单元格设为目标单元格，目标值为 <code>75000</code>，在 <code>A2</code> 单元格输入以下公式:<br><code>=5/(0.001*(1-A1))+5/(0.001*(1-2*A1))+5/(0.001*(1-3*A1))+5/(0.001*(1-4*A1))+5/(0.001*(1-5*A1))+5/(0.001*(1-6*A1))+5/(0.001*(1-7*A1))</code> (注意：<code>*</code>表示乘，公式中不能漏掉乘号<code>*</code> ，也不能漏掉等号<code>=</code>)， 按回车键，这时 <code>A2</code> 中值为 <code>35000</code>。</p></li><li><p>单击“数据”选项卡，单击“数据工具”组中的“假设分析”按钮，在下拉菜单中单击“单变量求解”，弹出“单变量求解”对话框，删除“目标单元格”文本框中文字，输入 <code>A2</code>,在“目标值”文本框中输入 <code>75000</code>。单击“可变单元格”文本框，单击 <code>A1</code> 单元格，在“可变单元格”文本框中即出现了 <code>$A$1</code> ,单击“确定”，在弹出的“单变量求解状态”对话框中单击“确定”。</p></li><li><p><code>A1</code> 单元格出现的数值即为方程的解。 （此方程的解为 <code>0.10914584675042</code>）</p></li></ol>]]></content>
    
    
    <summary type="html">Excel 解一元一次方程</summary>
    
    
    
    <category term="跨界学习" scheme="https://realwds.com/categories/%E8%B7%A8%E7%95%8C%E5%AD%A6%E4%B9%A0/"/>
    
    
    <category term="Excel" scheme="https://realwds.com/tags/Excel/"/>
    
  </entry>
  
  <entry>
    <title>阿里职位评级、薪酬体系及学习路线</title>
    <link href="https://realwds.com/posts/707b4d76.html"/>
    <id>https://realwds.com/posts/707b4d76.html</id>
    <published>2021-06-29T03:40:00.000Z</published>
    <updated>2024-07-20T06:49:13.130Z</updated>
    
    <content type="html"><![CDATA[<h2 id="职位评级"><a href="#职位评级" class="headerlink" title="职位评级"></a>职位评级</h2><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/p0.4t0r0klk4a00.jpg"></p><h2 id="P5-等级"><a href="#P5-等级" class="headerlink" title="P5 等级"></a>P5 等级</h2><p>薪酬：<code>年薪 20w ~ 40w</code><br>要求：<code>独立执行既定任务</code></p><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/8c52160d7c15e90c6cb9e917bb4540da.2sq8xuuq3na0.png"></p><h2 id="P6-等级"><a href="#P6-等级" class="headerlink" title="P6 等级"></a>P6 等级</h2><p>薪酬：<code>年薪 40w ~ 60w</code><br>要求：<code>独挡一面，在专业领域具备辅导他人的能力</code><br>关键词：<code>独挡一面</code>,<code>辅导他人</code>,<code>持续学习</code></p><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/901c781b7f398bf896a8bbf181ecc9aa.1w5u5bzueesg.png"><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/f5520b58d676abf6d0d8f4c58d956207.5h53rfapt9w0.png"></p><h2 id="P7-等级"><a href="#P7-等级" class="headerlink" title="P7 等级"></a>P7 等级</h2><p>薪酬：<code>年薪 50w ~ 70w</code>,<code>股票 800 ~ 1200 股</code><br>要求：<code>某一领域专家，知其然知其所以然，对专业领域有影响力，可领导跨部门项目</code><br>关键词：<code>领域专家</code>,<code>一杆到底</code>,<code>系统性思考</code></p><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/d75a213ac6b063fafd0b362c2d1b8ab4.5fmnjgda6lw0.png"></p><h2 id="P8-等级"><a href="#P8-等级" class="headerlink" title="P8 等级"></a>P8 等级</h2><p>薪酬：<code>年薪 70w ~ 200w</code> ,<code>股票 2000 ~ 2200 股</code><br>要求：<code>在专业领域有一定前瞻性，推动业务创新，参与能够影响事业部层面的，能够做策略及统筹规划</code><br>关键词：<code>行业深度</code>,<code>全局意识</code>,<code>前瞻规划</code>,<code>推动创新</code></p><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/f8b6e1f8e84773ebd62ab74a5bed490b.4ygsisbv6940.png"></p>]]></content>
    
    
    <summary type="html">阿里职位评级、薪酬体系及学习路线</summary>
    
    
    
    <category term="跨界学习" scheme="https://realwds.com/categories/%E8%B7%A8%E7%95%8C%E5%AD%A6%E4%B9%A0/"/>
    
    
    <category term="阿里" scheme="https://realwds.com/tags/%E9%98%BF%E9%87%8C/"/>
    
  </entry>
  
  <entry>
    <title>什么是用户运营、产品运营、活动运营和内容运营</title>
    <link href="https://realwds.com/posts/f0f5e1c4.html"/>
    <id>https://realwds.com/posts/f0f5e1c4.html</id>
    <published>2021-06-22T02:40:00.000Z</published>
    <updated>2024-07-20T06:49:13.128Z</updated>
    
    <content type="html"><![CDATA[<div class="note blue no-icon flat"><p>什么是新媒体运营，一种比较常见的表述是：<code>新媒体运营指的是用户运营、产品运营、活动运营和内容运营四大模块的总称。</code> 在实际运营工作中，四大模块之间往往没有清晰的边界，各项工作会有交叉。</p></div><h2 id="发展历史"><a href="#发展历史" class="headerlink" title="发展历史"></a>发展历史</h2><p>在解释用户运营、产品运营、活动运营和内容运营之前，我们先了解下新媒体运营的发展历史。</p><p>新媒体运营是连接网民与互联网产品的桥梁，因此新媒体运营的发展，也是 <code>随着互联网产品的创新发展</code> 及 <code>网民的喜好</code> 而不断变化的。</p><p>新媒体运营发展的不同阶段虽然都涉及内容、用户、产品及活动，但每个阶段的侧重各有不同，如下图所示。</p><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/xin-mei-ti-fa-zhan-jie-duan.4ue2wujo5vs0.jpg"></p><h3 id="用户运营主导期（2000年以前）"><a href="#用户运营主导期（2000年以前）" class="headerlink" title="用户运营主导期（2000年以前）"></a>用户运营主导期（2000年以前）</h3><p>2000 年以前，我国互联网尚处于萌芽阶段，网民数量极少。此时互联网公司处于野蛮生长阶段，新创意层出不穷、新产品不断出现——哪家公司能够挖掘到用户需求、<code>抢</code> 到用户，哪家公司就能更快成长。</p><p>后来，成长为巨头的互联网公司，几乎全部得益于 2000 年以前围绕用户需求而抢占的当时互联网领域的 <code>第一批</code>。它们抢到 <code>第一批</code>的同时，也抢占了互联网的先机，如下表所示。</p><table><thead><tr><th align="center">用户需求</th><th align="center">产品</th><th align="center">公司简称</th><th align="center">推出时间</th></tr></thead><tbody><tr><td align="center">看新闻</td><td align="center">新浪网</td><td align="center">新浪</td><td align="center">1998年</td></tr><tr><td align="center">发邮件</td><td align="center">网易邮箱</td><td align="center">网易</td><td align="center">1998年</td></tr><tr><td align="center">卖产品</td><td align="center">阿里巴巴网站</td><td align="center">阿里巴巴</td><td align="center">1999年</td></tr><tr><td align="center">聊天</td><td align="center">QQ</td><td align="center">腾讯</td><td align="center">1999年</td></tr><tr><td align="center">搜索</td><td align="center">百度搜索</td><td align="center">百度</td><td align="center">2000年</td></tr></tbody></table><p>在用户运营主导期，不少公司的程序员常充当运营的角色，随时与用户沟通产品体验并调整产品。</p><p>在 2015 年香港大学举办的以创新创业为主题的论坛上，腾讯董事局主席马化腾曾笑谈：<code>最开始有用户，没人聊天，我自己要陪聊……有时候还要换个头像，假扮女孩子，尽力使社区显得很热闹。</code></p><h3 id="产品运营主导期（2000-2005-年）"><a href="#产品运营主导期（2000-2005-年）" class="headerlink" title="产品运营主导期（2000 - 2005 年）"></a>产品运营主导期（2000 - 2005 年）</h3><p>2000—2005 年，互联网进入发展期。此阶段很少出现像 QQ、百度一类的具有划时代意义的产品，各大互联网公司的重点都是在原有产品基础上 <code>修炼内功</code>，进行产品优化与延展。</p><p>例如，阿里巴巴在外贸网站的基础上推出了阿里旺旺、支付宝等产品模块；腾讯在 QQ 的基础上推出了 QQ 秀、QQ 游戏、QQ 空间等产品模块；百度在文字搜索的基础上增加了 MP3 搜索、图片搜索、百度贴吧等产品模块。</p><p>在产品运营主导期，新媒体运营的重点工作都是 <code>围绕产品</code> 展开的，如 <code>新产品研发</code>、<code>需求反馈</code>、<code>产品优化</code>等。</p><h3 id="活动运营主导期（2005-2012-年）"><a href="#活动运营主导期（2005-2012-年）" class="headerlink" title="活动运营主导期（2005 - 2012 年）"></a>活动运营主导期（2005 - 2012 年）</h3><p>2005 年起，国内互联网公司 <code>同质化竞争</code> 开始激烈化。</p><p>在分类信息领域，2005年3月赶集网上线，2005 年 12 月 58 同城成立；在票务预订领域，2005 年 5 月去哪儿网上线，2006 年10 月途牛旅行网创办；在团购网站领域，美团网、拉手网、窝窝团同时于2010 年 3 月诞生。</p><p>大量同领域竞争的网站功能类似、界面相仿，因此，很多网站必须尝试通过形式多样的活动进行品牌推广及用户激活，与竞争对手拉开距离。</p><p>以团购网站领域为例，2011 年 8 月，国内团购网站数量达到最高峰的 5058 家，为了更快地从 <code>千团大战</code> 中胜出，各家团购网站的运营团队分别进行不同形式、不同创意的线上线下活动。</p><p>在活动运营主导期，新媒体运营的重点工作就是 <code>设计创意活动、确保活动执行、监督活动效果，通过活动获取用户并激活网站流量</code>。</p><h3 id="内容运营主导期（2012-2018-年）"><a href="#内容运营主导期（2012-2018-年）" class="headerlink" title="内容运营主导期（2012 - 2018 年）"></a>内容运营主导期（2012 - 2018 年）</h3><p>2010 年 6 月，苹果公司发布了被称为 <code>自第一代 iPhone 以来最大飞跃</code> 的 iPhone4。随后两年内，越来越多的智能手机品牌进入网民的视野。随着智能手机的逐步普及，网民开始进入移动互联网时代，看今日头条和用微信聊天成为网民日常必做的事情。</p><p>由于网民浏览手机的时间有限，<code>抓住用户注意力、吸引用户持续停留</code>成为新媒体运营者的头等大事。因此，内容运营成为这一阶段新媒体运营的重点工作。</p><p>为了在纷繁复杂的文章、图片、视频中脱颖而出，新媒体运营者需要花时间 <code>分析用户喜好、撰写吸引眼球的标题、设计走心的内容、辅之以精心设计的图片或 H5</code>，以达到更好的运营效果。</p><h2 id="四大经典模块"><a href="#四大经典模块" class="headerlink" title="四大经典模块"></a>四大经典模块</h2><p>了解了新媒体运营的发展历史，下面进入正题，详细解释下什么是用户运营、产品运营、活动运营和内容运营。</p><p>对于从事新媒体运营工作，必须关注三大问题：</p><p>第一，本企业的新媒体运营都有哪些模块？<br>第二，自己属于企业新媒体运营中的哪个模块？<br>第三，这个模块需要哪些能力？</p><p>这三大问题都围绕 <code>模块</code>。新媒体运营共包括 <code>四大经典模块</code> 及 <code>五类衍生模块</code>。</p><p>四大经典模块就是上面提到的<strong>用户运营</strong>、<strong>产品运营</strong>、<strong>活动运营</strong>和<strong>内容运营</strong>，每个模块在新媒体运营过程中发挥着不同的作用，如下表所示。</p><table><thead><tr><th align="center">模块</th><th align="center">作用</th><th align="center">关键点</th></tr></thead><tbody><tr><td align="center">用户运营</td><td align="center">核心</td><td align="center">用户画像</td></tr><tr><td align="center">产品运营</td><td align="center">根基</td><td align="center">类型分析、周期判断</td></tr><tr><td align="center">内容运营</td><td align="center">纽带</td><td align="center">传播模式设计</td></tr><tr><td align="center">活动运营</td><td align="center">手段</td><td align="center">跨界、整合</td></tr></tbody></table><h3 id="用户运营——新媒体运营的核心"><a href="#用户运营——新媒体运营的核心" class="headerlink" title="用户运营——新媒体运营的核心"></a>用户运营——新媒体运营的核心</h3><p>无论是研发产品、策划活动，还是推送内容，都需要围绕用户有针对性地展开。因此，新媒体运营者需要进行用户日常管理，吸引新用户关注、减少老用户流失，同时想方设法激活沉寂用户。</p><p>在用户运营工作中，用户画像是工作的起点。只有进行过清晰的用户画像，后续的用户分类、拉新、促活与留存等工作才有意义。否则，用户运营的效果会大打折扣，甚至会出现南辕北辙、越努力越无效的结果。</p><h3 id="产品运营——新媒体运营的根基"><a href="#产品运营——新媒体运营的根基" class="headerlink" title="产品运营——新媒体运营的根基"></a>产品运营——新媒体运营的根基</h3><p>狭义的产品运营指的是企业的互联网产品运营，包括企业手机软件设计与开发、企业网站运营与调试等。</p><p>广义的产品运营可以把新媒体运营过程中涉及的账号、平台、活动等项目都看作产品，进行策划、运营与调试。</p><p>例如，一个今日头条账号，其实也可以看作一件产品。在开通后，需要进行产品调研（搜索相关今日头条账号，了解其日常内容）、前期设计（头像设计、简介设计、选题设计）、上线调试（撰写文章并测试阅读数据）、正式发布（度过新手期后正式撰写）等产品运营工作。</p><p>产品运营的关键点是类型分析与周期判断。一方面，产品运营负责人需要准确识别产品的类型，针对不同的产品采用差异化的运营模式；另一方面，产品运营负责人 必须清晰地判断出产品的生命周期，根据生命周期及时调整运营策略。</p><h3 id="内容运营——新媒体运营的纽带"><a href="#内容运营——新媒体运营的纽带" class="headerlink" title="内容运营——新媒体运营的纽带"></a>内容运营——新媒体运营的纽带</h3><p>内容用于连接产品与用户，运营者需要重点关注内容的定位、设计与传播，找到差异化的内容定位、创作走心的内容形式、辅之以较好的内容传播，从而触达更多用户。</p><p>新媒体内容并不是简单的写一篇文章、录一段视频、做一张图片，而是要让更多的用户打开、完整浏览并转发到朋友圈或转发给好友。因此，新媒体内容运营的关键点是设计传播模式，力争获得更多的传播。</p><h3 id="活动运营——新媒体运营的手段"><a href="#活动运营——新媒体运营的手段" class="headerlink" title="活动运营——新媒体运营的手段"></a>活动运营——新媒体运营的手段</h3><p>在规模较小的新媒体团队中，一般不会设置专门的活动部门、活动组等，因为活动是其他三大模块都会涉及的重要组成部分。</p><p>新媒体活动运营需要关注策划与执行。新媒体活动在开展前需要进行详细策划，明确活动目的并确定活动形式、内容、时间计划等；活动完成后，需要活动负责人进行任务跟进与活动复盘。</p><p>活动运营的效果体现在活动参与度上，但是持续提升用户参与度却又相当困难。一方面，现阶段网民的可选择性变大，通常不会对同一家公司、同一个账号或同一类活动保持浓厚兴趣；另一方面，活动运营团队很容易在策划几次活动后进入思路枯竭、创意失效的状态——没有新的灵感，自然无法激发用户的参与。</p><p>因此，活动运营的关键点是跨界与整合——与其他行业的公司举办联合活动，同时整合各方面传播资源，以确保活动效果。</p><h3 id="四大经典模块总结"><a href="#四大经典模块总结" class="headerlink" title="四大经典模块总结"></a>四大经典模块总结</h3><p>实际上，这四大模块几乎都有互相重合的部分，并没有严格的边界。例如，活动运营和用户运营两个模块都需要进行用户画像、监测用户数据；又如，内容运营和产品运营两个模块都需要设计产品图片、撰写产品文案。<br>因此，我们无法粗略地将大量运营细节工作归纳到四大运营模块中的一种。</p><h2 id="五类衍生模块"><a href="#五类衍生模块" class="headerlink" title="五类衍生模块"></a>五类衍生模块</h2><p>前面提到，新媒体运营共包括 <code>四大经典模块</code> 及 <code>五类衍生模块</code>。</p><p>在企业新媒体运营的实际应用中，四大经典模块会进行重新组合，衍生出五类模块，包括<strong>社群运营</strong>、<strong>网站运营</strong>、<strong>流量运营</strong>、<strong>平台运营</strong>及<strong>店铺运营</strong>。</p><p>由于这五类衍生模块是基于四大经典模块衍生而成的，因此可以尝试将经典模块的思维方式与执行技巧迁移到衍生模块中，如下表所示。</p><table><thead><tr><th align="center">衍生模块\运营知识</th><th align="center">用户运营知识</th><th align="center">产品运营知识</th><th align="center">内容运营知识</th><th align="center">活动运营知识</th></tr></thead><tbody><tr><td align="center">社群运营</td><td align="center">√</td><td align="center"></td><td align="center"></td><td align="center">√</td></tr><tr><td align="center">网站运营</td><td align="center">√</td><td align="center">√</td><td align="center">√</td><td align="center"></td></tr><tr><td align="center">流量运营</td><td align="center"></td><td align="center"></td><td align="center">√</td><td align="center">√</td></tr><tr><td align="center">平台运营</td><td align="center"></td><td align="center"></td><td align="center">√</td><td align="center"></td></tr><tr><td align="center">店铺运营</td><td align="center">√</td><td align="center">√</td><td align="center">√</td><td align="center">√</td></tr></tbody></table><h3 id="社群运营"><a href="#社群运营" class="headerlink" title="社群运营"></a>社群运营</h3><p>在企业新媒体运营过程中，部分企业会将用户运营的重心从微信公众号、微博等内容平台转移至 QQ 群、微信群等社群平台，因此对用户的运营与管理便随之迁移至聊天群管理。</p><h3 id="网站运营"><a href="#网站运营" class="headerlink" title="网站运营"></a>网站运营</h3><p>网站运营由<strong>用户运营</strong>、<strong>产品运营</strong>、<strong>内容运营</strong>三大模块衍生而成。</p><p>第一，网站作为企业的互联网产品之一，需要按照产品管理的流程进行开发、调试、上线测试、改版等。<br>第二，网站新闻、产品信息等内容，需要进行日常更新。<br>第三，网站的注册用户需要进行分类管理，网站的日常浏览用户也需要进行点击跟踪，从而充分挖掘用户需求。</p><h3 id="流量运营"><a href="#流量运营" class="headerlink" title="流量运营"></a>流量运营</h3><p>流量运营也称为推广运营。为了提升企业微信公众号文章的阅读量、企业微博的粉丝量及曝光量、企业网站的访问量，部分新媒体运营团队需要进行专门的流量统计与管理。</p><p>一方面，运营者需要做好内容，因为推广需要通过优质内容承载；另一方面，运营者需要策划活动，阶段性地提升流量效果。</p><h3 id="平台运营"><a href="#平台运营" class="headerlink" title="平台运营"></a>平台运营</h3><p>由于内容运营的主要工作是微信公众号、今日头条等内容平台的日常运营，因此一部分企业将内容运营细化，把其中内容平台的注册、发布、推送等工作归类到平台运营中。</p><p>实际上，平台运营也可以看作将内容运营的一部分工作进行放大与细化。<br>如内容运营的工作之一是微信公众号编辑与推送，通常只操作微信公众号的素材管理、留言管理等内容相关功能；而在此基础上，平台运营需要继续围绕微信公众号进行细化管理，对自动回复、自定义菜单、消息管理、统计、设置等功能进行日常管理与维护。</p><h3 id="店铺运营"><a href="#店铺运营" class="headerlink" title="店铺运营"></a>店铺运营</h3><p>对天猫店、京东店、微店等互联网店铺的管理，需要综合用户运营、产品运营、内容运营、活动运营四大模块的运营能力。</p><p>第一，对店铺销售的产品，需要利用产品运营思维进行调试与优化。<br>第二，对购买店铺产品的消费者，需要借助用户运营的思路进行分类与管理。<br>第三，对店铺页面、店铺推广文案等，需利用内容运营的知识进行设计。<br>第四，店铺在元旦购物节、「双11」狂欢节等线上购物节日，可以借鉴活动运营的方式策划活动。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>在新媒体运营发展的不同阶段，虽然都涉及内容、用户、产品及活动，但每个阶段的侧重各有不同。</p><p>经典的新媒体运营分为<strong>用户运营</strong>、<strong>产品运营</strong>、<strong>内容运营</strong>、<strong>活动运营</strong>四大模块，每个模块在新媒体运营过程中发挥着不同的作用。</p><p>在企业新媒体运营的实际应用中，四大经典模块会进行重新组合，衍生出五类模块，包括<strong>社群模块</strong>、<strong>网站模块</strong>、<strong>流量模块</strong>、<strong>平台模块</strong>及<strong>店铺模块</strong>。</p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://www.wenyuanblog.com/blogs/content-operation-activity-operation-product-operation-user-operation.html">《什么是用户运营、产品运营、活动运营和内容运营》 - 文渊博客</a></p>]]></content>
    
    
    <summary type="html">什么是用户运营、产品运营、活动运营和内容运营</summary>
    
    
    
    <category term="跨界学习" scheme="https://realwds.com/categories/%E8%B7%A8%E7%95%8C%E5%AD%A6%E4%B9%A0/"/>
    
    
    <category term="运营" scheme="https://realwds.com/tags/%E8%BF%90%E8%90%A5/"/>
    
  </entry>
  
  <entry>
    <title>新媒体运营岗位的 18 个入门专业术语</title>
    <link href="https://realwds.com/posts/eda9d087.html"/>
    <id>https://realwds.com/posts/eda9d087.html</id>
    <published>2021-06-22T02:05:00.000Z</published>
    <updated>2024-07-20T06:49:13.129Z</updated>
    
    <content type="html"><![CDATA[<p>每个行业都有一些专业术语，同样新媒体运营必须对其专业术语如数家珍，以便提高运营团队的内部沟通效率，如 <code>活动转化率为15%</code>。没必要再用 <code>本次活动的购买人数除以参与人数，比例是 15%</code> 来解释。</p><p>下面从 <code>策划</code>、<code>执行</code>、<code>反馈</code> 三大类切入，列举一些新媒体入门必备的关键词，而具有一定经验后，需要熟悉的关键词远远不止这些。</p><table><thead><tr><th align="center">类别</th><th align="center">定义</th></tr></thead><tbody><tr><td align="center"><strong>策划类</strong></td><td align="center">用户画像、产品矩阵、运营策划</td></tr><tr><td align="center"><strong>执行类</strong></td><td align="center">KOL、账号矩阵、文案、软文、工具</td></tr><tr><td align="center"><strong>反馈类</strong></td><td align="center">粉丝数、曝光量、阅读量、访问量、跳出率、活跃用户数、转化率、好评率、销售额、ARPU</td></tr></tbody></table><h2 id="1-用户画像"><a href="#1-用户画像" class="headerlink" title="1. 用户画像"></a>1. 用户画像</h2><p>用户画像的过程就是一个 <code>贴标签</code> 的过程。通过用户 <code>年龄</code>、<code>性别</code>、<code>消费习惯</code>、<code>生活习惯</code>、<code>浏览习惯</code> 等多重信息，新媒体运营者 <code>把用户抽象成标签化的模型</code>，以便进行更有针对性的新媒体推广或用户管理。</p><h2 id="2-产品矩阵"><a href="#2-产品矩阵" class="headerlink" title="2. 产品矩阵"></a>2. 产品矩阵</h2><p>产品矩阵即针对 <code>不同用户或同一用户不同需求</code> 而设计的系列化产品。例如，大众点评网为一般消费者、团购消费者者、后台商家分别开发了三个版本的软件产品，以满足其差异化需求。</p><h2 id="3-运营策划"><a href="#3-运营策划" class="headerlink" title="3. 运营策划"></a>3. 运营策划</h2><p>在开展具体的 <code>执行工作前</code>，运营者必须先进行运营策划，如分析目的、确定方式、讨论创意等。如果前期策划出现错误，看起来执行同样的工作，效果却会大打折扣。</p><h2 id="4-KOL"><a href="#4-KOL" class="headerlink" title="4. KOL"></a>4. KOL</h2><p>关键意见领袖（Key Opinion Leader，KOL）指的是在<code>行业内有话语权</code>的人，如微博 <code>大V</code>、论坛红人等。KOL 通常有一定 <code>专业度</code>，其观点更容易让粉丝信服。运营者可以尝试与 KOL 合作，借助其影响力为企业品牌助力。</p><h2 id="5-账号矩阵"><a href="#5-账号矩阵" class="headerlink" title="5.  账号矩阵"></a>5.  账号矩阵</h2><p>新媒体账号矩阵指的是企业高管、企业员工、企业产品等 <code>不同模块在互联网的账号组合</code>。好的账号矩阵可以借助团队的力量集中放大运营效果。</p><p>例如，小米公司为了提升新媒体整体声量，设计出了独特的微博账号矩阵，如下表所示：</p><table><thead><tr><th align="center">创始人</th><th align="center">微产品</th><th align="center">微客服</th><th align="center">微社群</th></tr></thead><tbody><tr><td align="center">@雷军</td><td align="center">@小米手机</td><td align="center">@小米客服那些事</td><td align="center">@小米粉丝后援会</td></tr><tr><td align="center">@黎万强</td><td align="center">@小米盒子</td><td align="center">@小米_杨宝庆</td><td align="center">@小米家居粉丝团</td></tr><tr><td align="center">@林斌</td><td align="center">@小米手机</td><td align="center">@胡英帅-小米</td><td align="center">@北京小米之家</td></tr><tr><td align="center">@刘德</td><td align="center">@小米电视</td><td align="center">@小米么鸿鸿</td><td align="center">@上海小米之家</td></tr><tr><td align="center">......</td><td align="center">......</td><td align="center">......</td><td align="center">......</td></tr></tbody></table><p>通过集团作战的微博矩阵，小米手机能更快速地开展新品推广、客诉回复、建议收集等运营细节工作。</p><h2 id="6-文案"><a href="#6-文案" class="headerlink" title="6. 文案"></a>6. 文案</h2><p>文案最早专指广告文案，包括广告标题、正文、口号。在新媒体运营中，文案既有 <code>长文案</code>（微信公众号文章、今日头条文章等），又有 <code>短文案</code>（微信朋友圈文案、微博文案），还有 <code>多媒体文案</code>（海报文案、视频文案、音频逐字稿）等。</p><h2 id="7-软文"><a href="#7-软文" class="headerlink" title="7. 软文"></a>7. 软文</h2><p>软文是由企业的市场策划人员或广告公司的文案人员来负责撰写的 <code>文字广告</code>。与硬性广告相比，软文的精妙之处在于一个 <code>软</code> 字，它将要宣传的信息嵌入文章内容中，影响用户于无形。</p><p>好的软文具有双向特点：既能让用户在文章里找到自己所需的信息，为用户提供价值；又能推广企业的宣传内容，影响用户决策。</p><p>例如，2017年8月，乐纯酸奶于公众号 <code>掌上北京</code> 进行软文投放，用酸奶评测的形式展示产品特色，并在文末通过 <code>扫码领取优惠券</code> 的方式增强转化效果，使读者饶有兴致地读完文章并参与乐纯活动。</p><h2 id="8-工具"><a href="#8-工具" class="headerlink" title="8. 工具"></a>8. 工具</h2><p>熟练使用工具，有助于提高运营者的工作效率。</p><p>例如，在设计海报时，可以尝试在 <code>创客贴</code> 网站快速生成；在微信文章排版时，可以在 <code>i排版</code> 快捷操作；在监控账号后台数据时，可以利用 <code>西瓜助手</code> 实时监控；在进行网络调研时，可以借助 <code>问卷网</code> 一键生成表单。</p><h2 id="9-粉丝数"><a href="#9-粉丝数" class="headerlink" title="9. 粉丝数"></a>9. 粉丝数</h2><p>粉丝数的多少是账号运营优劣的考量标准之一。运营者需要定期统计粉丝情况，包括粉丝总数、新关注人数、取消关注人数、净增关注人数等。特别是在进行专门的拉新活动或渠道推广后，运营者需要统计新增粉丝数，以评估推广质量。</p><p>例如，某账号在2017年11月19日至22日进行微信公众号渠道推广，通过后台用户分析功能可以计算出四天内获取粉丝数量为1500名，有一定的推广效果。</p><h2 id="10-曝光量"><a href="#10-曝光量" class="headerlink" title="10. 曝光量"></a>10. 曝光量</h2><p>曝光量是 <code>产品或品牌的互联网知名度</code> 考量标准之一。运营者需要熟悉的曝光量数据包括微信文章阅读量、单条微博阅读量、微博话题阅读量等。</p><h2 id="11-阅读量"><a href="#11-阅读量" class="headerlink" title="11. 阅读量"></a>11. 阅读量</h2><p>阅读量是 <code>文章质量</code> 的考量标准之一。在文章推送12小时、24小时、48小时等时间节点，运营者需要记录文章的阅读量，判断文章的整体质量。</p><h2 id="12-访问量"><a href="#12-访问量" class="headerlink" title="12. 访问量"></a>12. 访问量</h2><p>访问量指的是 <code>一定时间内页面被访问</code> 的次数，是PC网站或移动网站的考量标准之一。为了提升访问量，运营者需要通过朋友圈、微信群、微信公众号等多渠道综合推广。</p><h2 id="13-跳出率"><a href="#13-跳出率" class="headerlink" title="13. 跳出率"></a>13. 跳出率</h2><p>跳出率指的是 <code>仅浏览了一个页面就离开网站</code> 的访问（会话）次数占总访问次数的比率。跳出率越高代表网页对用户的吸引程度越低。</p><p>为了提升网站的营销效果，运营者需要想方设法制作精美的页面并吸引用户驻足；同时需要提升推广精准程度，避免不相关用户进行 <code>打开网页后马上关掉</code> 的操作，无形之中拉高了跳出率。</p><h2 id="14-活跃用户数"><a href="#14-活跃用户数" class="headerlink" title="14. 活跃用户数"></a>14. 活跃用户数</h2><p>活跃用户数是 <code>相对流失用户数</code> 的概念，指的是经常使用企业软件、浏览企业网站或打开企业公众号的用户数量。</p><p>用户在下载某软件或关注某公众号一段时间后，很可能逐渐降低活跃度。因此，运营者需要尝试通过撰写更有趣的文章、策划更有创意的活动、设计更有吸引力的用户体系等方法，持续提升活跃用户数。</p><h2 id="15-转化率"><a href="#15-转化率" class="headerlink" title="15. 转化率"></a>15. 转化率</h2><p>转化率在线下指的是 <code>消费人数与到店人数的比例</code>；在新媒体运营中，转化率不仅包含消费人数，也包括完成指定动作的人数，如关注微信公众号、参加指定活动、下载某款软件的人数。</p><p>例如，某游戏公司在进行活动运营时，通过线下地推吸引了 <code>5000</code> 人扫码，其中有 <code>100</code> 人在扫码后下载了游戏，此时通过下载人数（100）除以扫码人数（5000），可以计算出线下地推转化率为 <code>2%</code>。</p><h2 id="16-好评率"><a href="#16-好评率" class="headerlink" title="16. 好评率"></a>16. 好评率</h2><p>好评率是 <code>产品或品牌的互联网美誉度</code> 考量标准之一。运营者必须关注的好评率包括大众点评星级、店铺评论区好评率、百度知道差评比例、垂直类网站口碑等。</p><p>其中，垂直类网站指的是猫眼、豆瓣等专门针对某行业或某作品的点评网站。例如，某部电影于 2019 年 02 月 14 日上映后，该电影的整体好评率可以直接在豆瓣电影的专属页面查询。</p><h2 id="17-销售额"><a href="#17-销售额" class="headerlink" title="17. 销售额"></a>17. 销售额</h2><p>以销售为目的发起的活动或推送的文章，通常需要对销售额进行统计与分析。</p><p>仅通过销售额很难判断文章或活动的营销效果，运营者需要将总销售额、分销成本、浏览量、转化比例等数据一并计算，以得到更客观的效果分析。</p><h2 id="18-ARPU"><a href="#18-ARPU" class="headerlink" title="18. ARPU"></a>18. ARPU</h2><p><code>ARPU</code> 即 <code>单用户平均收入</code>。<code>ARPU</code> 值越高，说明平均每个用户贡献的收入越高。运营者可以尝试通过降低门槛并引入付费用户、提升品牌并培养用户认知度等方式，综合提高 <code>ARPU</code> 值。</p><p>以上 18 个专业术语，运营者必须熟练使用，这样才能更好地与团队沟通，并有针对性地提升运营效果。</p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://www.wenyuanblog.com/blogs/18-technical-terms-for-an-operations-position.html">《运营岗位的18个入门专业术语》 - 文渊博客</a></p>]]></content>
    
    
    <summary type="html">新媒体运营岗位的18个入门专业术语</summary>
    
    
    
    <category term="跨界学习" scheme="https://realwds.com/categories/%E8%B7%A8%E7%95%8C%E5%AD%A6%E4%B9%A0/"/>
    
    
    <category term="运营" scheme="https://realwds.com/tags/%E8%BF%90%E8%90%A5/"/>
    
  </entry>
  
  <entry>
    <title>Vercel 改写网络接口，前端跨域问题秒解</title>
    <link href="https://realwds.com/posts/49fde86b.html"/>
    <id>https://realwds.com/posts/49fde86b.html</id>
    <published>2021-06-07T02:00:00.000Z</published>
    <updated>2024-07-20T06:49:13.125Z</updated>
    
    <content type="html"><![CDATA[<p>前端跨域问题一直以来都是非常头疼的问题，有时候想不借助后端，自己渲染个网络接口，太难了。<br>就拿必应壁纸来说，已知接口地址，但由于跨域，前端无法渲染数据。<br>全能圣手 <code>Vercel</code> 利用 <code>vercel.json</code> 的 <code>CORS</code> 就可以解决这个问题。</p><h2 id="编写代码"><a href="#编写代码" class="headerlink" title="编写代码"></a>编写代码</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><span class="line">4</span><br><span class="line">5</span><br><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">const</span> axios = <span class="built_in">require</span>(<span class="string">&#x27;axios&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="title function_">async</span> (req, res) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> start = req.<span class="property">query</span>.<span class="property">start</span> ? req.<span class="property">query</span>.<span class="property">start</span> : <span class="number">0</span></span><br><span class="line">  <span class="keyword">const</span> count = req.<span class="property">query</span>.<span class="property">count</span> ? req.<span class="property">query</span>.<span class="property">count</span> : <span class="number">1</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">`http://cn.bing.com/HPImageArchive.aspx?format=js&amp;idx=<span class="subst">$&#123;start&#125;</span>&amp;n=<span class="subst">$&#123;count&#125;</span>`</span></span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">  res.<span class="title function_">json</span>(&#123;</span><br><span class="line">    <span class="attr">status</span>: <span class="string">&#x27;ok&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: result.<span class="property">data</span></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><code>package.json</code> 中引入 <code>axios</code> 模块。</p><p>项目根目录新建 <code>vercel.json</code> 文件，启用 <code>CORS</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><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="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;realwds-api&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;version&quot;</span><span class="punctuation">:</span> <span class="number">2</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;routes&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;/&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;headers&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;cache-control&quot;</span><span class="punctuation">:</span> <span class="string">&quot;no-cache, no-store, must-revalidate&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;Access-Control-Allow-Origin&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="attr">&quot;dest&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/api&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;/bing&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;headers&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;cache-control&quot;</span><span class="punctuation">:</span> <span class="string">&quot;no-cache, no-store, must-revalidate&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;Access-Control-Allow-Origin&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="attr">&quot;dest&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/api/bing/&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">  <span class="punctuation">]</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><p>推送 <code>GitHub</code> 仓库，用 <code>Vercel</code> 部署指定项目。</p><h2 id="大功告成"><a href="#大功告成" class="headerlink" title="大功告成"></a>大功告成</h2><p><a href="https://realwds-api.vercel.app/bing">接口预览</a></p><p><a href="https://github.com/realwds/realwds-api">项目地址</a></p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://vercel.com/docs/runtimes#official-runtimes/node-js">《 Runtime Node.js 》 - Vercel </a><br><a href="https://vercel.com/support/articles/how-to-enable-cors?query=vercel.json#enabling-cors-using-vercel.json">《 Enabling CORS using vercel.json 》 - Vercel</a></p>]]></content>
    
    
    <summary type="html">Vercel 改写网络接口，前端跨域问题秒解</summary>
    
    
    
    <category term="Git相关" scheme="https://realwds.com/categories/Git%E7%9B%B8%E5%85%B3/"/>
    
    
    <category term="精选" scheme="https://realwds.com/tags/%E7%B2%BE%E9%80%89/"/>
    
    <category term="vercel" scheme="https://realwds.com/tags/vercel/"/>
    
    <category term="跨域" scheme="https://realwds.com/tags/%E8%B7%A8%E5%9F%9F/"/>
    
  </entry>
  
  <entry>
    <title>网站性能优化，提升访问速度</title>
    <link href="https://realwds.com/posts/c8d87eec.html"/>
    <id>https://realwds.com/posts/c8d87eec.html</id>
    <published>2021-06-03T03:23:18.000Z</published>
    <updated>2024-07-20T06:49:13.132Z</updated>
    
    <content type="html"><![CDATA[<h2 id="性能评测"><a href="#性能评测" class="headerlink" title="性能评测"></a>性能评测</h2><p>进入网站 <a href="https://gtmetrix.com/">https://gtmetrix.com/</a> 查看自己的网站评分，同时它也给出了需要优化的建议。</p><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20210603102654.2al1dejr461w.png"></p><h2 id="网站优化"><a href="#网站优化" class="headerlink" title="网站优化"></a>网站优化</h2><h3 id="1-CDN-托管"><a href="#1-CDN-托管" class="headerlink" title="1. CDN 托管"></a>1. CDN 托管</h3><p>不经常改变的文件使用 <a href="https://www.jsdelivr.com/">jsDriver</a> 进行文件托管。</p><h3 id="2-图片压缩"><a href="#2-图片压缩" class="headerlink" title="2. 图片压缩"></a>2. 图片压缩</h3><p>在线压缩网站 <a href="https://zh.recompressor.com/">Recompressor</a> 、 <a href="https://tinypng.com/">TinyPNG</a>。</p><h3 id="3-gulp-使用"><a href="#3-gulp-使用" class="headerlink" title="3. gulp 使用"></a>3. gulp 使用</h3><p>使用 <code>gulp</code> 进行 <code>css</code> 和 <code>js</code> 文件压缩。</p><h3 id="4-减少请求数"><a href="#4-减少请求数" class="headerlink" title="4. 减少请求数"></a>4. 减少请求数</h3><p>减少请求数，移除不必要文件，有利于网站的访问速度。</p><h3 id="5-图片懒加载"><a href="#5-图片懒加载" class="headerlink" title="5. 图片懒加载"></a>5. 图片懒加载</h3><p>使用图片懒加载，增强用户交互体验，提升网站性能。</p><h3 id="6-使用-pjax"><a href="#6-使用-pjax" class="headerlink" title="6. 使用 pjax"></a>6. 使用 pjax</h3><p>网站无刷新加载（可能会出现很多坑，初学者慎用）</p><h2 id="大展身手"><a href="#大展身手" class="headerlink" title="大展身手"></a>大展身手</h2><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20210603102434.1a4m0dvgxg80.png"></p><p>快去试试网站优化后的效果吧！</p>]]></content>
    
    
    <summary type="html">网站性能优化，提升访问速度</summary>
    
    
    
    <category term="工具相关" scheme="https://realwds.com/categories/%E5%B7%A5%E5%85%B7%E7%9B%B8%E5%85%B3/"/>
    
    
    <category term="工具" scheme="https://realwds.com/tags/%E5%B7%A5%E5%85%B7/"/>
    
    <category term="性能" scheme="https://realwds.com/tags/%E6%80%A7%E8%83%BD/"/>
    
    <category term="优化" scheme="https://realwds.com/tags/%E4%BC%98%E5%8C%96/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 主题首页增加公告</title>
    <link href="https://realwds.com/posts/39c5cc87.html"/>
    <id>https://realwds.com/posts/39c5cc87.html</id>
    <published>2021-05-24T08:20:31.000Z</published>
    <updated>2024-07-20T06:49:13.118Z</updated>
    
    <content type="html"><![CDATA[<p>之前首页公告一直用的 <code>哔哔</code> ，但是我的 <code>哔哔</code> 当随笔用了。里面放的是一些生活中的吐槽，看法，杂文之类的，不想把他和博客之类的东西混在一起。</p><p>所以单独搞了个公告页面，参考张洪大佬的博客，做出以下调整。</p><h2 id="标签外挂引入"><a href="#标签外挂引入" class="headerlink" title="标签外挂引入"></a>标签外挂引入</h2><p>我的公告页面用的 <code>时间线标签外挂</code>，所以要引入，如果想 <code>DIY</code> 样式的可以不用引入。</p><h3 id="引入-timeline-js"><a href="#引入-timeline-js" class="headerlink" title="引入 timeline.js"></a>引入 timeline.js</h3><p>文件地址：<code>themes/butterfly/scripts/tag/timeline.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></pre></td><td class="code"><pre><span class="line"><span class="meta">&#x27;use strict&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">postTimeline</span>(<span class="params">args, content</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (args.<span class="property">length</span> &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`&lt;div class=&quot;timeline&quot;&gt;&lt;p class=&#x27;p h2&#x27;&gt;<span class="subst">$&#123;args&#125;</span>&lt;/p&gt;<span class="subst">$&#123;content&#125;</span>&lt;/div&gt;`</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`&lt;div class=&quot;timeline&quot;&gt;<span class="subst">$&#123;content&#125;</span>&lt;/div&gt;`</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">function</span> <span class="title function_">postTimenode</span>(<span class="params">args, content</span>) &#123;</span><br><span class="line">  args = args.<span class="title function_">join</span>(<span class="string">&#x27; &#x27;</span>).<span class="title function_">split</span>(<span class="string">&#x27;,&#x27;</span>)</span><br><span class="line">  <span class="keyword">var</span> time = args[<span class="number">0</span>]</span><br><span class="line">  <span class="keyword">return</span> <span class="string">`&lt;div class=&quot;timenode&quot;&gt;&lt;div class=&quot;meta&quot;&gt;&lt;p&gt;<span class="subst">$&#123;hexo.render.renderSync(&#123;text: time, engine: <span class="string">&#x27;markdown&#x27;</span>&#125;)&#125;</span>&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;body&quot;&gt;<span class="subst">$&#123;hexo.render.renderSync(&#123;text: content, engine: <span class="string">&#x27;markdown&#x27;</span>&#125;).split(<span class="string">&#x27;\n&#x27;</span>).join(<span class="string">&#x27;&#x27;</span>)&#125;</span>&lt;/div&gt;&lt;/div&gt;`</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// &#123;% timeline %&#125;</span></span><br><span class="line"><span class="comment">// ... timenode ...</span></span><br><span class="line"><span class="comment">// &#123;% endtimeline %&#125;</span></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">&#x27;timeline&#x27;</span>, postTimeline, &#123;<span class="attr">ends</span>: <span class="literal">true</span>&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// &#123;% timenode time %&#125;</span></span><br><span class="line"><span class="comment">// what happened</span></span><br><span class="line"><span class="comment">// &#123;% endtimenode %&#125;</span></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">&#x27;timenode&#x27;</span>, postTimenode, &#123;<span class="attr">ends</span>: <span class="literal">true</span>&#125;);</span><br></pre></td></tr></table></figure><h3 id="引入-timeline-styl"><a href="#引入-timeline-styl" class="headerlink" title="引入 timeline.styl"></a>引入 timeline.styl</h3><p>文件地址：<code>themes/butterfly/sources/css/_tags/timeline.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><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="selector-tag">div</span></span><br><span class="line">  &amp;<span class="selector-class">.timenode</span></span><br><span class="line">    <span class="attribute">position</span> relative</span><br><span class="line">    <span class="selector-pseudo">&amp;:before</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">6px</span></span><br><span class="line">    <span class="selector-pseudo">&amp;:after</span></span><br><span class="line">      <span class="attribute">top</span> <span class="number">26px</span></span><br><span class="line">      <span class="attribute">height</span> <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">26px</span>)</span><br><span class="line">    <span class="selector-pseudo">&amp;:last-child</span></span><br><span class="line">      <span class="selector-pseudo">&amp;:after</span></span><br><span class="line">        <span class="attribute">height</span> <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">26px</span> - <span class="number">16px</span>)</span><br><span class="line">        <span class="attribute">border-bottom-left-radius</span> <span class="number">2px</span></span><br><span class="line">        <span class="attribute">border-bottom-right-radius</span> <span class="number">2px</span></span><br><span class="line">    <span class="selector-class">.meta</span></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>(--tab-botton-color)</span><br><span class="line">      <span class="attribute">font-size</span> <span class="number">0.375rem</span></span><br><span class="line">      <span class="attribute">line-height</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="selector-pseudo">&amp;:before</span></span><br><span class="line">        <span class="attribute">background</span> <span class="built_in">rgba</span>(<span class="number">68</span>, <span class="number">215</span>, <span class="number">182</span>, <span class="number">0.5</span>)</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">border-radius</span> <span class="number">8px</span></span><br><span class="line">      <span class="selector-pseudo">&amp;:after</span></span><br><span class="line">        <span class="attribute">background</span> <span class="number">#44d7b6</span></span><br><span class="line">        <span class="attribute">margin-left</span> <span class="number">2px</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">width</span> <span class="number">12px</span></span><br><span class="line">        <span class="attribute">height</span> <span class="number">12px</span></span><br><span class="line">        <span class="attribute">border-radius</span> <span class="number">6px</span></span><br><span class="line">        <span class="attribute">transform</span> <span class="built_in">scale</span>(<span class="number">0.5</span>)</span><br><span class="line">      <span class="selector-tag">p</span></span><br><span class="line">        <span class="attribute">font-weight</span> bold <span class="meta">!important</span></span><br><span class="line">        <span class="attribute">margin</span> <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">24px</span> <span class="meta">!important</span></span><br><span class="line">    <span class="selector-class">.body</span></span><br><span class="line">      <span class="attribute">margin</span> <span class="number">4px</span> <span class="number">0</span> <span class="number">10px</span> <span class="number">24px</span></span><br><span class="line">      <span class="attribute">padding</span> <span class="number">10px</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">background</span> <span class="number">#efeded</span></span><br><span class="line">      <span class="attribute">display</span> inline-block</span><br><span class="line">      <span class="selector-tag">p</span></span><br><span class="line">        <span class="selector-pseudo">&amp;:first-child</span></span><br><span class="line">          <span class="attribute">margin-top</span> <span class="number">0</span> <span class="meta">!important</span></span><br><span class="line">        <span class="selector-pseudo">&amp;:last-child</span></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">      <span class="selector-class">.highlight</span></span><br><span class="line">        <span class="attribute">background</span> <span class="number">#fff7ea</span></span><br><span class="line">        <span class="attribute">filter</span> <span class="built_in">grayscale</span>(<span class="number">0%</span>)</span><br><span class="line">        <span class="selector-tag">figcaption</span></span><br><span class="line">          <span class="attribute">background</span> <span class="number">#ffeed2</span></span><br><span class="line">        <span class="selector-class">.gutter</span></span><br><span class="line">          <span class="attribute">background</span> <span class="number">#ffedd0</span></span><br><span class="line">    <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">      <span class="selector-class">.meta</span></span><br><span class="line">        <span class="attribute">color</span> <span class="number">#444</span></span><br><span class="line">        <span class="selector-pseudo">&amp;:before</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">87</span>, <span class="number">34</span>, <span class="number">0.5</span>)</span><br><span class="line">        <span class="selector-pseudo">&amp;:after</span></span><br><span class="line">          <span class="attribute">background</span> <span class="number">#ff5722</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">div</span><span class="selector-class">.timenode</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.timenode</span><span class="selector-pseudo">:after</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">z-index</span> <span class="number">1</span></span><br><span class="line">  <span class="attribute">position</span> absolute</span><br><span class="line">  <span class="attribute">background</span> <span class="built_in">rgba</span>(<span class="number">68</span>, <span class="number">215</span>, <span class="number">182</span>, <span class="number">0.5</span>)</span><br><span class="line">  <span class="attribute">width</span> <span class="number">2px</span></span><br><span class="line">  <span class="attribute">left</span> <span class="number">7px</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.timenode</span> <span class="selector-class">.meta</span>,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.timenode</span> <span class="selector-class">.body</span></span><br><span class="line">  <span class="attribute">max-width</span> <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">24px</span>)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.timenode</span> <span class="selector-class">.meta</span><span class="selector-pseudo">:before</span>,</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.timenode</span> <span class="selector-class">.meta</span><span class="selector-pseudo">:after</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">position</span> absolute</span><br><span class="line">  <span class="attribute">top</span> <span class="number">8px</span></span><br><span class="line">  <span class="attribute">z-index</span> <span class="number">2</span></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><br><span class="line">  <span class="selector-tag">div</span></span><br><span class="line">    &amp;<span class="selector-class">.timenode</span></span><br><span class="line">      <span class="selector-class">.body</span></span><br><span class="line">        <span class="attribute">background</span> <span class="number">#2c2c2c</span></span><br><span class="line">      <span class="selector-pseudo">&amp;:hover</span></span><br><span class="line">        <span class="selector-class">.meta</span></span><br><span class="line">          <span class="attribute">color</span> <span class="number">#ccd0d7</span></span><br><span class="line">      <span class="selector-class">.meta</span></span><br><span class="line">        <span class="attribute">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.6</span>)</span><br><span class="line">    &amp;<span class="selector-class">.timeline</span></span><br><span class="line">      <span class="selector-tag">p</span></span><br><span class="line">        &amp;<span class="selector-class">.p</span></span><br><span class="line">          &amp;<span class="selector-class">.h2</span></span><br><span class="line">            <span class="attribute">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.6</span>)</span><br></pre></td></tr></table></figure><h2 id="公告模板引入"><a href="#公告模板引入" class="headerlink" title="公告模板引入"></a>公告模板引入</h2><h3 id="新建-homeNotice-pug"><a href="#新建-homeNotice-pug" class="headerlink" title="新建 homeNotice.pug"></a>新建 homeNotice.pug</h3><p>文件地址：<code>themes/butterfly/layout/includes/homeNotices.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><span class="line">4</span><br><span class="line">5</span><br><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">#noticeList.container(onclick=`window.open(&#x27;/notice/&#x27;,&#x27;_self&#x27;)`)</span><br><span class="line">    .nlogo=&quot;公告&quot;</span><br><span class="line">    .swiper-container</span><br><span class="line">        #notice-item.swiper-wrapper</span><br><span class="line">            if site.data.notice</span><br><span class="line">                each i in site.data.notice</span><br><span class="line">                    .li-style.swiper-slide=i.msg</span><br><span class="line">    i.fas.fa-arrow-circle-right(title=&quot;查看全文&quot;)</span><br><span class="line"></span><br><span class="line">.js-pjax</span><br><span class="line">    script(src=&#x27;https://fastly.jsdelivr.net/npm/swiper/swiper-bundle.min.js&#x27;,data-pjax=&#x27;&#x27;)</span><br><span class="line">    script.</span><br><span class="line">        new Swiper(&#x27;.swiper-container&#x27;, &#123;</span><br><span class="line">            direction: &#x27;vertical&#x27;,</span><br><span class="line">            loop: true,</span><br><span class="line">            autoplay: &#123;</span><br><span class="line">                delay: 3000,</span><br><span class="line">                disableOnInteraction: true,</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure><h3 id="引入-CSS-样式"><a href="#引入-CSS-样式" class="headerlink" title="引入 CSS 样式"></a>引入 CSS 样式</h3><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></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#notice-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">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">&#125;</span><br><span class="line"><span class="selector-id">#notice-item</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">height</span>: <span class="number">25px</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">500</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">  -webkit-<span class="selector-tag">line</span>-clamp: <span class="number">1</span>;</span><br><span class="line">  -webkit-<span class="attribute">box-orient</span>: vertical;</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">&#125;</span><br><span class="line"><span class="selector-id">#noticeList</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">color</span>: <span class="built_in">var</span>(--font-color);</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">0.6rem</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">cursor</span>: pointer;</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">#noticeList</span> <span class="selector-class">.nlogo</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">  <span class="attribute">font-weight</span>: <span class="number">600</span>;</span><br><span class="line">  <span class="attribute">display</span>: inline;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#noticeList</span> <span class="selector-class">.swiper-container</span>&#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#noticeList</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">  <span class="attribute">text-align</span>: right;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="引入-homeNotice-模板"><a href="#引入-homeNotice-模板" class="headerlink" title="引入 homeNotice 模板"></a>引入 homeNotice 模板</h3><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><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">extends includes/layout.pug</span><br><span class="line"></span><br><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"><span class="addition">+    include includes/homeNotice.pug</span></span><br><span class="line">    +postUI</span><br><span class="line">    include includes/pagination.pug</span><br></pre></td></tr></table></figure><h3 id="引入-notice-模板"><a href="#引入-notice-模板" class="headerlink" title="引入 notice 模板"></a>引入 notice 模板</h3><p>文件地址：<code>themes/butterfly/layout/includes/page/notice.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><span class="line">4</span><br><span class="line">5</span><br><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">#article-container</span><br><span class="line">  if top_img === false &amp;&amp; page.tip</span><br><span class="line">    h1.page-title.page-title-has= page.title</span><br><span class="line">    .page-title-tip!= page.tip</span><br><span class="line">  else </span><br><span class="line">    h1.page-title= page.title</span><br><span class="line">    </span><br><span class="line">  != page.content</span><br><span class="line"></span><br><span class="line">  .timeline(class=&quot;notice&quot;)</span><br><span class="line">    if site.data.notice</span><br><span class="line">      each i in site.data.notice</span><br><span class="line">        .timenode</span><br><span class="line">          .meta</span><br><span class="line">            p</span><br><span class="line">            p=i.date</span><br><span class="line">            p</span><br><span class="line">          .body</span><br><span class="line">            p=i.msg</span><br><span class="line"></span><br></pre></td></tr></table></figure><h3 id="添加判断"><a href="#添加判断" class="headerlink" title="添加判断"></a>添加判断</h3><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></pre></td><td class="code"><pre><span class="line">when &#x27;categories&#x27;</span><br><span class="line">  include includes/page/categories.pug</span><br><span class="line"><span class="addition">+ when &#x27;notice&#x27;</span></span><br><span class="line"><span class="addition">+   include includes/page/notice.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><h3 id="新建模板"><a href="#新建模板" class="headerlink" title="新建模板"></a>新建模板</h3><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">hexo new page notice</span><br></pre></td></tr></table></figure><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">---</span><br><span class="line">title: 公告</span><br><span class="line">type: &quot;notice&quot;</span><br><span class="line">aside: false</span><br><span class="line"><span class="section">comments: false</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">...</span><br></pre></td></tr></table></figure><h3 id="引入-notice-yml"><a href="#引入-notice-yml" class="headerlink" title="引入 notice.yml"></a>引入 notice.yml</h3><p>新增公告直接向上添加即可。文件地址：<code>source/_data/notice.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="bullet">-</span> <span class="attr">date:</span> <span class="number">2021.05</span><span class="number">.24</span></span><br><span class="line">  <span class="attr">msg:</span> <span class="string">Butterfly</span> <span class="string">主题首页增加公告</span></span><br><span class="line"><span class="bullet">-</span> <span class="attr">date:</span> <span class="number">2021.04</span><span class="number">.29</span></span><br><span class="line">  <span class="attr">msg:</span> <span class="string">博客正式上线</span></span><br></pre></td></tr></table></figure><h2 id="大功告成"><a href="#大功告成" class="headerlink" title="大功告成"></a>大功告成</h2><p><code>hexo</code> 三连过后，惊喜出现了【 或者惊吓 (‧̣̥̇꒪່⍢꒪່ ) 】，快去试试看吧~</p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://blog.zhheo.com/p/a6947667.html#%E5%BC%95%E5%85%A5%E5%88%B0%E4%B8%BB%E9%A1%B5">《Hexo-Butterfly 说说朋友圈适配》 - 张洪Heo</a><br><a href="https://akilar.top/posts/615e2dec/#%E6%97%B6%E9%97%B4%E8%BD%B4-timeline">《基于 Butterfly 的外挂标签引入》 - Akilar</a></p>]]></content>
    
    
    <summary type="html">给 Butterfly 主题首页增加公告</summary>
    
    
    
    <category term="Butterfly魔改" scheme="https://realwds.com/categories/Butterfly%E9%AD%94%E6%94%B9/"/>
    
    
    <category term="Hexo" scheme="https://realwds.com/tags/Hexo/"/>
    
    <category term="butterfly" scheme="https://realwds.com/tags/butterfly/"/>
    
  </entry>
  
  <entry>
    <title>网站整站变灰，用于哀悼</title>
    <link href="https://realwds.com/posts/90b877e6.html"/>
    <id>https://realwds.com/posts/90b877e6.html</id>
    <published>2021-05-23T08:00:31.000Z</published>
    <updated>2024-07-20T06:49:13.120Z</updated>
    
    <content type="html"><![CDATA[<div class="note gray no-icon flat"><p>杂交水稻之父袁隆平去世，网站特此全站变灰，以示哀悼。</p></div><h2 id="修改配置文件"><a href="#修改配置文件" class="headerlink" title="修改配置文件"></a>修改配置文件</h2><p>文件地址：<code>themes/butterfly/_config.yml</code>，<br>若使用无污染方式引入 butterfly，则在项目根目录 <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></pre></td><td class="code"><pre><span class="line"><span class="addition">+ # 网站变灰 </span></span><br><span class="line"><span class="addition">+ grayTheme: true # true &amp;&amp; false</span></span><br></pre></td></tr></table></figure><h2 id="修改主题"><a href="#修改主题" class="headerlink" title="修改主题"></a>修改主题</h2><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><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">- var htmlClassHideAside = theme.aside.enable &amp;&amp; theme.aside.hide ? &#x27;hide-aside&#x27; : &#x27;&#x27;</span></span><br><span class="line"><span class="deletion">- var hideAside = !theme.aside.enable || page.aside === false ? &#x27;hide-aside&#x27; : &#x27;&#x27;</span></span><br><span class="line"><span class="deletion">- var pageType = is_post() ? &#x27;post&#x27; : &#x27;page&#x27;</span></span><br><span class="line"><span class="addition">+ - var htmlGrayTheme = theme.grayTheme ? &#x27;htmlGrayTheme&#x27; : &#x27;&#x27;</span></span><br><span class="line"></span><br><span class="line">doctype html</span><br><span class="line"><span class="addition">+ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside class=htmlGrayTheme)</span></span><br></pre></td></tr></table></figure><h2 id="CSS引入"><a href="#CSS引入" class="headerlink" title="CSS引入"></a>CSS引入</h2><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-class">.htmlGrayTheme</span> &#123;</span><br><span class="line">  -webkit-<span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">  -moz-<span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">  -ms-<span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">  -o-<span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">  <span class="attribute">filter</span>: <span class="built_in">grayscale</span>(<span class="number">100%</span>);</span><br><span class="line">  <span class="attribute">filter</span>: progid:DXImageTransform.Microsoft.<span class="built_in">BasicImage</span>(grayscale=<span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
    
    
    <summary type="html">杂交水稻之父袁隆平去世，网站特此全站变灰，以示哀悼。</summary>
    
    
    
    <category term="Butterfly魔改" scheme="https://realwds.com/categories/Butterfly%E9%AD%94%E6%94%B9/"/>
    
    
    <category term="Hexo" scheme="https://realwds.com/tags/Hexo/"/>
    
    <category term="butterfly" scheme="https://realwds.com/tags/butterfly/"/>
    
  </entry>
  
  <entry>
    <title>博客部署从 Vercel 到 GitHub Page</title>
    <link href="https://realwds.com/posts/2a6b5553.html"/>
    <id>https://realwds.com/posts/2a6b5553.html</id>
    <published>2021-05-20T07:45:20.000Z</published>
    <updated>2024-07-20T06:58:03.064Z</updated>
    
    <content type="html"><![CDATA[<p>看到标题，肯定有小伙伴想，好一波反向操作。</p><p>但是最近 <code>vercel</code> 解析的域名访问太不给力了，经常崩，体验极差。</p><p>我能怎么办，我也很绝望啊！</p><p>思前想后，还是 <code>Github Page</code> 稳如老狗啊，虽然对国内而言速度有点慢，但是还可以，毕竟考虑到咱的博客也是要面向世界的 （一本正经滑稽脸）</p><h2 id="前因后果"><a href="#前因后果" class="headerlink" title="前因后果"></a>前因后果</h2><p>由于我的源码没有公开，所以只想把产物给展示出来，推送到一个新的仓库，具体操作可以查看 《<a href="/posts/a3cc0a75.html">Github Action 将构建产物自动推送到令一个仓库</a>》 的文章，当然对于 <code>hexo</code> 也可以用 <code>deploy</code> 进行跨仓库产物提交。</p><p>但是有一个问题就是，我的源码里存在很多路径问题，所以不能放到除 <code>realwds.github.io</code> 的其他仓库。也就是只能放到主仓库，可是我的主仓库已经有了内容，并且解析好了，不是很想动。</p><p>组织账号！没错，个人可以新建组织，组织账户的主仓库也可以搞，这就解决了我必须要提交到主仓库的问题。</p><h2 id="代码编写"><a href="#代码编写" class="headerlink" title="代码编写"></a>代码编写</h2><p>利用 <code>hexo</code> 的 <code>deploy</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">deploy:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="string">git@github.com:hiwego/hiwego.github.io.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>编写 <code>package.json</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></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;dev&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo clean &amp;&amp; hexo s&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;build&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo generate&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;upload&quot;</span><span class="punctuation">:</span> <span class="string">&quot;hexo clean &amp;&amp; hexo g &amp;&amp; copy README.md public\\README.md &amp;&amp; gulp &amp;&amp; hexo d &amp;&amp; git config --global user.name &#x27;Alejandro&#x27; &amp;&amp; git config --global user.email &#x27;wds@disnot.com&#x27; &amp;&amp; git add . &amp;&amp; git commit -am&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><ul><li><code>hexo</code> 经典三连，由于仓库中不含 <code>README.md</code> 文件，感觉不是很好看，便复制了源码仓库 <code>README.md</code> 到产物仓库。</li><li>我用了 <code>gulp</code> 进行代码的压缩，所以在部署前进行 <code>gulp</code> 命令压缩。</li><li>公司用的 <code>git</code> 名和我自己的不一样，所以提交前进行修改。</li><li>每次运行 <code>npm run upload &lt;提交信息备注&gt;</code> 即可，最后别忘了 <code>git push</code>。</li></ul><h2 id="查漏补缺"><a href="#查漏补缺" class="headerlink" title="查漏补缺"></a>查漏补缺</h2><p>提交到组织仓库，缺失<code>CNAME</code>，导致域名无法访问。所以要在项目的 <code>source</code> 文件夹下新建 <code>CNAME</code> 文件，里面放入自己要解析的域名即可。</p><h2 id="大功告成"><a href="#大功告成" class="headerlink" title="大功告成"></a>大功告成</h2><p>打开域名 <a href="https://realwds.com/">https://realwds.com</a> 访问成功！</p>]]></content>
    
    
    <summary type="html">博客部署从 Vercel 到 GitHub Page</summary>
    
    
    
    <category term="Git相关" scheme="https://realwds.com/categories/Git%E7%9B%B8%E5%85%B3/"/>
    
    
    <category term="GitHub" scheme="https://realwds.com/tags/GitHub/"/>
    
    <category term="vercel" scheme="https://realwds.com/tags/vercel/"/>
    
    <category term="博客部署" scheme="https://realwds.com/tags/%E5%8D%9A%E5%AE%A2%E9%83%A8%E7%BD%B2/"/>
    
  </entry>
  
  <entry>
    <title>免费 CDN 优化网站（CloudFlare）</title>
    <link href="https://realwds.com/posts/c3e13e67.html"/>
    <id>https://realwds.com/posts/c3e13e67.html</id>
    <published>2021-05-18T06:50:30.000Z</published>
    <updated>2024-07-20T06:49:13.131Z</updated>
    
    <content type="html"><![CDATA[<div class="note red no-icon flat"><p>单纯供国内用户用，不建议使用。</p></div><p>CloudFlare 是一家美国的跨国科技企业，总部位于旧金山，在英国伦敦也设有办事处。CloudFlare 以向客户提供网站安全管理、性能优化及相关的技术支持为主要业务。通过基于反向代理的内容传递网络及分布式域名解析服务，CloudFlare 可以帮助受保护站点抵御包括拒绝服务攻击在内的大多数网络攻击，确保该网站长期在线，同时提升网站的性能、访问速度以改善访客体验。</p><h2 id="注册账号"><a href="#注册账号" class="headerlink" title="注册账号"></a>注册账号</h2><p><a href="https://www.cloudflare.com/">官网地址</a></p><h2 id="添加网站"><a href="#添加网站" class="headerlink" title="添加网站"></a>添加网站</h2><p>注册网站后，添加域名，注意添加域名不带 www 的域名。</p><h2 id="添加-DNS-记录"><a href="#添加-DNS-记录" class="headerlink" title="添加 DNS 记录"></a>添加 DNS 记录</h2><p>添加域名完成后会自动扫描，解析的所有域名 DNS 记录，等待扫描完成即可。</p><h2 id="选择加速站点"><a href="#选择加速站点" class="headerlink" title="选择加速站点"></a>选择加速站点</h2><p>扫描完成后可以选择要加速的站点，点击后面的黄色云朵进行切换。也可以自定义添加要加速的域名。</p><h2 id="更换-DNS-服务器"><a href="#更换-DNS-服务器" class="headerlink" title="更换 DNS 服务器"></a>更换 DNS 服务器</h2><p>前往域名服务商更改 DNS 服务器。</p><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/da9c07a860b0430f96b6bae928cf698a.5igd7v70ang0.png" alt="更改DNS服务器"></p><p>修改完成后，点击继续开启一些配置后，出现下图表示配置成功。</p><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/1bab8ac4d5454c0384ef801219874d95.2qyn265t6ce0.png" alt="CloudFlare配置"></p><p>国外用户访问国内网站不会变卡了！</p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://www.zhihu.com/topic/19579622/intro">《 CloudFlare 》 - 知乎</a></p>]]></content>
    
    
    <summary type="html">CloudFlare，一个可以让国内网站在国外加速的服务</summary>
    
    
    
    <category term="工具相关" scheme="https://realwds.com/categories/%E5%B7%A5%E5%85%B7%E7%9B%B8%E5%85%B3/"/>
    
    
    <category term="cloudflare" scheme="https://realwds.com/tags/cloudflare/"/>
    
    <category term="网站加速" scheme="https://realwds.com/tags/%E7%BD%91%E7%AB%99%E5%8A%A0%E9%80%9F/"/>
    
    <category term="ssl" scheme="https://realwds.com/tags/ssl/"/>
    
  </entry>
  
  <entry>
    <title>图像识别 根据封面图主色调更改博客主题颜色</title>
    <link href="https://realwds.com/posts/84339efc.html"/>
    <id>https://realwds.com/posts/84339efc.html</id>
    <published>2021-05-16T04:09:37.000Z</published>
    <updated>2024-07-20T06:49:13.119Z</updated>
    
    <content type="html"><![CDATA[<p>在项目中，比如想让轮播图周围颜色和轮播图本身主色调颜色相同。那么就要用到简单的图像识别技术，强大的 js 中就有这样的库供我们使用，接下来让我们一探究竟。</p><h2 id="1-rgbaster-js"><a href="#1-rgbaster-js" class="headerlink" title="1.rgbaster.js"></a>1.rgbaster.js</h2><p><a href="https://github.com/briangonzalez/rgbaster.js">github地址</a> 提取图片的主色、次色。</p><p>引入 rgbaster.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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> img = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;img&#x27;</span>);</span><br><span class="line"><span class="comment">// 或者</span></span><br><span class="line"><span class="comment">// const img = &#x27;http://example.com/image.jpg&#x27;;</span></span><br><span class="line"><span class="title class_">RGBaster</span>.<span class="title function_">colors</span>(img, &#123;</span><br><span class="line">  <span class="comment">// 调色板大小，就是提取的样本，越大越精确，同时性能越差</span></span><br><span class="line">  <span class="attr">paletteSize</span>: <span class="number">30</span>,</span><br><span class="line">  <span class="comment">// 颜色排除</span></span><br><span class="line">  <span class="attr">exclude</span>: [ <span class="string">&#x27;rgb(255,255,255)&#x27;</span>, <span class="string">&#x27;rgb(0,0,0)&#x27;</span> ],</span><br><span class="line">  <span class="attr">success</span>: <span class="keyword">function</span>(<span class="params">payload</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Dominant color:&#x27;</span>,payload.<span class="property">dominant</span>);<span class="comment">// 提取出来的主色</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Secondary color:&#x27;</span>, payload.<span class="property">secondary</span>);<span class="comment">// 次色</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Palette:&#x27;</span>, payload.<span class="property">palette</span>); <span class="comment">// 调色板</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>提取出来的值为 rgb，如果要转换成 rgba 可以进行以下操作：</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">const</span> c = payload.<span class="property">dominant</span>.<span class="title function_">match</span>(<span class="regexp">/\d+/g</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Color</span> = <span class="string">`rgba(<span class="subst">$&#123;c[<span class="number">0</span>]&#125;</span>,<span class="subst">$&#123;c[<span class="number">1</span>]&#125;</span>,<span class="subst">$&#123;c[<span class="number">2</span>]&#125;</span>,0.8)`</span>;</span><br></pre></td></tr></table></figure><p>颜色有深有浅，暗色的话，黑色字体就看不清了，文字颜色得随着背景色取反，我们可以把 rgb 值转化成灰度值来判断颜色深浅。</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="keyword">let</span> fontColor;</span><br><span class="line"><span class="keyword">const</span> grayLevel = c[<span class="number">0</span>] * <span class="number">0.299</span> + c[<span class="number">1</span>] * <span class="number">0.587</span> + c[<span class="number">2</span>] * <span class="number">0.114</span>;</span><br><span class="line"><span class="keyword">if</span> (grayLevel &gt;= <span class="number">192</span>) &#123;</span><br><span class="line">  <span class="comment">// 若为浅色，把文字设置为黑色</span></span><br><span class="line">  fontColor = <span class="string">&#x27;#000&#x27;</span>;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  fontColor = <span class="string">&#x27;#fff&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="2-Color-Thief"><a href="#2-Color-Thief" class="headerlink" title="2.Color Thief"></a>2.Color Thief</h2><p><a href="https://github.com/lokesh/color-thief/">github地址</a></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="keyword">const</span> img = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;img&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> colorThief = <span class="keyword">new</span> <span class="title class_">ColorThief</span>();</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(colorThief.<span class="title function_">getColor</span>(img));</span><br><span class="line"> &#125;</span><br><span class="line"><span class="comment">// 调色板</span></span><br><span class="line"><span class="keyword">var</span> colorThief = <span class="keyword">new</span> <span class="title class_">ColorThief</span>();</span><br><span class="line">colorThief.<span class="title function_">getPalette</span>(sourceImage, <span class="number">8</span>);</span><br></pre></td></tr></table></figure><h2 id="3-vibrant-js"><a href="#3-vibrant-js" class="headerlink" title="3.vibrant.js"></a>3.vibrant.js</h2><p><a href="https://github.com/jariz/vibrant.js/">github地址</a> 从图像中提取突出的颜色。</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">const</span> img = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;img&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> vibrant = <span class="keyword">new</span> <span class="title class_">Vibrant</span>(img);</span><br><span class="line"><span class="keyword">var</span> swatches = vibrant.<span class="title function_">swatches</span>()</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> swatch <span class="keyword">in</span> swatches)</span><br><span class="line">    <span class="keyword">if</span> (swatches.<span class="title function_">hasOwnProperty</span>(swatch) &amp;&amp; swatches[swatch])</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(swatch, swatches[swatch].<span class="title function_">getHex</span>())</span><br></pre></td></tr></table></figure><p>rgbaster 提取出来的颜色最接近了，不过在项目中测试有些情况偏差有点远。而 vibrant.js 主要还是着重于把图片的颜色提取出来分类，结果分为暗色、亮色、突出色之类，提取主题色还是 rgbaster 好使。</p><p>注意： 这三款插件均是利用把图片绘入canvas获取图片数据，如果不是同源图片将无法使用</p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://juejin.cn/post/6844903511956815885">《主题色提取》 - 掘金</a></p>]]></content>
    
    
    <summary type="html">图像识别,根据封面图主色调更改博客主题颜色</summary>
    
    
    
    <category term="Butterfly魔改" scheme="https://realwds.com/categories/Butterfly%E9%AD%94%E6%94%B9/"/>
    
    
    <category term="butterfly" scheme="https://realwds.com/tags/butterfly/"/>
    
    <category term="图像识别" scheme="https://realwds.com/tags/%E5%9B%BE%E5%83%8F%E8%AF%86%E5%88%AB/"/>
    
    <category term="精选" scheme="https://realwds.com/tags/%E7%B2%BE%E9%80%89/"/>
    
  </entry>
  
  <entry>
    <title>youtube 视频下载神器（youtube-dl）</title>
    <link href="https://realwds.com/posts/cc427180.html"/>
    <id>https://realwds.com/posts/cc427180.html</id>
    <published>2021-05-15T15:03:18.000Z</published>
    <updated>2024-07-20T06:49:13.131Z</updated>
    
    <content type="html"><![CDATA[<p>youtube-dl 是一个命令行程序，可以从 YouTube.com 和其他一些网站一样下载视频。它需要 2.6、2.7 或 3.2+ 版本的 Python 解释器，并且它不是特定于平台的。它应该可以在您的 Unix 机器，Windows 或 macOS 上运行。它已发布到公共领域，这意味着您可以随意修改，重新分发或使用它。</p><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># macOS 系统：</span></span><br><span class="line">brew install youtube-dl</span><br><span class="line"></span><br><span class="line"><span class="comment"># windows 系统：</span></span><br><span class="line">scoop install youtube-dl</span><br></pre></td></tr></table></figure><h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># 使用</span></span><br><span class="line">youtube-dl [OPTIONS] URL [URL...]</span><br><span class="line"></span><br><span class="line"><span class="comment"># 无选项，直接下载视频，默认是最高清晰度，如：</span></span><br><span class="line">youtube-dl https://www.youtube.com/watch?v=-wNyEUrxzFU</span><br><span class="line"></span><br><span class="line"><span class="comment">#-i 选项，仅显示信息但不下载，如：</span></span><br><span class="line">youtube-dl -i https://www.youtube.com/watch?v=-wNyEUrxzFU</span><br><span class="line"></span><br><span class="line"><span class="comment"># 更多选项，，可以运行以下命令查看</span></span><br><span class="line">youtube-dl -<span class="built_in">help</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 下载中文字幕带视频（前提视频包含中文字幕）</span></span><br><span class="line">youtube-dl --sub-lang zh-Hans --write-auto-sub https://www.youtube.com/watch?v=DpETCg3YquA</span><br></pre></td></tr></table></figure><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://github.com/ytdl-org/youtube-dl">《 youtube-dl 》 - GitHub</a></p>]]></content>
    
    
    <summary type="html">youtube 油管下载高清视频，可带字幕。</summary>
    
    
    
    <category term="工具相关" scheme="https://realwds.com/categories/%E5%B7%A5%E5%85%B7%E7%9B%B8%E5%85%B3/"/>
    
    
    <category term="油管" scheme="https://realwds.com/tags/%E6%B2%B9%E7%AE%A1/"/>
    
    <category term="youtube" scheme="https://realwds.com/tags/youtube/"/>
    
    <category term="下载" scheme="https://realwds.com/tags/%E4%B8%8B%E8%BD%BD/"/>
    
  </entry>
  
  <entry>
    <title>miniprogram+GitLab CI/CD 实现微信小程序代码自动上传</title>
    <link href="https://realwds.com/posts/7d6b9bff.html"/>
    <id>https://realwds.com/posts/7d6b9bff.html</id>
    <published>2021-05-15T01:55:12.000Z</published>
    <updated>2024-07-20T06:49:13.123Z</updated>
    
    <content type="html"><![CDATA[<p>利用 GitLab CI&#x2F;CD 持续集成，并结合微信小程序 miniprogram-ci 编译模块，实现代码自动上传，解决了平时要通过微信开发者工具手动上传的痛点。</p><h2 id="代码编写"><a href="#代码编写" class="headerlink" title="代码编写"></a>代码编写</h2><h3 id="miniprogram-ci"><a href="#miniprogram-ci" class="headerlink" title="miniprogram-ci"></a>miniprogram-ci</h3><p>miniprogram-ci 是从微信开发者工具中抽离的关于小程序&#x2F;小游戏项目代码的编译模块。<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html">官方地址文档地址</a></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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> ci = <span class="built_in">require</span>(<span class="string">&#x27;miniprogram-ci&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> version = process.<span class="property">argv</span>.<span class="title function_">slice</span>(<span class="number">2</span>)[<span class="number">0</span>] <span class="comment">//接收命令行传入版本参数</span></span><br><span class="line"><span class="keyword">let</span> desc = process.<span class="property">argv</span>.<span class="title function_">slice</span>(<span class="number">3</span>)[<span class="number">0</span>] <span class="comment">//接收命令行传入描述参数</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (!version) version = <span class="string">&#x27;v1.0.0&#x27;</span></span><br><span class="line"><span class="keyword">if</span> (!desc) desc = <span class="keyword">new</span> <span class="title class_">Date</span>() + <span class="string">&#x27;Robot上传&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> project = <span class="keyword">new</span> ci.<span class="title class_">Project</span>(&#123;</span><br><span class="line">  <span class="attr">appid</span>: <span class="string">&#x27;******&#x27;</span>, <span class="comment">//你的APPID</span></span><br><span class="line">  <span class="attr">type</span>: <span class="string">&#x27;miniProgram&#x27;</span>,</span><br><span class="line">  <span class="attr">projectPath</span>: process.<span class="title function_">cwd</span>() + <span class="string">&#x27;/dist/build/mp-weixin&#x27;</span>, <span class="comment">//项目路径</span></span><br><span class="line">  <span class="attr">privateKeyPath</span>: <span class="string">&#x27;/app/mall/private.******.key&#x27;</span>, <span class="comment">//私钥的路径</span></span><br><span class="line">  <span class="attr">ignores</span>: [<span class="string">&#x27;node_modules/**/*&#x27;</span>],</span><br><span class="line">&#125;)</span><br><span class="line">ci.<span class="title function_">upload</span>(&#123;</span><br><span class="line">  project,</span><br><span class="line">  version,</span><br><span class="line">  desc,</span><br><span class="line">  <span class="attr">setting</span>: &#123;</span><br><span class="line">    <span class="attr">es6</span>: <span class="literal">true</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;上传成功&#x27;</span>)</span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (error.<span class="property">errCode</span> == -<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;上传成功&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(error)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;上传失败&#x27;</span>)</span><br><span class="line">  process.<span class="title function_">exit</span>(-<span class="number">1</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h3 id="gitlab-ci"><a href="#gitlab-ci" class="headerlink" title="gitlab-ci"></a>gitlab-ci</h3><p>gitlab-ci 是 git 官方提供的的自动化部署持续集成工具。</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></pre></td><td class="code"><pre><span class="line"><span class="attr">before_script:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">date</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">npm</span> <span class="string">-v</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">node</span> <span class="string">-v</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">npm</span> <span class="string">install</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">cp</span> <span class="string">.env.example</span> <span class="string">.env</span></span><br><span class="line"></span><br><span class="line"><span class="attr">after_script:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">date</span></span><br><span class="line">  </span><br><span class="line"><span class="attr">stages:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">deploy</span></span><br><span class="line"></span><br><span class="line"><span class="attr">cache:</span></span><br><span class="line">  <span class="attr">paths:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">./node_modules</span></span><br><span class="line"></span><br><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="attr">stage:</span> <span class="string">deploy</span></span><br><span class="line">  <span class="attr">except:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">tags</span></span><br><span class="line">  <span class="attr">script:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">npm</span> <span class="string">run</span> <span class="string">build</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">VERSION=`node</span> <span class="string">-p</span> <span class="string">&quot;require(&#x27;./package.json&#x27;).version&quot;</span><span class="string">`</span> <span class="comment">#获取package.json版本号</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">DESCRIPTION=`git</span> <span class="string">log</span> <span class="number">-1</span> <span class="string">--pretty=format:%s`</span> <span class="comment">#获取最近一次git提交信息</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">node</span> <span class="string">./tool/upload.js</span> <span class="string">$VERSION</span> <span class="string">$DESCRIPTION</span>  <span class="comment">#执行</span></span><br><span class="line"></span><br><span class="line"><span class="attr">production:</span></span><br><span class="line">  <span class="attr">stage:</span> <span class="string">deploy</span></span><br><span class="line">  <span class="attr">only:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">tags</span></span><br><span class="line">  <span class="attr">script:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">npm</span> <span class="string">run</span> <span class="string">build</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">DESCRIPTION=`git</span> <span class="string">log</span> <span class="number">-1</span> <span class="string">--pretty=format:%s`</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">node</span> <span class="string">./tool/upload.js</span> <span class="string">$CI_BUILD_TAG</span> <span class="string">$DESCRIPTION</span> </span><br></pre></td></tr></table></figure>]]></content>
    
    
    <summary type="html">miniprogram+GitLab CI/CD 持续集成实现微信小程序代码自动上传</summary>
    
    
    
    <category term="Git相关" scheme="https://realwds.com/categories/Git%E7%9B%B8%E5%85%B3/"/>
    
    
    <category term="精选" scheme="https://realwds.com/tags/%E7%B2%BE%E9%80%89/"/>
    
    <category term="小程序" scheme="https://realwds.com/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
    
    <category term="GitLab" scheme="https://realwds.com/tags/GitLab/"/>
    
    <category term="持续集成" scheme="https://realwds.com/tags/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/"/>
    
    <category term="CI/CD" scheme="https://realwds.com/tags/CI-CD/"/>
    
  </entry>
  
  <entry>
    <title>GitHub Action 将构建产物自动推送到另一个仓库</title>
    <link href="https://realwds.com/posts/a3cc0a75.html"/>
    <id>https://realwds.com/posts/a3cc0a75.html</id>
    <published>2021-05-14T13:32:31.000Z</published>
    <updated>2024-07-20T06:49:13.125Z</updated>
    
    <content type="html"><![CDATA[<p>有一个自有的私密仓库，我不想让别人看到源代码，只是想把产物展示出来。从而想到用 GitHub Action 的 CI&#x2F;CD 持续集成，将产物自动推动到另一个仓库。</p><h2 id="编写代码"><a href="#编写代码" class="headerlink" title="编写代码"></a>编写代码</h2><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></pre></td><td class="code"><pre><span class="line"><span class="attr">name:</span> <span class="string">Deploy</span> <span class="string">to</span> <span class="string">GitHub</span> <span class="string">Pages</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="attr">jobs:</span></span><br><span class="line">  <span class="attr">deploy:</span></span><br><span class="line">    <span class="attr">name:</span> <span class="string">Deploy</span> <span class="string">to</span> <span class="string">GitHub</span> <span class="string">Pages</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@master</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Use</span> <span class="string">Node.js</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="number">10.</span><span class="string">x</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">npm</span> <span class="string">install</span> <span class="string">and</span> <span class="string">build</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</span></span><br><span class="line"><span class="string">        npm run build</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><br><span class="line">      <span class="attr">uses:</span> <span class="string">s0/git-publish-subdir-action@develop</span></span><br><span class="line">      <span class="attr">env:</span></span><br><span class="line">        <span class="attr">REPO:</span> <span class="string">git@github.com:owner/repo.git</span></span><br><span class="line">        <span class="attr">BRANCH:</span> <span class="string">gh-pages</span></span><br><span class="line">        <span class="attr">FOLDER:</span> <span class="string">build</span></span><br><span class="line">        <span class="attr">SSH_PRIVATE_KEY:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.DEPLOY_PRIVATE_KEY</span> <span class="string">&#125;&#125;</span></span><br></pre></td></tr></table></figure><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://github.com/s0/git-publish-subdir-action">《 git-publish-subdir-action 》 - GitHub</a></p>]]></content>
    
    
    <summary type="html">GitHub Action 利用 CI/CD 持续集成，将产物自动推动到另一个仓库。</summary>
    
    
    
    <category term="Git相关" scheme="https://realwds.com/categories/Git%E7%9B%B8%E5%85%B3/"/>
    
    
    <category term="持续集成" scheme="https://realwds.com/tags/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/"/>
    
    <category term="CI/CD" scheme="https://realwds.com/tags/CI-CD/"/>
    
    <category term="GitHub" scheme="https://realwds.com/tags/GitHub/"/>
    
  </entry>
  
  <entry>
    <title>GitHub Action 三合一网站部署</title>
    <link href="https://realwds.com/posts/4b365e6c.html"/>
    <id>https://realwds.com/posts/4b365e6c.html</id>
    <published>2021-05-14T13:04:15.000Z</published>
    <updated>2024-07-20T06:49:13.124Z</updated>
    
    <content type="html"><![CDATA[<p>在 github 一端提交代码，代码自动提交到 github、gitlab、gitee 平台。并自动部署到对应的 git page 上，主要利用 github action 的持续集成。</p><h2 id="注册账号"><a href="#注册账号" class="headerlink" title="注册账号"></a>注册账号</h2><p>首先注册三个平台的账号，最好用户名相同。</p><h2 id="获取私人令牌"><a href="#获取私人令牌" class="headerlink" title="获取私人令牌"></a>获取私人令牌</h2><p>在三个平台分别得到私人令牌，添加到新建仓库的 Actions secrets 中。</p><ul><li>github 私人令牌获取方法，点开右上角头像。setting &#x3D;&gt; Developer settings &#x3D;&gt; Personal access tokens</li><li>gitee 私人令牌获取方法，点开右上角头像。设置 &#x3D;&gt; 私人令牌</li><li>gitlab 私人令牌获取方法，点开右上角头像。Preferences &#x3D;&gt; 访问令牌</li></ul><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/3d9e5d49d1ef49fdbf3e482fb5c50c9c.76le68kg3hs0.62vsm3idncg0.png" alt="获取私人令牌"></p><h2 id="新建-github-仓库"><a href="#新建-github-仓库" class="headerlink" title="新建 github 仓库"></a>新建 github 仓库</h2><p>在代码根目录新建 .github 文件夹，在 .github 目录中新建 workflows 文件夹。在 workflows 目录中新建以下文件，可以任意命名。</p><h3 id="GitHub-Action-自动部署到-GitHub-Page"><a href="#GitHub-Action-自动部署到-GitHub-Page" class="headerlink" title="GitHub Action 自动部署到 GitHub Page"></a>GitHub Action 自动部署到 GitHub Page</h3><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">DEPLOY</span> <span class="string">CI</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="attr">jobs:</span></span><br><span class="line">  <span class="attr">build-and-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">Checkout</span></span><br><span class="line">      <span class="attr">uses:</span> <span class="string">actions/checkout@master</span></span><br><span class="line"></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Build</span> <span class="string">and</span> <span class="string">Deploy</span></span><br><span class="line">      <span class="attr">uses:</span> <span class="string">JamesIves/github-pages-deploy-action@master</span></span><br><span class="line">      <span class="attr">env:</span></span><br><span class="line">        <span class="attr">ACCESS_TOKEN:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.ACCESS_TOKEN</span> <span class="string">&#125;&#125;</span></span><br><span class="line">        <span class="attr">BRANCH:</span> <span class="string">gh-pages</span></span><br><span class="line">        <span class="attr">FOLDER:</span> <span class="string">docs/.vuepress/dist</span></span><br><span class="line">        <span class="attr">BUILD_SCRIPT:</span> <span class="string">npm</span> <span class="string">install</span> <span class="string">&amp;&amp;</span> <span class="string">npm</span> <span class="string">run</span> <span class="string">build</span></span><br></pre></td></tr></table></figure><h3 id="GitHub-Action-自动部署到-Gitee-GitLab"><a href="#GitHub-Action-自动部署到-Gitee-GitLab" class="headerlink" title="GitHub Action 自动部署到 Gitee &amp; GitLab"></a>GitHub Action 自动部署到 Gitee &amp; GitLab</h3><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="attr">name:</span> <span class="string">MIRROR</span> <span class="string">CI</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="attr">jobs:</span></span><br><span class="line">  <span class="attr">mirror_to_gitee:</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">&#x27;Checkout&#x27;</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">actions/checkout@v1</span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Mirror to gitee&#x27;</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">pixta-dev/repository-mirroring-action@v1</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">target_repo_url:</span></span><br><span class="line">            <span class="string">git@gitee.com:tsund/test.git</span></span><br><span class="line">          <span class="attr">ssh_private_key:</span></span><br><span class="line">            <span class="string">$&#123;&#123;</span> <span class="string">secrets.GITEE_KEY</span> <span class="string">&#125;&#125;</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">mirror_to_gitlab:</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">&#x27;Checkout&#x27;</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">actions/checkout@v1</span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&#x27;Mirror to gitlab&#x27;</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">pixta-dev/repository-mirroring-action@v1</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">target_repo_url:</span></span><br><span class="line">            <span class="string">git@gitlab.com:tsund/test.git</span></span><br><span class="line">          <span class="attr">ssh_private_key:</span></span><br><span class="line">            <span class="string">$&#123;&#123;</span> <span class="string">secrets.GITLAB_KEY</span> <span class="string">&#125;&#125;</span></span><br></pre></td></tr></table></figure><h3 id="在代码根目录新建-gitlab-ci-yml-文件"><a href="#在代码根目录新建-gitlab-ci-yml-文件" class="headerlink" title="在代码根目录新建 .gitlab-ci.yml 文件"></a>在代码根目录新建 .gitlab-ci.yml 文件</h3><p>此文件是 gitlab CI&#x2F;CD 操作文件</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="attr">image:</span> <span class="string">node:12.6.0</span></span><br><span class="line"></span><br><span class="line"><span class="attr">pages:</span></span><br><span class="line"> <span class="attr">cache:</span></span><br><span class="line">   <span class="attr">paths:</span></span><br><span class="line">   <span class="bullet">-</span> <span class="string">node_modules/</span></span><br><span class="line"></span><br><span class="line"> <span class="attr">script:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">npm</span> <span class="string">install</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">npm</span> <span class="string">run</span> <span class="string">build</span></span><br><span class="line"> <span class="attr">artifacts:</span></span><br><span class="line">   <span class="attr">paths:</span></span><br><span class="line">   <span class="bullet">-</span> <span class="string">public</span></span><br><span class="line"> <span class="attr">only:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">master</span></span><br></pre></td></tr></table></figure><h2 id="大功告成"><a href="#大功告成" class="headerlink" title="大功告成"></a>大功告成</h2><p>github 提交代码，到仓库的 Actions 即可查看正在持续集成。</p>]]></content>
    
    
    <summary type="html">GitHub Action 利用 CI/CD 持续集成，自动部署到 github、gitlab、gitee 平台</summary>
    
    
    
    <category term="Git相关" scheme="https://realwds.com/categories/Git%E7%9B%B8%E5%85%B3/"/>
    
    
    <category term="持续集成" scheme="https://realwds.com/tags/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/"/>
    
    <category term="CI/CD" scheme="https://realwds.com/tags/CI-CD/"/>
    
    <category term="GitHub" scheme="https://realwds.com/tags/GitHub/"/>
    
  </entry>
  
  <entry>
    <title>GitHub Action 自动构建并发布项目</title>
    <link href="https://realwds.com/posts/3b154c4f.html"/>
    <id>https://realwds.com/posts/3b154c4f.html</id>
    <published>2021-05-14T12:32:31.000Z</published>
    <updated>2024-07-20T06:49:13.122Z</updated>
    
    <content type="html"><![CDATA[<p>GitHub Action 利用 CI&#x2F;CD 持续集成，自动构建并发布项目</p><h2 id="编写代码"><a href="#编写代码" class="headerlink" title="编写代码"></a>编写代码</h2><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="attr">name:</span> <span class="string">DEPLOY</span> <span class="string">CI</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="attr">jobs:</span></span><br><span class="line">  <span class="attr">build_and_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">Checkout</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">actions/checkout@v2</span></span><br><span class="line"></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Install</span> <span class="string">dependencies</span></span><br><span class="line">        <span class="attr">run:</span> <span class="string">sudo</span> <span class="string">npm</span> <span class="string">install</span> <span class="string">hexo-cli</span> <span class="string">-g</span> <span class="string">&amp;&amp;</span> <span class="string">npm</span> <span class="string">install</span> <span class="string">&amp;&amp;</span> <span class="string">hexo</span> <span class="string">clean</span> <span class="string">&amp;&amp;</span> <span class="string">hexo</span> <span class="string">s</span></span><br><span class="line">        </span><br><span class="line">      <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Build</span> <span class="string">and</span> <span class="string">Deploy</span></span><br><span class="line">        <span class="attr">uses:</span> <span class="string">JamesIves/github-pages-deploy-action@4.0.0</span></span><br><span class="line">        <span class="attr">with:</span></span><br><span class="line">          <span class="attr">GITHUB_TOKEN:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.ACCESS_TOKEN</span> <span class="string">&#125;&#125;</span></span><br><span class="line">          <span class="attr">BRANCH:</span> <span class="string">gh-pages</span> <span class="comment"># The branch the action should deploy to.</span></span><br><span class="line">          <span class="attr">FOLDER:</span> <span class="string">public</span> <span class="comment"># The folder the action should deploy.</span></span><br><span class="line">          <span class="attr">CLEAN:</span> <span class="literal">true</span> <span class="comment"># Automatically remove deleted files from the deploy branch</span></span><br></pre></td></tr></table></figure>]]></content>
    
    
    <summary type="html">GitHub Action 利用 CI/CD 持续集成，自动构建并发布项目。</summary>
    
    
    
    <category term="Git相关" scheme="https://realwds.com/categories/Git%E7%9B%B8%E5%85%B3/"/>
    
    
    <category term="持续集成" scheme="https://realwds.com/tags/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/"/>
    
    <category term="CI/CD" scheme="https://realwds.com/tags/CI-CD/"/>
    
    <category term="GitHub" scheme="https://realwds.com/tags/GitHub/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 主题 404 页面增加最近文章</title>
    <link href="https://realwds.com/posts/2c9bc301.html"/>
    <id>https://realwds.com/posts/2c9bc301.html</id>
    <published>2021-05-13T09:08:31.000Z</published>
    <updated>2024-07-20T06:49:13.115Z</updated>
    
    <content type="html"><![CDATA[<p>页面有时候会时效或者用户输入不存在的 url 地址，那么网站就会出现无法访问，也就是 404。butterfly 主题存在 404 页面处理，但是过于简单，参考张洪大佬的网站，可以给 404 页面加上最近文章的展示，从而增强用户观感和粘性。</p><h2 id="修改主题"><a href="#修改主题" class="headerlink" title="修改主题"></a>修改主题</h2><p>文件地址：<code>themes/butterfly/layout/404.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><span class="line">4</span><br><span class="line">5</span><br><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></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(&#x27;$&#123;url_for(top_img)&#125;&#x27;)`</span><br><span class="line"></span><br><span class="line">doctype html</span><br><span class="line">html(lang=config.language data-theme=theme.display_mode)</span><br><span class="line">  head</span><br><span class="line">    include includes/head.pug</span><br><span class="line">  body</span><br><span class="line">    if theme.preloader</span><br><span class="line">      !=partial(&#x27;includes/loading/loading&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span><br><span class="line"></span><br><span class="line">    if theme.fireworks &amp;&amp; theme.fireworks.enable</span><br><span class="line">      canvas.fireworks</span><br><span class="line">    </span><br><span class="line">    if theme.background</span><br><span class="line">      #web_bg</span><br><span class="line"></span><br><span class="line">    #error-wrap</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= &#x27;404&#x27;</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(&#x27;error404.back_button&#x27;)</span><br><span class="line"></span><br><span class="line">    .aside-list-404</span><br><span class="line">      .aside-list-group</span><br><span class="line">        - let postLimit = theme.aside.card_recent_post.limit === 0 ? site.posts.length : theme.aside.card_recent_post.limit || 5</span><br><span class="line">        - let sort = theme.aside.card_recent_post.sort === &#x27;updated&#x27; ? &#x27;updated&#x27; : &#x27;date&#x27;</span><br><span class="line">        - site.posts.sort(sort, -1).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(&#x27;no_title&#x27;)</span><br><span class="line">          - let no_cover = article.cover === false || !theme.cover.aside_enable ? &#x27;no-cover&#x27; : &#x27;&#x27;</span><br><span class="line">          - let post_cover = article.cover</span><br><span class="line">          .aside-list-item(class=no_cover)</span><br><span class="line">            if 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=&#x27;$&#123;url_for(theme.error_img.post_page)&#125;&#x27;` 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">              if theme.aside.card_recent_post.sort === &#x27;updated&#x27;</span><br><span class="line">                time(datetime=date_xml(article.updated) title=_p(&#x27;post.updated&#x27;) + &#x27; &#x27; + full_date(article.updated)) #[=date(article.updated, config.date_format)]</span><br><span class="line">              else</span><br><span class="line">                time(datetime=date_xml(article.date) title=_p(&#x27;post.created&#x27;) + &#x27; &#x27; + full_date(article.date)) #[=date(article.date, config.date_format)]</span><br><span class="line">        - &#125;)</span><br><span class="line">          </span><br><span class="line">    include includes/additional-js.pug</span><br></pre></td></tr></table></figure><h2 id="引入-css"><a href="#引入-css" class="headerlink" title="引入 css"></a>引入 css</h2><p>新建一个 css 文件，然后再 butterfly 主题下的 _config.yml 文件中 inject 引入该文件</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-id">#error-wrap</span>&#123;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">40%</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_title</span>&#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: -<span class="number">3rem</span><span class="meta">!important</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>&#123;</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">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--hassan-card-bg)<span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aside-list-404</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">0</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 class="selector-class">.aside-list-404</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 class="selector-class">.aside-list-404</span> <span class="selector-class">.aside-list-item</span>&#123;</span><br><span class="line">  <span class="attribute">padding</span>: .<span class="number">5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aside-list-404</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">transition</span>: .<span class="number">3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aside-list-404</span> <span class="selector-class">.aside-list-item</span> <span class="selector-tag">img</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.1</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aside-list-404</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">display</span>: flex;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">var</span>(--wds-card-bg);</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-class">.aside-list-404</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-<span class="selector-tag">line</span>-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-<span class="attribute">box-orient</span>: 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">5rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.aside-list-404</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 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">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="大功告成"><a href="#大功告成" class="headerlink" title="大功告成"></a>大功告成</h2><p><a href="/404/">DEMO 查看</a></p><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://blog.zhheo.com/p/f48e518b.html">《Butterfly魔改：404页面展示最近文章》 - 张洪Heo</a></p>]]></content>
    
    
    <summary type="html">页面有时候会时效或者用户输入不存在的 url 地址，那么网站就会出现无法访问，也就是 404。Butterfly 主题 404 页面增加最近文章</summary>
    
    
    
    <category term="Butterfly魔改" scheme="https://realwds.com/categories/Butterfly%E9%AD%94%E6%94%B9/"/>
    
    
    <category term="Hexo" scheme="https://realwds.com/tags/Hexo/"/>
    
    <category term="butterfly" scheme="https://realwds.com/tags/butterfly/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 主题自定义首页文章卡片高度</title>
    <link href="https://realwds.com/posts/48bb9713.html"/>
    <id>https://realwds.com/posts/48bb9713.html</id>
    <published>2021-05-12T00:58:31.000Z</published>
    <updated>2024-07-20T06:49:13.117Z</updated>
    
    <content type="html"><![CDATA[<p>列表如果都是统一的样式、高度未免有些过于单调和重重复。在一些关键性文章中加一些特殊的样式也是我们常用的举措，例如文章置顶。但是文章置顶多了就会看不见新文章，置顶折叠展示的力度又不够。所以对于有特殊意义的文章展示特殊的效果是非常必要的，丰富层次。</p><p>这个文章的核心思路就是给文章的 markdown 文件里添加一个 <code>large</code> 参数，当 <code>large=true</code> 时，则文章会添加一个 class。然后针对这个 class 进行 css 的调整。让我们开始吧。</p><h2 id="修改主题"><a href="#修改主题" class="headerlink" title="修改主题"></a>修改主题</h2><p>文件地址：<code>themes/butterfly/layout/includes/mixins/post-ui.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">mixin postUI(posts)</span><br><span class="line">  each article , index in page.posts.data</span><br><span class="line">    if article.hide !== true</span><br><span class="line"><span class="deletion">-    .recent-post-item</span></span><br><span class="line"><span class="addition">+      .recent-post-item(class= (article.large === true) ? &#x27;post-card-large&#x27; : &#x27;&#x27;)</span></span><br></pre></td></tr></table></figure><h2 id="修改-css"><a href="#修改-css" class="headerlink" title="修改 css"></a>修改 css</h2><p>新建一个 css 文件，然后再 butterfly 主题下的 _config.yml 文件中 inject 引入该文件</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></pre></td><td class="code"><pre><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-id">#recent-posts</span>&gt;<span class="selector-class">.post-card-large</span> &#123;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">16em</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">#recent-posts</span> &gt; <span class="selector-class">.post-card-large</span> &gt;<span class="selector-class">.recent-post-info</span> &gt; <span class="selector-class">.content</span>&#123;</span><br><span class="line">    -webkit-<span class="selector-tag">line</span>-clamp: <span class="number">3</span><span class="meta">!important</span>;</span><br><span class="line">    <span class="attribute">opacity</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">#recent-posts</span> &gt; <span class="selector-class">.post-card-large</span><span class="selector-pseudo">:hover</span> &gt;<span class="selector-class">.recent-post-info</span> &gt; <span class="selector-class">.content</span> &#123;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">    -webkit-<span class="selector-tag">line</span>-clamp: <span class="number">5</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></pre></td></tr></table></figure><h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><p><a href="https://blog.zhheo.com/p/77ebd8b5.html">《基于Hexo的Butterfly下自定义指定首页文章卡片高度》 - 张洪Heo</a></p>]]></content>
    
    
    <summary type="html">Butterfly 主题自定义首页文章卡片高度</summary>
    
    
    
    <category term="Butterfly魔改" scheme="https://realwds.com/categories/Butterfly%E9%AD%94%E6%94%B9/"/>
    
    
    <category term="Hexo" scheme="https://realwds.com/tags/Hexo/"/>
    
    <category term="butterfly" scheme="https://realwds.com/tags/butterfly/"/>
    
  </entry>
  
  <entry>
    <title>滚动条在不滚动时自动隐藏，滚动时自动显示</title>
    <link href="https://realwds.com/posts/9ba9e3aa.html"/>
    <id>https://realwds.com/posts/9ba9e3aa.html</id>
    <published>2021-05-10T00:58:31.000Z</published>
    <updated>2024-07-20T06:49:13.119Z</updated>
    
    <content type="html"><![CDATA[<div class="note red no-icon flat"><p>影响页面流畅度，本博客主题已弃用</p></div><h2 id="引入-css"><a href="#引入-css" class="headerlink" title="引入 css"></a>引入 css</h2><p>新建一个 css 文件，然后再 butterfly 主题下的 _config.yml 文件中 inject 引入该文件</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></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 滚动条 */</span></span><br><span class="line">*::-webkit-scrollbar&#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">8px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">8px</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</span>: <span class="built_in">var</span>(gray);</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">8px</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">*::-webkit-scrollbar-thumb:hover&#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">  <span class="attribute">display</span>: block<span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">*::-webkit-scrollbar-track&#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="selector-tag">html</span> &#123;</span><br><span class="line">  <span class="attribute">overflow-y</span>: overlay;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="引入-js"><a href="#引入-js" class="headerlink" title="引入 js"></a>引入 js</h2><p>新建一个 js 文件，然后再 butterfly 主题下的 _config.yml 文件中 inject 引入该文件</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></pre></td><td class="code"><pre><span class="line"><span class="comment">//滚动条自动隐藏</span></span><br><span class="line"><span class="keyword">var</span> t1 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> t2 = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> timer = <span class="literal">null</span>; </span><br><span class="line"><span class="variable language_">document</span>.<span class="property">styleSheets</span>[<span class="number">0</span>].<span class="title function_">addRule</span>(<span class="string">&#x27;*::-webkit-scrollbar-thumb&#x27;</span>,<span class="string">&#x27;display:none;&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// scroll监听</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">onscroll</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="built_in">clearTimeout</span>(timer);</span><br><span class="line">  timer = <span class="built_in">setTimeout</span>(isScrollEnd, <span class="number">1000</span>);</span><br><span class="line">  t1 = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollTop</span>;</span><br><span class="line">  <span class="variable language_">document</span>.<span class="property">styleSheets</span>[<span class="number">0</span>].<span class="title function_">addRule</span>(<span class="string">&#x27;*::-webkit-scrollbar-thumb&#x27;</span>,<span class="string">&#x27;display:block;&#x27;</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_">isScrollEnd</span>(<span class="params"></span>) &#123;</span><br><span class="line">  t2 = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollTop</span>;</span><br><span class="line">  <span class="keyword">if</span>(t2 == t1)&#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">styleSheets</span>[<span class="number">0</span>].<span class="title function_">addRule</span>(<span class="string">&#x27;*::-webkit-scrollbar-thumb&#x27;</span>,<span class="string">&#x27;display:none;&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
    
    
      
      
    <summary type="html">&lt;div class=&quot;note red no-icon flat&quot;&gt;&lt;p&gt;影响页面流畅度，本博客主题已弃用&lt;/p&gt;
&lt;/div&gt;


&lt;h2 id=&quot;引入-css&quot;&gt;&lt;a href=&quot;#引入-css&quot; class=&quot;headerlink&quot; title=&quot;引入 css&quot;&gt;&lt;/a&gt;</summary>
      
    
    
    
    <category term="Butterfly魔改" scheme="https://realwds.com/categories/Butterfly%E9%AD%94%E6%94%B9/"/>
    
    
    <category term="Hexo" scheme="https://realwds.com/tags/Hexo/"/>
    
    <category term="butterfly" scheme="https://realwds.com/tags/butterfly/"/>
    
  </entry>
  
  <entry>
    <title>给页面增加顶部加载进度条</title>
    <link href="https://realwds.com/posts/d75f3505.html"/>
    <id>https://realwds.com/posts/d75f3505.html</id>
    <published>2021-05-09T00:58:31.000Z</published>
    <updated>2024-07-20T06:49:13.121Z</updated>
    
    <content type="html"><![CDATA[<p>Pace 将自动监视您的 Ajax 请求，事件循环滞后，文档就绪状态以及页面上的元素，以决定进度。</p><p>如果使用 AMD 或 Browserify，则需要 step.js 并 <code>pace.start()</code> 在加载过程中尽早进行调用。</p><h2 id="Pace-主题"><a href="#Pace-主题" class="headerlink" title="Pace 主题"></a>Pace 主题</h2><ul><li><p>GitHub 地址：<a href="https://github.com/CodeByZach/pace">前往查看</a></p></li><li><p>加载样式：<a href="https://codebyzach.github.io/pace/">前往查看</a></p></li></ul><h2 id="主题使用"><a href="#主题使用" class="headerlink" title="主题使用"></a>主题使用</h2><p>在主题下的 _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><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="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="string">...</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;/realwds/realwds.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="string">...</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;https://fastly.jsdelivr.net/gh/CodeByZach/pace@1.2.3/pace.min.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p>在 realwds.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></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-<span class="attribute">user-select</span>: none;</span><br><span class="line">  -moz-<span class="attribute">user-select</span>: none;</span><br><span class="line">  <span class="attribute">user-select</span>: none</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">3s</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-progress</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#4584ff</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">2000</span>;</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">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">3px</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
    
    
    <summary type="html">利用 Pace 给页面增加顶部加载进度条</summary>
    
    
    
    <category term="Butterfly魔改" scheme="https://realwds.com/categories/Butterfly%E9%AD%94%E6%94%B9/"/>
    
    
    <category term="Hexo" scheme="https://realwds.com/tags/Hexo/"/>
    
    <category term="butterfly" scheme="https://realwds.com/tags/butterfly/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 主题常用标签外挂</title>
    <link href="https://realwds.com/posts/b8a0d4e7.html"/>
    <id>https://realwds.com/posts/b8a0d4e7.html</id>
    <published>2021-05-08T00:58:31.000Z</published>
    <updated>2025-04-03T08:58:13.668Z</updated>
    
    <content type="html"><![CDATA[<p>简单精美的图标样式会为博文增色不少，以下是我在博文中常用的 Butterfly 主题标签外挂。</p><h2 id="引用-node"><a href="#引用-node" class="headerlink" title="引用 node"></a>引用 node</h2><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 blue no-icon %&#125;&#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;&#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><div class="note no-icon flat"><p>数学系的挨踢者</p></div><div class="note blue no-icon flat"><p>数学系的挨踢者</p></div><h2 id="时间轴-Timeline"><a href="#时间轴-Timeline" class="headerlink" title="时间轴 Timeline"></a>时间轴 Timeline</h2><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;% timeline %&#125;</span><br><span class="line">&#123;% timenode 2014-9 %&#125;</span><br><span class="line">进入大学校门</span><br><span class="line">&#123;% endtimenode %&#125;</span><br><span class="line">&#123;% timenode 2018-6 %&#125;</span><br><span class="line">离开大学，步入社会</span><br><span class="line">&#123;% endtimenode %&#125;</span><br><span class="line">&#123;% timenode 2021-5 %&#125;</span><br><span class="line">博客搭建成功</span><br><span class="line">&#123;% endtimenode %&#125;</span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><div class="timeline"><div class="timenode"><div class="meta"><p><p>2014-9</p></p></div><div class="body"><p>进入大学校门</p></div></div><div class="timenode"><div class="meta"><p><p>2018-6</p></p></div><div class="body"><p>离开大学，步入社会</p></div></div><div class="timenode"><div class="meta"><p><p>2021-5</p></p></div><div class="body"><p>博客搭建成功</p></div></div></div><h2 id="链接卡片-Link"><a href="#链接卡片-Link" class="headerlink" title="链接卡片 Link"></a>链接卡片 Link</h2><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 &lt;链接名&gt;, &lt;链接地址&gt;, &lt;链接图像&gt; %&#125;</span><br></pre></td></tr></table></figure><div class="tag link"><a class="link-card" title="realwds" href="https://realwds.com"><div class="left"><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/img/20210115180321.png"/></div><div class="right"><p class="text">realwds</p><p class="url">https://realwds.com</p></div></a></div><h2 id="行内图片-Inline-Image"><a href="#行内图片-Inline-Image" class="headerlink" title="行内图片 Inline Image"></a>行内图片 Inline Image</h2><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">&lt;文字&gt; &#123;% inlineimage &lt;图片链接&gt; %&#125; &lt;文字&gt;</span><br></pre></td></tr></table></figure><p>数学系的挨踢者<img no-lazy class="inline" src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif" style="height:1.5em"/></p><h2 id="单张图片-Single-Image"><a href="#单张图片-Single-Image" class="headerlink" title="单张图片 Single Image"></a>单张图片 Single Image</h2><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">可选参数：宽度width、描述alt</span><br><span class="line"></span><br><span class="line">&#123;% image &lt;图片链接&gt;, width=<span class="language-xml"><span class="tag">&lt;<span class="name">Custom</span>&gt;</span></span>px, alt=<span class="language-xml"><span class="tag">&lt;<span class="name">Custom</span>&gt;</span></span> %&#125;</span><br></pre></td></tr></table></figure><div class="img-wrap"><div class="img-bg"><img class="img" src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://fastly.jsdelivr.net/gh/realwds/cdn@master/img/20201216165804.jpg" style="width:100%;"/></div></div><h2 id="相册-Gallery"><a href="#相册-Gallery" class="headerlink" title="相册 Gallery"></a>相册 Gallery</h2><h3 id="gallerygroup-相册库"><a href="#gallerygroup-相册库" class="headerlink" title="gallerygroup 相册库"></a>gallerygroup 相册库</h3><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"><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 &lt;相册名&gt; &lt;相册描述&gt; &#x27;&lt;相册地址&gt;&#x27; &lt;相册背景图地址&gt; %&#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><div class="gallery-group-main">  <figure class="gallery-group">  <img class="gallery-group-img" src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src='https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png' alt="Group Image Gallery">  <figcaption>  <div class="gallery-group-name">壁纸</div>  <p>收藏的一些壁纸</p>  <a href='/gallery/wallpaper'></a>  </figcaption>  </figure>    <figure class="gallery-group">  <img class="gallery-group-img" src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src='https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg' alt="Group Image Gallery">  <figcaption>  <div class="gallery-group-name">OH MY GIRL</div>  <p>关于OH MY GIRL的图片</p>  <a href='/gallery/ohmygirl'></a>  </figcaption>  </figure>  </div><h3 id="gallery-相册"><a href="#gallery-相册" class="headerlink" title="gallery 相册"></a>gallery 相册</h3><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;% gallery %&#125;</span><br><span class="line">![](<span class="link">&lt;图片地址&gt;</span>)</span><br><span class="line">![](<span class="link">&lt;图片地址&gt;</span>)</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><div class="justified-gallery"><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://i.loli.net/2019/12/25/eqBGrXx9tWsZOao.jpg"><br><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://i.loli.net/2019/12/25/LjW2CfNSD7OaY4v.jpg"></p>          </div><h2 id="折叠框-Folding"><a href="#折叠框-Folding" class="headerlink" title="折叠框 Folding"></a>折叠框 Folding</h2><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">颜色参数：[不填默认灰色]，cyan,green,yellow,red,blue</span><br><span class="line">展开参数：[不填默认关闭]，open</span><br><span class="line"></span><br><span class="line">&#123;% folding [颜色参数] [展开参数], &lt;标题&gt; %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">Cusotm</span>&gt;</span></span></span><br><span class="line">&#123;% endfolding %&#125;</span><br></pre></td></tr></table></figure><details blue><summary> 蓝色折叠框 </summary>              <div class='content'>              <p>我是蓝色折叠框</p>              </div>            </details><details blue open><summary> 打开状态的蓝色折叠框 </summary>              <div class='content'>              <p>我是打开状态的蓝色折叠框</p>              </div>            </details><h2 id="分栏-Tab"><a href="#分栏-Tab" class="headerlink" title="分栏 Tab"></a>分栏 Tab</h2><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;% tabs Tags %&#125;</span><br><span class="line">&lt;!-- tab 李白 --&gt;</span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&lt;!-- tab 李白 --&gt;</span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&lt;!-- tab 李白 --&gt;</span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><div class="tabs" id="tags"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#tags-1">李白</button></li><li class="tab"><button type="button" data-href="#tags-2">李白</button></li><li class="tab"><button type="button" data-href="#tags-3">李白</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="tags-1"><p>李白（701年5月19日－762年11月30日），字太白，号青莲居士，中国唐朝诗人，自言祖籍陇西成纪（今甘肃省天水市秦安县），先世西凉武昭王李暠之后，与李唐皇室同宗。幼时内迁，寄籍剑南道绵州（今四川省江油市青莲镇）。另外，郭沫若研究认为李白出生于吉尔吉斯碎叶河上的碎叶城，属唐安西都护府（今楚河州托克马克市），该説有一定影响。有「诗仙」、「诗侠」、「酒仙」、「谪仙人」等称呼，活跃于盛唐，为杰出的浪漫主义诗人。与杜甫合称「李杜」。被贺知章惊呼为「天上谪仙」。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tags-2"><p>李白（701年5月19日－762年11月30日），字太白，号青莲居士，中国唐朝诗人，自言祖籍陇西成纪（今甘肃省天水市秦安县），先世西凉武昭王李暠之后，与李唐皇室同宗。幼时内迁，寄籍剑南道绵州（今四川省江油市青莲镇）。另外，郭沫若研究认为李白出生于吉尔吉斯碎叶河上的碎叶城，属唐安西都护府（今楚河州托克马克市），该説有一定影响。有「诗仙」、「诗侠」、「酒仙」、「谪仙人」等称呼，活跃于盛唐，为杰出的浪漫主义诗人。与杜甫合称「李杜」。被贺知章惊呼为「天上谪仙」。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="tags-3"><p>李白（701年5月19日－762年11月30日），字太白，号青莲居士，中国唐朝诗人，自言祖籍陇西成纪（今甘肃省天水市秦安县），先世西凉武昭王李暠之后，与李唐皇室同宗。幼时内迁，寄籍剑南道绵州（今四川省江油市青莲镇）。另外，郭沫若研究认为李白出生于吉尔吉斯碎叶河上的碎叶城，属唐安西都护府（今楚河州托克马克市），该説有一定影响。有「诗仙」、「诗侠」、「酒仙」、「谪仙人」等称呼，活跃于盛唐，为杰出的浪漫主义诗人。与杜甫合称「李杜」。被贺知章惊呼为「天上谪仙」。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="标签隐藏-Tag-Hide"><a href="#标签隐藏-Tag-Hide" class="headerlink" title="标签隐藏 Tag Hide"></a>标签隐藏 Tag Hide</h2><h3 id="行内-Inline"><a href="#行内-Inline" class="headerlink" title="行内 Inline"></a>行内 Inline</h3><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 &lt;文本内容&gt;,[按钮显示的字],[按钮背景颜色],[按钮文字颜色] %&#125;</span><br></pre></td></tr></table></figure><p>哪个英文字母最酷？ <span class="hide-inline"><button type="button" class="hide-button button--animated" style="background-color: #FF7242;color: #fff">查看答案  </button><span class="hide-content">因为西装裤(C装酷)</span></span><br>门裡站著一个人? <span class="hide-inline"><button type="button" class="hide-button button--animated" style="">Click  </button><span class="hide-content">闪</span></span></p><h3 id="块-Block"><a href="#块-Block" class="headerlink" title="块 Block"></a>块 Block</h3><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 [按钮显示的字],[按钮背景颜色],[按钮文字颜色] %&#125; </span><br><span class="line">&lt;文本内容&gt;</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 button--animated" style="">查看答案    </button><div class="hide-content"><div class="justified-gallery"><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg"><br><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg"></p>          </div></div></div><h3 id="hide-toggle"><a href="#hide-toggle" class="headerlink" title="hide-toggle"></a>hide-toggle</h3><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 [展示文字] %&#125;</span><br><span class="line">[折叠内容]</span><br><span class="line">&#123;% endhideToggle %&#125;</span><br></pre></td></tr></table></figure><div class="hide-toggle" ><div class="hide-button toggle-title" style=""><i class="fas fa-caret-right fa-fw"></i><span>Butterfly安装方法</span></div>    <div class="hide-content"><p>在你的博客根目录里</p><div class="justified-gallery"><p><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg"><br><img src= "https://fastly.jsdelivr.net/gh/realwds/cdn@master/blog/loading.png" data-lazy-src="https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg"></p>          </div></div></div><h2 id="诗词标签-Poem"><a href="#诗词标签-Poem" class="headerlink" title="诗词标签 Poem"></a>诗词标签 Poem</h2><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;% poem [标题],[作者] %&#125;</span><br><span class="line">&lt;诗词内容&gt;</span><br><span class="line">&#123;% endpoem %&#125;</span><br></pre></td></tr></table></figure><div class='poem'><div class='poem-title'>咏鹅</div><div class='poem-author'>骆宾王</div><p>鹅鹅鹅，<br>曲项向天歌。<br>白毛浮绿水，<br>红掌拨清波。</p></div>]]></content>
    
    
    <summary type="html">Butterfly 主题标签外挂使用样例</summary>
    
    
    
    <category term="Butterfly魔改" scheme="https://realwds.com/categories/Butterfly%E9%AD%94%E6%94%B9/"/>
    
    
    <category term="标签" scheme="https://realwds.com/tags/%E6%A0%87%E7%AD%BE/"/>
    
    <category term="Hexo" scheme="https://realwds.com/tags/Hexo/"/>
    
    <category term="butterfly" scheme="https://realwds.com/tags/butterfly/"/>
    
  </entry>
  
</feed>
