<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Butterfly</title>
  
  <subtitle>A Simple and Card UI Design theme for Hexo</subtitle>
  <link href="https://butterfly.js.org/en/atom.xml" rel="self"/>
  
  <link href="https://butterfly.js.org/en/"/>
  <updated>2025-12-10T12:49:37.071Z</updated>
  <id>https://butterfly.js.org/en/</id>
  
  <author>
    <name>Jerry</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Butterfly 5.5 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/5-5-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/5-5-release-notes/</id>
    <published>2025-09-09T08:15:03.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="New-Features"><a href="#New-Features" class="headerlink" title="New Features"></a>New Features</h2><ul><li>Improved lazyload filter, precisely handling img tag src attributes</li><li>Local search adds pagination</li><li>Shuoshuo page changed to pagination navigation</li><li>Right bottom button adds effect</li><li>Support custom script name #1732</li><li>Add hover transition animation for subdirectory items</li><li>Optimize sidebar subdirectory display, add transition animation</li><li>Add card category expansion animation</li><li>Adapt Mathjax 4</li><li>Refactor Algolia search, migrate from InstantSearch.js to directly use Algoliasearch API</li><li>Refactor configuration management, add default configuration file and optimize comment system configuration</li><li>Update README and README_CN files, enhance content clarity and readability</li><li>Update tag page style, enhance interaction and optimize animation</li><li>Add button effect style, enhance button interaction experience</li><li>Add backup alternate name</li></ul><h2 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h2><ul><li>Integrate search, reduce unnecessary code redundancy</li><li>Adjust right scroll percentage display logic, improve animation effect</li><li>Optimize night mode for note, button, label tag plugins, optimize night mode display for article navigation and recommendations</li><li>Disable structured data and update default configuration format</li><li>Optimize search interface style and user experience</li></ul><h2 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h2><ul><li>Enhance Umami Analytics data loading and error handling logic</li><li>Search ensures no truncation of HTML tags in the middle, enhance content cutting logic</li><li>Adjust max width to 60% to improve layout responsiveness</li><li>Add error handling to prevent Pjax failure #1734</li><li>Fix comment aggregation issue caused by MD5 function #1718</li></ul>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;New-Features&quot;&gt;&lt;a href=&quot;#New-Features&quot; class=&quot;headerlink&quot; title=&quot;New Features&quot;&gt;&lt;/a&gt;New Features&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;Improved lazyload filter</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="Tutorial" scheme="https://butterfly.js.org/en/tags/Tutorial/"/>
    
    <category term="Hexo" scheme="https://butterfly.js.org/en/tags/Hexo/"/>
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/tags/Release-Notes/"/>
    
    <category term="Butterfly" scheme="https://butterfly.js.org/en/tags/Butterfly/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 5.4 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/5-4-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/5-4-release-notes/</id>
    <published>2025-07-04T14:54:54.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="New-Features"><a href="#New-Features" class="headerlink" title="New Features"></a>New Features</h2><ol><li>Update dependency versions to latest in <code>plugins.yml</code></li><li>Support for Fancybox v6</li><li>Add configuration option to display article title in navigation bar</li><li>Add hover tooltip to show &quot;Back to Home&quot; text in article page navigation bar</li><li>Add Google Tag Manager configuration support</li><li>Add animation effects for right-side configuration button, update related configurations and template logic</li><li>Update footer configuration, add navigation bar and copyright information, improve styles and structure</li></ol><h2 id="Bug-Fixes"><a href="#Bug-Fixes" class="headerlink" title="Bug Fixes"></a>Bug Fixes</h2><ol><li>Fix truncateContent function to properly handle empty content</li><li>Fix card_archives counting bug</li><li>Fix pagination order logic</li><li>Fix getBgPath function to use this.url_for for correct background image path</li></ol><h2 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h2><ol><li>Hide navigation bar when per_page is set to 0</li><li>Optimize truncateContent function, encrypted articles do not show auto-truncated content</li><li>Add homepage styles to support word wrapping</li></ol>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;New-Features&quot;&gt;&lt;a href=&quot;#New-Features&quot; class=&quot;headerlink&quot; title=&quot;New Features&quot;&gt;&lt;/a&gt;New Features&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;Update dependency versio</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 5.3 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/5-3-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/5-3-release-notes/</id>
    <published>2025-01-10T10:47:26.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="New-Features"><a href="#New-Features" class="headerlink" title="New Features"></a>New Features</h2><ol><li>Display chat button only after js is loaded</li><li>Removed Pangu</li><li>Added structured data support</li><li>Added avif to the list of supported image formats</li><li>Updated lazyload configuration to support native lazyload functionality</li><li>Code optimization</li><li>Improved pageType logic</li><li>Fallback to monospace for code font, then to Chinese and sans-serif</li><li>Updated dependency versions in plugins.yml to the latest</li><li>Optimized aside_archives for better performance and readability</li><li>Improved documentation for inlineImg and timeline tags, optimized timeline logic</li><li>Updated gallery tag to support additional parameters, optimized image display logic</li><li>Optimized random cover filter logic to avoid consecutive repeats</li><li>Limited the display of latest comments to between 1-10 items</li></ol><h2 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h2><ol><li>Fixed the bug where artalk&#39;s latest comments showed pending or banned comments</li><li>Fixed the bug where chartjs did not load after decrypting articles</li></ol>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;New-Features&quot;&gt;&lt;a href=&quot;#New-Features&quot; class=&quot;headerlink&quot; title=&quot;New Features&quot;&gt;&lt;/a&gt;New Features&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;Display chat button only</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 5.2 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/5-2-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/5-2-release-notes/</id>
    <published>2024-11-02T10:47:26.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="New-Features"><a href="#New-Features" class="headerlink" title="New Features"></a>New Features</h2><ol><li>Added support for comments in &quot;Shuoshuo&quot;</li><li>Added support for limiting the number of &quot;Shuoshuo&quot; entries (by time or number)</li></ol><h2 id="Updates"><a href="#Updates" class="headerlink" title="Updates"></a>Updates</h2><ol><li>Updated related dependency versions</li></ol><h2 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h2><ol><li>Fixed the issue where disqus and disqusjs cannot coexist, keeping only one</li><li>Code optimization</li><li>Fixed the bug with the latest comments in remark42</li><li>Fixed the timezone issue in &quot;Shuoshuo&quot;</li></ol>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;New-Features&quot;&gt;&lt;a href=&quot;#New-Features&quot; class=&quot;headerlink&quot; title=&quot;New Features&quot;&gt;&lt;/a&gt;New Features&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;Added support for commen</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 5.1 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/5-1-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/5-1-release-notes/</id>
    <published>2024-10-20T09:27:48.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="New-Features"><a href="#New-Features" class="headerlink" title="New Features"></a>New Features</h2><ol><li>Added chart.js library (tag plugin)</li><li>Adapted to Algolia Search 5.0</li><li>Rounded corners for search pagination buttons</li><li>Display numerical sorting in local search results list</li><li>Chapter navigation and related recommendations support hover to show article introduction</li><li>Removed Daovoice</li><li>Added background blur effect to the navigation bar</li><li>Added rounded corners to the navigation bar hover effect</li></ol><h2 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h2><ol><li>Fixed the issue where Busuanzi statistics were not displayed when the comment system was not enabled</li><li>Fixed the issue where background gradient color was not effective</li></ol><h2 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h2><ol><li>Optional tags for &quot;Shuoshuo&quot;</li><li>Code simplification and optimization</li><li>Moved to &quot;Shuoshuo&quot; date to display the full date and time</li><li>Changed the &quot;Shuoshuo&quot; time tag to a time element</li><li>Delayed calling the abcjs function to resolve rendering issues</li><li>Adjusted the font size of article categories in the sidebar</li></ol>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;New-Features&quot;&gt;&lt;a href=&quot;#New-Features&quot; class=&quot;headerlink&quot; title=&quot;New Features&quot;&gt;&lt;/a&gt;New Features&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;Added chart.js library (</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 5.0 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/5-0-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/5-0-release-notes/</id>
    <published>2024-07-16T18:09:49.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="Breaking-Changes"><a href="#Breaking-Changes" class="headerlink" title="Breaking Changes"></a>Breaking Changes</h2><p>Due to the integration and renaming of several settings, please reconfigure the <code>_config.yml</code> file when upgrading to version 5.0.</p><h2 id="Features"><a href="#Features" class="headerlink" title="Features"></a>Features</h2><ol><li>Added <code>macstyle</code> setting, removed <code>mac</code> &#x2F; <code>mac light</code> theme setting</li><li>Integrated search-related settings</li><li>Modified code block settings</li><li>Added various layout options for homepage posts</li><li>Introduced a &quot;Shuoshuo&quot; page</li><li>Compatible with <code>hexo-blog-encrypt</code> plugin</li><li>Improved mobile menu opening effect</li><li>Added smooth scrolling feature</li><li>Support for writing mermaid diagrams in code blocks</li><li>Customizable article title position</li><li>Added full-screen button for code</li><li>Rounded design for friend link avatars</li><li>Optimized code using <code>hexo-util</code> and built-in parameters</li><li>Customizable search box placeholder text</li><li>Sidebar menu and button hidden if no menu is set</li><li>Increased card height for screens wider than 2000px</li><li>Font adjustment: Simplified Chinese uses YaHei, others use Heiti</li><li>Updated <code>plugins.yml</code></li><li>New sidebar interface design</li><li>Added JS settings for Giscus</li><li>Adjusted position of Utterances JS settings</li><li>Added Utterances option settings</li><li>Modified Giscus theme settings</li><li>Multiple interface elements now have rounded designs</li><li>Option to choose between rounded or square interface styles</li><li>Added icons to album load buttons</li><li>Enhanced hover effect on tag pages</li><li>Adjusted sidebar hover effect</li><li>Minor interface element tweaks</li><li>Background image configuration no longer requires <code>url()</code></li><li>Removed Messenger chat plugin</li><li>Updated Facebook version number</li><li>Added support for Hong Kong Traditional Chinese, Japanese, and Korean</li><li>New copy API replaces the old one</li><li>Added Umami analytics</li><li>Umami now tracks visits&#x2F;visitor count</li><li>Increased transparency for Snackbar</li><li>Article title shown under nav when fixed on article pages</li></ol><h2 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h2><ol><li>Fixed Prism.js highlighting issue with new Hexo version</li><li>Fixed potential error when article tags are empty</li><li>Corrected errors in mermaid diagrams</li><li>Resolved console errors when menu is not set</li><li>Fixed Algolia search results per page setting issue</li><li>Resolved scrollbar issue in Algolia search results</li><li>Corrected appearance of up&#x2F;down buttons in scrollbars</li><li>Fixed missing prefix in album remote links</li><li>Corrected extra space in label tag plugin</li><li>Resolved memory leak report in APlayer</li><li>Fixed Artalk comment loading bug when lazyload is false</li><li>Fixed gallery shaking bug</li></ol><h2 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h2><ol><li>Optimized function calls under PJAX</li><li>Overall code optimization</li><li>Improved compatibility</li><li>Enhanced Lighthouse scores</li><li>Reduced unnecessary global variables when PJAX is off</li><li>Optimized Waline import compatibility</li><li>Improved page entry effects</li><li>Optimized code block toolbar display logic</li><li>Improved display of article title position on different screen widths</li><li>Optimized tag color generation algorithm to avoid too dark or light colors</li><li>Adjusted font color for Artalk and Waline in night mode to match the theme</li><li>Adjusted Algolia search loading animation position to avoid line breaks</li><li>Optimized handling when Algolia search results are empty</li><li>Improved hover effect for series articles</li><li>Optimized 404 page code</li><li>Resolved window shaking issue when search and sidebar are opened</li><li>Optimized code and performance of tabs tag plugin</li><li>Improved image loading logic in gallery tag plugin within tabs</li><li>Enhanced scrolling effect in the directory to keep the current title centered</li><li>Adjusted gallery group display number for screens wider than 1024px</li><li>Optimized background URL judgment</li><li>Modified some terminology</li><li>Optimized timeline tag style</li><li>Improved SEO</li><li>Enhanced latest comments in Artalk</li></ol>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;Breaking-Changes&quot;&gt;&lt;a href=&quot;#Breaking-Changes&quot; class=&quot;headerlink&quot; title=&quot;Breaking Changes&quot;&gt;&lt;/a&gt;Breaking Changes&lt;/h2&gt;&lt;p&gt;Due to the int</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 4.13 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/4-13-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/4-13-release-notes/</id>
    <published>2024-02-22T08:54:12.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h2><ol><li>Adapted to waline v3.</li><li>Adapted to the new version of artalk.</li></ol><h2 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h2><ol><li>Fixed a bug where twikoo couldn&#39;t retrieve the comment count on the article page.</li></ol><h2 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h2><ol><li>Added identifiers to each tag and category on the homepage when there are multiple.</li><li>Changed the position of the article page title to the left.</li></ol>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;Feature&quot;&gt;&lt;a href=&quot;#Feature&quot; class=&quot;headerlink&quot; title=&quot;Feature&quot;&gt;&lt;/a&gt;Feature&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;Adapted to waline v3.&lt;/li&gt;
&lt;li&gt;Adapted to th</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 4.12 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/4-12-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/4-12-release-notes/</id>
    <published>2023-12-29T15:07:43.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h2><ol><li>Adaptation to the new version of Artalk</li><li>The title of card_post_series can be configured to display as the series name</li><li>The default value of the version in cdn is set to true</li></ol><h2 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h2><ol><li>Fixed a bug where toc_number did not apply according to the theme configuration when the toc_number in front-matter has no value</li><li>Fixed a bug where an error occurred when fetching the latest comments from Github</li></ol><h2 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h2><ol><li>The clickable range of the title has been reduced to the font itself</li><li>Added a destroy call to Waline</li></ol>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;Feature&quot;&gt;&lt;a href=&quot;#Feature&quot; class=&quot;headerlink&quot; title=&quot;Feature&quot;&gt;&lt;/a&gt;Feature&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;Adaptation to the new version of Artalk&lt;/li&gt;</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 4.11 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/4-11-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/4-11-release-notes/</id>
    <published>2023-11-24T06:33:25.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="Content"><a href="#Content" class="headerlink" title="Content"></a>Content</h2><ol><li>Adapted to hexo 7.0.0</li></ol><h2 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h2><ol><li>Fixed a bug where the prompt for unsupported code copying was not displayed</li><li>Fixed a bug where clicking on links in the title did not navigate correctly when click_to_scroll was enabled</li><li>Fixed a bug where the console reported an undefined loadOtherComment when switching comments</li></ol><h2 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h2><ol><li>Fine-tuned the sidebar UI</li><li>Avoided error messages due to missing configuration updates</li><li>Updated plugin versions</li></ol>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;Content&quot;&gt;&lt;a href=&quot;#Content&quot; class=&quot;headerlink&quot; title=&quot;Content&quot;&gt;&lt;/a&gt;Content&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;Adapted to hexo 7.0.0&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id=&quot;Fix</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly 4.10 Release Notes</title>
    <link href="https://butterfly.js.org/en/posts/4-10-release-notes/"/>
    <id>https://butterfly.js.org/en/posts/4-10-release-notes/</id>
    <published>2023-10-08T15:22:40.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="Breaking-Changes"><a href="#Breaking-Changes" class="headerlink" title="Breaking Changes"></a>Breaking Changes</h2><ol><li><p>Changed <code>rightside-bottom</code> to <code>rightside_bottom</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="deletion">- rightside-bottom:</span></span><br><span class="line"><span class="addition">+ rightside_bottom:</span></span><br></pre></td></tr></table></figure></li><li><p>Refactored the <code>gallery</code> tag plugin.</p><ol><li><p>Changed the implementation.</p></li><li><p>Images are now loaded only when they are scrolled into view.</p></li><li><p>Changed the dependency from <code>nk-o/flickr-justified-gallery</code> to <code>egjs-infinitegrid</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">  CDN:</span><br><span class="line">    option:</span><br><span class="line"><span class="deletion">-      # flickr_justified_gallery_js:</span></span><br><span class="line"><span class="deletion">-      # flickr_justified_gallery_css:</span></span><br><span class="line"><span class="addition">+      # egjs_infinitegrid:</span></span><br></pre></td></tr></table></figure></li></ol></li><li><p>Changed <code>ClickShowText</code> to <code>clickShowText</code></p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-ClickShowText:</span></span><br><span class="line"><span class="addition">+clickShowText:</span></span><br><span class="line">  enable: false</span><br><span class="line">  text:</span><br><span class="line">    - I</span><br><span class="line">    - LOVEeeeeeeeeeeeee</span><br><span class="line">    - YOU</span><br><span class="line">  fontSize: 15px</span><br><span class="line">  random: true</span><br><span class="line">  mobile: false</span><br><span class="line"></span><br><span class="line">CDN:</span><br><span class="line">  option:</span><br><span class="line"><span class="deletion">-   ClickShowText:</span></span><br><span class="line"><span class="addition">+   clickShowText:</span></span><br></pre></td></tr></table></figure></li></ol><h2 id="Features"><a href="#Features" class="headerlink" title="Features"></a>Features</h2><ol><li><p>Changed the position of the sticky icon to the left of the title.</p></li><li><p>Added the ability to customize the text of the reward button.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"> reward:</span><br><span class="line">   enable: false</span><br><span class="line"><span class="addition">+  text:</span></span><br><span class="line">   QR_code:</span><br></pre></td></tr></table></figure></li><li><p>Added support for displaying series posts in the right panel.</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">aside:</span><br><span class="line"><span class="addition">+  card_post_series:</span></span><br><span class="line"><span class="addition">+  enable: true</span></span><br><span class="line"><span class="addition">+  orderBy: &#x27;date&#x27; # Order by title or date</span></span><br><span class="line"><span class="addition">+  order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br></pre></td></tr></table></figure></li><li><p>Added support for displaying series posts using the series tag plugin.</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"><span class="addition">+series:</span></span><br><span class="line"><span class="addition">+   enable: true</span></span><br><span class="line"><span class="addition">+   orderBy: &#x27;title&#x27; # Order by title or date</span></span><br><span class="line"><span class="addition">+   order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line"><span class="addition">+   number: true</span></span><br></pre></td></tr></table></figure></li><li><p>Removed the addthis sharing plugin.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-addThis:</span></span><br><span class="line"><span class="deletion">- enable: false</span></span><br><span class="line"><span class="deletion">- pubid:</span></span><br></pre></td></tr></table></figure></li><li><p>Added an icon before the text in the copyright section.</p></li><li><p>Added the ability to configure attributes for getScript.</p></li><li><p>Added support for left and right alignment of article text.</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">+# Stretches the lines so that each line has equal width（文字向兩側對齊，對最後一行無效）</span></span><br><span class="line"><span class="addition">+text_align_justify: true</span></span><br></pre></td></tr></table></figure></li><li><p>Added support for preconnecting to the CDN based on configuration.</p></li><li><p>Removed the button for anchors and made the title clickable to jump to the anchor.</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">anchor:</span><br><span class="line"><span class="deletion">-  button:</span></span><br><span class="line"><span class="deletion">-    enable: false</span></span><br><span class="line"><span class="deletion">-    always_show: false</span></span><br><span class="line"><span class="deletion">-    icon: # the unicode value of Font Awesome icon, such as &#x27;\3423&#x27;</span></span><br><span class="line">  auto_update: false # when you scroll in post, the URL will update according to header id.</span><br><span class="line"><span class="addition">+  # Click the headline to scroll and update the anchor</span></span><br><span class="line"><span class="addition">+  click_to_scroll: false</span></span><br></pre></td></tr></table></figure></li><li><p>Changed the hover effect of headlines.</p></li></ol><h2 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h2><ol><li>Fixed a bug where pjax would return a 404 error when the website was in a subdirectory.</li><li>Fixed a bug where the scrollbar color was not clear on small screens in dark mode.</li><li>Fixed a bug where the border in the TOC was abnormal when the font size was greater than 17px.</li><li>Fixed a bug where the width of comments was abnormal in float layout.</li><li>Fixed a bug where searching for &lt; and &gt; did not return results when the search file was XML.</li><li>Fixed a bug where the top image effect on the homepage was delayed during scrolling.</li><li>Fixed a bug where the caption of an image overlapped with the image in the note tag plugin.</li></ol><h2 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h2><ol><li>Adjusted the left and right margins of social icons on the homepage.</li><li>Optimized the code.</li><li>Adjusted the position of the &quot;back to top&quot; arrow in the tabs tag plugin.</li><li>Updated plugin.yml.</li><li>efactored the code in main.js.</li><li>Optimized performance under pjax.</li><li>Optimized the opening and closing effects of the TOC on mobile devices.</li><li>Changed the article entry effect to use transform and optimized the stylus.</li><li>Prevented elements from being squeezed when the sidebar has a scrollbar.</li><li>Fixed a cross-domain issue caused by extra slashes in the URL for Waline.</li><li>Improved the wording in some language files.</li><li>Displayed &quot;0&quot; when the comment count could not be obtained for Disqus and Disqusjs.</li><li>Changed the method of obtaining the comment count for Disqusjs to use the API.</li><li>Removed the bottom margin of the last element in the tabs content.</li><li>Removed the noscript tag.</li></ol>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;Breaking-Changes&quot;&gt;&lt;a href=&quot;#Breaking-Changes&quot; class=&quot;headerlink&quot; title=&quot;Breaking Changes&quot;&gt;&lt;/a&gt;Breaking Changes&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Chang</summary>
      
    
    
    
    <category term="Release Notes" scheme="https://butterfly.js.org/en/categories/Release-Notes/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly Changelog</title>
    <link href="https://butterfly.js.org/en/posts/butterfly-docs-en-changelog/"/>
    <id>https://butterfly.js.org/en/posts/butterfly-docs-en-changelog/</id>
    <published>2023-07-01T11:20:56.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<div class="note orange icon-padding flat"><i class="note-icon fas fa-language"></i><p>This article is translated from ChatGPT.</p></div><div class="note blue icon-padding flat"><i class="note-icon fas fa-bullhorn"></i><p>The release notes for versions 4.9.0 and later will be published as separate articles. Please check the <a href="/en/categories/Release-Notes/">Release Notes</a> for more information.</p></div><hr><details class="toggle" ><summary class="toggle-button" style="">4.9.0 (2023/06/06)</summary><div class="toggle-content"><h2 id="4-9-0-2023-06-06"><a href="#4-9-0-2023-06-06" class="headerlink" title="4.9.0 (2023&#x2F;06&#x2F;06)"></a>4.9.0 (2023&#x2F;06&#x2F;06)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Adapted to mermaid v10</p></li><li><p>When the screen is larger than 2000px, the display area is increased</p></li><li><p>Header and footer can be configured to add black translucent masks</p></li></ol>  <figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+# Add mask to header or footer</span></span><br><span class="line"><span class="addition">+mask:</span></span><br><span class="line"><span class="addition">+  header: true</span></span><br><span class="line"><span class="addition">+  footer: true</span></span><br></pre></td></tr></table></figure><ol start="4"><li><p>Latest comments in artalk are now called directly through the API</p></li><li><p>Latest comments and comment count in waline are now called directly through the API</p></li><li><p>Clicking the chat button in the lower right corner again will close the chat</p></li><li><p>Adapted to the new version of artalk</p></li><li><p>Supports random order of friend links</p></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li><p>Fixed the bug of inline mathjax causing scrolling</p></li><li><p>Fixed the bug that when top_img is a color, the top of the reading mode still shows the color</p></li><li><p>Fixed the bug that the sub of subtitle configuration did not take effect</p></li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li><p>Updated hexo-renderer-stylus</p></li><li><p>Beautification optimization of hr to avoid affecting the layout of third-party plugins</p></li><li><p>Optimized mediumZoom</p></li><li><p>Fine-tuned the homepage</p></li><li><p>When the latest comments are configured, there will be no error if comments are not configured</p></li><li><p>Optimized tidio, crisp, daovoice, messenger, and chatra code</p></li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.8.5 (2023/05/09)</summary><div class="toggle-content"><h2 id="4-8-5-2023-05-09"><a href="#4-8-5-2023-05-09" class="headerlink" title="4.8.5 (2023&#x2F;05&#x2F;09)"></a>4.8.5 (2023&#x2F;05&#x2F;09)</h2><h3 id="Features"><a href="#Features" class="headerlink" title="Features"></a>Features</h3><ol><li>Artalk supports clicking to open large images.</li><li>After setting to switch between light and dark mode with the system, comments and mermaid will also switch colors accordingly.</li><li>Artalk&#39;s latest comments now read the avatar CDN and default avatar from the Artalk configuration.</li></ol><h3 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h3><ol><li>Fixed the bug where Artalk could not get the latest comments.</li><li>Fixed the bug where the code block could not be copied when the copy button was clicked before the block was expanded.</li></ol><h3 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h3><ol><li>Code and performance optimization.</li><li>Artalk now gets the comment count by using <code>loadCountWidget</code> instead of <code>LoadCountWidget</code>.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.8.1 (2023/04/10)</summary><div class="toggle-content"><h2 id="4-8-1-2023-04-10"><a href="#4-8-1-2023-04-10" class="headerlink" title="4.8.1 (2023&#x2F;04&#x2F;10)"></a>4.8.1 (2023&#x2F;04&#x2F;10)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where the theme&#39;s JavaScript could not be loaded when the internal_provider of the CDN was set to jsdelivr.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.8.0 (2023/04/10)</summary><div class="toggle-content"><h2 id="4-8-0-2023-04-10"><a href="#4-8-0-2023-04-10" class="headerlink" title="4.8.0 (2023&#x2F;04&#x2F;10)"></a>4.8.0 (2023&#x2F;04&#x2F;10)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Removed Gitter integration.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">   -# gitter</span><br><span class="line">   -# https://gitter.im/</span><br><span class="line">   -gitter:</span><br><span class="line">   -  enable: false</span><br><span class="line">   -  room:</span><br><span class="line"></span><br><span class="line">2. Renamed parameters in the CDN options section.</span><br><span class="line"></span><br><span class="line">   ```diff</span><br><span class="line">    CDN:</span><br><span class="line">      option:</span><br><span class="line">    -    # algolia_search_v4:</span><br><span class="line">    -    # instantsearch_v4: </span><br><span class="line">    -    # fancybox_css_v4:</span><br><span class="line">    -    # fancybox_v4:  </span><br><span class="line">    -    # fontawesomeV6:</span><br><span class="line">    </span><br><span class="line">    +    # algolia_search:</span><br><span class="line">    +    # instantsearch: </span><br><span class="line">    +    # fancybox_css:</span><br><span class="line">    +    # fancybox:  </span><br><span class="line">    +    # fontawesome:</span><br></pre></td></tr></table></figure></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Configurable color for social media icons.</p></li><li><p>Added support for rendering music scores using abcjs library.</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"><span class="addition">+# abcjs (樂譜渲染)</span></span><br><span class="line"><span class="addition">+# See https://github.com/paulrosen/abcjs</span></span><br><span class="line"><span class="addition">+# ---------------</span></span><br><span class="line"><span class="addition">+abcjs:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  per_page: true</span></span><br></pre></td></tr></table></figure></li><li><p>Updated to support the latest version of typed.js.</p></li><li><p>Implemented Algolia search, clicking on search results now redirects to the corresponding page.</p></li><li><p>Refactored local search</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"># Local search</span><br><span class="line">local_search:</span><br><span class="line">  enable: false</span><br><span class="line">  # Preload the search data when the page loads.</span><br><span class="line">  preload: false</span><br><span class="line"><span class="addition">+  # Show top n results per article, show all results by setting to -1</span></span><br><span class="line"><span class="addition">+  top_n_per_article: 1</span></span><br><span class="line"><span class="addition">+  # Unescape html strings to the readable one.</span></span><br><span class="line"><span class="addition">+  unescape: false</span></span><br><span class="line">  CDN:</span><br></pre></td></tr></table></figure></li><li><p>Upgraded fancybox to version 5.</p></li><li><p>Updated Facebook JavaScript version.</p></li><li><p>CDN configuration now includes versioning for local links.</p></li><li><p>Added support for customizing the JS address of the giscus commenting system.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CDN:</span><br><span class="line">  option:</span><br><span class="line"><span class="addition">+  giscus: xxxxx</span></span><br></pre></td></tr></table></figure></li><li><p>Added the ability to customize the switch time for dark mode.</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"># dark mode</span><br><span class="line">darkmode:</span><br><span class="line"><span class="addition">+  # Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18</span></span><br><span class="line"><span class="addition">+  start: # 8</span></span><br><span class="line"><span class="addition">+  end: # 22</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where the search content was covered by the system search box in Safari.</li><li>Fixed a bug where the fullpage loading displayed a scrollbar.</li><li>Fixed an issue where the limit was not effective when card_tags.color was set to true.</li><li>Fixed a bug where the image identification was incorrect due to the uppercase suffix when setting an image.</li><li>Fixed an issue where pace.js was triggered by the addition of an anchor when archor was enabled.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>When the browser width is greater than 2000px, the card width changes from 1500px to 1700px.</li><li>When beautify is not enabled, hr displays the default style.</li><li>When mobile Safari is in landscape mode, the webpage displays in full screen.</li><li>The social icon rotates 180 degrees on hover.</li><li>Optimized viewport SEO.</li><li>Code optimization.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.7.0 (2023/02/20)</summary><div class="toggle-content"><h2 id="4-7-0-2023-02-20"><a href="#4-7-0-2023-02-20" class="headerlink" title="4.7.0 (2023&#x2F;02&#x2F;20)"></a>4.7.0 (2023&#x2F;02&#x2F;20)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>The <code>card_tags</code> can be configured with <code>orderby</code> and <code>order</code> parameters.</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">aside:</span><br><span class="line">  card_tags:</span><br><span class="line">    enable: true</span><br><span class="line">    limit: 40 # if set 0 will show all</span><br><span class="line">    color: false</span><br><span class="line"><span class="addition">+    orderby: random # Order of tags, random/name/length</span></span><br><span class="line"><span class="addition">+    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    sort_order: # Don&#x27;t modify the setting unless you know how it works</span><br></pre></td></tr></table></figure></li><li><p>The tag page supports configuring the <code>orderby</code> and <code>order</code> parameters.</p></li><li><p>Add <code>docsearch</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"><span class="addition">+# Docsearch</span></span><br><span class="line"><span class="addition">+# https://docsearch.algolia.com/</span></span><br><span class="line"><span class="addition">+docsearch:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  appId:</span></span><br><span class="line"><span class="addition">+  apiKey:</span></span><br><span class="line"><span class="addition">+  indexName:</span></span><br><span class="line"><span class="addition">+  option:</span></span><br></pre></td></tr></table></figure></li><li><p>Local search, clicking on the content of an article will also redirect to the corresponding page.</p></li><li><p>The <code>gallery</code> tag plugin adds support for retrieving JSON.</p></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where there was no spacing in the aside card after setting card_author and card_announcement to false.</li><li>Fixed an issue where the latest comments in artalk could not be loaded.</li><li>Fixed a bug where waline&#39;s CSS was not loaded in pjax mode.</li><li>Fixed a bug in local search where certain symbols could not be searched.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Refactored getCSS function.</li><li>Reduced the size of the scroll bar.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.6.1 (2023/01/18)</summary><div class="toggle-content"><h2 id="hideToggle-4-6-1-2023-01-18"><a href="#hideToggle-4-6-1-2023-01-18" class="headerlink" title="hideToggle 4.6.1 (2023&#x2F;01&#x2F;18)"></a>hideToggle 4.6.1 (2023&#x2F;01&#x2F;18)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Configurable parameters for typed.js</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">subtitle:</span><br><span class="line"><span class="deletion">-  # Effect Speed Options</span></span><br><span class="line"><span class="deletion">-  startDelay: 300 # time before typing starts in milliseconds</span></span><br><span class="line"><span class="deletion">-  typeSpeed: 150 # type speed in milliseconds</span></span><br><span class="line"><span class="deletion">-  backSpeed: 50 # backspacing speed in milliseconds</span></span><br><span class="line"><span class="deletion">-  # loop</span></span><br><span class="line"><span class="deletion">-  loop: true</span></span><br><span class="line"><span class="addition">+  # Customize typed.js</span></span><br><span class="line"><span class="addition">+  # https://github.com/mattboldt/typed.js/#customization</span></span><br><span class="line"><span class="addition">+  typed_option:</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed bug where typeJSFn was being assigned multiple times.</li><li>Fixed bug where the title had a shadow after fixing the status bar.</li><li>Fixed bug where the gallery tag truncated the image link, causing a 404 error when loading the image.</li><li>Fixed bug where clicking on certain scroll-up buttons after fixing the navigation bar would result in the target section being obscured by the navigation bar.</li><li>Fixed bug where the table of contents (toc) was being obscured after fixing the navigation bar.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>When switching between simplified and traditional Chinese, the lang attribute of the HTML will be changed.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.6.0 (2023/01/15)</summary><div class="toggle-content"><h2 id="4-6-0-2023-01-15"><a href="#4-6-0-2023-01-15" class="headerlink" title="4.6.0 (2023&#x2F;01&#x2F;15)"></a>4.6.0 (2023&#x2F;01&#x2F;15)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Optimization of cover display #1101</p><p>When the cover is set to false or no value is obtained for the cover, the background of the related recommended articles and pagination buttons on the article page will be displayed in the theme color.</p></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>toc can be set to show preview progress</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">toc:</span><br><span class="line"><span class="addition">+  scroll_percent: true</span></span><br></pre></td></tr></table></figure></li><li><p>Added preview progress display to the bottom right button</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">+# show scroll percent in scroll-to-top button</span></span><br><span class="line"><span class="addition">+rightside_scroll_percent: true</span></span><br></pre></td></tr></table></figure></li><li><p>Cover can be configured with color&#x2F;gradient color, etc.</p></li><li><p>default_cover can be configured with color.</p></li><li><p>Navigation bar settings: hide blog name &#x2F; set logo &#x2F; set fixed navigation bar # 1150 #1104</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+nav:</span></span><br><span class="line"><span class="addition">+  logo: # image</span></span><br><span class="line"><span class="addition">+  display_title: true</span></span><br><span class="line"><span class="addition">+  fixed: false # fixed navigation bar</span></span><br></pre></td></tr></table></figure></li><li><p>BuSuanZi (a website traffic analysis tool) can be configured with CDN #1132</p></li><li><p>Added lazy loading to gallery tag plugin, added lazyload rowHeight and limit attribute configuration</p></li><li><p>Updated plugins.yml</p></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed bug where hexo-log couldn&#39;t be loaded #1102</li><li>Fixed bug where special characters didn&#39;t display results when using local search</li><li>Fixed bug where colors with &quot;&#x2F;&quot; in the header image and footer configuration couldn&#39;t be displayed</li><li>Fixed bug where code blocks still displayed colored backgrounds in reading mode (custom code blocks) #1139</li><li>Fixed bug where avatars of friend links may not be displayed when lazy loading is enabled and friend link data is imported using flink_url #1146</li><li>Fixed bug where waline js was loaded repeatedly under pjax</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>When setting the date as a relative date, the date format of the article and the latest comment are unified as year, month, and day.</li><li>Fixed bug where special characters didn&#39;t display results when using local search</li><li>Added explanatory text to the article pagination buttons when hovering over them with the mouse</li><li>The display order of the top image on the article page is top_img &gt; cover &gt; default_top_img</li><li>Modified configuration file comments</li><li>Optimized the scroll position of search result display</li><li>Search results will not split words when wrapping</li><li>Canonical link is generated based on the configuration</li></ol><h3 id="Remove"><a href="#Remove" class="headerlink" title="Remove"></a>Remove</h3><ol><li><p>Removed cnzz analytics</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-# CNZZ Analytics</span></span><br><span class="line"><span class="deletion">-# https://www.umeng.com/</span></span><br><span class="line"><span class="deletion">-cnzz_analytics:</span></span><br></pre></td></tr></table></figure></li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.5.1 (2022/10/31)</summary><div class="toggle-content"><h2 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h2><ol><li>Fixed a bug where inline mathjax formulas caused excessive line spacing.</li><li>Fixed a bug where mathjax overflowed the screen instead of displaying a scrollbar after updating to a new version.</li></ol><h2 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement:"></a>Improvement:</h2><ol><li>Avoided configuration errors caused by not updating theme files.</li><li>Updated plugins.yml.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.5.0 (2022/10/21)</summary><div class="toggle-content"><h2 id="4-5-0-2022-10-21"><a href="#4-5-0-2022-10-21" class="headerlink" title="4.5.0 (2022&#x2F;10&#x2F;21)"></a>4.5.0 (2022&#x2F;10&#x2F;21)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Open_Graph_meta setting change, allowing configuration of additional parameters</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-Open_Graph_meta: true</span></span><br><span class="line"><span class="addition">+Open_Graph_meta:</span></span><br><span class="line"><span class="addition">+  enable: true</span></span><br><span class="line"><span class="addition">+  option:</span></span><br></pre></td></tr></table></figure></li><li><p>Preloader setting change, adding pace.js loading animation bar</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-preloader: false</span></span><br><span class="line"><span class="addition">+preloader:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  # source</span></span><br><span class="line"><span class="addition">+  # 1. fullpage-loading</span></span><br><span class="line"><span class="addition">+  # 2. pace (progress bar)</span></span><br><span class="line"><span class="addition">+  source: 1</span></span><br><span class="line"><span class="addition">+  # pace theme (see https://codebyzach.github.io/pace/)</span></span><br><span class="line"><span class="addition">+  pace_css_url:</span></span><br></pre></td></tr></table></figure></li><li><p>Anchor setting change, allowing separate configuration for button and automatic update of anchor, setting button icon, and setting button always show</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">-anchor: false</span></span><br><span class="line"><span class="addition">+anchor:</span></span><br><span class="line"><span class="addition">+  button:</span></span><br><span class="line"><span class="addition">+    enable: false</span></span><br><span class="line"><span class="addition">+    always_show: false</span></span><br><span class="line"><span class="addition">+    icon: # the unicode value of Font Awesome icon, such as &#x27;\3423&#x27;</span></span><br><span class="line"><span class="addition">+  auto_update: false # when you scroll in post, the URL will update according to header id.</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Update Facebook sdk to v15</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fix <code>throttle</code> function invocation method #1075</li><li>Fix bug in controlling loadFBComment error #1066</li><li>Fix layout inconsistency issue when screen width is 768px #1032</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Add additional characters to traditional and simplified Chinese conversion #1076</li><li>Local preview, refresh of friendly link page, content will not be duplicated</li><li>Update plugins.yml</li></ol><h3 id="Remove"><a href="#Remove" class="headerlink" title="Remove"></a>Remove</h3><ol><li>Remove meta keywords</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.4.0 (2022/08/18)</summary><div class="toggle-content"><h2 id="4-4-0-2022-08-18"><a href="#4-4-0-2022-08-18" class="headerlink" title="4.4.0 (2022&#x2F;08&#x2F;18)"></a>4.4.0 (2022&#x2F;08&#x2F;18)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Added Facebook Messenger plugin for online chat</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+messenger:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  pageID:</span></span><br><span class="line"><span class="addition">+  lang: zh_TW # Language en_US/zh_CN/zh_TW and so on</span></span><br></pre></td></tr></table></figure></li><li><p>Added Artalk comment function</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"><span class="addition">+artalk:</span></span><br><span class="line"><span class="addition">+  server:</span></span><br><span class="line"><span class="addition">+  site:</span></span><br><span class="line"><span class="addition">+  visitor: false</span></span><br><span class="line"><span class="addition">+  option:</span></span><br></pre></td></tr></table></figure></li><li><p>Added parameter configuration for typing effect on homepage</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">subtitle:</span><br><span class="line">...</span><br><span class="line"><span class="addition">+  # Effect Speed Options</span></span><br><span class="line"><span class="addition">+  startDelay: 300 # time before typing starts in milliseconds</span></span><br><span class="line"><span class="addition">+  typeSpeed: 150 # type speed in milliseconds</span></span><br><span class="line"><span class="addition">+  backSpeed: 50 # backspacing speed in milliseconds</span></span><br><span class="line">...</span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed bug where Facebook comments were not loading correctly after opening anchor</li><li>Fixed bug where Facebook comment count was not loading</li><li>Fixed bug where subdirectory hover did not have rounded corners #965</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.3.1 (2022/06/27)</summary><div class="toggle-content"><h2 id="4-3-1-2022-06-27"><a href="#4-3-1-2022-06-27" class="headerlink" title="4.3.1 (2022&#x2F;06&#x2F;27)"></a>4.3.1 (2022&#x2F;06&#x2F;27)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where the read count wouldn&#39;t display when comments were set to false but the option to show comment count was enabled.</li><li>Fixed the bug with finding archive titles.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.3.0 (2022/06/24)</summary><div class="toggle-content"><h2 id="4-3-0-2022-06-24"><a href="#4-3-0-2022-06-24" class="headerlink" title="4.3.0 (2022&#x2F;06&#x2F;24)"></a>4.3.0 (2022&#x2F;06&#x2F;24)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Hide aside setting for archives has been changed.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">aside:</span><br><span class="line"><span class="deletion">-  archive: true</span></span><br><span class="line"><span class="addition">+  display:</span></span><br><span class="line"><span class="addition">+    archive: true</span></span><br></pre></td></tr></table></figure></li><li><p>Adapt to disqusjs 3.0.</p></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>The number of articles displayed on sub-archive pages will no longer show the total number of articles, but the corresponding number of sub-archive articles.</p></li><li><p>Added loading display for some data loading.</p></li><li><p>Added the ability to hide aside on tag and category pages.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">aside:</span><br><span class="line"><span class="addition">+  display:</span></span><br><span class="line"><span class="addition">+    tag: true</span></span><br><span class="line"><span class="addition">+    category: true</span></span><br></pre></td></tr></table></figure></li><li><p>Clicking on the archive date will now jump to the page, and the title will display the date instead of the word &quot;Archive&quot;.</p></li><li><p>Adapted to the upgrade of katex and removed katex copy-tex.css.</p></li><li><p>Added one-click configuration for CDN using cdnjs.</p></li><li><p>Added one-click configuration for CDN using unpkg.</p></li><li><p>Added the ability to set version and custom format for CDN.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CDN:</span><br><span class="line"><span class="addition">+  version: false</span></span><br><span class="line"><span class="addition">+  custom_format:</span></span><br></pre></td></tr></table></figure></li><li><p>Added support for Remark42 comment system.</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"><span class="addition">+# Remark42</span></span><br><span class="line"><span class="addition">+# https://remark42.com/docs/configuration/frontend/</span></span><br><span class="line"><span class="addition">+remark42:</span></span><br><span class="line"><span class="addition">+  host: # Your Host URL</span></span><br><span class="line"><span class="addition">+  siteId: # Your Site ID</span></span><br><span class="line">  option:</span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Algolia search returns no results.</li><li>When the comment system is enabled, busuanzi&#39;s page_pv does not display.</li><li>Custom sorting for sidebar archive cards is not working correctly.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Modified the class name of the note icon to avoid overriding the theme style by third-party icons.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.2.2 (2022/05/19)</summary><div class="toggle-content"><h2 id="4-2-2-2022-05-19"><a href="#4-2-2-2022-05-19" class="headerlink" title="4.2.2 (2022&#x2F;05&#x2F;19)"></a>4.2.2 (2022&#x2F;05&#x2F;19)</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></pre></td><td class="code"><pre><span class="line">fix: Fixed a bug where the comment count for the Valine plugin on the homepage only showed for the first article.</span><br><span class="line">fix: Fixed a bug where third-party plugin local resources could not be loaded in subdirectories.</span><br><span class="line">fix: Fixed a bug where the page<span class="emphasis">_pv of busuanzi did not display when the comment system was enabled.</span></span><br><span class="line"><span class="emphasis">fix: Fixed a bug where using mermaid to jump under pjax would cause a reload.</span></span><br><span class="line"><span class="emphasis">improvement: Optimized Twikoo comments to not call the API when there is no comment count container. #897</span></span><br></pre></td></tr></table></figure></div></details><details class="toggle" ><summary class="toggle-button" style="">4.2.1 (2022/05/11)</summary><div class="toggle-content"><h2 id="4-2-1-2022-05-11"><a href="#4-2-1-2022-05-11" class="headerlink" title="4.2.1 (2022&#x2F;05&#x2F;11)"></a>4.2.1 (2022&#x2F;05&#x2F;11)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where mathjax fonts were missing when CDN configuration was set to local.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.2.0 (2022/05/02)</summary><div class="toggle-content"><h2 id="4-2-0-2022-05-02"><a href="#4-2-0-2022-05-02" class="headerlink" title="4.2.0 (2022&#x2F;05&#x2F;02)"></a>4.2.0 (2022&#x2F;05&#x2F;02)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Adapted waline to V2</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">CDN:</span><br><span class="line"><span class="deletion">-    waline: </span></span><br><span class="line"><span class="addition">+    waline_js:</span></span><br><span class="line"><span class="addition">+    waline_css:</span></span><br></pre></td></tr></table></figure></li><li><p>Changed visitor in waline to pageview</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">waline:</span><br><span class="line"><span class="deletion">-  visitor: false</span></span><br><span class="line"><span class="addition">+  pageview: false</span></span><br></pre></td></tr></table></figure></li><li><p>Added the ability to configure CDN for local files and separate configuration for theme files and third-party files</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">CDN:</span><br><span class="line"><span class="addition">+  # The CDN provider of internal scripts</span></span><br><span class="line"><span class="addition">+  # option: local/jsdelivr</span></span><br><span class="line"><span class="addition">+  # Dev version cannot choose jsdelivr</span></span><br><span class="line"><span class="addition">+  internal_provider: local</span></span><br><span class="line"><span class="addition">+  # The CDN provider of third party scripts</span></span><br><span class="line"><span class="addition">+  # option: local/jsdelivr</span></span><br><span class="line"><span class="addition">+  # when set it to local, you need to install hexo-butterfly-extjs</span></span><br><span class="line"><span class="addition">+  third_party_provider: jsdelivr</span></span><br><span class="line"><span class="addition">+  option:</span></span><br></pre></td></tr></table></figure></li><li><p>Removed CDN configuration for utterances, giscus, addtoany, and busuanzi</p></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Added article content display and highlighting to algolia search</p></li><li><p>Increased the display area for search content</p></li><li><p>Added preload and CDN configuration for local search</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">local_search:</span><br><span class="line">  enable: false</span><br><span class="line"><span class="addition">+  preload: false</span></span><br><span class="line"><span class="addition">+  CDN:</span></span><br></pre></td></tr></table></figure></li><li><p>Updated social-share CDN version</p></li><li><p>Added support for hiding sidebar on archive pages</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">aside:</span><br><span class="line"><span class="addition">+  archives: true</span></span><br></pre></td></tr></table></figure></li><li><p>Added the ability to configure author hyperlink for post copyright module</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">post_copyright:</span><br><span class="line"><span class="addition">+  author_href:</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed bug where mathjax was not displaying correctly</li><li>Fixed rendering issue with related recommendations when title contains HTML keywords</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Unified the display of search titles as &#39;Search&#39;</li><li>Changed the logo for algolia search to instantsearch</li><li>Prevented automatic search on first entry to algolia search</li><li>Added ellipsis recognition to search content</li><li>Adjusted spacing issues caused by share buttons</li><li>HTML&#x2F;CSS optimization</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.1.0 (2022/02/13)</summary><div class="toggle-content"><h2 id="4-1-0-2022-02-13"><a href="#4-1-0-2022-02-13" class="headerlink" title="4.1.0 (2022&#x2F;02&#x2F;13)"></a>4.1.0 (2022&#x2F;02&#x2F;13)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Upgrade fontawesome to v6 #689</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CDN:</span><br><span class="line"><span class="deletion">-  fontawesome:</span></span><br><span class="line"><span class="addition">+  fontawesomeV6:</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Add rounded corners to snackbar</li><li>Add flink tag plugin</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fix bug where clicking outside of toc causes console error</li><li>Fix bug where Facebook Comments cannot be used #787</li><li>Fix translation missing for chat_btn #791</li><li>Fix bug where local search doesn&#39;t work when content is set to false #764</li><li>Fix bug where Mermaid chart elements have excessive height #773</li><li>Fix bug where share buttons on article page don&#39;t take up full width on navigation page #765</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Improve semantic toggle tag plugin</li><li>Change toc background color in dark mode</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">4.0.1 (2022/01/16)</summary><div class="toggle-content"><h2 id="4-0-1-2022-01-16"><a href="#4-0-1-2022-01-16" class="headerlink" title="4.0.1 (2022&#x2F;01&#x2F;16)"></a>4.0.1 (2022&#x2F;01&#x2F;16)</h2><p>Improvement: Optimized animation of the bottom right button under pjax.</p><p>Fix: Fixed a bug where the page setting aside as true would cause a JavaScript error.</p><p>Fix: Fixed a bug where the position of the bottom right button was being blocked on some pages.</p><p>Fix: Fixed a bug where compressing HTML code would cause an error on the friend link page.</p><p>Fix: Fixed a bug where sliding the side menu on Safari would collapse it.</p></div></details><details class="toggle" ><summary class="toggle-button" style="">4.0.0 (2022/01/15)</summary><div class="toggle-content"><h2 id="4-0-0-2022-01-15"><a href="#4-0-0-2022-01-15" class="headerlink" title="4.0.0 (2022&#x2F;01&#x2F;15)"></a>4.0.0 (2022&#x2F;01&#x2F;15)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Simplified configuration for comments.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">disqusjs:</span><br><span class="line"><span class="deletion">-  apikey:</span></span><br><span class="line"><span class="deletion">-  api:</span></span><br><span class="line"><span class="deletion">-  nocomment: # display when a blog post or an article has no comment attached</span></span><br><span class="line"><span class="deletion">-  admin:</span></span><br><span class="line"><span class="deletion">-  adminLabel:</span></span><br><span class="line"><span class="addition">+  option:</span></span><br><span class="line"></span><br><span class="line">gitalk:</span><br><span class="line"><span class="deletion">-  language: en # en, zh-CN, zh-TW, es-ES, fr, ru</span></span><br><span class="line"><span class="deletion">-  perPage: 10 # Pagination size, with maximum 100.</span></span><br><span class="line"><span class="deletion">-  distractionFreeMode: false # Facebook-like distraction free mode.</span></span><br><span class="line"><span class="deletion">-  pagerDirection: last # Comment sorting direction, available values are last and first.</span></span><br><span class="line"><span class="deletion">-  createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically</span></span><br><span class="line"></span><br><span class="line">valine:</span><br><span class="line"><span class="deletion">-  pageSize: 10 # comment list page size</span></span><br><span class="line"><span class="deletion">-  lang: en # i18n: zh-CN/zh-TW/en/ja</span></span><br><span class="line"><span class="deletion">-  placeholder: Please leave your footprints # valine comment input placeholder (like: Please leave your footprints)</span></span><br><span class="line"><span class="deletion">-  guest_info: nick,mail,link # valine comment header info (nick/mail/link)</span></span><br><span class="line"><span class="deletion">-  recordIP: false # Record reviewer IP</span></span><br><span class="line"><span class="deletion">-  bg: # valine background</span></span><br><span class="line"><span class="deletion">-  emojiCDN: # emoji CDN</span></span><br><span class="line"><span class="deletion">-  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar</span></span><br><span class="line"><span class="deletion">-  requiredFields: nick,mail # required fields (nick/mail)</span></span><br><span class="line"></span><br><span class="line">waline:</span><br><span class="line"><span class="deletion">-  avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image</span></span><br><span class="line"><span class="deletion">-  avatarCDN: # Gravatar CDN baseURL</span></span><br></pre></td></tr></table></figure></li><li><p>Page supports table of contents (TOC) #636</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">toc:</span><br><span class="line"><span class="deletion">-  enable: true</span></span><br><span class="line"><span class="addition">+  post: true</span></span><br><span class="line"><span class="addition">+  page: false</span></span><br></pre></td></tr></table></figure></li><li><p>Delete the &quot;hide_sidebar_menu_child&quot; configuration and directly configure it in the menu #640</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="deletion">-# Hide the child menu items in mobile sidebar</span></span><br><span class="line"><span class="deletion">-hide_sidebar_menu_child: false</span></span><br></pre></td></tr></table></figure></li><li><p>Completely remove jQuery</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">CDN:</span><br><span class="line"><span class="deletion">-  jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js</span></span><br></pre></td></tr></table></figure></li><li><p>Remove Tencent Analytics</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-# Tencent Analytics ID</span></span><br><span class="line"><span class="deletion">-# https://mta.qq.com</span></span><br><span class="line"><span class="deletion">-tencent_analytics:</span></span><br></pre></td></tr></table></figure></li><li><p>photofigcaption and fancybox prioritize displaying the &quot;title&quot; attribute of the image, followed by the &quot;alt&quot; attribute #683</p></li><li><p>Support new comment name format, the theme will handle the case sensitivity, and the old format will still be compatible</p></li><li><p>Remove Botian API, note the change in order</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># source: 1  Call a sentence from Hitokoto (Simplified Chinese) https://hitokoto.cn/</span><br><span class="line"># source: 2  Call a sentence (Simplified Chinese) http://yijuzhan.com/</span><br><span class="line"># source: 3  Call today&#x27;s poem (Simplified Chinese) https://www.jinrishici.com/</span><br></pre></td></tr></table></figure></li><li><p>Remove the font-size of HTML and use the default size of the browser</p></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Update fancybox to version 4</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">CDN:</span><br><span class="line"><span class="deletion">-  fancybox_css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css</span></span><br><span class="line"><span class="deletion">-  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js</span></span><br><span class="line"><span class="addition">+  fancybox_css_v4:</span></span><br><span class="line"><span class="addition">+  fancybox_v4:</span></span><br></pre></td></tr></table></figure></li><li><p>Customize the order of the bottom-right buttons #680</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+rightside_item_order:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  hide: # readmode,translate,darkmode,hideAside</span></span><br><span class="line"><span class="addition">+  show: # toc,chat,comment</span></span><br></pre></td></tr></table></figure></li><li><p>Display the website data, show the quantity as 0 when the tags and categories are 0, instead of hiding it</p></li><li><p>Set a height limit for code blocks, the expand button will not disappear after expanding, and can be clicked to collapse again #637</p></li><li><p>Selectively disable lightbox for images #636</p></li><li><p>Add lightbox to Twikoo comments with images</p></li><li><p>Upgrade Facebook comment JS to version 11</p></li><li><p>Set TOC simple_style to display for individual articles #631</p></li><li><p>Add a black overlay to the top image of pages #671</p></li><li><p>Update UI for homepage pagination</p></li><li><p>Change the theme CSS from using &quot;rem&quot; to &quot;em&quot; or &quot;px&quot;</p></li><li><p>Remove the font adjustment button in the bottom-right corner</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="deletion">-# Change font size</span></span><br><span class="line"><span class="deletion">-change_font_size: false</span></span><br></pre></td></tr></table></figure></li><li><p>Add a new tag plugin, timeline #644</p></li><li><p>Remove CDN from the configuration file, default CDN will no longer be displayed in config</p></li><li><p>Replace Justified Gallery with flickr-justified-gallery</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">CDN:</span><br><span class="line"><span class="deletion">-  justifiedGallery_js: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js</span></span><br><span class="line"><span class="deletion">-  justifiedGallery_css: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css</span></span><br><span class="line"><span class="addition">+  flickr_justified_gallery_js:</span></span><br><span class="line"><span class="addition">+  flickr_justified_gallery_css:</span></span><br></pre></td></tr></table></figure></li><li><p>After switching to dark mode, mermaid will also switch to the dark theme</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">mermaid:</span><br><span class="line">  enable: true</span><br><span class="line">  # built-in themes: default/forest/dark/neutral</span><br><span class="line"><span class="deletion">-  theme: default</span></span><br><span class="line"><span class="addition">+  theme: </span></span><br><span class="line"><span class="addition">+    light: default</span></span><br><span class="line"><span class="addition">+    dark: dark</span></span><br></pre></td></tr></table></figure></li><li><p>Mermaid displays correctly after compressing HTML code</p></li><li><p>Mermaid can be used in hidden attribute tag plugins</p></li><li><p>Local search can handle JSON #684</p></li><li><p>Fine-tune the UI of the bottom-right buttons</p></li><li><p>Change the display effect of the list after beautifying the article #693 #686</p></li><li><p>Upgrade Algolia to v4</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">CDN:</span><br><span class="line"><span class="deletion">-  algolia_search: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.js</span></span><br><span class="line"><span class="deletion">-  algolia_search_css: https://cdn.jsdelivr.net/npm/instantsearch.js@2.10.5/dist/instantsearch.min.css</span></span><br><span class="line"><span class="addition">+  algolia_search_v4:</span></span><br><span class="line"><span class="addition">+  instantsearch_v4:</span></span><br></pre></td></tr></table></figure></li><li><p>Add loading display for local search database loading and searching</p></li><li><p>Anchor can be opened on any page, not just post pages</p></li><li><p>Clicking on the article title will jump to the beginning of the article for reading #653</p></li><li><p>TOC can be set to expand all #709</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">toc:</span><br><span class="line"><span class="addition">+  expand: false</span></span><br></pre></td></tr></table></figure></li><li><p>Add a new comment system, Giscus</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+# Giscus</span></span><br><span class="line"><span class="addition">+# https://giscus.app/</span></span><br><span class="line"><span class="addition">+giscus:</span></span><br><span class="line"><span class="addition">+  repo:</span></span><br><span class="line"><span class="addition">+  repo_id:</span></span><br><span class="line"><span class="addition">+  category_id:</span></span><br><span class="line"><span class="addition">+  theme:</span></span><br><span class="line"><span class="addition">+    light: light</span></span><br><span class="line"><span class="addition">+    dark: dark</span></span><br><span class="line"><span class="addition">+  option:</span></span><br><span class="line"></span><br><span class="line">CDN:</span><br><span class="line"><span class="addition">+  giscus:</span></span><br></pre></td></tr></table></figure></li><li><p>Fetch URL for the friend link list</p></li><li><p>Adjust spacing for TOC, add vertical line to identify direct child elements as closed #723</p></li><li><p>Configurable scrollbar color</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">theme_color:</span><br><span class="line"><span class="addition">+  scrollbar_color: &quot;#49b1f5&quot;</span></span><br></pre></td></tr></table></figure></li><li><p>Beautify Firefox browser scrollbar</p></li><li><p>Add blueimp_md5 configuration to CDN</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">CDN:</span><br><span class="line"><span class="addition">+  blueimp_md5:</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fix the bug where the thumbnail image of fancybox is displayed with lazyload enabled</li><li>Fix the bug where the UI is offset due to font size being too large or too small</li><li>Fix the bug where self-built page images do not have blur effect</li><li>Fix the bug where the UI of the navigation bar may become disordered when the window size changes</li><li>Fix the bug where Twikoo comments under pjax may retrieve comments from the previous post #678</li><li>Fix the bug where rightside blocks content and prevents it from being clicked</li><li>Fix the bug where mermaid fails to load on certain pages (when there is an element with id &quot;mermaid&quot;)</li><li>Fix the bug where the search box does not automatically focus</li><li>Fix the bug where an error occurs when comments are not configured for use</li><li>Fix the bug where TOC is displayed off-screen on small devices</li><li>Fix the bug where the reward popup is triggered around the reward button</li><li>Fix the bug where the recent comments time in Waline only shows &quot;just now&quot; (when running with Docker) #730</li><li>Fix the bug where utterances displays incorrectly when issue_term is set to url and og:title</li><li>Fix the bug where the latest comments module still shows when the comment configuration is set to Livere and Facebook Comments</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Optimize the subtitle code, when source is set to false and sub is not configured, it will read the subtitle from the Hexo configuration file without using escape characters</li><li>Prevent iOS from zooming in when clicking on the search box</li><li>Remove the limitation of only clicking the button to expand the sidebar menu #640</li><li>Modify the title size on article pages when there is no top image</li><li>Optimize the UI of the 404 page</li><li>Set transparent image as the default placeholder for lazyload</li><li>Optimize CSS</li><li>Optimize lazyload blur effect appearance</li><li>Move the exit button for reading mode to the bottom-right corner on mobile devices</li><li>Fine-tune UI</li><li>Prevent some browsers from zooming in when clicking the bottom-left button</li><li>Add title display when hovering over the content of the latest comments</li><li>Remove hover effect on buttons</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.8.4 (2021/09/18)</summary><div class="toggle-content"><h2 id="3-8-4-2021-09-18"><a href="#3-8-4-2021-09-18" class="headerlink" title="3.8.4 (2021&#x2F;09&#x2F;18)"></a>3.8.4 (2021&#x2F;09&#x2F;18)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug that caused the inlineImg tag to display incorrectly after opening photofigcaption. (Issue #667)</li><li>Fixed a bug where local search would not work if the search plugin was configured to not search article content. (Issue #666)</li><li>Fixed a bug that could cause incorrect links to related articles. (Issue #549)</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Adjusted the scrollbar color for code blocks. (Issue #651)</li><li>When an image does not have a figcaption, the figcaption code will not be added.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.8.3 (2021/07/30)</summary><div class="toggle-content"><h2 id="3-8-3-2021-07-30"><a href="#3-8-3-2021-07-30" class="headerlink" title="3.8.3 (2021&#x2F;07&#x2F;30)"></a>3.8.3 (2021&#x2F;07&#x2F;30)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where the avatarCDN setting in the Waline comment system was not working.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.8.2 (2021/07/20)</summary><div class="toggle-content"><h2 id="3-8-2-2021-07-20"><a href="#3-8-2-2021-07-20" class="headerlink" title="3.8.2 (2021&#x2F;07&#x2F;20)"></a>3.8.2 (2021&#x2F;07&#x2F;20)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug (#616) where the footer was not displaying at the bottom in some browsers.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Updated configuration file comments (#613).</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.8.1 (2021/07/10)</summary><div class="toggle-content"><h2 id="3-8-1-2021-07-10"><a href="#3-8-1-2021-07-10" class="headerlink" title="3.8.1 (2021&#x2F;07&#x2F;10)"></a>3.8.1 (2021&#x2F;07&#x2F;10)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed the bug where inline mathjax had a scrollbar.</li><li>Fixed the bug where the avatar in the friendly links had the Medium Zoom lightbox (#607).</li><li>Fixed the bug where the avatar in the friendly links had the FancyBox lightbox (#607).</li></ol><h3 id="Dependencies"><a href="#Dependencies" class="headerlink" title="Dependencies"></a>Dependencies</h3><ol><li>update hexo-renderer-pug</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.8.0 (2021/07/04)</summary><div class="toggle-content"><h2 id="3-8-0-2021-07-04"><a href="#3-8-0-2021-07-04" class="headerlink" title="3.8.0 (2021&#x2F;07&#x2F;04)"></a>3.8.0 (2021&#x2F;07&#x2F;04)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>The title of archives is now obtained from the menu configuration.</p></li><li><p>Removed the option to choose the comment service for the latest comments. It now defaults to the first comment service in the configuration.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">newest_comments:</span><br><span class="line">  enable: false</span><br><span class="line">  sort_order: # Don&#x27;t modify the setting unless you know how it works</span><br><span class="line">  limit: 6</span><br><span class="line">  storage: 10 # unit: mins, save data to localStorage</span><br><span class="line">  avatar: true</span><br><span class="line"><span class="deletion">-  # You can only choose one, or neither</span></span><br><span class="line"><span class="deletion">-  valine: false</span></span><br><span class="line"><span class="deletion">-  github_issues:</span></span><br><span class="line"><span class="deletion">-    enable: false</span></span><br><span class="line"><span class="deletion">-    repo:</span></span><br><span class="line"><span class="deletion">-  disqus:</span></span><br><span class="line"><span class="deletion">-    enable: false</span></span><br><span class="line"><span class="deletion">-    forum:</span></span><br><span class="line"><span class="deletion">-    api_key:</span></span><br><span class="line"><span class="deletion">-  twikoo: false</span></span><br><span class="line"><span class="deletion">-  waline: false</span></span><br></pre></td></tr></table></figure></li><li><p>Changed the way widgets are written and added the ability to add non-sticky area widgets.</p></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Modified the icon for the latest comments.</p></li><li><p>Adapted waline colors to match the theme color.</p></li><li><p>Added waline avatarCDN configuration (also updates the latest comments).</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">waline:</span><br><span class="line">   ...</span><br><span class="line"><span class="addition">+avatarCDN： # Gravatar CDN baseURL</span></span><br></pre></td></tr></table></figure></li><li><p>Upgraded facebook comment js to v10.</p></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed the bug where the avatar for the friend links and aside were not displayed properly under lazyload blur.</li><li>Fixed the bug where some code blocks were still expanded after setting highlight_shrink to true (#602).</li><li>Fixed the bug where mathjax caused the list to lose its style (#586).</li><li>Fixed the bug where mathjax on the article page caused overlapping display due to small font size (#587).</li><li>Fixed the bug where the footer did not align to the bottom when the content was too short.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>UI optimization.</li><li>Adjusted waline font size and avatar effects.</li><li>Optimized pjax.</li><li>Reduced lag by setting background-attachment to scroll for the homepage on Apple devices.</li><li>The 404 page no longer displays the right side.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.7.8 (2021/06/05)</summary><div class="toggle-content"><h2 id="3-7-8-2021-06-05"><a href="#3-7-8-2021-06-05" class="headerlink" title="3.7.8 (2021&#x2F;06&#x2F;05)"></a>3.7.8 (2021&#x2F;06&#x2F;05)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li>Removed the emojiCDN and emojiMaps configurations for waline.</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed bugs that occurred when upgrading to waline 1.x.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.7.7 (2021/05/11)</summary><div class="toggle-content"><h2 id="3-7-7-2021-05-11"><a href="#3-7-7-2021-05-11" class="headerlink" title="3.7.7 (2021&#x2F;05&#x2F;11)"></a>3.7.7 (2021&#x2F;05&#x2F;11)</h2><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Adapted to the new version of waline&#39;s dark mode.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.7.6 (2021/05/09)</summary><div class="toggle-content"><h2 id="3-7-6-2021-05-09"><a href="#3-7-6-2021-05-09" class="headerlink" title="3.7.6 (2021&#x2F;05&#x2F;09)"></a>3.7.6 (2021&#x2F;05&#x2F;09)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where pjax would throw an error when the title&#x2F;blog name contains an apostrophe.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Adjusted the CSS.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.7.5 (2021/05/05)</summary><div class="toggle-content"><h2 id="3-7-5-2021-05-05"><a href="#3-7-5-2021-05-05" class="headerlink" title="3.7.5 (2021&#x2F;05&#x2F;05)"></a>3.7.5 (2021&#x2F;05&#x2F;05)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Optimization of site_verification, manual configuration required</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-# Google Webmaster tools verification setting</span></span><br><span class="line"><span class="deletion">-# See: https://www.google.com/webmasters/</span></span><br><span class="line"><span class="deletion">-google_site_verification:</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-# Bing Webmaster tools verification setting</span></span><br><span class="line"><span class="deletion">-# See: https://www.bing.com/webmaster/</span></span><br><span class="line"><span class="deletion">-bing_site_verification:</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-# Baidu Webmaster tools verification setting</span></span><br><span class="line"><span class="deletion">-# See: https://ziyuan.baidu.com/site/</span></span><br><span class="line"><span class="deletion">-baidu_site_verification:</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-# 360 Webmaster tools verification setting</span></span><br><span class="line"><span class="deletion">-# see http://zhanzhang.so.com/</span></span><br><span class="line"><span class="deletion">-qihu_site_verification:</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-# Yandex Webmaster tools verification setting</span></span><br><span class="line"><span class="deletion">-# see https://webmaster.yandex.com/</span></span><br><span class="line"><span class="deletion">-yandex_site_verification:</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+site_verification:</span></span><br></pre></td></tr></table></figure></li><li><p>Optimization of lazyload (added Gaussian blur transition effect, expanded lazyload configuration range, applied placeholder image to the entire site)</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">lazyload:</span><br><span class="line">  enable: false</span><br><span class="line"><span class="deletion">-  post: /img/loading.gif</span></span><br><span class="line"><span class="addition">+  field: site # site/post</span></span><br><span class="line"><span class="addition">+  placeholder: /img/loading.gif</span></span><br><span class="line"><span class="addition">+  blur: false</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Added tags plugin - label</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed bug where after opening an anchor, the article page would redirect to the homepage with the hash of the last title of the article added to the homepage URL</li><li>Fixed bug where after opening an anchor, navigating to the previous&#x2F;next page in the browser would result in a 404 error (the URL hash of the article page became undefined under pjax)</li><li>Fixed bug where lazyload would report undefined error close #532</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Optimization of 404 page under pjax</li><li>Optimization of button tags plugin</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.7.1 (2021/03/30)</summary><div class="toggle-content"><h2 id="3-7-1-2021-03-30"><a href="#3-7-1-2021-03-30" class="headerlink" title="3.7.1 (2021&#x2F;03&#x2F;30)"></a>3.7.1 (2021&#x2F;03&#x2F;30)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed the bug where the URL format for the latest comments on GitHub issues was not being retrieved correctly.</li><li>Fixed the bug where Disqus and DisqusJS were unable to load when the title contained an apostrophe.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.7.0 (2021/03/18)</summary><div class="toggle-content"><h2 id="3-7-0-2021-03-18"><a href="#3-7-0-2021-03-18" class="headerlink" title="3.7.0 (2021&#x2F;03&#x2F;18)"></a>3.7.0 (2021&#x2F;03&#x2F;18)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Changed the syntax for subdirectories to match that of parent directories.</p></li><li><p>Removed Artitalk (If needed, please install hexo-butterfly-artitalk instead)</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-# Artitalk</span></span><br><span class="line"><span class="deletion">-# see https://artitalk.js.org/</span></span><br><span class="line"><span class="deletion">-artitalk:</span></span><br><span class="line"><span class="deletion">-  appId:</span></span><br><span class="line"><span class="deletion">-  appKey:</span></span><br><span class="line"><span class="deletion">-  option:</span></span><br><span class="line"></span><br><span class="line">CDN:</span><br><span class="line"><span class="deletion">-artitalk: https://cdn.jsdelivr.net/npm/artitalk</span></span><br></pre></td></tr></table></figure></li><li><p>Updated the JavaScript and CSS CDN for katex_copytex.</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"><span class="deletion">-katex_copytex: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js</span></span><br><span class="line"><span class="deletion">-katex_copytex_css: https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+katex_copytex: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.min.js</span></span><br><span class="line"><span class="addition">+katex_copytex_css: https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/copy-tex.css</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Added the ability to set a code height limit and display an expand button.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+highlight_height_limit: false # unit: px</span></span><br></pre></td></tr></table></figure></li><li><p>prismjs can now be configured with code_word_wrap.</p></li><li><p>Added the kbd style #507.</p></li><li><p>Added article view count configuration provided by waline, valine, and twikoo #502.</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">valine:</span><br><span class="line"><span class="addition">+  visitor: false</span></span><br><span class="line">waline:</span><br><span class="line"><span class="addition">+  visitor: false</span></span><br><span class="line">twikoo:</span><br><span class="line"><span class="addition">+  visitor: false</span></span><br></pre></td></tr></table></figure></li><li><p>Added HexoPlusPlus_Talk (requires installation of hexo-butterfly-hpptalk).</p></li><li><p>Added the inlineImg plugin for tags.</p></li><li><p>Added option configuration for gitalk.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">gitalk:</span><br><span class="line">  createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically</span><br><span class="line"><span class="addition">+  option:</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed the bug where prismjs was auto-wrapping on iOS Safari.</li><li>Fixed the bug where the default code size was not changing with font size changes.</li><li>Fixed the bug where unrecognized languages in prismjs were displaying &quot;null&quot; instead of code.</li><li>Fixed the issue where running with no configuration would report &quot;null&quot; at runtime.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Home page tabs will now scroll to the article section #519.</li><li>Optimized CSS and simplified custom code color CSS configuration.</li><li>Made the search hover effect consistent with other directories.</li><li>Adapted Baidu statistics for pjax #516.</li><li>When both the article page cover and default_img are not configured, it will read the default_top_img parameter.</li><li>Changed one API to use HTTPS.</li><li>Optimized pug code.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.6.2 (2021/02/03)</summary><div class="toggle-content"><h2 id="3-6-2-2021-02-03"><a href="#3-6-2-2021-02-03" class="headerlink" title="3.6.2 (2021&#x2F;02&#x2F;03)"></a>3.6.2 (2021&#x2F;02&#x2F;03)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where mathjax and katex were not loading JavaScript.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.6.1 (2021/02/01)</summary><div class="toggle-content"><h2 id="3-6-1-2021-02-01"><a href="#3-6-1-2021-02-01" class="headerlink" title="3.6.1 (2021&#x2F;02&#x2F;01)"></a>3.6.1 (2021&#x2F;02&#x2F;01)</h2><h3 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h3><ol><li>Fixed an issue where a scroll bar appeared on the article page with a table of contents on non-iOS devices.</li><li>Fixed an issue on non-iOS devices where the relative positioning of elements inside the layout tag, such as <code>position: fixed</code>, would be altered.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.6.0 (2021/01/30)</summary><div class="toggle-content"><h2 id="3-6-0-2021-01-30"><a href="#3-6-0-2021-01-30" class="headerlink" title="3.6.0 (2021&#x2F;01&#x2F;30)"></a>3.6.0 (2021&#x2F;01&#x2F;30)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Added comment count display on the homepage.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">comments:</span><br><span class="line">  ...</span><br><span class="line">  count: false # Display comment count in post&#x27;s top_img</span><br><span class="line"><span class="addition">+  card_post_count: false # Display comment count in Home Page</span></span><br></pre></td></tr></table></figure></li><li><p>Updates to the latest comments.</p><ol><li><code>&lt;a&gt;</code> tags will display <code>[link]</code>.</li><li><code>&lt;img&gt;</code> tags will display <code>[image]</code>.</li><li><code>&lt;pre&gt;&lt;code&gt;</code> tags will display <code>[code]</code>.</li><li>The URL obtained from github-issues will now link to the corresponding article instead of the issues page.</li><li>Added datetime attribute to the time element.</li><li>When obtaining avatars from Waline, it will first check if the avatar attribute for QQ is available in the Waline database.</li><li>Changed the display time for some comments to the update time.</li></ol></li><li><p>Changed the &quot;View More&quot; button in the aside section to an icon displayed in the top right corner.</p></li><li><p>Added configuration for the cache time of the latest comments.</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">newest_comments:</span><br><span class="line">  enable: false</span><br><span class="line">  sort_order: # Don&#x27;t modify the setting unless you know how it works</span><br><span class="line">  limit: 6</span><br><span class="line"><span class="addition">+  storage: 10 # unit: mins, save data to localStorage</span></span><br></pre></td></tr></table></figure></li><li><p>Added post_pagination configuration (can be disabled&#x2F;configured for pagination logic).</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"><span class="addition">+# post_pagination (pagination)</span></span><br><span class="line"><span class="addition">+# value: 1 || 2 || false</span></span><br><span class="line"><span class="addition">+# 1: The &#x27;next post&#x27; will link to old post</span></span><br><span class="line"><span class="addition">+# 2: The &#x27;next post&#x27; will link to new post</span></span><br><span class="line"><span class="addition">+# false: disable pagination</span></span><br><span class="line"><span class="addition">+post_pagination: 1</span></span><br></pre></td></tr></table></figure></li><li><p>Changed the copyright in the top right corner of the article to a copyright icon.</p></li><li><p>Added configuration to disable all top_img banners.</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">+# Disable all banner image</span></span><br><span class="line"><span class="addition">+disable_top_img: false</span></span><br></pre></td></tr></table></figure></li><li><p>Added post_edit configuration.</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="addition">+# Post edit</span></span><br><span class="line"><span class="addition">+# Easily browse and edit blog source code online.</span></span><br><span class="line"><span class="addition">+post_edit:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/</span></span><br><span class="line"><span class="addition">+  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/</span></span><br><span class="line"><span class="addition">+  url:</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where the icon text in the sliding submenu on the article page was not displayed (#481).</li><li>Fixed a bug where page elements would appear blurry and then clear when entering the page on Chrome (#479).</li><li>Fixed a bug where the background color of code blocks in read mode was not displayed correctly in dark mode.</li><li>Fixed a bug where the donation button would have abnormal hover effects due to excessive text (#473).</li><li>Fixed a bug where inline elements (emoticons&#x2F;images) in comments would become block elements (line breaks).</li><li>Fixed a bug where the highlight in the toc would be on the previous element when clicking on the toc.</li><li>Fixed a bug where the donation image link would be incorrect in subdirectories.</li><li>Fixed a bug where clicking to close the random feature would not work.</li><li>Fixed a bug where the menu would not be properly styled when the device was rotated horizontally.</li><li>Fixed a bug where the 404 page would not be redirected under pjax.</li><li>Fixed a bug where the Twikoo comment count would throw an error due to regional issues.</li><li>Fixed a bug where background images with parentheses in the URL would not be displayed.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Limited the meta description to 150 characters (#480).</li><li>Optimized and restructured the Pug code.</li><li>Optimized the Pug conditionals.</li><li>Added title display to the friendly links interface (when top_img is set to false).</li><li>Upgraded the Facebook comment SDK version.</li><li>Improved the display of the toc so that the navigation bar does not overlap the toc when scrolling up (#472).</li><li>Changed Pangu to render on the entire site.</li><li>Optimized the latest comments JavaScript.</li><li>Adjusted the margin of the Readmode title.</li><li>Fine-tuned the box-shadow for card hover effects.</li><li>Added hover effect to the 404 page card.</li><li>Removed some unnecessary code.</li></ol><h3 id="Remove"><a href="#Remove" class="headerlink" title="Remove"></a>Remove</h3><ol><li><p>Removed Baidu push (Baidu has deprecated it) and Baidu transformation.</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"><span class="deletion">-# Disable Baidu transformation on mobile devices</span></span><br><span class="line"><span class="deletion">-disable_baidu_transformation: true</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-# Baidu Push</span></span><br><span class="line"><span class="deletion">-baidu_push: false</span></span><br></pre></td></tr></table></figure></li><li><p>Removed fragment_cache configuration (enabled by default).</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="deletion">-# Caches the contents in a fragment, speed up the generation</span></span><br><span class="line"><span class="deletion">-fragment_cache: true</span></span><br></pre></td></tr></table></figure></li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.5.1 (2020/12/31)</summary><div class="toggle-content"><h2 id="3-5-1-2020-12-31"><a href="#3-5-1-2020-12-31" class="headerlink" title="3.5.1 (2020&#x2F;12&#x2F;31)"></a>3.5.1 (2020&#x2F;12&#x2F;31)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Added region configuration to Twikoo.</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug in Twikoo where the latest comments were not being displayed in the Guangzhou region.</li><li>Fixed a bug in Waline where the background setting was not being applied.</li><li>Fixed a bug in Twikoo where an error occurred when entering the post page in the Guangzhou region.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.5.0 (2020/12/30)</summary><div class="toggle-content"><h2 id="3-5-0-2020-12-30"><a href="#3-5-0-2020-12-30" class="headerlink" title="3.5.0 (2020&#x2F;12&#x2F;30)"></a>3.5.0 (2020&#x2F;12&#x2F;30)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Added a close button for the aside personal profile widget.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">aside:</span><br><span class="line"> ...</span><br><span class="line">  card_author:</span><br><span class="line">    enable: true</span><br><span class="line">    description:</span><br><span class="line">    button:</span><br><span class="line"><span class="addition">+      enable: true</span></span><br><span class="line">      icon: fab fa-github</span><br><span class="line">      text: Theme GitHub</span><br><span class="line">      link: https://github.com/jerryc127/hexo-theme-butterfly</span><br></pre></td></tr></table></figure></li><li><p>Added Cloudflare Analytics.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+# Cloudflare Analytics</span></span><br><span class="line"><span class="addition">+# https://www.cloudflare.com/zh-tw/web-analytics/</span></span><br><span class="line"><span class="addition">+cloudflare_analytics:</span></span><br></pre></td></tr></table></figure></li><li><p>Added Microsoft Clarity.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+# Microsoft Clarity</span></span><br><span class="line"><span class="addition">+# https://clarity.microsoft.com/</span></span><br><span class="line"><span class="addition">+microsoft_clarity:</span></span><br></pre></td></tr></table></figure></li><li><p>Improved readmode.</p></li><li><p>Added custom widgets for the aside section.</p></li><li><p>Added sorting for aside widgets (only applicable to page and sticky).</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">aside:</span><br><span class="line"> ...</span><br><span class="line">  card_recent_post:</span><br><span class="line"><span class="addition">+    sort_order: # Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  card_categories:</span><br><span class="line"><span class="addition">+    sort_order: # Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  card_tags:</span><br><span class="line"><span class="addition">+    sort_order: # Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  card_archives:</span><br><span class="line"><span class="addition">+    sort_order: # Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  card_webinfo:</span><br><span class="line"><span class="addition">+    sort_order: # Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line"></span><br><span class="line">newest_comments:</span><br><span class="line">  enable: true</span><br><span class="line"><span class="addition">+  sort_order: # Don&#x27;t modify the setting unless you know how it works</span></span><br></pre></td></tr></table></figure></li><li><p>Added option configuration for twikoo.</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"># Twikoo</span><br><span class="line"># https://github.com/imaegoo/twikoo</span><br><span class="line"><span class="deletion">-twikoo:</span></span><br><span class="line"><span class="addition">+twikoo:</span></span><br><span class="line"><span class="addition">+  envId:</span></span><br><span class="line"><span class="addition">+  option:</span></span><br></pre></td></tr></table></figure></li><li><p>Added Waline comments.</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"><span class="addition">+# waline - A simple comment system with backend support fork from Valine</span></span><br><span class="line"><span class="addition">+# https://waline.js.org/</span></span><br><span class="line"><span class="addition">+waline:</span></span><br><span class="line"><span class="addition">+  serverURL: # Waline server address url</span></span><br><span class="line"><span class="addition">+  avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image</span></span><br><span class="line"><span class="addition">+  emojiCDN: # emoji CDN</span></span><br><span class="line"><span class="addition">+  bg: /img/comment_bg.png # waline background</span></span><br><span class="line"><span class="addition">+  option:</span></span><br></pre></td></tr></table></figure></li><li><p>Added display of Waline comment count.</p></li><li><p>Added latest comments module for Waline.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">newest_comments:</span><br><span class="line">  enable: true</span><br><span class="line">  ...</span><br><span class="line"><span class="addition">+  waline: false</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li><p>Added anchor tags to the latest comment URLs.</p></li><li><p>Optimized the HTML structure.</p></li><li><p>Replaced LeanCloud with Valine for the &quot;newest_comments&quot; feature, removed its configuration, and updated it to read Valine&#39;s configuration.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"># Aside widget - Newest Comments</span><br><span class="line">newest_comments:</span><br><span class="line">  ...</span><br><span class="line"><span class="deletion">-  leancloud:</span></span><br><span class="line"><span class="deletion">-    enable: false</span></span><br><span class="line"><span class="deletion">-    appId: # leancloud application app id</span></span><br><span class="line"><span class="deletion">-    appKey: # leancloud application app key</span></span><br><span class="line"><span class="deletion">-    serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span></span><br><span class="line"><span class="deletion">-    default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank</span></span><br><span class="line"><span class="addition">+ valine: false</span></span><br></pre></td></tr></table></figure></li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.4.2 (2020/12/27)</summary><div class="toggle-content"><h2 id="3-4-2-2020-12-27"><a href="#3-4-2-2020-12-27" class="headerlink" title="3.4.2 (2020&#x2F;12&#x2F;27)"></a>3.4.2 (2020&#x2F;12&#x2F;27)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug (#462) where there was a conflict between opening gitalk comments and the table of contents (toc).</li><li>Fixed an issue where jQuery was still being loaded in some interfaces.</li><li>Fixed a bug that caused medium zoom to throw errors.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.4.1 (2020/12/15)</summary><div class="toggle-content"><h2 id="3-4-1-2020-12-15"><a href="#3-4-1-2020-12-15" class="headerlink" title="3.4.1 (2020&#x2F;12&#x2F;15)"></a>3.4.1 (2020&#x2F;12&#x2F;15)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>The update fixes a bug where buttons do not respond when the tabs plugin is set to -1.</li></ol></div></details> <details class="toggle" ><summary class="toggle-button" style="">3.4.0 (2020/12/13)</summary><div class="toggle-content"><h2 id="3-4-0-2020-12-13"><a href="#3-4-0-2020-12-13" class="headerlink" title="3.4.0 (2020&#x2F;12&#x2F;13)"></a>3.4.0 (2020&#x2F;12&#x2F;13)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li>Removed jQuery</li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Configurable option to add CSS prefixes</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">+# Add the vendor prefixes to ensure compatibility</span></span><br><span class="line"><span class="addition">+css_prefix: true</span></span><br></pre></td></tr></table></figure></li><li><p>Added random configuration for click text effect</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">ClickShowText:</span><br><span class="line">  enable: false</span><br><span class="line">  text:</span><br><span class="line">    - I</span><br><span class="line">    - LOVEeeeeeeeeeeeee</span><br><span class="line">    - YOU</span><br><span class="line">  fontSize: 15px</span><br><span class="line"><span class="addition">+  random: true</span></span><br><span class="line">  mobile: false</span><br></pre></td></tr></table></figure></li><li><p>Added font adjustment button in the bottom right corner</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">+# Change font size</span></span><br><span class="line"><span class="addition">+change_font_size: true</span></span><br></pre></td></tr></table></figure></li><li><p>Added latest comments from Twikoo</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">newest_comments:</span><br><span class="line">  enable: true</span><br><span class="line">   ....</span><br><span class="line"><span class="addition">+  twikoo: true</span></span><br></pre></td></tr></table></figure></li><li><p>Added display of Twikoo comment count</p></li><li><p>Added concise mode for table of contents</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">toc:</span><br><span class="line">  enable: true</span><br><span class="line">  number: true</span><br><span class="line"><span class="addition">+  style_simple: false</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where links would not work when using the justifiedGallery CDN (relative links) in subdirectories.</li><li>Fixed an issue where the bottom-right button would not display correctly when there was no scrollbar.</li><li>Fixed a bug where the pangu configuration for posts would still take effect across the entire website.</li><li>Fixed a positioning issue with the table of contents (toc) when resizing.</li></ol><h3 id="Improvement"><a href="#Improvement" class="headerlink" title="Improvement"></a>Improvement</h3><ol><li>Added lazyload to the latest comment avatars.</li><li>Optimized the display of the latest comments, showing &quot;No comments&quot; when there are none.</li><li>Changed the method of obtaining toc clicks to use document.getElementById to prevent issues with certain characters causing navigation problems.</li><li>If supported by the browser, scroll will now use the native scrolling method.</li><li>Improved search functionality.</li><li>Optimized HTML formatting.</li><li>When there is no scrollbar, the rightside will now be displayed directly.</li><li>Slightly adjusted the margin of the toc on mobile devices.</li><li>Added asynchronous loading for fontawesome and Google fonts.</li><li>Reduced the brightness of ads in night mode.</li><li>When setting aside mobile to false, toc will still be displayed.</li></ol><h3 id="Remove"><a href="#Remove" class="headerlink" title="Remove"></a>Remove</h3><ol><li>Removed ICP configuration. If needed, please use the custom_text configuration.</li><li>Removed unnecessary language files.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.3.0 (2020/10/28)</summary><div class="toggle-content"><h2 id="3-3-0-2020-10-28"><a href="#3-3-0-2020-10-28" class="headerlink" title="3.3.0 (2020&#x2F;10&#x2F;28)"></a>3.3.0 (2020&#x2F;10&#x2F;28)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li>Only supports hexo 5.0.0 and above versions.</li><li>No longer supports the butterfly.yml syntax.</li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Added option settings for Valine:</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">valine:</span><br><span class="line"><span class="addition">+  option:</span></span><br></pre></td></tr></table></figure></li><li><p>Changed toc to display as aside and removed sidebar:</p><ol><li><p>Modified toc UI for mobile.</p></li><li><p>Removed toc auto_open configuration:</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">toc:</span><br><span class="line">  enable: true</span><br><span class="line">  number: true</span><br><span class="line"><span class="deletion">-  auto_open: true # auto open the sidebar</span></span><br></pre></td></tr></table></figure></li><li><p>Optimized the effect and timing of the toc on mobile.</p></li><li><p>Added the ability to store aside state in localStorage.</p></li></ol></li><li><p>Centered article titles.</p></li><li><p>Configurable hiding&#x2F;showing of aside and added button to expand or collapse aside:</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">aside:</span><br><span class="line">  enable: true</span><br><span class="line"><span class="addition">+  hide: false</span></span><br><span class="line"><span class="addition">+  button: true</span></span><br><span class="line">  mobile: true # display on mobile</span><br></pre></td></tr></table></figure></li><li><p>Added Twikoo comments:</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+twikoo:</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h3><ol><li>Improved display of note tags in read mode.</li><li>Streamlined CSS and JS.</li><li>Optimized pjax.</li><li>Changed article page title to h1 for SEO purposes.</li><li>Changed canonical to use the function provided by Hexo.</li><li>Optimized ICP SEO <a href="https://github.com/jerryc127/hexo-theme-butterfly/pull/393">#393</a>.</li><li>Increased the width of the sidebar.</li><li>Adjusted HTML structure, changed mobile-sidebar to sidebar&#x2F;search.</li><li>The scroll-to-comment button now only appears on the comment page.</li></ol><h3 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h3><ol><li>Fixed a bug where mermaid wouldn&#39;t display properly after website compression.</li><li>Fixed a bug where the content of an article wouldn&#39;t display in read mode when top_img was set to false.</li><li>Fixed a bug where the background image of valine would move from left to right when it appeared again.</li><li>Fixed a bug where disqusjs wouldn&#39;t fallback when the API wasn&#39;t set.</li></ol><h3 id="Removals"><a href="#Removals" class="headerlink" title="Removals"></a>Removals</h3><ol><li>Removed unnecessary search configurations.</li><li>Removed Douban configuration. If needed, please use hexo-butterfly-douban.</li><li>Removed redundant CSS and Pug.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.2.0 (2020/09/28)</summary><div class="toggle-content"><h2 id="3-2-0-2020-09-28"><a href="#3-2-0-2020-09-28" class="headerlink" title="3.2.0 (2020&#x2F;09&#x2F;28)"></a>3.2.0 (2020&#x2F;09&#x2F;28)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Renamed <code>canvas_ribbon_piao</code> to <code>canvas_fluttering_ribbon</code>:</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-canvas_ribbon_piao:</span></span><br><span class="line"><span class="addition">+canvas_fluttering_ribbon:</span></span><br><span class="line">  enable: false</span><br><span class="line">  mobile: false</span><br></pre></td></tr></table></figure></li><li><p>Removed special effect JS and switched to CDN import.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">CDN:</span><br><span class="line">  # background effect</span><br><span class="line"><span class="deletion">-  canvas_ribbon: /js/third-party/canvas-ribbon.js</span></span><br><span class="line"><span class="deletion">-  canvas_ribbon_piao: /js/third-party/piao.js</span></span><br><span class="line"><span class="deletion">-  canvas_nest: /js/third-party/canvas-nest.js</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+  canvas_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js</span></span><br><span class="line"><span class="addition">+  canvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js</span></span><br><span class="line"><span class="addition">+  canvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js</span></span><br><span class="line"></span><br><span class="line">  # effect</span><br><span class="line"><span class="deletion">-  activate_power_mode: /js/third-party/activate-power-mode.js</span></span><br><span class="line"><span class="deletion">-  fireworks: /js/third-party/fireworks.js</span></span><br><span class="line"><span class="deletion">-  click_heart: /js/third-party/click_heart.js</span></span><br><span class="line"><span class="deletion">-  ClickShowText: /js/third-party/ClickShowText.js</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+  activate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js</span></span><br><span class="line"><span class="addition">+  fireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js</span></span><br><span class="line"><span class="addition">+  click_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js</span></span><br><span class="line"><span class="addition">+  ClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js</span></span><br><span class="line"></span><br></pre></td></tr></table></figure></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Added the ability to configure whether or not to display the content&#x2F;description of homepage articles.</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"># Display the article introduction on homepage</span><br><span class="line"># 1: description</span><br><span class="line"># 2: both (if the description exists, it will show description, or show the auto_excerpt)</span><br><span class="line"># 3: auto_excerpt (default)</span><br><span class="line"><span class="addition">+# false: do not show the article introduction</span></span><br><span class="line"><span class="comment">index_post_content:</span></span><br><span class="line">  method: 3</span><br><span class="line">  length: 500 # if you set method to 2 or 3, the length need to config</span><br></pre></td></tr></table></figure></li><li><p>Added the ability to configure whether to display the date or relative time for homepage and post pages.</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">post_meta:</span><br><span class="line">  page: # Home Page</span><br><span class="line"><span class="addition">+    date_format: relative # date/relative to display the date or relative time</span></span><br><span class="line">  post:</span><br><span class="line"><span class="addition">+    date_format: relative # date/relative to display the date or relative time</span></span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>Added the ability to configure the top image (leave it empty for default color, specify a color in HEX&#x2F;RGB&#x2F;color word&#x2F;gradient, or provide an image link, or set it to false to hide the top image).</p></li><li><p>Added the ability to configure the footer background (leave it empty for default color, specify a color in HEX&#x2F;RGB&#x2F;color word&#x2F;gradient, provide an image link, or set it to true to use the same top image).</p></li><li><p>Added the ability to configure the website background (specify a color in HEX&#x2F;RGB&#x2F;color word&#x2F;gradient, or provide an image link).</p></li><li><p>Added the ability to configure top images for individual tags using the tag_per_img configuration.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+tag_per_img:</span></span><br></pre></td></tr></table></figure></li><li><p>Added the ability to configure top images for individual categories using the category_per_img configuration.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+category_per_img:</span></span><br></pre></td></tr></table></figure></li><li><p>Optimized the note tag (customizable icon and style override).</p></li><li><p>In night mode, when the background color&#x2F;top image&#x2F;footer background is set to a color, it no longer forces black but instead applies a dimming overlay.</p></li><li><p>Added mobile settings for certain effects (activate_power_mode&#x2F;fireworks&#x2F;click_heart&#x2F;ClickShowText).</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">activate_power_mode:</span><br><span class="line">  ...</span><br><span class="line"><span class="addition">+  mobile: false</span></span><br><span class="line"></span><br><span class="line">fireworks:</span><br><span class="line">   ...</span><br><span class="line"><span class="addition">+  mobile: true</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-click_heart: false</span></span><br><span class="line"><span class="addition">+click_heart:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  mobile: false</span></span><br><span class="line"></span><br><span class="line">ClickShowText:</span><br><span class="line">  enable: false</span><br><span class="line">  ...</span><br><span class="line"><span class="addition">+  mobile: false</span></span><br></pre></td></tr></table></figure></li><li><p>Added the Artitalk comment plugin.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+# Artitalk</span></span><br><span class="line"><span class="addition">+# see https://artitalk.js.org/</span></span><br><span class="line"><span class="addition">+artitalk:</span></span><br><span class="line"><span class="addition">+  appId:</span></span><br><span class="line"><span class="addition">+  appKey:</span></span><br><span class="line"><span class="addition">+  option:</span></span><br><span class="line"></span><br><span class="line">CDN:</span><br><span class="line"><span class="addition">+  artitalk: https://cdn.jsdelivr.net/npm/artitalk</span></span><br></pre></td></tr></table></figure></li><li><p>Added the ability to disable webpage entrance animation.</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">+# Enter transitions (enable webpage entrance animation)</span></span><br><span class="line"><span class="addition">+enter_transitions: true</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h3><ol><li>The preloader will now load on every page under pjax.</li><li>Modified the logic to prevent errors caused by users setting up two lightboxes (only one is allowed).</li><li>Improved time display (e.g. just now, a few minutes ago, a few hours ago, a few days ago, a few months ago).</li><li>Removed unnecessary language files and CSS.</li><li>Open_Graph has been replaced with the built-in hexo generator.</li><li>When hidden sections are not configured, the settings button in the bottom left corner will disappear.</li><li>Added slide effect to expand&#x2F;collapse categories in the aside section.</li><li>Dark mode font color has been darkened.</li><li>Optimized navigation entry to fix bugs where some users couldn&#39;t see the navigation in local testing.</li><li>Updated the latest comments to use REST API calls instead of JS SDK calls for Leancloud. The application no longer needs to be the same as Valine.</li><li>Added error output for the latest comments.</li><li>When tags are set to display in color, the font size will now vary based on the number of articles with that tag.</li><li>Adjusted the font size of the tags and categories pages when the width is less than 768.</li><li>Adjusted the categorization of theme files.</li><li>Valine background image will now be hidden when clicking on the comment box.</li></ol><h3 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h3><ol><li>Fixed an issue where pjax would not work when the description was not set in hexo&#39;s _config file.</li><li>Fixed a bug where the text effect on mouse click would cause a scrollbar when the text was too long.</li><li>Fixed a bug where local search article links were not redirecting properly.</li></ol><h3 id="Remove"><a href="#Remove" class="headerlink" title="Remove"></a>Remove</h3><ol><li><p>Removed anime js and integrated it into the js file of fireworks.</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">CDN:</span><br><span class="line"><span class="deletion">-  anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js</span></span><br></pre></td></tr></table></figure></li><li><p>Deleted unnecessary language files.</p></li></ol><h3 id="chore"><a href="#chore" class="headerlink" title="chore"></a>chore</h3><ol><li>update hexo-renderer-stylus to 2.0.1</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.1.1 (2020/09/06)</summary><div class="toggle-content"><h2 id="3-1-1-2020-09-06"><a href="#3-1-1-2020-09-06" class="headerlink" title="3.1.1 (2020&#x2F;09&#x2F;06)"></a>3.1.1 (2020&#x2F;09&#x2F;06)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where &#39;hour&#39; was not found after closing the last push date.</li><li>Fixed a bug where JavaScript errors occurred in older versions of Safari when PrismJS was enabled.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.1.0 (2020/08/31)</summary><div class="toggle-content"><h2 id="3-1-0-2020-08-31"><a href="#3-1-0-2020-08-31" class="headerlink" title="3.1.0 (2020&#x2F;08&#x2F;31)"></a>3.1.0 (2020&#x2F;08&#x2F;31)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li>Only supports hexo versions 4.2.0 and above.</li><li>butterfly.yml now uses deepMerge to merge with the _config file instead of replacing it.</li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Adapted prismjs for hexo 5.0.0, including code themes and various features.</p></li><li><p>Adapted prismjs caption for hexo 5.1.0.</p></li><li><p>Mobile sidebar submenus can now be hidden.</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">+# Hide the child menu items in mobile sidebar</span></span><br><span class="line"><span class="addition">+hide_sidebar_menu_child: false</span></span><br></pre></td></tr></table></figure></li><li><p>Added smooth scrolling effect when clicking on toc when the width is less than 1024.</p></li><li><p>Configurable font size and changed code-font to code-font-family in the configuration.</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">font:</span><br><span class="line"><span class="addition">+  global-font-size:</span></span><br><span class="line"><span class="addition">+  code-font-size:</span></span><br><span class="line">   font-family:</span><br><span class="line"><span class="deletion">-   code-font:</span></span><br><span class="line"><span class="addition">+   code-font-family:</span></span><br></pre></td></tr></table></figure></li><li><p>Changed some CSS from &#39;px&#39; to &#39;em&#39; to adapt to changes in font size values.</p></li><li><p>Added exclude configuration for pjax.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-pjax: false</span></span><br><span class="line"><span class="addition">+pjax:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  exclude:</span></span><br></pre></td></tr></table></figure></li><li><p>Added cnzz_analytics.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"># Analysis</span><br><span class="line"># --------------------------------------</span><br><span class="line"></span><br><span class="line"># Baidu Analytics</span><br><span class="line"># https://tongji.baidu.com/web/welcome/login</span><br><span class="line">baidu_analytics:</span><br><span class="line"></span><br><span class="line"># Google Analytics</span><br><span class="line"># https://analytics.google.com/analytics/web/</span><br><span class="line">google_analytics:</span><br><span class="line"></span><br><span class="line"># Tencent Analytics</span><br><span class="line"># https://mta.qq.com/</span><br><span class="line">tencent_analytics: #500727214</span><br><span class="line"></span><br><span class="line"><span class="addition">+# CNZZ Analytics</span></span><br><span class="line"><span class="addition">+# https://www.umeng.com/</span></span><br><span class="line"><span class="addition">+cnzz_analytics:</span></span><br></pre></td></tr></table></figure></li><li><p>Changed Tencent Analytics to Tencent Mobile Analytics and adapted it for pjax.</p></li><li><p>Added position sticky to aside.</p></li><li><p>Changed the way addtoany items are written.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">addtoany:</span><br><span class="line">  enable: false</span><br><span class="line"><span class="deletion">-  item:</span></span><br><span class="line"><span class="deletion">-    - facebook</span></span><br><span class="line"><span class="deletion">-    - twitter</span></span><br><span class="line"><span class="deletion">-    - wechat</span></span><br><span class="line"><span class="deletion">-    - sina_weibo</span></span><br><span class="line"><span class="deletion">-    - facebook_messenger</span></span><br><span class="line"><span class="deletion">-    - email</span></span><br><span class="line"><span class="deletion">-    - copy_link</span></span><br><span class="line"><span class="addition">+item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link</span></span><br></pre></td></tr></table></figure></li><li><p>Added display of last update time and post count configuration to aside.</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">aside:</span><br><span class="line"><span class="deletion">-  card_webinfo: true</span></span><br><span class="line"><span class="addition">+  card_webinfo:</span></span><br><span class="line"><span class="addition">+    enable: true</span></span><br><span class="line"><span class="addition">+    post_count: true</span></span><br><span class="line"><span class="addition">+    last_push_date: true</span></span><br></pre></td></tr></table></figure></li><li><p>Added newest comments widget to aside.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+newest_comments:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  limit: 6</span></span><br><span class="line"><span class="addition">+  avatar: true</span></span><br><span class="line"><span class="addition">+  leancloud:</span></span><br><span class="line"><span class="addition">+    enable: false</span></span><br><span class="line"><span class="addition">++    appId: # leancloud application app id</span></span><br><span class="line"><span class="addition">+    appKey: # leancloud application app key</span></span><br><span class="line"><span class="addition">+    serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span></span><br><span class="line"><span class="addition">+    default_avatar: mp # mp/identicon/monsterid/wavatar/retro/robohash/blank</span></span><br><span class="line"><span class="addition">+  github_issues:</span></span><br><span class="line"><span class="addition">+    enable: false</span></span><br><span class="line"><span class="addition">+    repo:</span></span><br><span class="line"><span class="addition">+  disqus:</span></span><br><span class="line"><span class="addition">+    enable: false</span></span><br><span class="line"><span class="addition">+    forum:</span></span><br><span class="line"><span class="addition">+    api_key:</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Improvements"><a href="#Improvements" class="headerlink" title="Improvements"></a>Improvements</h3><ol><li>Changed the layout of &quot;archives&quot; and &quot;card-post&quot; to use flexbox.</li><li>Added a scroll offset of 60px when scrolling up to avoid the navigation bar blocking the content.</li><li>Switched from using cookies to store data to using <em>localStorage</em>.</li><li>Made it possible to configure individual theme colors in the settings, instead of having to enable all of them.</li><li>Adjusted the display of &quot;webinfo&quot; when the width is small.</li><li>Adjusted the padding of content in the &quot;aside&quot; section.</li><li>When using Pjax, the page will now scroll to the last viewed position when refreshed.</li><li>Fixed a bug where mathjax content was overflowing the screen.</li><li>Made some CSS adjustments and HTML optimizations.</li><li>Removed the theme-color configuration in the PWA, now using the default generated meta theme-color.</li><li>Added &quot;view more&quot; links to &quot;card-categories&quot; and &quot;card-archives&quot;.</li><li>Changed the code names to be all uppercase.</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where the configuration of &quot;canvas_nest&quot; was not being applied.</li><li>Fixed a bug where the &quot;rightsize-bottom&quot; configuration was not working.</li><li>Fixed a bug where code blocks had a background in dark mode when rendering was disabled.</li><li>Fixed a bug where code blocks in the &quot;tags-toggle&quot; plugin were displayed as a single line.</li><li>Fixed a bug where code blocks in the &quot;tags-toggle&quot; plugin were compressed to a single line when rendering was disabled.</li><li>Fixed a bug in the &quot;modern&quot; style where the &quot;note&quot; plugin did not have a background color and the text was not clear in dark mode when tags were not used.</li><li>Fixed a bug where the corners of article covers on the homepage had small white edges in dark mode.</li><li>Fixed a bug in the &quot;note&quot; plugin where code blocks were displaying a background color.</li><li>Fixed a bug where the scroll percentage of the table of contents was inaccurate.</li><li>Fixed a bug where an error was thrown when comments were not configured.</li><li>Fixed a bug where related article covers were not displayed in subdirectories of the website.</li></ol><h3 id="Remove"><a href="#Remove" class="headerlink" title="Remove"></a>Remove</h3><ol><li>Removed the font zoom in&#x2F;out buttons.</li><li>Removed the default code theme.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.0.1 (2020/08/11)</summary><div class="toggle-content"><h2 id="3-0-1-2020-08-11"><a href="#3-0-1-2020-08-11" class="headerlink" title="3.0.1 (2020&#x2F;08&#x2F;11)"></a>3.0.1 (2020&#x2F;08&#x2F;11)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where the navigation sidebar did not have the entrance effect.</li><li>Fixed a bug in versions below Hexo 5.0.0 where the table of contents (TOC) did not scroll when encountering Chinese characters.</li><li>Fixed bugs related to using Open Graph meta and Livere simultaneously under pjax. The source page displayed in the Livere comment backend was different from the actual page.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.0.0 (2020/08/05)</summary><div class="toggle-content"><h2 id="3-0-0-2020-08-05"><a href="#3-0-0-2020-08-05" class="headerlink" title="3.0.0 (2020&#x2F;08&#x2F;05)"></a>3.0.0 (2020&#x2F;08&#x2F;05)</h2><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where lazyload was not working on the article page.</li><li>Fixed another bug where lazyload was not working on the article page.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.0.0-RC2 (2020/08/01)</summary><div class="toggle-content"><h2 id="3-0-0-RC2-2020-08-01"><a href="#3-0-0-RC2-2020-08-01" class="headerlink" title="3.0.0-RC2 (2020&#x2F;08&#x2F;01)"></a>3.0.0-RC2 (2020&#x2F;08&#x2F;01)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Added support for dual comment system configuration&#x2F;comment configuration organization&#x2F;comment lazyload.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+comments:</span></span><br><span class="line"><span class="addition">+  # Up to two comments system, the first will be shown as default</span></span><br><span class="line"><span class="addition">+  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments</span></span><br><span class="line"><span class="addition">+  use:</span></span><br><span class="line"><span class="addition">+  # - Valine</span></span><br><span class="line"><span class="addition">+  # - Disqus</span></span><br><span class="line"><span class="addition">+  text: true # Display the comment name next to the button</span></span><br><span class="line"><span class="addition">+  # lazyload: The comment system will be load when comment element enters the browser&#x27;s viewport.</span></span><br><span class="line"><span class="addition">+  # If you set it to false, the comment count will be invalid</span></span><br><span class="line"><span class="addition">+  lazyload: false</span></span><br><span class="line"><span class="addition">+  count: false # Display comment count in top_img</span></span><br><span class="line"></span><br><span class="line">disqus:</span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"><span class="deletion">-  count: false # dispaly comment count in top_img</span></span><br><span class="line"></span><br><span class="line">disqusjs:</span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"><span class="deletion">-  count: false # dispaly comment count in top_img</span></span><br><span class="line"></span><br><span class="line">livere:</span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"></span><br><span class="line">gitalk:</span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"><span class="deletion">-  count: false # dispaly comment count in top_img</span></span><br><span class="line"></span><br><span class="line">valine:</span><br><span class="line"><span class="deletion">-  enable: false # if you want use valine,please set this value is true</span></span><br><span class="line"><span class="deletion">-  count: false # dispaly comment count in top_img</span></span><br><span class="line"></span><br><span class="line">utterances:</span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"></span><br><span class="line">facebook_comments:</span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"><span class="deletion">-  count: false</span></span><br></pre></td></tr></table></figure></li><li><p>Organized the footer configuration and modified some language. #279</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-since: 2020</span></span><br><span class="line"><span class="deletion">-footer_custom_text:</span></span><br><span class="line"><span class="deletion">-footer_copyright: true</span></span><br><span class="line"><span class="deletion">-ICP:</span></span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"><span class="deletion">-  url:</span></span><br><span class="line"><span class="deletion">-  text:</span></span><br><span class="line"><span class="deletion">-  icon: /img/icp.png</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+footer:</span></span><br><span class="line"><span class="addition">+  owner:</span></span><br><span class="line"><span class="addition">+    enable: true</span></span><br><span class="line"><span class="addition">+    since: 2020</span></span><br><span class="line"><span class="addition">+  custom_text: </span></span><br><span class="line"><span class="addition">+  copyright: true # Copyright of theme and framework</span></span><br><span class="line"><span class="addition">+  ICP: # Chinese ICP License</span></span><br><span class="line"><span class="addition">+    enable: false</span></span><br><span class="line"><span class="addition">+    url:</span></span><br><span class="line"><span class="addition">+    text:</span></span><br><span class="line"><span class="addition">+    icon: /img/icp.png</span></span><br></pre></td></tr></table></figure></li><li><p>Removed the &#39;Add Bookmark&#39; feature and added a configurable button.</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">aside:</span><br><span class="line">  card_author:</span><br><span class="line">    enable: true</span><br><span class="line">    description:</span><br><span class="line"><span class="addition">+    button:</span></span><br><span class="line"><span class="addition">+      icon: fab fa-github</span></span><br><span class="line"><span class="addition">+      text: Follow Me</span></span><br><span class="line"><span class="addition">+      link: https://github.com/xxxxxx</span></span><br></pre></td></tr></table></figure></li><li><p>Added a character limit configuration for the copied copyright, only adding copyright information if it exceeds a certain number of characters.</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">copy:</span><br><span class="line">  enable: true</span><br><span class="line"><span class="deletion">-  copyright: false</span></span><br><span class="line"><span class="addition">+  copyright:</span></span><br><span class="line"><span class="addition">+    enable: false</span></span><br><span class="line"><span class="addition">+    limit_count: 50</span></span><br></pre></td></tr></table></figure></li><li><p>Added the ability to sort aside recent posts by publish date or update date.</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">aside:</span><br><span class="line">  card_recent_post:</span><br><span class="line">    enable: true</span><br><span class="line">    limit: 5 # if set 0 will show all</span><br><span class="line"><span class="addition">+    sort: date # date or updated</span></span><br></pre></td></tr></table></figure></li><li><p>Updated the CDN for typed.js&#x2F;meting.</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"><span class="deletion">-typed: https://cdn.jsdelivr.net/npm/typed.js</span></span><br><span class="line"><span class="deletion">-meting_js: https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+typed: https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js</span></span><br><span class="line"><span class="addition">+meting_js: https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Added an outdated notice for posts.</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"><span class="addition">+# Displays outdated notice for a post</span></span><br><span class="line"><span class="addition">+noticeOutdate:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  style: flat # style: simple/flat</span></span><br><span class="line"><span class="addition">+  limit_day: 500 # When will it be shown</span></span><br><span class="line"><span class="addition">+  position: top # position: top/bottom</span></span><br><span class="line"><span class="addition">+  message_prev: It has been</span></span><br><span class="line"><span class="addition">+  message_next: days since the last update, the content of the article may be outdated.</span></span><br></pre></td></tr></table></figure></li><li><p>Added a new code block color scheme for Mac light.</p></li><li><p>Added the ability to configure copyright for individual posts.</p></li><li><p>Adjusted the display of category names in card-category to fit in one line.</p></li><li><p>Improved the traditional and simplified Chinese conversion, including the conversion of placeholders.</p></li><li><p>Introduced CSS variables to reduce CSS file size.</p></li><li><p>Added Pjax [Beta] support.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+# Pjax [Beta]</span></span><br><span class="line"><span class="addition">+# It may contain bugs and unstable, give feedback when you find the bugs.</span></span><br><span class="line"><span class="addition">+# https://github.com/MoOx/pjax</span></span><br><span class="line"><span class="addition">+pjax: false</span></span><br></pre></td></tr></table></figure></li><li><p>Added support for the third-party chat service Crisp.</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"><span class="addition">+# crisp</span></span><br><span class="line"><span class="addition">+# https://crisp.chat/en/</span></span><br><span class="line"><span class="addition">+crisp:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  website_id:</span></span><br></pre></td></tr></table></figure></li><li><p>Added auto ad configuration for Google AdSense to reduce unnecessary JavaScript loading.</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">google_adsense:</span><br><span class="line">  enable: false</span><br><span class="line"><span class="addition">+  auto_ads: true</span></span><br><span class="line">  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</span><br><span class="line">  client:</span><br><span class="line">  enable_page_level_ads: true</span><br></pre></td></tr></table></figure></li><li><p>When post_asset_folder is set to true, the top_img and cover of a post can directly reference images in the same-named folder by just specifying the image name and extension. #270</p></li><li><p>Added Yandex Webmaster tools verification configuration.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+# Yandex Webmaster tools verification setting</span></span><br><span class="line"><span class="addition">+# see https://webmaster.yandex.com/</span></span><br><span class="line"><span class="addition">+yandex_site_verification:</span></span><br></pre></td></tr></table></figure></li><li><p>Added the ability to configure whether post-meta displays text.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">post_meta:</span><br><span class="line">  page: # Home Page</span><br><span class="line">    date_type: created # created or updated or both</span><br><span class="line">    categories: true # true or false</span><br><span class="line">    tags: false # true or false</span><br><span class="line"><span class="addition">+    label: true # true or false</span></span><br><span class="line">  post:</span><br><span class="line">    date_type: both # created or updated or both</span><br><span class="line">    categories: true # true or false</span><br><span class="line">    tags: true # true or false</span><br><span class="line"><span class="addition">+    label: true # true or false</span></span><br></pre></td></tr></table></figure></li><li><p>Adjusted the display of post-meta on mobile devices and added support for displaying categories.</p></li><li><p>Changed the scrollbar color of code blocks to match the code theme.</p></li><li><p>Added lazyload for avatars and reward images.</p></li><li><p>Improved the loading speed of highlight-tool.</p></li><li><p>Added the ability to switch themes for disqus&#x2F;disqusjs&#x2F;facebook comments with the night mode button.</p></li><li><p>Upgraded mathjax to version 3.</p></li><li><p>pangu.js now only renders the body-wrap area.</p></li><li><p>Limited the font size increase and decrease to a range of 10px to 20px.</p></li><li><p>Updated the Google Analytics code (gtag).</p></li><li><p>Removed blueimp_md5 js.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-blueimp_md5: https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js</span></span><br></pre></td></tr></table></figure></li><li><p>Made minor adjustments to the night mode and reading mode.</p></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where the button in the bottom right corner was being blocked by the button tag plugin.</li><li>Fixed a bug where opening photofigcaption caused interface distortion in the gallery.</li><li>Fixed a bug where the tabs plugin conflicted with the aplayer plugin.</li><li>Adjusted the spacing of the aplayer.</li><li>Fixed a bug where the highlight_shrink and toc in the article&#39;s front-matter caused JavaScript errors when empty.</li><li>Fixed a bug where using the BUTTON tag nested in other tags resulted in different styles due to the generation of extra br tags.</li><li>Fixed a bug where mobile-sidebar couldn&#39;t scroll on some devices.</li><li>Fixed a bug where text overflowed in certain elements on the article page.</li><li>Adjusted the layout when card-category has a shrink button.</li><li>Fixed a bug where loading files failed when configuring PWA parameters and the website is in a subdirectory.</li><li>Fixed a bug where the hexo douban plugin showed null images when clicking on the previous&#x2F;next page.</li><li>Adapted to hexo 5.0.0 and fixed a bug where toc didn&#39;t jump when clicked.</li><li>Adapted to hexo 5.0.0 and fixed a bug where toc didn&#39;t scroll with the article.</li><li>Fixed a bug where the requiredFields setting in Valine was ineffective when set to empty.</li><li>Adjusted the margin of ol, ul, and li in the mobile interface.</li><li>Fixed a bug where the width of Facebook comments was not 100% on mobile.</li><li>Fixed a bug where share.js shared articles with the same image.</li><li>Removed the underline of the a tag when the note tag plugin is set to modern.</li><li>Corrected some incorrect HTML structures.</li><li>Fixed a bug where the alt attribute of fancybox displayed as undefined.</li><li>Fixed a bug where the ICP text in the footer with a blue background was unclear when hovered.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">3.0.0-RC1 (2020/06/16)</summary><div class="toggle-content"><h2 id="3-0-0-RC1-2020-06-16"><a href="#3-0-0-RC1-2020-06-16" class="headerlink" title="3.0.0-RC1 (2020&#x2F;06&#x2F;16)"></a>3.0.0-RC1 (2020&#x2F;06&#x2F;16)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Starting from version 3.0, IE browser is no longer supported.</p></li><li><p>Forced to use fontawesome v5 (this will affect some custom icons, please replace them with v5 icons).</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-# fontawesome icons</span></span><br><span class="line"><span class="deletion">-# By default, fontawesome v4 icons are used</span></span><br><span class="line"><span class="deletion">-fontawesome_v5:</span></span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"></span><br><span class="line">CDN:</span><br><span class="line"><span class="deletion">-  # fontawesome</span></span><br><span class="line"><span class="deletion">-  fontawesome_v4: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css</span></span><br><span class="line"><span class="deletion">-  fontawesome_v5: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css</span></span><br><span class="line"><span class="addition">+  fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css</span></span><br></pre></td></tr></table></figure></li><li><p>Changes in _config.yml</p><ol><li><p>Simplified baidu_push&#x2F;instantpage&#x2F;click_heart&#x2F;readmode&#x2F;footer_copyright&#x2F;medium_zoom&#x2F;fancybox configurations.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-baidu_push:</span></span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-instantpage:</span></span><br><span class="line"><span class="deletion">-  enable: true</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-click_heart:</span></span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-readmode:</span></span><br><span class="line"><span class="deletion">-  enable: true</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-footer_copyright:</span></span><br><span class="line"><span class="deletion">-  enable: true</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-medium_zoom:</span></span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-fancybox:</span></span><br><span class="line"><span class="deletion">-  enable: true</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+baidu_push: false</span></span><br><span class="line"><span class="addition">+instantpage: true</span></span><br><span class="line"><span class="addition">+click_heart: false</span></span><br><span class="line"><span class="addition">+readmode: true</span></span><br><span class="line"><span class="addition">+footer_copyright: true</span></span><br><span class="line"><span class="addition">+medium_zoom: false</span></span><br><span class="line"><span class="addition">+fancybox: true</span></span><br></pre></td></tr></table></figure></li><li><p>Changed runtimeshow&#39;s start_date to publish_date.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">runtimeshow:</span><br><span class="line">  enable: true</span><br><span class="line"><span class="deletion">-  start_date: 6/7/2018 00:00:00</span></span><br><span class="line"><span class="addition">+  publish_date: 6/7/2018 00:00:00</span></span><br></pre></td></tr></table></figure></li><li><p>Renamed laibili to LiveRe.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-laibili:</span></span><br><span class="line"><span class="addition">+livere:</span></span><br><span class="line">  enable: false</span><br><span class="line">  uid:</span><br></pre></td></tr></table></figure></li><li><p>Changed hr to hr_icon, which can be used to cancel the icon.</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"># Horizontal line</span><br><span class="line"><span class="deletion">-hr:</span></span><br><span class="line"><span class="addition">+hr_icon:</span></span><br><span class="line">  enable: true</span><br><span class="line">  icon: # Unicode of the icon on fontawesome</span><br><span class="line">  icon-top:</span><br></pre></td></tr></table></figure></li><li><p>Changed loading_bg to error_img, and moved post-loading to lazyload.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-lodding_bg:</span></span><br><span class="line"><span class="addition">+error_img:</span></span><br><span class="line">  flink: /img/friend_404.gif # Image after 404</span><br><span class="line">  post_page: /img/404.jpg # Image after 404</span><br><span class="line"><span class="deletion">-  post: /img/loading.gif # Loading animation</span></span><br><span class="line"></span><br><span class="line">lazyload:</span><br><span class="line">  enable: true</span><br><span class="line"><span class="addition">+  post: /img/loading.gif # Loading animation</span></span><br></pre></td></tr></table></figure></li><li><p>Pangu&#39;s field configuration can only be set to site&#x2F;post.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">pangu:</span><br><span class="line">  enable: true</span><br><span class="line"><span class="deletion">-  field: page # page/post</span></span><br><span class="line"><span class="addition">+  field: site # site/post</span></span><br></pre></td></tr></table></figure></li><li><p>Integrated auto_open_sidebar into toc.</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">toc:</span><br><span class="line">  enable: true</span><br><span class="line">  number: true</span><br><span class="line"><span class="addition">+  auto_open: true # auto open the sidebar</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-# auto open the sidebar in &#x27;post&#x27;</span></span><br><span class="line"><span class="deletion">-auto_open_sidebar:</span></span><br><span class="line"><span class="deletion">-  enable: true</span></span><br></pre></td></tr></table></figure></li><li><p>Removed enable configuration for font.</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"># Global font</span><br><span class="line">font:</span><br><span class="line"><span class="deletion">-  enable: false</span></span><br><span class="line"><span class="deletion">-  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, MicrMicrosoft YaHei&quot;, Helvetica Neue, Helvetica, Arial, sans-serif</span></span><br><span class="line"><span class="deletion">-  code-font: consolas, Menlo, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, monospace, Helvetica Neue For Number</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+  font-family:</span></span><br><span class="line"><span class="addition">+  code-font:</span></span><br></pre></td></tr></table></figure></li><li><p>Removed some configurations.</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">valine:</span><br><span class="line"><span class="deletion">-  notify: false # valine mail notify (true/false) Deprecated in v1.4.0+</span></span><br><span class="line"><span class="deletion">-  verify: false # valine verify code (true/false) Deprecated in v1.4.0+</span></span><br><span class="line"></span><br><span class="line">translate:</span><br><span class="line"><span class="deletion">-  # Blog URL</span></span><br><span class="line"><span class="deletion">-  cookieDomain: &#x27;https://xxx/&#x27;</span></span><br></pre></td></tr></table></figure></li><li><p>Removed twitter_meta configuration.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-# Automatically add styles to Twitter shares</span></span><br><span class="line"><span class="deletion">-# -https://i.loli.net/2019/09/08/qm3RfvUCKbct1Wz.png</span></span><br><span class="line"><span class="deletion">-twitter_meta: true</span></span><br></pre></td></tr></table></figure></li></ol></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Table width now occupies the full width of the display.</p></li><li><p>Added system Dark Mode switch monitoring. The theme will switch immediately when the system switches to Dark Mode.</p></li><li><p>card_description now supports HTML writing.</p></li><li><p>Dark Mode and Light Mode switch button icons have been changed.</p></li><li><p>Adapted to the built-in Pullquote tag in Hexo.</p></li><li><p>Added dns-prefetch to the links for Baidu Push.</p></li><li><p>Set canonical to be generated by default and no longer provide configuration.</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="deletion">-# Avoid duplicate URLs and SEO dispersion</span></span><br><span class="line"><span class="deletion">-canonical: true</span></span><br></pre></td></tr></table></figure></li><li><p>Added defer to the instantpage JavaScript loading.</p></li><li><p>Added zIndex configuration to fireworks.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">fireworks:</span><br><span class="line">  enable: false</span><br><span class="line"><span class="addition">+  zIndex: 9999 # -1 or 9999</span></span><br></pre></td></tr></table></figure></li><li><p>New Tag Plugin - button.</p></li><li><p>New Tag Plugin - tabs.</p></li><li><p>Configurable justifiedGallery CDN.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">CDN:</span><br><span class="line"><span class="addition">+  # justifiedGallery</span></span><br><span class="line"><span class="addition">+  justifiedGallery_js: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js</span></span><br><span class="line"><span class="addition">+  justifiedGallery_css: https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css</span></span><br></pre></td></tr></table></figure></li><li><p>New design for the 404 page.</p></li><li><p>aplayer js&#x2F;css can now be configured in the front-matter of the post to prevent inserting code on every page.</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">CDN:</span><br><span class="line"><span class="addition">+  # aplayer</span></span><br><span class="line"><span class="addition">+  aplayer_css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css</span></span><br><span class="line"><span class="addition">+  aplayer_js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js</span></span><br><span class="line"><span class="addition">+  meting_js: https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js</span></span><br></pre></td></tr></table></figure></li><li><p>Added online chat services (chatra&#x2F;tidio&#x2F;daovoice&#x2F;gitter) and the ability to replace the original chat button with a theme chat button.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+# Chat Button [recommend]</span></span><br><span class="line"><span class="addition">+# It will create a button in the bottom right corner of website, and hide the origin button</span></span><br><span class="line"><span class="addition">+chat_btn: false</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+# The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down</span></span><br><span class="line"><span class="addition">+chat_hide_show: false</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+# chatra</span></span><br><span class="line"><span class="addition">+# https://chatra.io/</span></span><br><span class="line"><span class="addition">+chatra:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  id:</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+# tidio</span></span><br><span class="line"><span class="addition">+# https://www.tidio.com/</span></span><br><span class="line"><span class="addition">+tidio:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  public_key:</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+# daovoice</span></span><br><span class="line"><span class="addition">+# http://daovoice.io/</span></span><br><span class="line"><span class="addition">+daovoice:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  app_id:</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+# gitter</span></span><br><span class="line"><span class="addition">+# https://gitter.im/</span></span><br><span class="line"><span class="addition">+gitter:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  room:</span></span><br></pre></td></tr></table></figure></li><li><p>Configurable distance between rightside button and the bottom.</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">+# Distance between the right bottom button and the bottom (default unit is px)</span></span><br><span class="line"><span class="addition">+rightside-bottom:</span></span><br></pre></td></tr></table></figure></li><li><p>Changed lazyload service provider.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">CDN:</span><br><span class="line"><span class="deletion">-lazyload: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js</span></span><br><span class="line"><span class="addition">+lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js</span></span><br></pre></td></tr></table></figure></li><li><p>Added expand&#x2F;collapse button to card-categories.</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">aside:</span><br><span class="line">  card_categories:</span><br><span class="line">    enable: true</span><br><span class="line">    limit: 8 # if set 0 will show all</span><br><span class="line"><span class="addition">+    expand: none # none/true/false</span></span><br></pre></td></tr></table></figure></li><li><p>Changed auto_excerpt to index_post_content, and added three methods to choose from.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-# Automatic excerpt</span></span><br><span class="line"><span class="deletion">-auto_excerpt:</span></span><br><span class="line"><span class="deletion">-  enable: true</span></span><br><span class="line"><span class="deletion">-  length: 150</span></span><br><span class="line"> </span><br><span class="line"><span class="addition">+# Display the article introduction on homepage</span></span><br><span class="line"><span class="addition">+# 1: description</span></span><br><span class="line"><span class="addition">+# 2: both (if the description exists, it will show description. or show the auto_excerpt)</span></span><br><span class="line"><span class="addition">+# 3: auto_excerpt (default)</span></span><br><span class="line"><span class="addition">+index_post_content:</span></span><br><span class="line"><span class="addition">+  method: 3</span></span><br><span class="line"><span class="addition">+  length: 500 # if you set method to 2 or 3, the length need to config</span></span><br></pre></td></tr></table></figure></li><li><p>Can individually set auto_open: false in the post to turn off the automatic opening of the sidebar.</p></li><li><p>Optimized friend links interface code, added category description, and made category name and description optional. Changed the format of the friend links yml (the old format is still valid).</p></li><li><p>Added highlight_shrink to the front-matter of the post&#x2F;page (true or false).</p></li><li><p>Code box optimization</p><ol><li>Adjusted some code colors</li><li>Added a code theme called &quot;mac&quot;</li><li>Code box themes now support customization</li></ol></li><li><p>Removed code highlighting in reading mode</p></li><li><p>Updated js&#x2F;css versions of disqusjs, added nocomment configuration</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">disqusjs:</span><br><span class="line">  enable: false</span><br><span class="line">  shortname:</span><br><span class="line">  siteName:</span><br><span class="line">  apikey:</span><br><span class="line"><span class="deletion">-  api: https://disqus.skk.moe/disqus/ # No need to modify API address in most cases</span></span><br><span class="line"><span class="addition">+  api:</span></span><br><span class="line"><span class="addition">+  nocomment: # Display when a blog post or an article has no comment attached</span></span><br><span class="line">  admin:</span><br><span class="line">  adminLabel:</span><br><span class="line">  count: false # Display comment count in top_img</span><br><span class="line"></span><br><span class="line">CDN:</span><br><span class="line"><span class="deletion">-  disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqus.js</span></span><br><span class="line"><span class="deletion">-  disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1.2/dist/disqusjs.css</span></span><br><span class="line"><span class="addition">+  disqusjs: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js</span></span><br><span class="line"><span class="addition">+  disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css</span></span><br></pre></td></tr></table></figure></li><li><p>Added link configuration for rewards &#x2F; Changed reward format (old format still works) #240</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"># Reward button</span><br><span class="line">reward:</span><br><span class="line">  enable: true</span><br><span class="line">  QR_code:</span><br><span class="line"><span class="deletion">-    - itemlist:</span></span><br><span class="line"><span class="deletion">-        img: /img/wechat.jpg</span></span><br><span class="line"><span class="deletion">-        text: WeChat</span></span><br><span class="line"><span class="deletion">-    - itemlist:</span></span><br><span class="line"><span class="deletion">-        img: /img/alipay.jpg</span></span><br><span class="line"><span class="deletion">-        text: Alipay</span></span><br><span class="line"><span class="addition">+    - img: /img/wechat.jpg</span></span><br><span class="line"><span class="addition">+      link:</span></span><br><span class="line"><span class="addition">+      text: WeChat</span></span><br><span class="line"><span class="addition">+    - img: /img/alipay.jpg</span></span><br><span class="line"><span class="addition">+      link:</span></span><br><span class="line"><span class="addition">+      text: Alipay</span></span><br></pre></td></tr></table></figure></li><li><p>Removed JS-COOKIES</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">CDN:</span><br><span class="line"><span class="deletion">-  js_cookies: https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js</span></span><br></pre></td></tr></table></figure></li><li><p>Added ability to configure whether TOC (Table of Contents) is displayed for articles, even if toc is set to false in the configuration</p></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed alignment issues with sidebar directory collapse&#x2F;expand icons</li><li>Modified some language (zh-CN&#x2F;zh-TW&#x2F;en)</li><li>Fixed bugs where clicking on card-categories and card-archives didn&#39;t navigate</li><li>Fixed bugs where social media links generated incorrect addresses when the website was in a subdirectory</li><li>Fixed bug where Pagination didn&#39;t occupy full width for the last article</li><li>Fixed bug where recommended articles layout didn&#39;t display correctly on Microsoft Edge (old version)</li><li>Fixed bug where font in black code box was not clear in reading mode #223</li><li>Fixed bug where preconnect &#x2F;&#x2F;fonts.googleapis.com was loaded when blog_title_font was not set to a Google font</li><li>Fixed bug where setting copy to false prevented code copying</li><li>Adjusted reading mode</li><li>Fixed bugs where some compression software reported errors when compressing HTML</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">2.3.5(2020/05/01)</summary><div class="toggle-content"><h2 id="2-3-5-2020-05-01"><a href="#2-3-5-2020-05-01" class="headerlink" title="2.3.5 (2020&#x2F;05&#x2F;01)"></a>2.3.5 (2020&#x2F;05&#x2F;01)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li><p>Added the ability to configure the beautify feature to apply to the entire site or just the post pages (#218).</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">beautify:</span><br><span class="line">  enable: true</span><br><span class="line"><span class="addition">+  field: post # site/post</span></span><br><span class="line">  title-prefix-icon: &#x27;\f0c1&#x27;</span><br><span class="line">  title-prefix-icon-color: &#x27;#F47466&#x27;</span><br></pre></td></tr></table></figure></li><li><p>Updated the lazyload JavaScript library.</p> <figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-lazyload:</span></span><br><span class="line"><span class="deletion">-  enable: true</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+lazyload: true</span></span><br><span class="line"></span><br><span class="line">CDN:</span><br><span class="line"></span><br><span class="line"><span class="deletion">-  lazyload: https://cdn.jsdelivr.net/npm/lazysizes@latest/lazysizes.min.js</span></span><br><span class="line"><span class="addition">+  lazyload: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js</span></span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>Added the ability to configure anchors for articles.</p> <figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+ # anchor</span></span><br><span class="line"><span class="addition">+ # when you scroll in post , the url will update according to header id.</span></span><br><span class="line"><span class="addition">+ anchor: false</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed a bug where an error &quot;Cannot read property &#39;trim&#39; of undefined&quot; would occur when a menu icon was not set.</li><li>Fixed a bug where the meta description was not properly escaped when automatically generating the first 200 characters of an article.</li><li>Fixed a bug where images were not displayed when using &#96;&#96; after enabling lazyload.</li><li>Fixed a bug where only 8 tags were displayed on the tags page.</li><li>Fixed a bug where local images were not displayed when the blog root was not &#39;&#x2F;&#39;.</li><li>Fixed a bug where replacing the URL hash caused the page to jump.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">2.3.0(2020/04/26)</summary><div class="toggle-content"><h2 id="2-3-0-2020-04-26"><a href="#2-3-0-2020-04-26" class="headerlink" title="2.3.0(2020&#x2F;04&#x2F;26)"></a>2.3.0(2020&#x2F;04&#x2F;26)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Added Facebook Comments</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+# Facebook Comments Plugin</span></span><br><span class="line"><span class="addition">+# https://developers.facebook.com/docs/plugins/comments/</span></span><br><span class="line"><span class="addition">+facebook_comments:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"><span class="addition">+  app_id:</span></span><br><span class="line"><span class="addition">+  user_id: # optional</span></span><br><span class="line"><span class="addition">+  pageSize: 10 # The number of comments to show</span></span><br><span class="line"><span class="addition">+  order_by: social # social/time/reverse_time</span></span><br><span class="line"><span class="addition">+  lang: en_US # Language en_US/zh_CN/zh_TW and so on</span></span><br><span class="line"><span class="addition">+  count: false</span></span><br></pre></td></tr></table></figure></li><li><p>Added page loading animation Preloader #193</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">+# Loading Animation</span></span><br><span class="line"><span class="addition">+preloader: false</span></span><br></pre></td></tr></table></figure></li><li><p>Configurable aside card-tags to show color or not&#x2F;aside subtitle is configurable, priority is given to the configured content, if not available, show page subtitle #191 &#x2F; Configurable parameters added to aside widget&#x2F;aside widget&#39;s Categories, Tags, post, Archives can be configured with limit&#x2F;Integrate announcement configuration into aside</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">aside:</span><br><span class="line">  enable: true</span><br><span class="line">  mobile: true # Whether to show aside content on mobile pages (display width &lt; 768px)</span><br><span class="line">  position: right # left or right</span><br><span class="line"><span class="deletion">-  card_author: true</span></span><br><span class="line"><span class="deletion">-  card_announcement: true</span></span><br><span class="line"><span class="deletion">-  card_recent_post: true</span></span><br><span class="line"><span class="deletion">-  card_categories: true</span></span><br><span class="line"><span class="deletion">-  card_tags: true</span></span><br><span class="line"><span class="deletion">-  card_archives: true</span></span><br><span class="line"><span class="addition">+  card_author:</span></span><br><span class="line"><span class="addition">+    enable: true</span></span><br><span class="line"><span class="addition">+    description:</span></span><br><span class="line"><span class="addition">+  card_announcement:</span></span><br><span class="line"><span class="addition">+    enable: true</span></span><br><span class="line"><span class="addition">+    content: This is my Blog</span></span><br><span class="line"><span class="addition">+  card_recent_post:</span></span><br><span class="line"><span class="addition">+    enable: true</span></span><br><span class="line"><span class="addition">+    limit: 5 # if set 0 will show all</span></span><br><span class="line"><span class="addition">+  card_categories:</span></span><br><span class="line"><span class="addition">+    enable: true</span></span><br><span class="line"><span class="addition">+    limit: 8 # if set 0 will show all</span></span><br><span class="line"><span class="addition">+  card_tags:</span></span><br><span class="line"><span class="addition">+    enable: true</span></span><br><span class="line"><span class="addition">+    limit: 40 # if set 0 will show all</span></span><br><span class="line"><span class="addition">+    color: false</span></span><br><span class="line"><span class="addition">+  card_archives:</span></span><br><span class="line"><span class="addition">+    enable: true</span></span><br><span class="line"><span class="addition">+    type: monthly # yearly or monthly</span></span><br><span class="line"><span class="addition">+    format: MMMM YYYY # eg: YYYY年MM月</span></span><br><span class="line"><span class="addition">+    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line"><span class="addition">+    limit: 8 # if set 0 will show all</span></span><br><span class="line">  card_webinfo: true</span><br><span class="line">  </span><br><span class="line"><span class="deletion">-# Website Announcement</span></span><br><span class="line"><span class="deletion">-announcement:</span></span><br><span class="line"><span class="deletion">-  content: Thank you for visiting this site, please bookmark ^_^</span></span><br><span class="line"></span><br></pre></td></tr></table></figure></li><li><p>Changed CDN_USE to inject, can insert code into head or bottom</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-# CDN</span></span><br><span class="line"><span class="deletion">-# Required for the website</span></span><br><span class="line"><span class="deletion">-# Add js/css as needed</span></span><br><span class="line"><span class="deletion">-CDN_USE:</span></span><br><span class="line"><span class="deletion">-  css:</span></span><br><span class="line"><span class="deletion">-    - /css/index.css</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-  js:</span></span><br><span class="line"><span class="deletion">-    - https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js #/js/third-party/jquery.min.js</span></span><br><span class="line"><span class="deletion">-    - /js/utils.js</span></span><br><span class="line"><span class="deletion">-    - /js/main.js</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+# inject</span></span><br><span class="line"><span class="addition">+# Insert code before &lt;/head&gt; and before &lt;/body&gt;</span></span><br><span class="line"><span class="addition">+inject:</span></span><br><span class="line"><span class="addition">+  head:</span></span><br><span class="line"><span class="addition">+  # - &lt;link rel=&quot;stylesheet&quot; href=&quot;xxxxx&quot;&gt;</span></span><br><span class="line"><span class="addition">+  bottom:</span></span><br><span class="line"><span class="addition">+  # - &lt;script src=&quot;xxxx&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"></span><br><span class="line"># CDN</span><br><span class="line"># Do not modify if not necessary</span><br><span class="line">CDN:</span><br><span class="line"><span class="addition">+  # main</span></span><br><span class="line"><span class="addition">+  main_css: /css/index.css</span></span><br><span class="line"><span class="addition">+  jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js</span></span><br><span class="line"><span class="addition">+  main: /js/main.js</span></span><br><span class="line"><span class="addition">+  utils: /js/utils.js</span></span><br></pre></td></tr></table></figure></li><li><p>Adapted to valine version 1.4.5 and above</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">valine:</span><br><span class="line">  enable: false # if you want use valine,please set this value is true</span><br><span class="line">  appId: # leancloud application app id</span><br><span class="line">  appKey: # leancloud application app key</span><br><span class="line">  notify: false # valine mail notify (true/false) Deprecated in v1.4.0+</span><br><span class="line">  verify: false # valine verify code (true/false) Deprecated in v1.4.0+</span><br><span class="line">  pageSize: 10 # comment list page size</span><br><span class="line">  avatar: monsterid # gravatar style https://valine.js.org/#/avatar</span><br><span class="line">  lang: en # i18n: zh-CN/zh-TW/en/ja</span><br><span class="line">  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )</span><br><span class="line">  guest_info: nick,mail,link #valine comment header info</span><br><span class="line">  recordIP: false # Record reviewer IP</span><br><span class="line">  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span><br><span class="line"><span class="addition">+  emojiCDN: # emoji CDN</span></span><br><span class="line"><span class="addition">+  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar</span></span><br><span class="line"><span class="addition">+  requiredFields: nick,mail # required fields nick/mail/link</span></span><br><span class="line">  bg: /img/comment_bg.png # valine background</span><br><span class="line">  count: false # dispaly comment count in top_img</span><br></pre></td></tr></table></figure></li><li><p>Removed support for hiding articles.</p></li></ol><h3 id="Features"><a href="#Features" class="headerlink" title="Features"></a>Features</h3><ol><li>Added tag-toggle plugin for tagging.</li><li>Adapted to hexo-generator-indexed plugin.</li><li>Fine-tuned color schemes for Dark mode and Read mode.</li><li>Added page keywords setting.</li><li>Deepened highlighting of text in algolia-search.</li><li>Adjusted layout of subdirectories to align left.</li><li>Adjusted layout of aside and mobile sidebar web information. When one is missing, the width is still evenly divided.</li><li>Added rotating avatar effect on sidebar menu hover.</li><li>Automatically reads the first 200 words of an article as the meta description if no description is set.</li><li>Added article:published_time and article:modified_time to meta.</li><li>Changed subtitle to load after the webpage is fully loaded to prevent slow API responses from blocking webpage display.</li><li>Removed subtitle from Kingsoft Ciba Daily Quote and added random quotes from Bo Tian API.</li><li>Local search now supports displaying article content and highlighting keywords.</li><li>Dark mode can be switched to Light mode in Read mode.</li><li>Adapted interface for high resolution displays.</li><li>Fixed display bug of note tags in Dark mode.</li><li>Added dns_prefetch.</li></ol><h3 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h3><ol><li>Fixed inconsistent logic in articleSort for setting article covers.</li><li>Corrected some terms in zh-TW.</li><li>Fixed color display issue in hide-block configuration.</li><li>Fixed bug where only clicking on subdirectory text would navigate.</li><li>Fixed bug where search results could not be scrolled on mobile devices.</li><li>Fixed bug where &quot;view more&quot; on aside categories would navigate to tags page.</li><li>Fixed bug where an error would occur when flink.yml content is empty.</li><li>Fixed bug where &quot;view more&quot; text in aside was too light in Dark mode.</li><li>Fixed bug where there was a separator before comment count when reading minutes and page views are disabled.</li><li>Fixed bug where canvas_ribbon opacity would change to 1 and then back to default value.</li><li>Fixed bug where no image would appear when default_cover is not set.</li><li>Fixed issue where replacing the URL hash value on article pages would result in excessive browser history.</li><li>Fixed display bug of note tags in Dark mode.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">2.2.5(2020/03/28)</summary><div class="toggle-content"><h2 id="2-2-5-2020-03-28"><a href="#2-2-5-2020-03-28" class="headerlink" title="2.2.5(2020&#x2F;03&#x2F;28)"></a>2.2.5(2020&#x2F;03&#x2F;28)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>Added automatic ad positions</p> <figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+ad:</span></span><br><span class="line"><span class="addition">+ index:</span></span><br><span class="line"><span class="addition">+ aside:</span></span><br><span class="line"><span class="addition">+ post:</span></span><br></pre></td></tr></table></figure></li><li><p>Added image Figcaption display</p> <figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+ photofigcaption: false</span></span><br></pre></td></tr></table></figure></li><li><p>Added total word count for the entire website, configurable to disable word count, reading time, and total word count</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">wordcount:</span><br><span class="line">  enable: false</span><br><span class="line"><span class="addition">+  post_wordcount: true</span></span><br><span class="line"><span class="addition">+  min2read: true</span></span><br><span class="line"><span class="addition">+  total_wordcount: true</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Added table of contents in the header that appears when scrolling on article pages</li><li>Added tooltip text to post meta on the entire website</li><li>Adjusted spacing between post meta on article pages and the homepage</li><li>Added text display when only one date is set on article pages</li></ol><h3 id="Fixed"><a href="#Fixed" class="headerlink" title="Fixed"></a>Fixed</h3><ol><li>Fixed bug where class of img tag in lazyload was misplaced causing replacement error</li><li>Fixed bug where URL of copied copyright information was undefined</li><li>Fixed bug where &quot;Read More&quot; in aside was not centered</li><li>Fixed bug where setting highlight_shrink to false caused JavaScript error</li><li>Fixed bug where setting highlight_shrink to true did not open code block when clicked</li><li>Fixed bug where switch button icon did not change in Dark mode</li><li>Fixed bug where simplified and traditional Chinese conversion was not working</li><li>Fixed bug where homepage article dates were displayed incorrectly</li><li>Fixed bug caused by commenting out Douban settings resulting in &quot;Cannot read property &#39;meta&#39; of undefined&quot; error</li><li>Fixed bug where Gitalk reported &quot;Error: Cannot read property &#39;repository&#39; of undefined&quot;</li><li>Fixed bug where utterances comments still displayed light theme when display_mode was set to dark</li><li>Fixed bug where setting display_mode to dark had no effect</li><li>Added night mode and article page detection to comments, reducing unnecessary JavaScript loading</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">2.2.0 (2020/03/17)</summary><div class="toggle-content"><h2 id="2-2-0-2020-03-17"><a href="#2-2-0-2020-03-17" class="headerlink" title="2.2.0 (2020&#x2F;03&#x2F;17)"></a>2.2.0 (2020&#x2F;03&#x2F;17)</h2><h3 id="Breaking-Change"><a href="#Breaking-Change" class="headerlink" title="Breaking Change"></a>Breaking Change</h3><ol><li><p>No longer support hexo versions below 4.0.0.</p></li><li><p>Added hexo fragment_cache to speed up generation speed.</p> <figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+ fragment_cache: true</span></span><br></pre></td></tr></table></figure></li><li><p>Improved V5 icon display, no longer need to load both V4 and V5 icons.</p> <figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+ fontawesome_v5:</span></span><br><span class="line"><span class="addition">+  enable: false</span></span><br><span class="line"></span><br><span class="line">CDN_USE:</span><br><span class="line">  css:</span><br><span class="line">    - /css/index.css</span><br><span class="line"><span class="deletion">-   - https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css</span></span><br><span class="line"><span class="deletion">-   - https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css #fontawesomeV5_css</span></span><br><span class="line"></span><br><span class="line">CDN:</span><br><span class="line"><span class="addition">+  # fontawesome</span></span><br><span class="line"><span class="addition">+  fontawesome_v4: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css</span></span><br><span class="line"><span class="addition">+  fontawesome_v5: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css</span></span><br></pre></td></tr></table></figure></li><li><p>Removed cheerio dependency.</p></li><li><p>Integrated Douban configuration, added configuration for games and books pages, added top_img for pages, and added the ability to set whether to display meta to solve the issue of some browsers not displaying images.</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"><span class="deletion">- # If you are using hexo-douban to generate movie pages, you can configure this</span></span><br><span class="line"><span class="deletion">- movies_img: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/movie.jpg</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+ douban:</span></span><br><span class="line"><span class="addition">+   meta: false</span></span><br><span class="line"><span class="addition">+   movies_img:</span></span><br><span class="line"><span class="addition">+   books_img:</span></span><br><span class="line"><span class="addition">+   games_img:</span></span><br></pre></td></tr></table></figure></li><li><p>Custom content can be added to the list of friendly links.</p></li><li><p>Can set the distance between the main page title and the top.</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"># Main page settings</span><br><span class="line"># Default top_img is full screen, site_info is in the middle</span><br><span class="line"># Use default, no need to fill in (recommended)</span><br><span class="line"><span class="addition">+index_site_info_top: # Distance between main page title and top  e.g. 300px/300em/300rem/10%</span></span><br><span class="line"><span class="comment">index_top_img_height: # Height of main page top_img e.g. 300px/300em/300rem  cannot use percentage</span></span><br></pre></td></tr></table></figure></li><li><p>Sidebar can be hidden, and can set whether to hide on mobile pages.</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">-aside_mobile: true</span></span><br><span class="line"></span><br><span class="line">aside:</span><br><span class="line"><span class="addition">+  enable: true</span></span><br><span class="line"><span class="addition">+  mobile: true # Whether to display aside content on mobile pages (display width &lt; 768px)</span></span><br><span class="line">  position: right # left or right</span><br><span class="line">  card_author: true</span><br></pre></td></tr></table></figure></li><li><p>Added configuration for DisqusJS and Utterances comments.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+disqusjs:</span></span><br><span class="line"><span class="addition">+  enable: false # Change to true to enable</span></span><br><span class="line"><span class="addition">+  shortname:</span></span><br><span class="line"><span class="addition">+  siteName:</span></span><br><span class="line"><span class="addition">+  apikey:</span></span><br><span class="line"><span class="addition">+  api: https://disqus.skk.moe/disqus/ # No need to modify API address in general</span></span><br><span class="line"><span class="addition">+  admin:</span></span><br><span class="line"><span class="addition">+  adminLabel:</span></span><br><span class="line"><span class="addition">+  count: true # Display comment count on top_img</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+ utterances:</span></span><br><span class="line"><span class="addition">+   enable: false</span></span><br><span class="line"><span class="addition">+   repo: jerryc127/jerryc127.github.io # Optional pathname/url/title/og:title</span></span><br><span class="line"><span class="addition">+   issue_term: pathname # Optional github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark</span></span><br><span class="line"><span class="addition">+  light_theme: github-light</span></span><br><span class="line"><span class="addition">+  dark_theme: photon-dark</span></span><br></pre></td></tr></table></figure></li><li><p>Homepage subtitle can be turned off for typing effect, and can set whether the typing effect shows only once or loops.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">subtitle:</span><br><span class="line">  enable: true</span><br><span class="line"><span class="addition">+  # Typing effect</span></span><br><span class="line"><span class="addition">+  effect: true</span></span><br><span class="line"><span class="addition">+  # Loop or type only once</span></span><br><span class="line"><span class="addition">+  loop: false</span></span><br><span class="line">  # Call third-party services for source</span><br><span class="line">  # source: false to disable</span><br><span class="line">  # source: 1 to call Jinshan Ciba&#x27;s daily sentence (Simplified Chinese)</span><br><span class="line">  # source: 2 to call Hitokoto&#x27;s sentence (Simplified Chinese) #https://hitokoto.cn/</span><br><span class="line">  # source: 3 to call Yijuzhan&#x27;s sentence (Simplified Chinese) http://yijuzhan.com/</span><br><span class="line">  # source: 4 to call Jinrishici&#x27;s poem (Simplified Chinese) https://www.jinrishici.com/</span><br><span class="line">  # subtitle will display source first, then sub content</span><br><span class="line">  source: 2</span><br><span class="line">  # (If there is a comma in English &#x27;, &#x27;, please use the escape character &amp;#44;)</span><br><span class="line">  # If typing effect is turned off, subtitle will only display the first line of sub content</span><br><span class="line">  sub:</span><br><span class="line">    - 今日事&amp;#44;今日畢</span><br><span class="line">    - Never put off till tomorrow what you can do today</span><br></pre></td></tr></table></figure></li><li><p>Added configuration for Gitalk and Valine comments.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">gitalk:</span><br><span class="line">  enable: false</span><br><span class="line">  client_id:</span><br><span class="line">  client_secret:</span><br><span class="line">  repo:</span><br><span class="line">  owner:</span><br><span class="line">  admin:</span><br><span class="line">  language: zh-CN # en , zh-CN , zh-TW</span><br><span class="line"><span class="addition">+  perPage: 10 # Pagination size, with maximum 100.</span></span><br><span class="line"><span class="addition">+  distractionFreeMode: false # Facebook-like distraction free mode.</span></span><br><span class="line"><span class="addition">+  pagerDirection: last # Comment sorting direction, available values are last and first.</span></span><br><span class="line"><span class="addition">+  createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically</span></span><br><span class="line">  count: true # Display comment count on top_img</span><br><span class="line"></span><br><span class="line">valine:</span><br><span class="line">  enable: false # if you want use valine,please set this value is true</span><br><span class="line">  appId:  # leancloud application app id</span><br><span class="line">  appKey:  # leancloud application app key</span><br><span class="line">  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki</span><br><span class="line">  verify: false # valine verify code (true/false)</span><br><span class="line">  pageSize: 10 # comment list page size</span><br><span class="line">  avatar: monsterid # gravatar style https://valine.js.org/#/avatar</span><br><span class="line">  lang: en # i18n: zh-cn/en</span><br><span class="line">  placeholder: 記得留下你的暱稱和郵箱....可以快速收到回覆 # valine comment input placeholder(like: Please leave your footprints )</span><br><span class="line">  guest_info: nick,mail,link #valine comment header info</span><br><span class="line"><span class="addition">+  recordIP: false # Record reviewer IP</span></span><br><span class="line"><span class="addition">+  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span></span><br><span class="line">  bg: /img/comment_bg.png # valine background</span><br><span class="line">  count: true # Display comment count on top_img</span><br></pre></td></tr></table></figure></li><li><p>Reorganized dark mode configuration.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">- # Dark mode</span></span><br><span class="line"><span class="deletion">- darkmode:</span></span><br><span class="line"><span class="deletion">-  enable: true</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-# Auto switch between dark mode and light mode</span></span><br><span class="line"><span class="deletion">-# autoChangeMode: 1  Follow the system, browsers/systems that do not support it will automatically switch to dark mode between 6pm and 6am</span></span><br><span class="line"><span class="deletion">-# autoChangeMode: 2  Only switch to dark mode between 6pm and 6am</span></span><br><span class="line"><span class="deletion">-# autoChangeMode: false Disable auto switch</span></span><br><span class="line"><span class="deletion">-autoChangeMode: false</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+ darkmode:</span></span><br><span class="line"><span class="addition">+  enable: true</span></span><br><span class="line"><span class="addition">+  # Dark mode and light mode switch button</span></span><br><span class="line"><span class="addition">+  button: true</span></span><br><span class="line"><span class="addition">+  # Auto switch between dark mode and light mode</span></span><br><span class="line"><span class="addition">+  # autoChangeMode: 1  Follow the system, browsers/systems that do not support it will automatically switch to dark mode between 6pm and 6am</span></span><br><span class="line"><span class="addition">+  # autoChangeMode: 2  Only switch to dark mode between 6pm and 6am</span></span><br><span class="line"><span class="addition">+  # autoChangeMode: false Disable auto switch</span></span><br><span class="line"><span class="addition">+  autoChangeMode: false</span></span><br></pre></td></tr></table></figure></li><li><p>Added 404 page.</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"><span class="addition">+# A simple 404 page</span></span><br><span class="line"><span class="addition">+error_404:</span></span><br><span class="line"><span class="addition">+  enable: true</span></span><br><span class="line"><span class="addition">+  subtitle: &quot;Page not found&quot;</span></span><br><span class="line"><span class="addition">+  background:</span></span><br></pre></td></tr></table></figure></li><li><p>Changed post_beautify to beautify, page beautification is no longer limited to post pages, but also applies to page pages.</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"><span class="deletion">-post_beautify:</span></span><br><span class="line"><span class="addition">+beautify:</span></span><br><span class="line">  enable: true</span><br><span class="line">  title-prefix-icon: &#x27;\f0c1&#x27;</span><br><span class="line">  title-prefix-icon-color: &quot;#F47466&quot;</span><br></pre></td></tr></table></figure></li><li><p>Can set whether to display cover, and can set the display of cover in different positions.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="deletion">-# the default cover of the post</span></span><br><span class="line"><span class="deletion">-default_cover: https://cdn.jsdelivr.net/gh/jerryc127/butterfly_cdn@2.1.0/top_img/default.png</span></span><br><span class="line"></span><br><span class="line"><span class="deletion">-index_post_cover: both</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+cover:</span></span><br><span class="line"><span class="addition">+  # Whether to display post cover</span></span><br><span class="line"><span class="addition">+  index_enable: true</span></span><br><span class="line"><span class="addition">+  aside_enable: true</span></span><br><span class="line"><span class="addition">+  archives_enable: true</span></span><br><span class="line"><span class="addition">+  # Position of cover display</span></span><br><span class="line"><span class="addition">+  # Three values can be configured: left, right, both</span></span><br><span class="line"><span class="addition">+  position: both</span></span><br><span class="line"><span class="addition">+  # Default cover to display when no cover is set</span></span><br><span class="line"><span class="addition">+  default_cover:</span></span><br></pre></td></tr></table></figure></li><li><p>Added configuration for Mermaid, can draw flowcharts, state diagrams, sequence diagrams, Gantt charts, etc.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">    +# https://github.com/knsv/mermaid</span><br><span class="line">    +mermaid:</span><br><span class="line">    +  enable: true</span><br><span class="line">    +  # built-in themes: default/forest/dark/neutral</span><br><span class="line">    + </span><br><span class="line"></span><br><span class="line">17. Added pangu configuration to add spaces between Chinese and English characters.</span><br><span class="line"></span><br><span class="line">    ```diff</span><br><span class="line">    +# https://github.com/vinta/pangu.js</span><br><span class="line">    +# Add spaces between Chinese and English characters</span><br><span class="line">    +pangu:</span><br><span class="line">    +  enable: true</span><br><span class="line">    +  field: page # page/post</span><br></pre></td></tr></table></figure></li><li><p>Integrated partial configurations.</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"><span class="deletion">-avatar_effect: false</span></span><br><span class="line"></span><br><span class="line"><span class="addition">+avatar:</span></span><br><span class="line"><span class="addition">+  img: /img/avatar.png</span></span><br><span class="line"><span class="addition">+  effect: true # The avatar will keep spinning</span></span><br></pre></td></tr></table></figure></li><li><p>Added decode URL to post-copyright (to display Chinese characters).</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">post_copyright:</span><br><span class="line">  enable: true</span><br><span class="line"><span class="addition">+  decode: false</span></span><br><span class="line">  license: CC BY-NC-SA 4.0</span><br><span class="line">  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/</span><br></pre></td></tr></table></figure></li><li><p>Added partial color configurations.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">theme_color:</span><br><span class="line">  enable: true</span><br><span class="line">  main: &quot;#49B1F5&quot;</span><br><span class="line">  paginator: &quot;#00c4b6&quot;</span><br><span class="line">  button_hover: &quot;#FF7242&quot;</span><br><span class="line">  text_selection: &quot;#00c4b6&quot;</span><br><span class="line">  link_color: &quot;#99a9bf&quot;</span><br><span class="line">  meta_color: &#x27;#858585&#x27;</span><br><span class="line">  hr_color: &quot;#A4D8FA&quot;</span><br><span class="line"><span class="deletion">-  read-mode-bg_color: &#x27;#FAF9DE&#x27;</span></span><br><span class="line"><span class="deletion">-  inline-code-color: &#x27;#F47466&#x27;</span></span><br><span class="line"><span class="addition">+  code_foreground: &quot;#F47466&quot;</span></span><br><span class="line"><span class="addition">+  code_background: &quot;rgba(27, 31, 35, .05)&quot;</span></span><br><span class="line"><span class="addition">+  toc_color: &quot;#00c4b6&quot;</span></span><br><span class="line"><span class="addition">+  blockquote_padding_color: &quot;#49b1f5&quot;</span></span><br><span class="line"><span class="addition">+  blockquote_background_color: &quot;#49b1f5&quot;</span></span><br></pre></td></tr></table></figure></li><li><p>Added tags and update date display for homepage articles, configurable with post_meta.</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">post_meta:</span><br><span class="line"><span class="deletion">-  date_type: both # or created or updated Display both creation and update dates for articles</span></span><br><span class="line"><span class="deletion">-  categories: true # or false Display categories</span></span><br><span class="line"><span class="deletion">-  tags: true # or false Display tags</span></span><br><span class="line"><span class="addition">+  page:</span></span><br><span class="line"><span class="addition">+    date_type: both # created or updated or both Display both creation and update dates for homepage articles</span></span><br><span class="line"><span class="addition">+    categories: true # true or false Display categories on homepage</span></span><br><span class="line"><span class="addition">+    tags: true # true or false Display tags on homepage</span></span><br><span class="line"><span class="addition">+  post:</span></span><br><span class="line"><span class="addition">+    date_type: both # created or updated or both Display both creation and update dates for article pages</span></span><br><span class="line"><span class="addition">+    categories: true # true or false Display categories on article pages</span></span><br><span class="line"><span class="addition">+    tags: true # true or false Display tags on article pages</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Adapted for IE compatibility.</li><li>Added a new Tag Plugin: Gallery Collection.</li><li>Added a new Tag Plugin: tag-hide, with inline&#x2F;block functionality.</li><li>Removed the display of duplicate content at the beginning of each page.</li><li>Added support for HTML code in the aside bulletin board.</li><li>Added a progress bar and highlighted corresponding titles in the sidebar of the mobile interface.</li><li>Added the source attribution for hitokoto content in the subtitle of the homepage.</li><li>Changed the Hexo link in the footer to use HTTPS.</li><li>Modified the opening effect of menus and table of contents (TOC) on mobile devices.</li><li>Full-screen display for the search interface on mobile pages.</li><li>SEO optimization: Changed the title bar to display as h1.</li><li>Improved reading mode: Background can be adjusted based on light mode and dark mode.</li><li>When JavaScript is blocked, the header will appear (previously controlled by JavaScript and hidden).</li></ol><h3 id="Fixed"><a href="#Fixed" class="headerlink" title="Fixed"></a>Fixed</h3><ol><li>Fixed the bug where the script loading for Tencent Analytics was using HTTP instead of HTTPS (#105).</li><li>Fixed the bug where the related articles were displaying incorrect dates.</li><li>Fixed the bug causing errors with gitalk.</li><li>Fixed the bug where the valine background wouldn&#39;t display when using an absolute address.</li><li>Fixed the bug where medium-zoom wasn&#39;t functioning properly.</li><li>Fixed the bug in Safari where clicking or moving to the homepage article cover would cause the rounded corners to become square (#114).</li><li>Fixed the bug where the avatars for the aside and friendly links were distorted when viewed in certain browsers.</li><li>Fixed the bug where tables would overflow the screen and display a scrollbar when the width was limited (#138).</li><li>Fixed the bug where gitalk JavaScript was loading on pages without comments.</li><li>Fixed the background color issue with tag plugins&#39; gist in different themes (difficult to read text in dark themes).</li><li>Fixed the bug where the highlight figcaption wasn&#39;t fully displayed.</li><li>Fixed the bug where Disqus couldn&#39;t retrieve the comment count.</li><li>Fixed the bug where subdirectories occasionally didn&#39;t appear when clicked on touch screens.</li><li>Fixed the bug where the &quot;a&quot; tags wouldn&#39;t wrap to a new line when the text was too long (continuous English letters).</li><li>Fixed the bug where the table of contents would scroll along with the page, affecting the reading progress bar.</li><li>Fixed the bug where the images in the aside section could be clicked to display larger versions.</li><li>Fixed the bug where the parameters for activate-power-mode weren&#39;t being applied.</li><li>Fixed language errors (#156).</li><li>Fixed the bug where the homepage scrolling would lag in Safari on desktop.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">2.1.0 (2019/12/20)</summary><div class="toggle-content"><h2 id="2-1-0-2019-12-20"><a href="#2-1-0-2019-12-20" class="headerlink" title="2.1.0 (2019&#x2F;12&#x2F;20)"></a>2.1.0 (2019&#x2F;12&#x2F;20)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Enable hidden articles</li><li>Adapt the display of Hexo&#39;s Tag Plugins Code Block With marked lines</li><li>Configure the position of the homepage cover display</li><li>Change the color scheme in dark mode</li><li>Add closing color and shaking to activate_power_mode</li><li>Add Google ads and Tencent analytics</li><li>Add time display to related articles, adjust layout, and center vertically</li><li>Add comment count to top_img on article pages</li><li>Allow disabling of image zoom on click</li><li>Set mathjax and kathex to load on every page or on demand</li><li>Adapt scrollbar color in dark mode</li><li>Optimize gitalk display in dark mode</li><li>Show only three lines of content when article title is too long</li><li>Add overlay to background image in dark mode</li><li>Optimize display of canvas in dark&#x2F;read mode</li><li>Improve special effects for donations and prevent immediate disappearance when moving to QR code</li><li>Optimize sub-menu style</li><li>Modify the color of tags in aside to ensure visibility in dark mode</li><li>Upgrade normalize.css to the latest version</li><li>Improve opening animation of toc and menu on mobile devices</li><li>Enhance open&#x2F;close effect of code blocks</li><li>Simplify JavaScript code and use CSS for some operations</li><li>Optimize some animations in the theme to make them smoother</li></ol><h3 id="Fixed"><a href="#Fixed" class="headerlink" title="Fixed"></a>Fixed</h3><ol><li>Fix the bug where clicking on the image icon does not redirect to the corresponding webpage when the image is wrapped in an &quot;a&quot; tag, but instead opens a larger image viewing mode.</li><li>Fix the bug where the menu, donation QR code, and loading background links are incorrect when the URL has a subdirectory.</li><li>Fix the bug where the URL has a subdirectory.</li><li>Fix the bug where the CSS for KaTeX cannot be loaded.</li><li>Fix the bug where the search button does not appear on the article page.</li><li>Fix the bug where the CSS for Gitalk fails to load.</li><li>Fix the bug where the click effect for the fireworks is not working.</li><li>Fix the bug where Gitalk reports &quot;path.startsWith is not a function&quot;.</li><li>Fix the bug where the background does not change to a solid color in reading mode.</li><li>Fix the bug where the header occasionally does not stick to the top in reading mode.</li><li>Fix the bug where the links in the Hexo Tag Plugins Block Quote display outside.</li><li>Fix the bug where the archive dates in the aside are misaligned due to excessive length.</li><li>Fix the bug where the toc button still exists when the toc is empty.</li><li>Fix the bug where the avatar does not display after lazy loading is disabled.</li><li>Fix the bug where switching to read mode occasionally does not work in dark mode.</li><li>Fix the bug where the toc and menu buttons are misaligned on some mobile devices.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">2.0.0 (2019/11/03)</summary><div class="toggle-content"><h2 id="2-0-0-2019-11-03"><a href="#2-0-0-2019-11-03" class="headerlink" title="2.0.0 (2019&#x2F;11&#x2F;03)"></a>2.0.0 (2019&#x2F;11&#x2F;03)</h2><h3 id="Breaking-changes"><a href="#Breaking-changes" class="headerlink" title="Breaking changes"></a>Breaking changes</h3><ol><li>Mobile interface now uses a card-based layout and can display sidebar content.</li><li>Fixed a bug where the header interface would become distorted when there were too many menu items. It now switches to a sidebar mode when there are too many menu items.</li><li>Added medium-zoom for viewing larger images.</li><li>Added mouse click effects: text and heart click effects.</li><li>The homepage subtitle can now call third-party APIs such as Jinshan Ciba, Hitokoto, Yiju, and Today&#39;s Poem.</li><li>Added snackbar pop-up windows.</li><li>Renamed nightshift to dark mode, which can now automatically switch based on system settings and can be set to switch with time.</li><li>Fixed display issues with built-in Hexo tag plugins (Block Quote, Code Block With Caption, Gist, Youtube, Vimeo).</li><li>Theme&#39;s required CSS and JS can now be configured with a CDN.</li><li>Changed the loading behavior of dark mode so that the website no longer &quot;flashes&quot; when entering the web page after dark mode is set.</li><li>Background effects and images now display on the mobile interface.</li><li>Added justified-gallery image display (Tag Plugins).</li></ol><h3 id="Features"><a href="#Features" class="headerlink" title="Features"></a>Features</h3><ol><li>Added icons for word count, reading time, and views on the article page.</li><li>Updated lazy loading JS.</li><li>Upgraded typed.js&#x2F;instantpage.js to the latest version.</li><li>Added exit effects to search and bottom-right button.</li></ol><h3 id="Fixes"><a href="#Fixes" class="headerlink" title="Fixes"></a>Fixes</h3><ol><li>Fixed a bug where some buttons would open a blank page on Hexo 4.0.0.</li><li>Fixed a bug where pagination buttons would display code on Hexo 4.0.0.</li><li>Fixed a bug where the &quot;Go to Comments&quot; button would still appear in the bottom-right corner even when comments were not enabled.</li><li>Optimized the speed of opening the sidebar.</li><li>Fixed a bug where the left and right margins of the article page title were uneven.</li><li>Fixed a bug with keyword reading.</li><li>Fixed a bug where the footer position would be incorrect when the post&#x2F;page content was empty.</li><li>Fixed a bug where the toc sidebar content would be hidden at the bottom on mobile Safari.</li><li>Improved the dark mode color scheme for certain interfaces.</li><li>Fixed a bug with the &quot;View More&quot; button in the card-archives.</li></ol><h3 id="Removals"><a href="#Removals" class="headerlink" title="Removals"></a>Removals</h3><ol><li>Removed Gitment.</li><li>Removed Gallery.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">1.2.0 (2019/09/24)</summary><div class="toggle-content"><h2 id="1-2-0-2019-09-24"><a href="#1-2-0-2019-09-24" class="headerlink" title="1.2.0 (2019&#x2F;09&#x2F;24)"></a>1.2.0 (2019&#x2F;09&#x2F;24)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Changed the display method and effects of the menu and TOC on mobile pages (TOC is now visible on iPads).</li><li>Added the ability to disable copying of website content.</li><li>Added the ability to automatically add copyright information when copying content.</li><li>Added the ability to modify the top image of tags.</li><li>Added the ability to modify the top image of categories.</li><li>Added the ability to modify the background of Valine.</li><li>Optimized the UI of the archives page.</li><li>Added an icon for ICP.</li><li>Added the ability to set the height of the top image on the homepage.</li><li>Added the ability to set the position of the site-info on the homepage.</li><li>Added the ability to set the UI of the category and tag pages to be the same as the homepage (#31).</li><li>Added the ability to set multiple sentences for the subtitle on the homepage (no longer limited to 2) (#37).</li><li>Added the ability to add spaces before and after menu items.</li><li>Adjusted the layout of the post page.</li><li>Added an icon for bookmarks.</li><li>Added an effect for the announcement icon.</li><li>Added the ability to limit the number of items displayed in the archive module on the homepage, with a &quot;View More&quot; button.</li><li>Adjusted the position of the button in the lower right corner.</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol start="19"><li>Fixed the bug where the cover image of an article would display differently in different parts of the same article when generated randomly.</li><li>Fixed the bug where the language setting of Gitalk was invalid.</li><li>Fixed the bug where the &#39;|&#39; character would appear in front of the view count on the post page when the word count was not set.</li><li>Fixed display issue of sub-menu in Safari.</li><li>Fixed the centering issue of comments on the tags page.</li><li>Fixed the issue where the hover color of header links was white.</li><li>Fixed the color bug of the footer in dark mode.</li><li>Fixed the issue where the English display of bookmarks was incomplete.</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">1.1.5 (2019/09/08)</summary><div class="toggle-content"><h2 id="1-1-5-2019-09-08"><a href="#1-1-5-2019-09-08" class="headerlink" title="1.1.5 (2019&#x2F;09&#x2F;08)"></a>1.1.5 (2019&#x2F;09&#x2F;08)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Feature: Inline code block style can be set #26</li><li>Feature: Night mode can be set as default style</li><li>Feature: Code language name can be set to display or not</li><li>Feature: Code box can be set to expand or collapse</li><li>Feature: Background image&#x2F;color can be set</li><li>Feature: Footer background can be set to display or not</li><li>Feature: Added canvas-nest.js</li><li>Feature: Avatar can be set to rotate</li><li>Feature: Menu can be grouped</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol start="10"><li>Optimized the opening effect of the reward and search function</li><li>Optimized the opening effect of the sidebar to avoid inconsistency with the article page effect</li><li>Adapted to <strong>hexo-blog-encrypt</strong>, now the toc can be displayed</li><li>Fixed the bug where the direct comment button did not disappear when the comment was set to not be displayed</li><li>Fixed the bug where the button did not display properly in three states: when comments and toc were not displayed, and when neither were displayed in the post page footer</li><li>Fixed the bug where the code name followed the code box when scrolling left and right</li><li>Improved the font display of other page titles</li><li>Fixed the bug where the canvas_ribbons would be displayed first when entering the website with the canvas_ribbons option enabled</li><li>Improved font display in night mode</li><li>Fixed the z-index bug of the code box copy and code name</li><li>Improved reading mode</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">1.1.0 (2019/08/29)</summary><div class="toggle-content"><h2 id="1-1-0-2019-08-29"><a href="#1-1-0-2019-08-29" class="headerlink" title="1.1.0 (2019&#x2F;08&#x2F;29)"></a>1.1.0 (2019&#x2F;08&#x2F;29)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Redesigned mobile menu interface</li><li>Added beautification to post page (original melody theme function), and added the ability to change the prefix icon and color of the title</li><li>Added direct comment button for PC</li><li>Can set whether to display copyright information for individual articles</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fixed bug where adjusting font size in reading mode had no effect on code</li><li>Adjusted Valine font display issue</li><li>Corrected Valine compatibility issue in night mode</li><li>Fixed bug where Valine settings for notify and verify were not effective (thx @VincentTV)</li><li>Fixed issue where images could not be loaded when lazy loading was enabled using hexo-asset-image</li><li>Fixed bug where &#39;back to top&#39; arrow could not be clicked</li></ol><h3 id="Remove"><a href="#Remove" class="headerlink" title="Remove"></a>Remove</h3><ol><li>Removed &quot;Read More&quot; button from theme</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">1.0.8 (2019/08/11)</summary><div class="toggle-content"><h2 id="1-0-8-2019-08-11"><a href="#1-0-8-2019-08-11" class="headerlink" title="1.0.8 (2019&#x2F;08&#x2F;11)"></a>1.0.8 (2019&#x2F;08&#x2F;11)</h2><ol><li>Feature: Option to disable lazy loading of images</li><li>Feature: Add page layout option to move the right column to the left</li><li>Feature: Add Note (Bootstrap Callout) (ported from the Next theme)</li><li>Feature: TOC can be viewed on mobile devices</li><li>Feature: Add a button to scroll to comments</li><li>Fix: Fix display bug on post page at width 1024px</li><li>Fix: Fix code block not displaying the correct language for some languages</li><li>Fix: Fix bug where Disqus comments were not working when commented out in the settings</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">1.0.7 (2019/07/29)</summary><div class="toggle-content"><h2 id="1-0-7-2019-07-29"><a href="#1-0-7-2019-07-29" class="headerlink" title="1.0.7 (2019&#x2F;07&#x2F;29)"></a>1.0.7 (2019&#x2F;07&#x2F;29)</h2><h3 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h3><ol><li>Feature: add the option to change the site name font-family</li><li>Feature: add the option to close instant-page</li><li>Feature: the sidebar can auto scroll when the toc out of the screen</li></ol><h3 id="Fix"><a href="#Fix" class="headerlink" title="Fix"></a>Fix</h3><ol><li>Fix: random cover of previous post and next post</li><li>Fix: Display null when the subtitle not set</li><li>Fix: display related post&#39;s headline when it is not related posts</li><li>Fix: the bugs of image display</li><li>Fix: When the picture is loaded, the picture appears black frame</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">1.0.6 (2019/07/06)</summary><div class="toggle-content"><h2 id="1-0-6-2019-07-06"><a href="#1-0-6-2019-07-06" class="headerlink" title="1.0.6 (2019&#x2F;07&#x2F;06)"></a>1.0.6 (2019&#x2F;07&#x2F;06)</h2><ol><li>Feature: random cover #10</li><li>Fix: valine lang not work</li><li>Fix: archives page site name not change when the language change</li><li>Fix: related posts url error</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">1.0.5 (2019/06/28)</summary><div class="toggle-content"><h2 id="1-0-5-2019-06-28"><a href="#1-0-5-2019-06-28" class="headerlink" title="1.0.5 (2019&#x2F;06&#x2F;28)"></a>1.0.5 (2019&#x2F;06&#x2F;28)</h2><ol><li>fix bugs of gitalk #9</li><li>fix bugs of valine</li><li>new look of the mobile menu</li></ol></div></details><details class="toggle" ><summary class="toggle-button" style="">1.0.0 (2019.06/17)</summary><div class="toggle-content"><h2 id="1-0-0-2019-06-17"><a href="#1-0-0-2019-06-17" class="headerlink" title="1.0.0 (2019.06&#x2F;17)"></a>1.0.0 (2019.06&#x2F;17)</h2><p>first release</p></div></details>]]></content>
    
    
      
      
    <summary type="html">&lt;div class=&quot;note orange icon-padding flat&quot;&gt;&lt;i class=&quot;note-icon fas fa-language&quot;&gt;&lt;/i&gt;&lt;p&gt;This article is translated from ChatGPT.&lt;/p&gt;
&lt;/div&gt;

</summary>
      
    
    
    
    <category term="Docs" scheme="https://butterfly.js.org/en/categories/Docs/"/>
    
    <category term="EN" scheme="https://butterfly.js.org/en/categories/Docs/EN/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly document - Advanced Tutorial</title>
    <link href="https://butterfly.js.org/en/posts/butterfly-docs-en-advanced-tutorial/"/>
    <id>https://butterfly.js.org/en/posts/butterfly-docs-en-advanced-tutorial/</id>
    <published>2023-07-01T09:11:47.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<div class="note orange icon-padding flat"><i class="note-icon fas fa-language"></i><p>This article is translated from ChatGPT.</p></div><div class="note green icon-padding flat"><i class="note-icon fas fa-rocket"></i><p> 📚  Table of Contents</p><p><a href="/en/posts/butterfly-docs-en-get-started/" title="Butterfly document - Get Started">🚀 Get Started</a> - <a href="/en/posts/butterfly-docs-en-theme-pages/" title="Butterfly document - Theme Pages">📑 Theme Pages</a> - <a href="/en/posts/butterfly-docs-en-theme-config/" title="Butterfly document - Theme Configuration">📌 Theme Configuration</a> - <a href="/en/posts/butterfly-docs-en-tag-plugins/" title="Butterfly document - Tag Plugins">⚔️ Tag Plugins</a> - <a href="/en/posts/butterfly-docs-en-theme-question/" title="Butterfly document - Q&amp;A">❓ Q&amp;A</a> - <a href="/en/posts/butterfly-docs-en-advanced-tutorial/" title="Butterfly document - Advanced Tutorial">⚡️ Advanced Tutorials</a></p></div><hr><h2 id="Suggestions"><a href="#Suggestions" class="headerlink" title="Suggestions"></a>Suggestions</h2><ol><li>Avoid placing personal files&#x2F;images in the <code>source</code> folder of the main theme. During theme upgrades, these files may be overwritten or deleted. Instead, create a separate folder in the Hexo root directory to store personal files&#x2F;images.<br>To reference these files, use <code>/folder_name/file_name</code>.</li></ol><h2 id="Music"><a href="#Music" class="headerlink" title="Music"></a>Music</h2><p>The music interface uses the plugin <code>hexo-tag-aplayer</code>. Please refer to the plugin <a href="https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md">documentation</a> for usage.</p><p>To create the music page, simply create a regular page like any other page.</p><blockquote><p>The following content is for <strong>optional</strong> configuration.</p><p>Note: You still need to install the <a href="https://github.com/MoePlayer/hexo-tag-aplayer">hexo-tag-aplayer</a> plugin.</p></blockquote><p>The plugin will inject js and css into every file, but to avoid this, version 3.0 of the theme includes the necessary aplayer css and js.</p><p>First, in the Hexo root directory, configure <code>_config.yml</code> to set <code>asset_inject</code> to <code>false</code>:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">aplayer:</span></span><br><span class="line">  <span class="attr">asset_inject:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>Then, in the Front-matter of the pages where you want to use aplayer, add the following line:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">aplayer: true</span><br></pre></td></tr></table></figure><p>This will only insert the necessary js and css for the pages where you need aplayer.</p><p>For instructions on how to add a global Aplayer at the bottom, refer to <a href="/posts/507c070f/">this article</a>.</p><h2 id="Movies"><a href="#Movies" class="headerlink" title="Movies"></a>Movies</h2><p>The movie interface uses the plugin <code>hexo-douban</code>. Please follow the plugin&#39;s <a href="https://github.com/mythsman/hexo-douban">documentation</a> for usage.</p><p><strong>Note</strong>:</p><ol><li>hexo-douban automatically generates pages, so you don&#39;t need to create them manually.</li><li>If you encounter a problem where no movies are loaded, and you see the message &quot;INFO 0 movies have been loaded in xxx ms, because you are offline or your network is bad&quot;, please try again after some time, as this might be a temporary network issue.</li></ol><h2 id="Chat"><a href="#Chat" class="headerlink" title="Chat"></a>Chat</h2><h3 id="Artitalk"><a href="#Artitalk" class="headerlink" title="Artitalk"></a>Artitalk</h3><p>Install the plugin <a href="https://www.npmjs.com/package/hexo-butterfly-artitalk">hexo-butterfly-artitalk</a>.</p><p>For specific configurations, refer to the <a href="https://github.com/jerryc127/butterfly-plugins/tree/main/hexo-butterfly-artitalk">plugin documentation</a>.</p><h3 id="HexoPlusPlus-Talk"><a href="#HexoPlusPlus-Talk" class="headerlink" title="HexoPlusPlus Talk"></a>HexoPlusPlus Talk</h3><p>Install the plugin <a href="https://www.npmjs.com/package/hexo-butterfly-hpptalk">hexo-butterfly-hpptalk</a>.</p><p>For specific configurations, refer to the <a href="https://github.com/jerryc127/butterfly-plugins/tree/main/hexo-butterfly-hpptalk">plugin documentation</a>.</p><h2 id="Custom-Code-Colors"><a href="#Custom-Code-Colors" class="headerlink" title="Custom Code Colors"></a>Custom Code Colors</h2><a class="btn-beautify block blue" href="/en/posts/b37b5fe3/" title="Click to Go"><i class="fas fa-code"></i><span>Click to Go</span></a><h2 id="Custom-Sidebar"><a href="#Custom-Sidebar" class="headerlink" title="Custom Sidebar"></a>Custom Sidebar</h2><a class="btn-beautify block green" href="/en/posts/ea33ab97/" title="Click to Go"><i class="fas fa-lightbulb"></i><span>Click to Go</span></a><h2 id="Adding-Global-Aplayer-Tutorial"><a href="#Adding-Global-Aplayer-Tutorial" class="headerlink" title="Adding Global Aplayer Tutorial"></a>Adding Global Aplayer Tutorial</h2><a class="btn-beautify block pink" href="/en/posts/507c070f/" title="Click to Go"><i class="fas fa-music"></i><span>Click to Go</span></a><h2 id="Icon"><a href="#Icon" class="headerlink" title="Icon"></a>Icon</h2><p>The Butterfly theme comes with <a href="https://fontawesome.com/">Font Awesome V5</a> icons, currently updated to version 5.13.0, with a total of 1,588 free icons. However, some icons from this source might not be supported on websites in certain countries. If needed, you can import icons from other icon providers.</p><h3 id="iconfont"><a href="#iconfont" class="headerlink" title="iconfont"></a>iconfont</h3><p>One of the most famous domestic icon libraries is <a href="https://www.iconfont.cn/">iconfont</a>. It is a powerful vector icon library with a rich collection of icons. Many icons that are not supported by <code>Font Awesome</code> can be found here. Additionally, <a href="https://www.iconfont.cn/">iconfont</a> allows you to select the icons you need and generate CSS links, reducing unnecessary CSS loading.</p><h4 id="Registering-an-Account"><a href="#Registering-an-Account" class="headerlink" title="Registering an Account"></a>Registering an Account</h4><p>To get started with <a href="https://www.iconfont.cn/">iconfont</a>, open the website and click on the &quot;User&quot; icon in the navigation bar. This will prompt you to register an account as per the instructions.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-iconfont.png" alt="Snipaste_2020-05-28_21-12-01"></p><h4 id="Adding-Icons-to-Your-Library"><a href="#Adding-Icons-to-Your-Library" class="headerlink" title="Adding Icons to Your Library"></a>Adding Icons to Your Library</h4><p>Select the icons you need by hovering your mouse over them. Three buttons will appear (Add to library, Favorite, Download). Click on &quot;Add to library&quot; to add the icon to your collection.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-iconfont-add.png" alt="image-20200528205401440"></p><p>After adding icons to your library, you will see a &quot;Shopping Cart&quot; icon with a number &quot;1&quot; displayed in the upper right corner of the website. This indicates that the icon has been added to your library. Click on the &quot;Shopping Cart&quot; icon to view the details.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-iconfont-check.png" alt="image-20200528205925258"></p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-iconfont-detail.png" alt="image-20200528210120442"></p><p>Selected icons will be displayed on top. You can repeat the above steps to add the icons you need and then click &quot;Add to Project.&quot;</p><p>Next, you will be prompted to choose a project name. If you don&#39;t have one, create a new project.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-iconfont-create.png" alt="image-20200528211624459"></p><h4 id="Generating-CSS-Links"><a href="#Generating-CSS-Links" class="headerlink" title="Generating CSS Links"></a>Generating CSS Links</h4><p>After adding the icons to your project, you will be taken to the project details page. Click on &quot;Font class&quot; and then click on &quot;No code, click to generate&quot; text. The website will automatically generate a CSS link, which you just need to copy.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-iconfont-link.png" alt="image-20200528212301786"></p><h4 id="Adding-the-Link-to-the-Theme-Configuration-File"><a href="#Adding-the-Link-to-the-Theme-Configuration-File" class="headerlink" title="Adding the Link to the Theme Configuration File"></a>Adding the Link to the Theme Configuration File</h4><p>Open the &quot;Theme Configuration File&quot; and find the &quot;inject&quot; configuration. Add the CSS link as instructed.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-iconfont-setting.png" alt="image-20200528212440743"></p><p>In the places where you want to use the icons, use the format <code>iconfont icon-iconName</code>, for example, <code>iconfont icon-Menu</code>.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-iconfont-setting-menu.png" alt="image-20200528213151304"></p><p>After running Butterfly, you will see the icon for the menu.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-iconfont-show.png" alt="image-20200528213346338"></p><h4 id="Other-Methods-of-Adding-Icons"><a href="#Other-Methods-of-Adding-Icons" class="headerlink" title="Other Methods of Adding Icons"></a>Other Methods of Adding Icons</h4><p>In addition to using CSS links to include icons, iconfont also supports other methods of usage. For specific details, refer to the <a href="https://www.iconfont.cn/help/detail?helptype=code">iconfont official usage documentation</a>.</p><h3 id="Other-Icon-Providers"><a href="#Other-Icon-Providers" class="headerlink" title="Other Icon Providers"></a>Other Icon Providers</h3><p>Apart from <a href="https://www.iconfont.cn/">iconfont</a>, there are other providers like <a href="https://github.com/Remix-Design/RemixIcon">RemixIcon</a> and <a href="https://www.flaticon.com/categories/seo-and-web">Flaticon</a>, offering a wide range of icons to choose from. For the usage methods, please refer to their respective documentation.</p><h2 id="Image-Compression"><a href="#Image-Compression" class="headerlink" title="Image Compression"></a>Image Compression</h2><p>Butterfly theme uses many images, and if these images are too large, they can significantly slow down your website&#39;s loading speed. Image compression can effectively alleviate this issue.</p><p>In addition to using <code>gulp-imagemin</code> for image compression, you can also use online compression websites and software. The following are two tools that I personally use. There are many such tools available online; you can choose one that suits you best.</p><ul><li><p><a href="https://tinypng.com/">tinypng</a></p><p>An online compression website. The compressed images retain high quality. It is highly recommended on platforms like Zhihu. However, the free version has some limitations.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-tinypng.png" alt="image-20200526173511503"></p></li><li><p><a href="https://saerasoft.com/caesium/">caesium</a></p><p>An open-source software that supports Windows and macOS. It allows batch image compression without any limitations.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-caesium.png" alt="image-20200526173316278"></p></li><li><p><a href="https://github.com/marketplace/imgbot">imgbot</a></p></li></ul><p>  imgbot is a GitHub plugin.</p><p>  Once installed, when you upload images to GitHub, imgbot will automatically compress them and create a pull request. You just need to merge the PR.</p><p>  You can configure imgbot&#39;s detection and compression methods (lossy&#x2F;lossless). For specific details, please check the plugin&#39;s documentation.</p><p>  <img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-enhance-imgbot.png" alt="image-20200830231742951"></p><h2 id="Recommended-Plugins"><a href="#Recommended-Plugins" class="headerlink" title="Recommended Plugins"></a>Recommended Plugins</h2><ul><li><p><a href="https://github.com/rozbo/hexo-abbrlink">hexo-abbrlink</a></p><p>This plugin converts permalinks to numerical values. It is easy to configure, and it automatically converts them to numbers during generation.</p></li><li><p><a href="https://github.com/hexojs/hexo-generator-feed">hexo-generator-feed</a> </p><p>This plugin generates RSS files.</p></li><li><p><a href="https://github.com/hexojs/hexo-filter-nofollow">hexo-filter-nofollow</a></p><p>It adds <code>rel=&quot;noopener external nofollow noreferrer&quot;</code> to all external links on your website, which can enhance SEO and prevent loss of link juice.</p></li><li><p><a href="https://github.com/hexojs/hexo-generator-sitemap">hexo-generator-sitemap</a></p><p>This plugin generates a sitemap.</p></li><li><p><a href="https://github.com/coneycode/hexo-generator-baidu-sitemap">hexo-generator-baidu-sitemap</a></p><p>As the name suggests, this plugin is specifically for generating a sitemap for Baidu.</p></li></ul>]]></content>
    
    
      
      
    <summary type="html">&lt;div class=&quot;note orange icon-padding flat&quot;&gt;&lt;i class=&quot;note-icon fas fa-language&quot;&gt;&lt;/i&gt;&lt;p&gt;This article is translated from ChatGPT.&lt;/p&gt;
&lt;/div&gt;

</summary>
      
    
    
    
    <category term="Docs" scheme="https://butterfly.js.org/en/categories/Docs/"/>
    
    <category term="EN" scheme="https://butterfly.js.org/en/categories/Docs/EN/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly document - Q&amp;A</title>
    <link href="https://butterfly.js.org/en/posts/butterfly-docs-en-theme-question/"/>
    <id>https://butterfly.js.org/en/posts/butterfly-docs-en-theme-question/</id>
    <published>2023-07-01T08:50:57.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<div class="note orange icon-padding flat"><i class="note-icon fas fa-language"></i><p>This article is translated from ChatGPT.</p></div><div class="note green icon-padding flat"><i class="note-icon fas fa-rocket"></i><p> 📚  Table of Contents</p><p><a href="/en/posts/butterfly-docs-en-get-started/" title="Butterfly document - Get Started">🚀 Get Started</a> - <a href="/en/posts/butterfly-docs-en-theme-pages/" title="Butterfly document - Theme Pages">📑 Theme Pages</a> - <a href="/en/posts/butterfly-docs-en-theme-config/" title="Butterfly document - Theme Configuration">📌 Theme Configuration</a> - <a href="/en/posts/butterfly-docs-en-tag-plugins/" title="Butterfly document - Tag Plugins">⚔️ Tag Plugins</a> - <a href="/en/posts/butterfly-docs-en-theme-question/" title="Butterfly document - Q&amp;A">❓ Q&amp;A</a> - <a href="/en/posts/butterfly-docs-en-advanced-tutorial/" title="Butterfly document - Advanced Tutorial">⚡️ Advanced Tutorials</a></p></div><hr><p>Here are some issues encountered by users during the installation process. Before asking a question, please check if there are any solutions available.</p><h3 id="Webpage-displaying-code-after-running"><a href="#Webpage-displaying-code-after-running" class="headerlink" title="Webpage displaying code after running"></a>Webpage displaying code after running</h3><p>If your webpage is only showing the following code:<br><code>extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug #aside_content.aside_content include includes/aside.pug</code></p><p>Please download and install the necessary dependencies by running either of the following commands:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure><p>or</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add hexo-renderer-pug hexo-renderer-stylus</span><br></pre></td></tr></table></figure><p>These commands will install the required Pug and Stylus renderers for Hexo, which are essential for rendering your website correctly. After installing the dependencies, try running your Hexo website again, and the issue should be resolved.</p><h3 id="Error-while-configuring-friend-links"><a href="#Error-while-configuring-friend-links" class="headerlink" title="Error while configuring friend links"></a>Error while configuring friend links</h3><p>An error occurred while configuring the friend links page.</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></pre></td><td class="code"><pre><span class="line">ERROR D:\Desktop\orxing-blog\themes\Butterfly\layout\flink.pug:2</span><br><span class="line">    1| .flink</span><br><span class="line">  &gt; 2|   each i in site.data.link</span><br><span class="line">    3|     p.comment-word= i.class_name</span><br><span class="line">    4|     .post-cards</span><br><span class="line">    5|       ul.md-links</span><br><span class="line"></span><br><span class="line">Cannot read property &amp;#39;length&amp;#39; of undefined</span><br><span class="line">TypeError: D:\Desktop\orxing-blog\themes\Butterfly\layout\flink.pug:2</span><br><span class="line">    1| .flink</span><br><span class="line">  &gt; 2|   each i in site.data.link</span><br><span class="line">    3|     p.comment-word= i.class_name</span><br><span class="line">    4|     .post-cards</span><br><span class="line">    5|       ul.md-links</span><br><span class="line"></span><br><span class="line">Cannot read property &amp;#39;length&amp;#39; of undefined</span><br><span class="line">    at eval (eval at wrap (D:\Desktop\orxing-blog\node_modules\pug-runtime\wrap.js:6:10), &lt;anonymous&gt;:1890:32)</span><br><span class="line">    at eval (eval at wrap (D:\Desktop\orxing-blog\node_modules\pug-runtime\wrap.js:6:10), &lt;anonymous&gt;:2017:4)</span><br><span class="line">    at template (eval at wrap (D:\Desktop\orxing-blog\node_modules\pug-runtime\wrap.js:6:10), &lt;anonymous&gt;:10152:72)</span><br><span class="line">    at Theme._View.View._compiled (D:\Desktop\orxing-blog\node_modules\hexo\lib\theme\view.js:123:48)</span><br><span class="line">    at Theme._View.View.View.render (D:\Desktop\orxing-blog\node_modules\hexo\lib\theme\view.js:29:15)</span><br><span class="line">    at D:\Desktop\orxing-blog\node_modules\hexo\lib\hexo\index.js:349:21</span><br><span class="line">    at tryCatcher (D:\Desktop\orxing-blog\node_modules\bluebird\js\release\util.js:16:23)</span><br><span class="line">    at D:\Desktop\orxing-blog\node_modules\bluebird\js\release\method.js:15:34</span><br><span class="line">    at RouteStream._read (D:\Desktop\orxing-blog\node_modules\hexo\lib\hexo\router.js:123:3)</span><br><span class="line">    at RouteStream.Readable.read (_stream_readable.js:457:10)</span><br><span class="line">    at resume_ (_stream_readable.js:936:12)</span><br><span class="line">    at processTicksAndRejections (internal/process/task_queues.js:84:9)</span><br></pre></td></tr></table></figure><blockquote><p>Please check the spacing in the <code>link.yml</code> document.</p></blockquote><h3 id="Error-after-upgrading-to-the-latest-version"><a href="#Error-after-upgrading-to-the-latest-version" class="headerlink" title="Error after upgrading to the latest version"></a>Error after upgrading to the latest version</h3><p>After upgrading to the latest version of Hexo, an error occurs when running <code>hexo g</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">INFO  Deleted database.</span><br><span class="line">INFO  Start processing</span><br><span class="line">FATAL Something&amp;#39;s wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html</span><br><span class="line">TypeError: Cannot read property &amp;#39;enable&amp;#39; of undefined</span><br><span class="line">    at Hexo.&lt;anonymous&gt; (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/themes/Butterfly/scripts/post-lazyload.js:5:23)</span><br><span class="line">    at Hexo.tryCatcher (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/util.js:16:23)</span><br><span class="line">    at Hexo.&lt;anonymous&gt; (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/method.js:15:34)</span><br><span class="line">    at /Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/hexo/lib/extend/filter.js:60:50</span><br><span class="line">    at tryCatcher (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/util.js:16:23)</span><br><span class="line">    at Object.gotValue (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/reduce.js:155:18)</span><br><span class="line">    at Object.gotAccum (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/reduce.js:144:25)</span><br><span class="line">    at Object.tryCatcher (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/util.js:16:23)</span><br><span class="line">    at Promise._settlePromiseFromHandler (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/promise.js:517:31)</span><br><span class="line">    at Promise._settlePromise (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/promise.js:574:18)</span><br><span class="line">    at Promise._settlePromiseCtx (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/promise.js:611:10)</span><br><span class="line">    at _drainQueueStep (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/async.js:142:12)</span><br><span class="line">    at _drainQueue (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/async.js:131:9)</span><br><span class="line">    at Async._drainQueues (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/async.js:147:5)</span><br><span class="line">    at Immediate.Async.drainQueues [as _onImmediate] (/Users/qinkangdeid/Nextcloud/work/codes/personal/github/personal/qinkangdeid.github.io/node_modules/bluebird/js/release/async.js:17:14)</span><br><span class="line">    at processImmediate (internal/timers.js:439:21)</span><br></pre></td></tr></table></figure><p>Please refer to the latest version of <code>_config.yml</code> and compare it. Copy any missing configurations to the main theme configuration file.</p><h3 id="Error-wordcount-is-not-a-function-totalcount-is-not-a-function"><a href="#Error-wordcount-is-not-a-function-totalcount-is-not-a-function" class="headerlink" title="Error: wordcount is not a function &#x2F; totalcount is not a function"></a>Error: <code>wordcount is not a function</code> &#x2F; <code>totalcount is not a function</code></h3><p>You are encountering an error message stating &quot;<code>wordcount is not a function</code>.&quot;</p><p>Please check whether you have installed the wordcount plugin using the following command: <code>npm i --save hexo-wordcount</code>.</p><h3 id="After-upgrading-to-version-2-0-0-you-encounter-an-error-during-execution"><a href="#After-upgrading-to-version-2-0-0-you-encounter-an-error-during-execution" class="headerlink" title="After upgrading to version 2.0.0, you encounter an error during execution."></a>After upgrading to version 2.0.0, you encounter an error during execution.</h3><p>After upgrading to version 2.0.0, you encounter an error during execution.</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></pre></td><td class="code"><pre><span class="line">INFO Start processing</span><br><span class="line">FATAL Something’s wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html</span><br><span class="line">Template render error: (unknown path)</span><br><span class="line">unexpected end of file</span><br><span class="line">at Object.prettifyError (F:\hexo\nodemodules\nunjucks\src\lib.js:36:11)</span><br><span class="line">at Template.render (F:\hexo\node_modules\nunjucks\src\environment.js:542:21)</span><br><span class="line">at Environment.renderString (F:\hexo\node_modules\nunjucks\src\environment.js:380:17)</span><br><span class="line">at Promise.fromCallback.cb (F:\hexo\node_modules\hexo\lib\extend\tag.js:123:48)</span><br><span class="line">at tryCatcher (F:\hexo\node_modules\bluebird\js\release\util.js:16:23)</span><br><span class="line">at Function.Promise.fromNode.Promise.fromCallback (F:\hexo\node_modules\bluebird\js\release\promise.js:185:30)</span><br><span class="line">at Tag.render (F:\hexo\node_modules\hexo\lib\extend\tag.js:123:18)</span><br><span class="line">at Object.onRenderEnd (F:\hexo\node_modules\hexo\lib\hexo\post.js:280:20)</span><br><span class="line">at Promise.then.then.result (F:\hexo\node_modules\hexo\lib\hexo\render.js:64:19)</span><br><span class="line">at tryCatcher (F:\hexo\node_modules\bluebird\js\release\util.js:16:23)</span><br><span class="line">at Promise.settlePromiseFromHandler (F:\hexo\nodemodules\bluebird\js\release\promise.js:517:31)</span><br><span class="line"></span><br></pre></td></tr></table></figure><blockquote><p>Version 2.0.0 and above have removed the old <code>gallery</code> and introduced a new one. Therefore, if you were using the old version, you need to either delete or modify your code to accommodate the changes.</p></blockquote><h3 id="search-bar-appears-at-the-bottom-of-the-page"><a href="#search-bar-appears-at-the-bottom-of-the-page" class="headerlink" title="search bar appears at the bottom of the page"></a>search bar appears at the bottom of the page</h3><p>After deploying with hexo deploy, you notice that the search bar appears at the bottom of the page.</p><p>To resolve this issue, please make sure to execute <code>hexo clean</code> before generating the site.</p><p>This will clean any cached files and ensure that the search bar appears correctly in its intended position.</p><h3 id="The-code-runs-fine-locally-but-encounters-errors-missing-elements-or-becomes-ineffective-after-pushing-it-to-the-remote-repository"><a href="#The-code-runs-fine-locally-but-encounters-errors-missing-elements-or-becomes-ineffective-after-pushing-it-to-the-remote-repository" class="headerlink" title="The code runs fine locally but encounters errors, missing elements, or becomes ineffective after pushing it to the remote repository."></a>The code runs fine locally but encounters errors, missing elements, or becomes ineffective after pushing it to the remote repository.</h3><blockquote><ol><li>Clear the browser cache.</li><li>If step 1 doesn&#39;t work, make sure you ran <code>hexo clean</code> before uploading.</li></ol></blockquote><h3 id="You-have-already-set-the-language-in-Hexo-s-configuration-file-but-the-navigation-bar-is-still-in-English"><a href="#You-have-already-set-the-language-in-Hexo-s-configuration-file-but-the-navigation-bar-is-still-in-English" class="headerlink" title="You have already set the language in Hexo&#39;s configuration file, but the navigation bar is still in English."></a>You have already set the language in Hexo&#39;s configuration file, but the navigation bar is still in English.</h3><p>Please modify the navigation configuration to your desired Chinese language:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">Home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-home</span></span><br><span class="line"><span class="attr">Timeline:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-archive</span></span><br><span class="line"><span class="attr">Tags:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-tags</span></span><br><span class="line"><span class="attr">Categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-folder-open</span></span><br></pre></td></tr></table></figure><h3 id="Error-Cannot-read-property-bind-of-undefined-full-url-for-is-not-a-function"><a href="#Error-Cannot-read-property-bind-of-undefined-full-url-for-is-not-a-function" class="headerlink" title="Error: Cannot read property &#39;bind&#39; of undefined &#x2F; full_url_for is not a function"></a>Error: Cannot read property &#39;bind&#39; of undefined &#x2F; full_url_for is not a function</h3><blockquote><p>To resolve this issue, upgrade Hexo to version 4.0 or higher.</p></blockquote><h3 id="Error-Cannot-read-property-appId-of-undefined"><a href="#Error-Cannot-read-property-appId-of-undefined" class="headerlink" title="Error: Cannot read property &#39;appId&#39; of undefined"></a>Error: Cannot read property &#39;appId&#39; of undefined</h3><p>This error is related to the Algolia plugin. After installing the plugin, you need to configure it correctly. Please refer to the plugin documentation for configuration details.</p><h3 id="Loading-appears-at-the-top"><a href="#Loading-appears-at-the-top" class="headerlink" title="Loading appears at the top"></a>Loading appears at the top</h3><p>Before generating the site, execute <code>hexo clean</code>.</p><h3 id="Error-when-clicking-on-a-Chinese-category"><a href="#Error-when-clicking-on-a-Chinese-category" class="headerlink" title="Error when clicking on a Chinese category"></a>Error when clicking on a Chinese category</h3><p>This problem occurs in themes below version 3.0.0. Upgrade the theme to fix it.</p><h3 id="Uncaught-ReferenceError-regeneratorRuntime-is-not-defined"><a href="#Uncaught-ReferenceError-regeneratorRuntime-is-not-defined" class="headerlink" title="Uncaught ReferenceError: regeneratorRuntime is not defined"></a>Uncaught ReferenceError: regeneratorRuntime is not defined</h3><p>This error is due to using Babel to compress the code. Please check the <a href="https://github.com/babel/gulp-babel#runtime">babel&#x2F;gulp-babel</a> repository for the specific resolution method.</p><a class="btn-beautify block orange right larger" href="/en/posts/butterfly-docs-en-advanced-tutorial/" title="⚡️ Butterfly document - Advanced Tutorial"><i class="far fa-hand-point-right"></i><span>⚡️ Butterfly document - Advanced Tutorial</span></a>]]></content>
    
    
      
      
    <summary type="html">&lt;div class=&quot;note orange icon-padding flat&quot;&gt;&lt;i class=&quot;note-icon fas fa-language&quot;&gt;&lt;/i&gt;&lt;p&gt;This article is translated from ChatGPT.&lt;/p&gt;
&lt;/div&gt;

</summary>
      
    
    
    
    <category term="Docs" scheme="https://butterfly.js.org/en/categories/Docs/"/>
    
    <category term="EN" scheme="https://butterfly.js.org/en/categories/Docs/EN/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly document - Tag Plugins</title>
    <link href="https://butterfly.js.org/en/posts/butterfly-docs-en-tag-plugins/"/>
    <id>https://butterfly.js.org/en/posts/butterfly-docs-en-tag-plugins/</id>
    <published>2023-06-30T13:17:55.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<div class="note orange icon-padding flat"><i class="note-icon fas fa-language"></i><p>This article is translated from ChatGPT.</p></div><div class="note green icon-padding flat"><i class="note-icon fas fa-rocket"></i><p> 📚  Table of Contents</p><p><a href="/en/posts/butterfly-docs-en-get-started/" title="Butterfly document - Get Started">🚀 Get Started</a> - <a href="/en/posts/butterfly-docs-en-theme-pages/" title="Butterfly document - Theme Pages">📑 Theme Pages</a> - <a href="/en/posts/butterfly-docs-en-theme-config/" title="Butterfly document - Theme Configuration">📌 Theme Configuration</a> - <a href="/en/posts/butterfly-docs-en-tag-plugins/" title="Butterfly document - Tag Plugins">⚔️ Tag Plugins</a> - <a href="/en/posts/butterfly-docs-en-theme-question/" title="Butterfly document - Q&amp;A">❓ Q&amp;A</a> - <a href="/en/posts/butterfly-docs-en-advanced-tutorial/" title="Butterfly document - Advanced Tutorial">⚡️ Advanced Tutorials</a></p></div><hr><div class="note info flat"><p>Tag plugins are a unique feature of Hexo and are not part of the standard Markdown format.</p><p>The following syntax is only applicable to the Butterfly theme. It will not work on other themes and may even cause errors. Please be aware before using it.</p></div><div class="note warning flat"><p>Although tag plugins can provide additional functionality and UI enhancements to the theme, they also come with notable limitations. Please be mindful when using them.</p></div><h2 id="Note-Bootstrap-Callout"><a href="#Note-Bootstrap-Callout" class="headerlink" title="Note (Bootstrap Callout)"></a>Note (Bootstrap Callout)</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">General Settings</button><button type="button" class="tab">Usage 1</button><button type="button" class="tab">Usage 2 (Custom icon)</button></div><div class="tab-contents"><div class="tab-item-content active"><p>Ported from the Next theme and modified.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">note:</span></span><br><span class="line">  <span class="comment"># Note tag style values:</span></span><br><span class="line">  <span class="comment">#  - simple    bs-callout old alert style. Default.</span></span><br><span class="line">  <span class="comment">#  - modern    bs-callout new (v2-v3) alert style.</span></span><br><span class="line">  <span class="comment">#  - flat      flat callout style with background, like on Mozilla or StackOverflow.</span></span><br><span class="line">  <span class="comment">#  - disabled  disable all CSS styles import of note tag.</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">simple</span></span><br><span class="line">  <span class="attr">icons:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">border_radius:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line">  <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line">  <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>style</td><td>[Optional] Tag style <br> (simple&#x2F;modern&#x2F;flat&#x2F;disabled)</td></tr><tr><td>icons</td><td>[Optional] Whether to display icons</td></tr><tr><td>border_radius</td><td>[Optional] Border radius</td></tr><tr><td>light_bg_offset</td><td>[Optional] Background color offset</td></tr></tbody></table><p><code>icons</code> and <code>light_bg_offset</code> only apply to <em>Method 1</em></p><p>The Note tag plugin has two usages</p></div><div class="tab-item-content"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note [class] [no-icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>class</td><td>[Optional] Identifier, different identifiers have different color schemes <br> (default &#x2F; primary &#x2F; success &#x2F; info &#x2F; warning &#x2F; danger)</td></tr><tr><td>no-icon</td><td>[Optional] Do not display icon</td></tr><tr><td>style</td><td>[Optional] Can override the style in the configuration <br> (simple&#x2F;modern&#x2F;flat&#x2F;disabled)</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>simple</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><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">&#123;% note simple %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default simple %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary simple %&#125;</span><br><span class="line">primary tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success simple %&#125;</span><br><span class="line">success tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info simple %&#125;</span><br><span class="line">info tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning simple %&#125;</span><br><span class="line">warning tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger simple %&#125;</span><br><span class="line">danger tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note simple"><p>default tag</p></div><div class="note default simple"><p>default tag</p></div><div class="note primary simple"><p>primary tag</p></div><div class="note success simple"><p>success tag</p></div><div class="note info simple"><p>info tag</p></div><div class="note warning simple"><p>warning tag</p></div><div class="note danger simple"><p>danger tag</p></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>modern</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><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">&#123;% note modern %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default modern %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary modern %&#125;</span><br><span class="line">primary tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success modern %&#125;</span><br><span class="line">success tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info modern %&#125;</span><br><span class="line">info tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning modern %&#125;</span><br><span class="line">warning tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger modern %&#125;</span><br><span class="line">danger tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note modern"><p>default tag</p></div><div class="note default modern"><p>default tag</p></div><div class="note primary modern"><p>primary tag</p></div><div class="note success modern"><p>success tag</p></div><div class="note info modern"><p>info tag</p></div><div class="note warning modern"><p>warning tag</p></div><div class="note danger modern"><p>danger tag</p></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>flat</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><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">&#123;% note flat %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default flat %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary flat %&#125;</span><br><span class="line">primary tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success flat %&#125;</span><br><span class="line">success tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info flat %&#125;</span><br><span class="line">info tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning flat %&#125;</span><br><span class="line">warning tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger flat %&#125;</span><br><span class="line">danger tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note flat"><p>default tag</p></div><div class="note default flat"><p>default tag</p></div><div class="note primary flat"><p>primary tag</p></div><div class="note success flat"><p>success tag</p></div><div class="note info flat"><p>info tag</p></div><div class="note warning flat"><p>warning tag</p></div><div class="note danger flat"><p>danger tag</p></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>disabled</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><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">&#123;% note disabled %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default disabled %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary disabled %&#125;</span><br><span class="line">primary tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success disabled %&#125;</span><br><span class="line">success tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info disabled %&#125;</span><br><span class="line">info tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning disabled %&#125;</span><br><span class="line">warning tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger disabled %&#125;</span><br><span class="line">danger tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note disabled"><p>default tag</p></div><div class="note default disabled"><p>default tag</p></div><div class="note primary disabled"><p>primary tag</p></div><div class="note success disabled"><p>success tag</p></div><div class="note info disabled"><p>info tag</p></div><div class="note warning disabled"><p>warning tag</p></div><div class="note danger disabled"><p>danger tag</p></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>no-icon</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><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">&#123;% note no-icon %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default no-icon %&#125;</span><br><span class="line">default tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary no-icon %&#125;</span><br><span class="line">primary tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success no-icon %&#125;</span><br><span class="line">success tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info no-icon %&#125;</span><br><span class="line">info tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning no-icon %&#125;</span><br><span class="line">warning tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger no-icon %&#125;</span><br><span class="line">danger tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note no-icon flat"><p>default tag</p></div><div class="note default no-icon flat"><p>default tag</p></div><div class="note primary no-icon flat"><p>primary tag</p></div><div class="note success no-icon flat"><p>success tag</p></div><div class="note info no-icon flat"><p>info tag</p></div><div class="note warning no-icon flat"><p>warning tag</p></div><div class="note danger no-icon flat"><p>danger tag</p></div></div><div class="tab-item-content"><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Supported from version 3.2.0 and above</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note [color] [icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Name</th><th>Usage</th></tr></thead><tbody><tr><td>color</td><td>[Optional] Color <br>(default &#x2F; blue &#x2F; pink &#x2F; red &#x2F; purple &#x2F; orange &#x2F; green)</td></tr><tr><td>icon</td><td>[Optional] Customizable icon (only supports FontAwesome icons, can also configure no-icon)</td></tr><tr><td>style</td><td>[Optional] Can override the style in the configuration <br>(simple&#x2F;modern&#x2F;flat&#x2F;disabled)</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>simple</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; simple %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; simple %&#125;</span><br><span class="line">2021 is coming soon....</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; simple %&#125;</span><br><span class="line">Drive carefully, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; simple%&#125;</span><br><span class="line">Is this three pieces? Or four pieces?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; simple %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; simple %&#125;</span><br><span class="line">Rock, Paper, Scissors</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; simple %&#125;</span><br><span class="line">The most hated browser by front-end developers</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note icon-padding simple"><i class="note-icon fab fa-cc-visa"></i><p>Do you use Visa or UnionPay?</p></div><div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p>2021 is coming soon....</p></div><div class="note pink icon-padding simple"><i class="note-icon fas fa-car-crash"></i><p>Drive carefully, safety first.</p></div><div class="note red icon-padding simple"><i class="note-icon fas fa-fan"></i><p>Is this three pieces? Or four pieces?</p></div><div class="note orange icon-padding simple"><i class="note-icon fas fa-battery-half"></i><p>Do you use Visa or UnionPay?</p></div><div class="note purple icon-padding simple"><i class="note-icon far fa-hand-scissors"></i><p>Rock, Paper, Scissors</p></div><div class="note green icon-padding simple"><i class="note-icon fab fa-internet-explorer"></i><p>The most hated browser by front-end developers</p></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>modern</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; modern %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; modern %&#125;</span><br><span class="line">2021 is coming soon....</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; modern %&#125;</span><br><span class="line">Drive carefully, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; modern%&#125;</span><br><span class="line">Is this three pieces? Or four pieces?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; modern %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; modern %&#125;</span><br><span class="line">Rock, Paper, Scissors</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; modern %&#125;</span><br><span class="line">The most hated browser by front-end developers</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note icon-padding modern"><i class="note-icon fab fa-cc-visa"></i><p>Do you use Visa or UnionPay?</p></div><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>2021 is coming soon....</p></div><div class="note pink icon-padding modern"><i class="note-icon fas fa-car-crash"></i><p>Drive carefully, safety first.</p></div><div class="note red icon-padding modern"><i class="note-icon fas fa-fan"></i><p>Is this three pieces? Or four pieces?</p></div><div class="note orange icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p>Do you use Visa or UnionPay?</p></div><div class="note purple icon-padding modern"><i class="note-icon far fa-hand-scissors"></i><p>Rock, Paper, Scissors</p></div><div class="note green icon-padding modern"><i class="note-icon fab fa-internet-explorer"></i><p>The most hated browser by front-end developers</p></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>flat</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; flat %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; flat %&#125;</span><br><span class="line">2021 is coming soon....</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; flat %&#125;</span><br><span class="line">Drive carefully, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; flat%&#125;</span><br><span class="line">Is this three pieces? Or four pieces?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; flat %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; flat %&#125;</span><br><span class="line">Rock, Paper, Scissors</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; flat %&#125;</span><br><span class="line">The most hated browser by front-end developers</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note icon-padding flat"><i class="note-icon fab fa-cc-visa"></i><p>Do you use Visa or UnionPay?</p></div><div class="note blue icon-padding flat"><i class="note-icon fas fa-bullhorn"></i><p>2021 is coming soon....</p></div><div class="note pink icon-padding flat"><i class="note-icon fas fa-car-crash"></i><p>Drive carefully, safety first.</p></div><div class="note red icon-padding flat"><i class="note-icon fas fa-fan"></i><p>Is this three pieces? Or four pieces?</p></div><div class="note orange icon-padding flat"><i class="note-icon fas fa-battery-half"></i><p>Do you use Visa or UnionPay?</p></div><div class="note purple icon-padding flat"><i class="note-icon far fa-hand-scissors"></i><p>Rock, Paper, Scissors</p></div><div class="note green icon-padding flat"><i class="note-icon fab fa-internet-explorer"></i><p>The most hated browser by front-end developers</p></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>disabled</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; disabled %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; disabled %&#125;</span><br><span class="line">2021 is coming soon....</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; disabled %&#125;</span><br><span class="line">Drive carefully, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; disabled %&#125;</span><br><span class="line">Is this three pieces? Or four pieces?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; disabled %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; disabled %&#125;</span><br><span class="line">Rock, Paper, Scissors</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; disabled %&#125;</span><br><span class="line">The most hated browser by front-end developers</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note icon-padding disabled"><i class="note-icon fab fa-cc-visa"></i><p>Do you use Visa or UnionPay?</p></div><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p>2021 is coming soon....</p></div><div class="note pink icon-padding disabled"><i class="note-icon fas fa-car-crash"></i><p>Drive carefully, safety first.</p></div><div class="note red icon-padding disabled"><i class="note-icon fas fa-fan"></i><p>Is this three pieces? Or four pieces?</p></div><div class="note orange icon-padding disabled"><i class="note-icon fas fa-battery-half"></i><p>Do you use Visa or UnionPay?</p></div><div class="note purple icon-padding disabled"><i class="note-icon far fa-hand-scissors"></i><p>Rock, Paper, Scissors</p></div><div class="note green icon-padding disabled"><i class="note-icon fab fa-internet-explorer"></i><p>The most hated browser by front-end developers</p></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>no-icon</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue no-icon %&#125;</span><br><span class="line">2021 is coming soon....</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink no-icon %&#125;</span><br><span class="line">Drive carefully, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red no-icon %&#125;</span><br><span class="line">Is this three pieces? Or four pieces?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange no-icon %&#125;</span><br><span class="line">Do you use Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple no-icon %&#125;</span><br><span class="line">Rock, Paper, Scissors</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green no-icon %&#125;</span><br><span class="line">The most hated browser by front-end developers</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note no-icon flat"><p>Do you use Visa or UnionPay?</p></div><div class="note blue no-icon flat"><p>2021 is coming soon....</p></div><div class="note pink no-icon flat"><p>Drive carefully, safety first.</p></div><div class="note red no-icon flat"><p>Is this three pieces? Or four pieces?</p></div><div class="note orange no-icon flat"><p>Do you use Visa or UnionPay?</p></div><div class="note purple no-icon flat"><p>Rock, Paper, Scissors</p></div><div class="note green no-icon flat"><p>The most hated browser by front-end developers</p></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Gallery-Album"><a href="#Gallery-Album" class="headerlink" title="Gallery Album"></a>Gallery Album</h2><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Available from version 2.2.0 and above</p></div><p>A gallery collection.</p><p>Usage:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;gallery-group-main&quot;&gt;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>name</td><td>Gallery name</td></tr><tr><td>description</td><td>Gallery description</td></tr><tr><td>link</td><td>Link to the album</td></tr><tr><td>img-url</td><td>Gallery cover URL</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;gallery-group-main&quot;&gt;</span><br><span class="line">&#123;% galleryGroup &#x27;Wallpapers&#x27; &#x27;A collection of wallpapers&#x27; &#x27;/Gallery/wallpaper&#x27; https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %&#125;</span><br><span class="line">&#123;% galleryGroup &#x27;Marvel&#x27; &#x27;Images related to Marvel&#x27; &#x27;/Gallery/marvel&#x27; https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %&#125;</span><br><span class="line">&#123;% galleryGroup &#x27;OH MY GIRL&#x27; &#x27;Images related to OH MY GIRL&#x27; &#x27;/Gallery/ohmygirl&#x27; https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %&#125;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure><div class="gallery-group-main"><figure class="gallery-group">    <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png' alt="Group Image Gallery">    <figcaption>      <div class="gallery-group-name">Wallpapers</div>      <p>A collection of wallpapers</p>      <a href='/en/Gallery/wallpaper'></a>    </figcaption>  </figure><figure class="gallery-group">    <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg' alt="Group Image Gallery">    <figcaption>      <div class="gallery-group-name">Marvel</div>      <p>Images related to Marvel</p>      <a href='/en/Gallery/marvel'></a>    </figcaption>  </figure><figure class="gallery-group">    <img class="gallery-group-img no-lightbox" 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>Images related to OH MY GIRL</p>      <a href='/en/Gallery/ohmygirl'></a>    </figcaption>  </figure></div><h2 id="Gallery"><a href="#Gallery" class="headerlink" title="Gallery"></a>Gallery</h2><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Available from version 2.0.0 and above</p></div><p>Unlike the old version of the Gallery album, the new Gallery album automatically arranges images based on their length, making it easier to write, similar to the markdown format. It can be inserted into the corresponding markdown as needed.</p><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Local</button><button type="button" class="tab">Remote Fetch</button></div><div class="tab-contents"><div class="tab-item-content active"><p>Usage:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery [button] %&#125;</span><br><span class="line">markdown image format</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>button</td><td>[Optional] Load more images on button click, set to true&#x2F;false. Default is <code>false</code>.</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">markdown image format</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><p>例如</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg</span>)</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><div class="gallery-container" data-type="data" data-button="" data-limit="10" data-first="10">    <div class="gallery-items">[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":"","title":""}]</div>  </div></div><div class="tab-item-content"><p>Usage:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,[link],[button] %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>url</td><td>[Required] Identifier</td></tr><tr><td>link</td><td>[Required] Remote JSON link</td></tr><tr><td>button</td><td>[Optional] Load more images on button click, set to true&#x2F;false. Default is <code>false</code>.</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Example of remote link JSON</p></div><p>There are three parameters: <code>url</code> is <strong>required</strong>, while <code>alt</code> and <code>title</code> are optional.</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;title&quot;</span><span class="punctuation">:</span> <span class="string">&quot;title&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0472.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0472.jpg&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0453.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/IMG_0931.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,https://xxxx.com/sss.json %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,220,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Tag-hide"><a href="#Tag-hide" class="headerlink" title="Tag-hide"></a>Tag-hide</h2><div class="note warning flat"><p>Available from version 2.2.0 and above</p><p>Please note that it is not recommended to have h1 - h6 headers within the tag-hide plugin content. This is because the Toc will display the hidden content headers, and if the hidden content is not displayed when scrolling the screen, it will cause abnormal scrolling of the Toc.</p></div><p>If you want to hide some text or content and provide a button for users to click to display it, you can use this tag plugin.</p><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Inline</button><button type="button" class="tab">Block</button><button type="button" class="tab">Toggle</button></div><div class="tab-contents"><div class="tab-item-content active"><p><code>inline</code> adds a button to hide content within the text, limited to text only.</p><p>(content cannot contain commas, use <code>&amp;sbquo;</code> instead)</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideInline content,display,bg,color %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>content</td><td>Text content</td></tr><tr><td>display</td><td>[Optional] Text displayed on the button</td></tr><tr><td>bg</td><td>[Optional] Background color of the button</td></tr><tr><td>color</td><td>[Optional] Text color of the button</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Which letter is the coolest? &#123;% hideInline Because &quot;C&quot; is for Cool, See Answer, #FF7242, #fff %&#125;</span><br><span class="line"></span><br><span class="line">Who is standing behind the door? &#123;% hideInline Flash %&#125;</span><br></pre></td></tr></table></figure><p>Which letter is the coolest? <span class="hide-inline"><button type="button" class="hide-button" style="background-color:  #FF7242;color:  #fff"> See Answer</button><span class="hide-content">Because C is for Cool</span></span></p><p>Who is standing behind the door? <span class="hide-inline"><button type="button" class="hide-button" style="">Click</button><span class="hide-content">Flash</span></span></p></div><div class="tab-item-content"><p><code>block</code> is an independent block for hiding content. It can hide a lot of content, including images, code blocks, etc.</p><p>(display cannot contain commas, use <code>&amp;sbquo;</code> instead)</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideBlock display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>content</td><td>Text content</td></tr><tr><td>display</td><td>[Optional] Text displayed on the button</td></tr><tr><td>bg</td><td>[Optional] Background color of the button</td></tr><tr><td>color</td><td>[Optional] Text color of the button</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">See Answer</span><br><span class="line">&#123;% hideBlock See Answer %&#125;</span><br><span class="line">Fool, how could there be an answer</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure><p>See Answer</p><div class="hide-block"><button type="button" class="hide-button" style="">See Answer</button><div class="hide-content"><p>Fool, how could there be an answer</p></div></div></div><div class="tab-item-content"><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Supported from version 2.3.0 and above</p></div><p>If you need to display a lot of content, you can hide it in a collapsible box and expand it when needed.</p><p>(display cannot contain commas, use <code>&amp;sbquo;</code>)</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideToggle display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideToggle %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>display</td><td>Text displayed on the button</td></tr><tr><td>bg</td><td>[Optional] Background color</td></tr><tr><td>color</td><td>[Optional] Text color</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideToggle Butterfly Installation Method %&#125;</span><br><span class="line">In your blog root directory</span><br><span class="line"></span><br><span class="line">git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly</span><br><span class="line"></span><br><span class="line">If you want to install the newer dev branch, you can</span><br><span class="line"></span><br><span class="line">git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly</span><br><span class="line"></span><br><span class="line">&#123;% endhideToggle %&#125;</span><br></pre></td></tr></table></figure><details class="toggle" ><summary class="toggle-button" style="">Butterfly Installation Method</summary><div class="toggle-content"><p>In your blog root directory</p><p>git clone -b master <a href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes&#x2F;Butterfly</p><p>If you want to install the newer dev branch, you can</p><p>git clone -b dev <a href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes&#x2F;Butterfly</p></div></details></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Mermaid"><a href="#Mermaid" class="headerlink" title="Mermaid"></a>Mermaid</h2><p>Using the mermaid tag, you can draw Flowcharts, Sequence diagrams, Class Diagrams, State Diagrams, Gantt charts, and Pie Charts. For more details, refer to the <a href="https://mermaid-js.github.io/mermaid/#/">mermaid documentation</a>.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Mermaid</span></span><br><span class="line"><span class="comment"># https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Write Mermaid diagrams using code blocks</span></span><br><span class="line">  <span class="attr">code_write:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># built-in themes: default / forest / dark / neutral</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br></pre></td></tr></table></figure><p>寫法：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">pie</span><br><span class="line">title Key elements in Product X</span><br><span class="line">&quot;Calcium&quot; : 42.96</span><br><span class="line">&quot;Potassium&quot; : 50.05</span><br><span class="line">&quot;Magnesium&quot; : 10.01</span><br><span class="line">&quot;Iron&quot; : 5</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure><div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>    pietitle Key elements in Product X&quot;Calcium&quot; : 42.96&quot;Potassium&quot; : 50.05&quot;Magnesium&quot; : 10.01&quot;Iron&quot; : 5  </pre></div><h2 id="Tabs"><a href="#Tabs" class="headerlink" title="Tabs"></a>Tabs</h2><p>Ported from the NexT theme</p><p>Usage：</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs Unique name, [index] %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab [Tab caption] [@icon] --&gt;</span><br><span class="line"></span><br><span class="line">Any content (support inline tags too).</span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>Unique name</td><td>The unique name of the tabs block, without commas. It will be used as the #id prefix for each tab, appended with its index number. If the name contains spaces, they will be replaced with hyphens in the generated #id. Must be unique within the current article&#x2F;page URL!</td></tr><tr><td>[index]</td><td>[Optional] The index number of the active tab. If not specified, the first tab (1) will be selected. If the index is -1, no tab will be selected, similar to collapsed content. Optional parameter.</td></tr><tr><td>[Tab caption]</td><td>The title of the current tab. If not specified, the unique name with the tab index suffix will be used as the tab title. If no title is specified but an icon is provided, the title will be empty.</td></tr><tr><td>[@icon]</td><td>[Optional] FontAwesome icon name (full name, e.g., &#39;fas fa-font&#39;). Can be with or without spaces; for example, &#39;Tab caption @icon&#39; is similar to &#39;Tab caption@icon&#39;.</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Example 1 - Default to the first tab [default]</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test1 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">test1 1</button><button type="button" class="tab">test1 2</button><button type="button" class="tab">test1 3</button></div><div class="tab-contents"><div class="tab-item-content active"><p><strong>This is Tab 1.</strong></p></div><div class="tab-item-content"><p><strong>This is Tab 2.</strong></p></div><div class="tab-item-content"><p><strong>This is Tab 3.</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Example 2 - Default selected tabs</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test2, 3 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><div class="tabs"><div class="nav-tabs"><button type="button" class="tab">test2 1</button><button type="button" class="tab">test2 2</button><button type="button" class="tab active">test2 3</button></div><div class="tab-contents"><div class="tab-item-content"><p><strong>This is Tab 1.</strong></p></div><div class="tab-item-content"><p><strong>This is Tab 2.</strong></p></div><div class="tab-item-content active"><p><strong>This is Tab 3.</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Example 3 - No default value</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test3, -1 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><div class="tabs"><div class="nav-tabs no-default"><button type="button" class="tab">test3 1</button><button type="button" class="tab">test3 2</button><button type="button" class="tab">test3 3</button></div><div class="tab-contents"><div class="tab-item-content"><p><strong>This is Tab 1.</strong></p></div><div class="tab-item-content"><p><strong>This is Tab 2.</strong></p></div><div class="tab-item-content"><p><strong>This is Tab 3.</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Example 4 - Custom Tab Name + Icon Only + Icon and Tab Name</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tabs test4 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab First Tab --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**Tab name is First Tab**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab @fab fa-apple-pay --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**Icon only, no Tab name**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- tab Bomb@fas fa-bomb --&gt;</span><br><span class="line"></span><br><span class="line"><span class="strong">**Name + icon**</span></span><br><span class="line"></span><br><span class="line">&lt;!-- endtab --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtabs %&#125;</span><br></pre></td></tr></table></figure><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">First Tab</button><button type="button" class="tab"><i class="fab fa-apple-pay"></i></button><button type="button" class="tab"><i class="fas fa-bomb"></i>Bomb</button></div><div class="tab-contents"><div class="tab-item-content active"><p><strong>Tab name is First Tab</strong></p></div><div class="tab-item-content"><p><strong>Icon only, no Tab name</strong></p></div><div class="tab-item-content"><p><strong>Name + icon</strong></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Button"><a href="#Button" class="headerlink" title="Button"></a>Button</h2><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Applicable for version 3.0 and above</p></div><p>Usage:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>url</td><td>[Required] Link address</td></tr><tr><td>text</td><td>[Required] Button text</td></tr><tr><td>icon</td><td>[Optional] Icon</td></tr><tr><td>color</td><td>[Optional] Button background color (default style) or button font and border color (outline style) <br> Options: default&#x2F;blue&#x2F;pink&#x2F;red&#x2F;purple&#x2F;orange&#x2F;green</td></tr><tr><td>style</td><td>[Optional] Button style, default is solid <br> Options: outline&#x2F;empty</td></tr><tr><td>layout</td><td>[Optional] Button layout, default is line <br> Options: block&#x2F;empty</td></tr><tr><td>position</td><td>[Optional] Button position, applicable when layout is set to block, default is left <br> Options: center&#x2F;right&#x2F;empty</td></tr><tr><td>size</td><td>[Optional] Button size <br> Options: larger&#x2F;empty</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">This is my website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,,outline %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,outline %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,larger %&#125;</span><br></pre></td></tr></table></figure><p>This is my website, click the button <a class="btn-beautify " href="https://butterfly.js.org/" title="Butterfly"><span>Butterfly</span></a><br>This is my website, click the button <a class="btn-beautify " href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><br>This is my website, click the button <a class="btn-beautify outline" href="https://butterfly.js.org/" title="Butterfly"><span>Butterfly</span></a><br>This is my website, click the button <a class="btn-beautify outline" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><br>This is my website, click the button <a class="btn-beautify larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,block %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,block center larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,block right outline larger %&#125;</span><br></pre></td></tr></table></figure><a class="btn-beautify block" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify block center larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify block right outline larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><p><strong>more than one button in center</strong></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,green larger %&#125;</span><br></pre></td></tr></table></figure><a class="btn-beautify larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify blue larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify pink larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify red larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify purple larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify orange larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify green larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-center&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,outline larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,outline blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,outline pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,outline red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,outline purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,outline orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org/&#x27;,Butterfly,far fa-hand-point-right,outline green larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><div class="btn-center"><a class="btn-beautify outline larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline blue larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline pink larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline red larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline purple larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline orange larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline green larger" href="https://butterfly.js.org/" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a></div><h2 id="InlineImg"><a href="#InlineImg" class="headerlink" title="InlineImg"></a>InlineImg</h2><p>Images in the theme are displayed as <code>block elements</code> by default. If you want to display them as <code>inline elements</code>, you can use this tag plugin.</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% inlineImg [src] [height] %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>src</td><td>Image URL</td></tr><tr><td>height</td><td>[Optional] Image height limit</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Do you think she looks beautiful?</span><br><span class="line"></span><br><span class="line">![](<span class="link">https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png</span>)</span><br><span class="line"></span><br><span class="line">I think she looks beautiful. &#123;% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %&#125;</span><br></pre></td></tr></table></figure><p>Do you think she looks beautiful?</p><p><img src="https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png"></p><p>I think she looks beautiful. <img class="inline-img" src="https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png" style="height:150px" /></p><h2 id="Label"><a href="#Label" class="headerlink" title="Label"></a>Label</h2><div class="note warning flat"><p>Due to the rendering limitations of Hexo, using the label tag plugin at the beginning of a paragraph can cause some issues. For example, paragraphs that consecutively start with the label tag plugin cannot break lines.</p><p>It is recommended <strong>not</strong> to use the label tag plugin at the beginning of a paragraph.</p></div><p>Text to be highlighted</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% label text color %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>text</td><td>Text</td></tr><tr><td>color</td><td>[Optional] Background color, default is <code>default</code><br /> Options: default&#x2F;blue&#x2F;pink&#x2F;red&#x2F;purple&#x2F;orange&#x2F;green</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#123;% label &quot;Shall I compare thee to a summer&#x27;s day?&quot; blue %&#125;  </span><br><span class="line">Thou art more lovely and more temperate:  </span><br><span class="line">&#123;% label &quot;Rough winds do shake the darling buds of May,&quot; purple %&#125;  </span><br><span class="line">And summer&#x27;s lease hath all too short a date:  </span><br><span class="line"></span><br><span class="line">&#123;% label &quot;Sometime too hot the eye of heaven shines,&quot; red %&#125;  </span><br><span class="line">And often is his gold complexion dimmed;  </span><br><span class="line">And every fair from fair sometime declines,  </span><br><span class="line">&#123;% label &quot;By chance or nature&#x27;s changing course untrimmed;&quot; yellow %&#125;  </span><br><span class="line"></span><br><span class="line">&#123;% label &quot;But thy eternal summer shall not fade,&quot; green %&#125;  </span><br><span class="line">Nor lose possession of that fair thou owest;  </span><br><span class="line">Nor shall Death brag thou wanderest in his shade,  </span><br><span class="line">&#123;% label &quot;When in eternal lines to time thou growest:&quot; pink %&#125;  </span><br><span class="line"></span><br><span class="line">So long as men can breathe or eyes can see,  </span><br><span class="line">So long lives this, and this gives life to thee.  </span><br></pre></td></tr></table></figure><mark class="hl-label blue">Shall I compare thee to a summer's day?</mark>  <p>Thou art more lovely and more temperate:  </p><mark class="hl-label purple">Rough winds do shake the darling buds of May,</mark>  <p>And summer&#39;s lease hath all too short a date:  </p><mark class="hl-label red">Sometime too hot the eye of heaven shines,</mark>  <p>And often is his gold complexion dimmed;<br>And every fair from fair sometime declines,  </p><mark class="hl-label yellow">By chance or nature's changing course untrimmed;</mark>  <mark class="hl-label green">But thy eternal summer shall not fade,</mark>  <p>Nor lose possession of that fair thou owest;<br>Nor shall Death brag thou wanderest in his shade,  </p><mark class="hl-label pink">When in eternal lines to time thou growest:</mark>  <p>So long as men can breathe or eyes can see,<br>So long lives this, and this gives life to thee.  </p><h2 id="Timeline"><a href="#Timeline" class="headerlink" title="Timeline"></a>Timeline</h2><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Supported from version 4.0.0 and above</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline title,color %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line"></span><br><span class="line">xxxxx</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line"></span><br><span class="line">xxxxx</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>title</td><td>Title&#x2F;Timeline</td></tr><tr><td>color</td><td>Timeline color<br />default (leave blank) &#x2F; blue &#x2F; pink &#x2F; red &#x2F; purple &#x2F; orange &#x2F; green</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Example</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">This is a test page</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><div class="timeline "><div class='timeline-item headline'>        <div class='timeline-item-title'>          <div class='item-circle'><p>2022</p></div>        </div>      </div><div class='timeline-item'>        <div class='timeline-item-title'>          <div class='item-circle'><p>01-02</p></div>        </div>        <div class='timeline-item-content'><p>This is a test page</p></div>      </div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,blue %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">This is a test page</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><div class="timeline blue"><div class='timeline-item headline'>        <div class='timeline-item-title'>          <div class='item-circle'><p>2022</p></div>        </div>      </div><div class='timeline-item'>        <div class='timeline-item-title'>          <div class='item-circle'><p>01-02</p></div>        </div>        <div class='timeline-item-content'><p>This is a test page</p></div>      </div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,pink %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">This is a test page</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><div class="timeline pink"><div class='timeline-item headline'>        <div class='timeline-item-title'>          <div class='item-circle'><p>2022</p></div>        </div>      </div><div class='timeline-item'>        <div class='timeline-item-title'>          <div class='item-circle'><p>01-02</p></div>        </div>        <div class='timeline-item-content'><p>This is a test page</p></div>      </div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,red %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">This is a test page</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><div class="timeline red"><div class='timeline-item headline'>        <div class='timeline-item-title'>          <div class='item-circle'><p>2022</p></div>        </div>      </div><div class='timeline-item'>        <div class='timeline-item-title'>          <div class='item-circle'><p>01-02</p></div>        </div>        <div class='timeline-item-content'><p>This is a test page</p></div>      </div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,purple %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">This is a test page</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><div class="timeline purple"><div class='timeline-item headline'>        <div class='timeline-item-title'>          <div class='item-circle'><p>2022</p></div>        </div>      </div><div class='timeline-item'>        <div class='timeline-item-title'>          <div class='item-circle'><p>01-02</p></div>        </div>        <div class='timeline-item-content'><p>This is a test page</p></div>      </div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,orange %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">This is a test page</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><div class="timeline orange"><div class='timeline-item headline'>        <div class='timeline-item-title'>          <div class='item-circle'><p>2022</p></div>        </div>      </div><div class='timeline-item'>        <div class='timeline-item-title'>          <div class='item-circle'><p>01-02</p></div>        </div>        <div class='timeline-item-content'><p>This is a test page</p></div>      </div></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,green %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">This is a test page</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><div class="timeline green"><div class='timeline-item headline'>        <div class='timeline-item-title'>          <div class='item-circle'><p>2022</p></div>        </div>      </div><div class='timeline-item'>        <div class='timeline-item-title'>          <div class='item-circle'><p>01-02</p></div>        </div>        <div class='timeline-item-content'><p>This is a test page</p></div>      </div></div><h2 id="Flink"><a href="#Flink" class="headerlink" title="Flink"></a>Flink</h2><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Support for version 4.1.0</p></div><p>You can insert a friend link list effect on any page.</p><p>The content format is the same as the friend link page and supports the <code>yml</code> format.</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% flink %&#125;</span><br><span class="line">xxxxxx</span><br><span class="line">&#123;% endflink %&#125;</span><br></pre></td></tr></table></figure><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Example</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&#123;% flink %&#125;</span><br><span class="line"><span class="bullet">-</span> class<span class="emphasis">_name: Friend Links</span></span><br><span class="line"><span class="emphasis">  class_</span>desc: People and Stories</span><br><span class="line">  link<span class="emphasis">_list:</span></span><br><span class="line"><span class="emphasis">    - name: JerryC</span></span><br><span class="line"><span class="emphasis">      link: https://jerryc.me/</span></span><br><span class="line"><span class="emphasis">      avatar: https://jerryc.me/img/avatar.png</span></span><br><span class="line"><span class="emphasis">      descr: Today’s tasks completed today</span></span><br><span class="line"><span class="emphasis">    - name: Hexo</span></span><br><span class="line"><span class="emphasis">      link: https://hexo.io/zh-tw/</span></span><br><span class="line"><span class="emphasis">      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg</span></span><br><span class="line"><span class="emphasis">      descr: A fast, simple, and powerful blogging framework</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">- class_</span>name: Websites</span><br><span class="line">  class<span class="emphasis">_desc: Recommended Websites</span></span><br><span class="line"><span class="emphasis">  link_</span>list: </span><br><span class="line"><span class="bullet">    -</span> name: Youtube</span><br><span class="line"><span class="code">      link: https://www.youtube.com/</span></span><br><span class="line"><span class="code">      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png</span></span><br><span class="line"><span class="code">      descr: Video sharing platform</span></span><br><span class="line"><span class="code">    - name: Weibo</span></span><br><span class="line"><span class="code">      link: https://www.weibo.com/</span></span><br><span class="line"><span class="code">      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png</span></span><br><span class="line"><span class="code">      descr: China’s largest social sharing platform</span></span><br><span class="line"><span class="code">    - name: Twitter</span></span><br><span class="line"><span class="code">      link: https://twitter.com/</span></span><br><span class="line"><span class="code">      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png</span></span><br><span class="line"><span class="code">      descr: Social sharing platform</span></span><br><span class="line"><span class="code">&#123;% endflink %&#125;</span></span><br></pre></td></tr></table></figure><div class="flink"><div class="flink-name">Friend Links</div><div class="flink-desc">People and Stories</div><div class="flink-list">      <div class="flink-list-item">        <a href="https://jerryc.me/" title="JerryC" target="_blank">          <div class="flink-item-icon">            <img class="no-lightbox" src="https://jerryc.me/img/avatar.png" onerror='this.onerror=null;this.src="/en/img/friend_404.gif"' alt="JerryC" />          </div>          <div class="flink-item-name">JerryC</div>          <div class="flink-item-desc" title="Today’s tasks completed today">Today’s tasks completed today</div>        </a>      </div>      <div class="flink-list-item">        <a href="https://hexo.io/zh-tw/" title="Hexo" target="_blank">          <div class="flink-item-icon">            <img class="no-lightbox" src="https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg" onerror='this.onerror=null;this.src="/en/img/friend_404.gif"' alt="Hexo" />          </div>          <div class="flink-item-name">Hexo</div>          <div class="flink-item-desc" title="A fast, simple, and powerful blogging framework">A fast, simple, and powerful blogging framework</div>        </a>      </div></div><div class="flink-name">Websites</div><div class="flink-desc">Recommended Websites</div><div class="flink-list">      <div class="flink-list-item">        <a href="https://www.youtube.com/" title="Youtube" target="_blank">          <div class="flink-item-icon">            <img class="no-lightbox" src="https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png" onerror='this.onerror=null;this.src="/en/img/friend_404.gif"' alt="Youtube" />          </div>          <div class="flink-item-name">Youtube</div>          <div class="flink-item-desc" title="Video sharing platform">Video sharing platform</div>        </a>      </div>      <div class="flink-list-item">        <a href="https://www.weibo.com/" title="Weibo" target="_blank">          <div class="flink-item-icon">            <img class="no-lightbox" src="https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png" onerror='this.onerror=null;this.src="/en/img/friend_404.gif"' alt="Weibo" />          </div>          <div class="flink-item-name">Weibo</div>          <div class="flink-item-desc" title="China’s largest social sharing platform">China’s largest social sharing platform</div>        </a>      </div>      <div class="flink-list-item">        <a href="https://twitter.com/" title="Twitter" target="_blank">          <div class="flink-item-icon">            <img class="no-lightbox" src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" onerror='this.onerror=null;this.src="/en/img/friend_404.gif"' alt="Twitter" />          </div>          <div class="flink-item-name">Twitter</div>          <div class="flink-item-desc" title="Social sharing platform">Social sharing platform</div>        </a>      </div></div></div><h2 id="ABCJS-Score"><a href="#ABCJS-Score" class="headerlink" title="ABCJS Score"></a>ABCJS Score</h2><p>Render musical scores on the page</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># abcjs</span></span><br><span class="line"><span class="comment"># See https://github.com/paulrosen/abcjs</span></span><br><span class="line"><span class="comment"># ---------------</span></span><br><span class="line"><span class="attr">abcjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>enable</td><td>Enable ABCJS or not</td></tr><tr><td>per_page</td><td>Load ABCJS on every page. If set to false, you need to add <code>abcjs: true</code> in the front-matter of the pages where you use ABCJS</td></tr></tbody></table><p>Usage:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% score %&#125;</span><br><span class="line">Score</span><br><span class="line">&#123;% endscore %&#125;</span><br></pre></td></tr></table></figure><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#123;% score %&#125;</span><br><span class="line">X:1</span><br><span class="line">T:alternate heads</span><br><span class="line">M:C</span><br><span class="line">L:1/8</span><br><span class="line">U:n=!style=normal!</span><br><span class="line">K:C treble style=rhythm</span><br><span class="line">&quot;Am&quot; BBBB B2 B&gt;B | &quot;Dm&quot; B2 B/B/B &quot;C&quot; B4 |&quot;Am&quot; B2 nGnB B2 nGnA | &quot;Dm&quot; nDB/B/ nDB/B/ &quot;C&quot; nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |]</span><br><span class="line">%%text This translates to:</span><br><span class="line">[<span class="string">M:C</span>][<span class="symbol">K:style=normal</span>]</span><br><span class="line">[<span class="string">A,EAce</span>][<span class="symbol">A,EAce</span>][<span class="string">A,EAce</span>][<span class="symbol">A,EAce</span>] [A,EAce]2 [A,EAce]&gt;[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |]</span><br><span class="line">GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb|</span><br><span class="line">[K: style=x]</span><br><span class="line">C/A,/ C/C/E C/zz2|</span><br><span class="line">w:Rock-y did-nt like that</span><br><span class="line">&#123;% endscore %&#125;</span><br></pre></td></tr></table></figure><div class="abc-music-sheet">X:1T:alternate headsM:CL:1/8U:n=!style=normal!K:C treble style=rhythm&quot;Am&quot; BBBB B2 B&gt;B | &quot;Dm&quot; B2 B/B/B &quot;C&quot; B4 |&quot;Am&quot; B2 nGnB B2 nGnA | &quot;Dm&quot; nDB/B/ nDB/B/ &quot;C&quot; nCB/B/ nCB/B/ |B8| B0 B0 B0 B0 |]%%text This translates to:[M:C][K:style=normal][A,EAce][A,EAce][A,EAce][A,EAce] [A,EAce]2 [A,EAce]&gt;[A,EAce] |[DAdf]2 [DAdf]/[DAdf]/[DAdf] [CEGce]4 |[A,EAce]2 GA [A,EAce] GA |D[DAdf]/[DAdf]/ D[DAdf]/[DAdf]/ C [CEGce]/[CEGce]/ C[CEGce]/[CEGce]/ |[CEGce]8 | [CEGce]2 [CEGce]2 [CEGce]2 [CEGce]2 |]GAB2 !style=harmonic![gb]4|GAB2 [K: style=harmonic]gbgb|[K: style=x]C/A,/ C/C/E C/zz2|w:Rock-y did-nt like that</div><h2 id="Series"><a href="#Series" class="headerlink" title="Series"></a>Series</h2><p>Display series articles on the page</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">series:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">orderBy:</span> <span class="string">&#x27;title&#x27;</span> <span class="comment"># Order by title or date</span></span><br><span class="line">  <span class="attr">order:</span> <span class="number">1</span> <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Parameter</th></tr></thead><tbody><tr><td>enable</td><td>Enable series or not</td></tr><tr><td>orderBy</td><td>Sorting method, default is title, options are title &#x2F; date</td></tr><tr><td>order</td><td>Sorting order, default is 1, options are 1 (ascending) &#x2F; -1 (descending)</td></tr><tr><td>number</td><td>Display sequence number</td></tr></tbody></table><p>Usage:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% series %&#125;</span><br><span class="line">&#123;% series [series name] %&#125;</span><br></pre></td></tr></table></figure><p>Add the <code>series</code> parameter in the front-matter of the article and give it an identifier.</p><p>Using this tag plugin will display articles with the same identifier in a list format.</p><p>If the series identifier is not specified, it defaults to the series identifier of the article where this tag plugin is used.</p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><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;% series docs %&#125;</span><br></pre></td></tr></table></figure><ol class="series-items"><li><a href="/en/posts/butterfly-docs-en-get-started/" title="Butterfly document - Get Started">Butterfly document - Get Started</a></li><li><a href="/en/posts/butterfly-docs-en-theme-pages/" title="Butterfly document - Theme Pages">Butterfly document - Theme Pages</a></li><li><a href="/en/posts/butterfly-docs-en-theme-config/" title="Butterfly document - Theme Configuration">Butterfly document - Theme Configuration</a></li><li><a href="/en/posts/butterfly-docs-en-tag-plugins/" title="Butterfly document - Tag Plugins">Butterfly document - Tag Plugins</a></li><li><a href="/en/posts/butterfly-docs-en-theme-question/" title="Butterfly document - Q&A">Butterfly document - Q&A</a></li><li><a href="/en/posts/butterfly-docs-en-advanced-tutorial/" title="Butterfly document - Advanced Tutorial">Butterfly document - Advanced Tutorial</a></li></ol><h2 id="Chartjs"><a href="#Chartjs" class="headerlink" title="Chartjs"></a>Chartjs</h2><p>Another way to add charts</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># chartjs</span></span><br><span class="line"><span class="comment"># see https://www.chartjs.org/docs/latest/</span></span><br><span class="line"><span class="attr">chartjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Do not modify unless you understand how they work.</span></span><br><span class="line">  <span class="comment"># The default settings are only used when the MD syntax is not specified.</span></span><br><span class="line">  <span class="comment"># General font color for the chart</span></span><br><span class="line">  <span class="attr">fontColor:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">&quot;rgba(0, 0, 0, 0.8)&quot;</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">&quot;rgba(255, 255, 255, 0.8)&quot;</span></span><br><span class="line">  <span class="comment"># General border color for the chart</span></span><br><span class="line">  <span class="attr">borderColor:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">&quot;rgba(0, 0, 0, 0.1)&quot;</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">&quot;rgba(255, 255, 255, 0.2)&quot;</span></span><br><span class="line">  <span class="comment"># Background color for scale labels on radar and polar area charts</span></span><br><span class="line">  <span class="attr">scale_ticks_backdropColor:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">&quot;transparent&quot;</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">&quot;transparent&quot;</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>enable</td><td>Whether to enable chartjs</td></tr><tr><td>fontColor</td><td>Font color of the chart</td></tr><tr><td>borderColor</td><td>Border color of the chart</td></tr><tr><td>scale_ticks_backdropColor</td><td>Background color of the scale labels for radar and polar area charts</td></tr></tbody></table><p>Usage:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;% chartjs [width, abreast, chartId] %&#125;</span><br><span class="line">&lt;!-- chart --&gt;</span><br><span class="line">&lt;!-- endchart --&gt;</span><br><span class="line">&lt;!-- desc --&gt;</span><br><span class="line">&lt;!-- enddesc --&gt;</span><br><span class="line">&#123;% endchartjs %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>width</td><td>[Optional] Chart width</td></tr><tr><td>abreast</td><td>[Optional] Whether to display side by side. When you write <code><!-- desc --></code>, the chart and description will be displayed side by side.<br> When abreast is true, the width value needs to be configured</td></tr><tr><td>chartId</td><td>[Optional] Chart ID</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Sample</p></div><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></pre></td><td class="code"><pre><span class="line">&#123;% chartjs 70 %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- chart --&gt;</span><br><span class="line">&#123;</span><br><span class="line">    &quot;type&quot;: &quot;line&quot;,</span><br><span class="line">    &quot;data&quot;: &#123;</span><br><span class="line">        &quot;labels&quot;: [&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;],</span><br><span class="line">        &quot;datasets&quot;: [&#123;</span><br><span class="line">            &quot;label&quot;: &quot;My First dataset&quot;,</span><br><span class="line">            &quot;backgroundColor&quot;: &quot;rgb(255, 99, 132)&quot;,</span><br><span class="line">            &quot;borderColor&quot;: &quot;rgb(255, 99, 132)&quot;,</span><br><span class="line">            &quot;data&quot;: [0, 10, 5, 2, 20, 30, 45]</span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;options&quot;: &#123;</span><br><span class="line">        &quot;responsive&quot;: true,</span><br><span class="line">        &quot;title&quot;: &#123;</span><br><span class="line">            &quot;display&quot;: true,</span><br><span class="line">            &quot;text&quot;: &quot;Chart.js Line Chart&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;!-- endchart --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endchartjs %&#125;</span><br></pre></td></tr></table></figure><div class="chartjs-container" data-chartjs-id="" data-width="70%">            <pre class="chartjs-src" hidden>{    &quot;type&quot;: &quot;line&quot;,    &quot;data&quot;: {        &quot;labels&quot;: [&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;],        &quot;datasets&quot;: [{            &quot;label&quot;: &quot;My First dataset&quot;,            &quot;backgroundColor&quot;: &quot;rgb(255, 99, 132)&quot;,            &quot;borderColor&quot;: &quot;rgb(255, 99, 132)&quot;,            &quot;data&quot;: [0, 10, 5, 2, 20, 30, 45]        }]    },    &quot;options&quot;: {        &quot;responsive&quot;: true,        &quot;title&quot;: {            &quot;display&quot;: true,            &quot;text&quot;: &quot;Chart.js Line Chart&quot;        }    }}</pre>                      </div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">&#123;% chartjs %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- chart --&gt;</span><br><span class="line">&#123;</span><br><span class="line">  &quot;type&quot;: &quot;radar&quot;,</span><br><span class="line">  &quot;data&quot;: &#123;</span><br><span class="line"><span class="code">    &quot;labels&quot;: [</span></span><br><span class="line"><span class="code">      &quot;Eating&quot;,</span></span><br><span class="line"><span class="code">      &quot;Drinking&quot;,</span></span><br><span class="line"><span class="code">      &quot;Sleeping&quot;,</span></span><br><span class="line"><span class="code">      &quot;Designing&quot;,</span></span><br><span class="line"><span class="code">      &quot;Coding&quot;,</span></span><br><span class="line"><span class="code">      &quot;Cycling&quot;,</span></span><br><span class="line"><span class="code">      &quot;Running&quot;</span></span><br><span class="line"><span class="code">    ],</span></span><br><span class="line"><span class="code">    &quot;datasets&quot;: [</span></span><br><span class="line"><span class="code">      &#123;</span></span><br><span class="line"><span class="code">        &quot;label&quot;: &quot;My First Dataset&quot;,</span></span><br><span class="line"><span class="code">        &quot;data&quot;: [65, 59, 90, 81, 56, 55, 40],</span></span><br><span class="line"><span class="code">        &quot;fill&quot;: true,</span></span><br><span class="line"><span class="code">        &quot;backgroundColor&quot;: &quot;rgba(255, 99, 132, 0.2)&quot;,</span></span><br><span class="line"><span class="code">        &quot;borderColor&quot;: &quot;rgb(255, 99, 132)&quot;,</span></span><br><span class="line"><span class="code">        &quot;pointBackgroundColor&quot;: &quot;rgb(255, 99, 132)&quot;,</span></span><br><span class="line"><span class="code">        &quot;pointBorderColor&quot;: &quot;#fff&quot;,</span></span><br><span class="line"><span class="code">        &quot;pointHoverBackgroundColor&quot;: &quot;#fff&quot;,</span></span><br><span class="line"><span class="code">        &quot;pointHoverBorderColor&quot;: &quot;rgb(255, 99, 132)&quot;</span></span><br><span class="line"><span class="code">      &#125;,</span></span><br><span class="line"><span class="code">      &#123;</span></span><br><span class="line"><span class="code">        &quot;label&quot;: &quot;My Second Dataset&quot;,</span></span><br><span class="line"><span class="code">        &quot;data&quot;: [28, 48, 40, 19, 96, 27, 100],</span></span><br><span class="line"><span class="code">        &quot;fill&quot;: true,</span></span><br><span class="line"><span class="code">        &quot;backgroundColor&quot;: &quot;rgba(54, 162, 235, 0.2)&quot;,</span></span><br><span class="line"><span class="code">        &quot;borderColor&quot;: &quot;rgb(54, 162, 235)&quot;,</span></span><br><span class="line"><span class="code">        &quot;pointBackgroundColor&quot;: &quot;rgb(54, 162, 235)&quot;,</span></span><br><span class="line"><span class="code">        &quot;pointBorderColor&quot;: &quot;#fff&quot;,</span></span><br><span class="line"><span class="code">        &quot;pointHoverBackgroundColor&quot;: &quot;#fff&quot;,</span></span><br><span class="line"><span class="code">        &quot;pointHoverBorderColor&quot;: &quot;rgb(54, 162, 235)&quot;</span></span><br><span class="line"><span class="code">      &#125;</span></span><br><span class="line"><span class="code">    ]</span></span><br><span class="line"><span class="code">  &#125;,</span></span><br><span class="line"><span class="code">  &quot;options&quot;: &#123;</span></span><br><span class="line"><span class="code">    &quot;elements&quot;: &#123;</span></span><br><span class="line"><span class="code">      &quot;line&quot;: &#123;</span></span><br><span class="line"><span class="code">        &quot;borderWidth&quot;: 3</span></span><br><span class="line"><span class="code">      &#125;</span></span><br><span class="line"><span class="code">    &#125;</span></span><br><span class="line"><span class="code">  &#125;</span></span><br><span class="line"><span class="code">&#125;</span></span><br><span class="line"><span class="code">&lt;!-- endchart --&gt;</span></span><br><span class="line"><span class="code">&#123;% endchartjs %&#125;</span></span><br></pre></td></tr></table></figure><div class="chartjs-container" data-chartjs-id="" >            <pre class="chartjs-src" hidden>{  &quot;type&quot;: &quot;radar&quot;,  &quot;data&quot;: {    &quot;labels&quot;: [      &quot;Eating&quot;,      &quot;Drinking&quot;,      &quot;Sleeping&quot;,      &quot;Designing&quot;,      &quot;Coding&quot;,      &quot;Cycling&quot;,      &quot;Running&quot;    ],    &quot;datasets&quot;: [      {        &quot;label&quot;: &quot;My First Dataset&quot;,        &quot;data&quot;: [65, 59, 90, 81, 56, 55, 40],        &quot;fill&quot;: true,        &quot;backgroundColor&quot;: &quot;rgba(255, 99, 132, 0.2)&quot;,        &quot;borderColor&quot;: &quot;rgb(255, 99, 132)&quot;,        &quot;pointBackgroundColor&quot;: &quot;rgb(255, 99, 132)&quot;,        &quot;pointBorderColor&quot;: &quot;#fff&quot;,        &quot;pointHoverBackgroundColor&quot;: &quot;#fff&quot;,        &quot;pointHoverBorderColor&quot;: &quot;rgb(255, 99, 132)&quot;      },      {        &quot;label&quot;: &quot;My Second Dataset&quot;,        &quot;data&quot;: [28, 48, 40, 19, 96, 27, 100],        &quot;fill&quot;: true,        &quot;backgroundColor&quot;: &quot;rgba(54, 162, 235, 0.2)&quot;,        &quot;borderColor&quot;: &quot;rgb(54, 162, 235)&quot;,        &quot;pointBackgroundColor&quot;: &quot;rgb(54, 162, 235)&quot;,        &quot;pointBorderColor&quot;: &quot;#fff&quot;,        &quot;pointHoverBackgroundColor&quot;: &quot;#fff&quot;,        &quot;pointHoverBorderColor&quot;: &quot;rgb(54, 162, 235)&quot;      }    ]  },  &quot;options&quot;: {    &quot;elements&quot;: {      &quot;line&quot;: {        &quot;borderWidth&quot;: 3      }    }  }}</pre>                      </div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line">&#123;% chartjs 40,true %&#125;</span><br><span class="line">&lt;!-- chart --&gt;</span><br><span class="line">&#123;</span><br><span class="line"><span class="code">    &quot;type&quot;: &quot;pie&quot;,</span></span><br><span class="line"><span class="code">    &quot;data&quot;: &#123;</span></span><br><span class="line"><span class="code">        &quot;labels&quot;: [</span></span><br><span class="line"><span class="code">            &quot;Programming&quot;,</span></span><br><span class="line"><span class="code">            &quot;Music&quot;,</span></span><br><span class="line"><span class="code">            &quot;Reading&quot;,</span></span><br><span class="line"><span class="code">            &quot;Gaming&quot;,</span></span><br><span class="line"><span class="code">            &quot;Fitness&quot;,</span></span><br><span class="line"><span class="code">            &quot;Travel&quot;</span></span><br><span class="line"><span class="code">        ],</span></span><br><span class="line"><span class="code">        &quot;datasets&quot;: [</span></span><br><span class="line"><span class="code">            &#123;</span></span><br><span class="line"><span class="code">                &quot;label&quot;: &quot;Favorite Index&quot;,</span></span><br><span class="line"><span class="code">                &quot;data&quot;: [</span></span><br><span class="line"><span class="code">                    30,</span></span><br><span class="line"><span class="code">                    24,</span></span><br><span class="line"><span class="code">                    19,</span></span><br><span class="line"><span class="code">                    14,</span></span><br><span class="line"><span class="code">                    9,</span></span><br><span class="line"><span class="code">                    4</span></span><br><span class="line"><span class="code">                ],</span></span><br><span class="line"><span class="code">                &quot;backgroundColor&quot;: &#123;</span></span><br><span class="line"><span class="code">                    &quot;dark-mode&quot;: [</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 99, 132, 0.5)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(54, 162, 235, 0.5)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 206, 86, 0.5)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(75, 192, 192, 0.5)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(153, 102, 255, 0.5)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 159, 64, 0.5)&quot;</span></span><br><span class="line"><span class="code">                    ],</span></span><br><span class="line"><span class="code">                    &quot;light-mode&quot;: [</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 99, 132, 0.2)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(54, 162, 235, 0.2)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 206, 86, 0.2)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(75, 192, 192, 0.2)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(153, 102, 255, 0.2)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 159, 64, 0.2)&quot;</span></span><br><span class="line"><span class="code">                    ]</span></span><br><span class="line"><span class="code">                &#125;,</span></span><br><span class="line"><span class="code">                &quot;borderColor&quot;: &#123;</span></span><br><span class="line"><span class="code">                    &quot;dark-mode&quot;: [</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 99, 132, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(54, 162, 235, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 206, 86, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(75, 192, 192, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(153, 102, 255, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 159, 64, 1)&quot;</span></span><br><span class="line"><span class="code">                    ],</span></span><br><span class="line"><span class="code">                    &quot;light-mode&quot;: [</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 99, 132, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(54, 162, 235, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 206, 86, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(75, 192, 192, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(153, 102, 255, 1)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;rgba(255, 159, 64, 1)&quot;</span></span><br><span class="line"><span class="code">                    ]</span></span><br><span class="line"><span class="code">                &#125;</span></span><br><span class="line"><span class="code">            &#125;</span></span><br><span class="line"><span class="code">        ]</span></span><br><span class="line"><span class="code">    &#125;,</span></span><br><span class="line"><span class="code">    &quot;options&quot;: &#123;</span></span><br><span class="line"><span class="code">        &quot;plugins&quot;: &#123;</span></span><br><span class="line"><span class="code">            &quot;legend&quot;: &#123;</span></span><br><span class="line"><span class="code">                &quot;labels&quot;: &#123;</span></span><br><span class="line"><span class="code">                    &quot;color&quot;: &#123;</span></span><br><span class="line"><span class="code">                        &quot;dark-mode&quot;: &quot;rgba(255, 255, 255, 0.8)&quot;,</span></span><br><span class="line"><span class="code">                        &quot;light-mode&quot;: &quot;rgba(0, 0, 0, 0.8)&quot;</span></span><br><span class="line"><span class="code">                    &#125;</span></span><br><span class="line"><span class="code">                &#125;</span></span><br><span class="line"><span class="code">            &#125;</span></span><br><span class="line"><span class="code">        &#125;</span></span><br><span class="line"><span class="code">    &#125;</span></span><br><span class="line"><span class="code">&#125;</span></span><br><span class="line"><span class="code">&lt;!-- endchart --&gt;</span></span><br><span class="line"><span class="code">&lt;!-- desc --&gt;</span></span><br><span class="line"><span class="code">除了**计算机编程**外，我想不出还有其他让我感兴趣的工作。</span></span><br><span class="line"><span class="code">我可以无中生有地创造出**精美的范式**和**结构**，</span></span><br><span class="line"><span class="code">在此过程中也解决了无数的小谜团。</span></span><br><span class="line"><span class="code">&lt;span style=&quot;font-size:0.8em;color: var(--sep-secondtext);&quot;&gt;I can&#x27;t think of any other job other than **computer programming** that interests me.</span></span><br><span class="line"><span class="code">I can create **beautiful paradigms** and **structures** out of nothing,</span></span><br><span class="line"><span class="code">Countless small mysteries are also solved in the process.&lt;/span&gt;</span></span><br><span class="line"><span class="code">&lt;!-- enddesc --&gt;</span></span><br><span class="line"><span class="code">&#123;% endchartjs %&#125;</span></span><br></pre></td></tr></table></figure><div class="chartjs-container chartjs-abreast" data-chartjs-id="" data-width="40%">            <pre class="chartjs-src" hidden>{    &quot;type&quot;: &quot;pie&quot;,    &quot;data&quot;: {        &quot;labels&quot;: [            &quot;Programming&quot;,            &quot;Music&quot;,            &quot;Reading&quot;,            &quot;Gaming&quot;,            &quot;Fitness&quot;,            &quot;Travel&quot;        ],        &quot;datasets&quot;: [            {                &quot;label&quot;: &quot;Favorite Index&quot;,                &quot;data&quot;: [                    30,                    24,                    19,                    14,                    9,                    4                ],                &quot;backgroundColor&quot;: {                    &quot;dark-mode&quot;: [                        &quot;rgba(255, 99, 132, 0.5)&quot;,                        &quot;rgba(54, 162, 235, 0.5)&quot;,                        &quot;rgba(255, 206, 86, 0.5)&quot;,                        &quot;rgba(75, 192, 192, 0.5)&quot;,                        &quot;rgba(153, 102, 255, 0.5)&quot;,                        &quot;rgba(255, 159, 64, 0.5)&quot;                    ],                    &quot;light-mode&quot;: [                        &quot;rgba(255, 99, 132, 0.2)&quot;,                        &quot;rgba(54, 162, 235, 0.2)&quot;,                        &quot;rgba(255, 206, 86, 0.2)&quot;,                        &quot;rgba(75, 192, 192, 0.2)&quot;,                        &quot;rgba(153, 102, 255, 0.2)&quot;,                        &quot;rgba(255, 159, 64, 0.2)&quot;                    ]                },                &quot;borderColor&quot;: {                    &quot;dark-mode&quot;: [                        &quot;rgba(255, 99, 132, 1)&quot;,                        &quot;rgba(54, 162, 235, 1)&quot;,                        &quot;rgba(255, 206, 86, 1)&quot;,                        &quot;rgba(75, 192, 192, 1)&quot;,                        &quot;rgba(153, 102, 255, 1)&quot;,                        &quot;rgba(255, 159, 64, 1)&quot;                    ],                    &quot;light-mode&quot;: [                        &quot;rgba(255, 99, 132, 1)&quot;,                        &quot;rgba(54, 162, 235, 1)&quot;,                        &quot;rgba(255, 206, 86, 1)&quot;,                        &quot;rgba(75, 192, 192, 1)&quot;,                        &quot;rgba(153, 102, 255, 1)&quot;,                        &quot;rgba(255, 159, 64, 1)&quot;                    ]                }            }        ]    },    &quot;options&quot;: {        &quot;plugins&quot;: {            &quot;legend&quot;: {                &quot;labels&quot;: {                    &quot;color&quot;: {                        &quot;dark-mode&quot;: &quot;rgba(255, 255, 255, 0.8)&quot;,                        &quot;light-mode&quot;: &quot;rgba(0, 0, 0, 0.8)&quot;                    }                }            }        }    }}</pre>            <div class="chartjs-desc"><p>除了<strong>计算机编程</strong>外，我想不出还有其他让我感兴趣的工作。<br>我可以无中生有地创造出<strong>精美的范式</strong>和<strong>结构</strong>，<br>在此过程中也解决了无数的小谜团。<br><span style="font-size:0.8em;color: var(--sep-secondtext);">I can&#39;t think of any other job other than <strong>computer programming</strong> that interests me.<br>I can create <strong>beautiful paradigms</strong> and <strong>structures</strong> out of nothing,<br>Countless small mysteries are also solved in the process.</span></p></div>          </div><a class="btn-beautify block green right larger" href="/en/posts/butterfly-docs-en-theme-question/" title="❓ Butterfly document - Q&A"><i class="far fa-hand-point-right"></i><span>❓ Butterfly document - Q&A</span></a>]]></content>
    
    
      
      
    <summary type="html">&lt;div class=&quot;note orange icon-padding flat&quot;&gt;&lt;i class=&quot;note-icon fas fa-language&quot;&gt;&lt;/i&gt;&lt;p&gt;This article is translated from ChatGPT.&lt;/p&gt;
&lt;/div&gt;

</summary>
      
    
    
    
    <category term="Docs" scheme="https://butterfly.js.org/en/categories/Docs/"/>
    
    <category term="EN" scheme="https://butterfly.js.org/en/categories/Docs/EN/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly document - Theme Configuration</title>
    <link href="https://butterfly.js.org/en/posts/butterfly-docs-en-theme-config/"/>
    <id>https://butterfly.js.org/en/posts/butterfly-docs-en-theme-config/</id>
    <published>2023-06-30T07:26:47.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<div class="note orange icon-padding flat"><i class="note-icon fas fa-language"></i><p>This article is translated from ChatGPT.</p></div><div class="note green icon-padding flat"><i class="note-icon fas fa-rocket"></i><p> 📚  Table of Contents</p><p><a href="/en/posts/butterfly-docs-en-get-started/" title="Butterfly document - Get Started">🚀 Get Started</a> - <a href="/en/posts/butterfly-docs-en-theme-pages/" title="Butterfly document - Theme Pages">📑 Theme Pages</a> - <a href="/en/posts/butterfly-docs-en-theme-config/" title="Butterfly document - Theme Configuration">📌 Theme Configuration</a> - <a href="/en/posts/butterfly-docs-en-tag-plugins/" title="Butterfly document - Tag Plugins">⚔️ Tag Plugins</a> - <a href="/en/posts/butterfly-docs-en-theme-question/" title="Butterfly document - Q&amp;A">❓ Q&amp;A</a> - <a href="/en/posts/butterfly-docs-en-advanced-tutorial/" title="Butterfly document - Advanced Tutorial">⚡️ Advanced Tutorials</a></p></div><hr><h2 id="Quick-Read-of-Configuration-Files"><a href="#Quick-Read-of-Configuration-Files" class="headerlink" title="Quick Read of Configuration Files"></a>Quick Read of Configuration Files</h2><p>You can quickly understand all the configuration comments, making your configuration files more convenient. If you encounter any unclear configurations, you can find more detailed information in this article.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br><span class="line">494</span><br><span class="line">495</span><br><span class="line">496</span><br><span class="line">497</span><br><span class="line">498</span><br><span class="line">499</span><br><span class="line">500</span><br><span class="line">501</span><br><span class="line">502</span><br><span class="line">503</span><br><span class="line">504</span><br><span class="line">505</span><br><span class="line">506</span><br><span class="line">507</span><br><span class="line">508</span><br><span class="line">509</span><br><span class="line">510</span><br><span class="line">511</span><br><span class="line">512</span><br><span class="line">513</span><br><span class="line">514</span><br><span class="line">515</span><br><span class="line">516</span><br><span class="line">517</span><br><span class="line">518</span><br><span class="line">519</span><br><span class="line">520</span><br><span class="line">521</span><br><span class="line">522</span><br><span class="line">523</span><br><span class="line">524</span><br><span class="line">525</span><br><span class="line">526</span><br><span class="line">527</span><br><span class="line">528</span><br><span class="line">529</span><br><span class="line">530</span><br><span class="line">531</span><br><span class="line">532</span><br><span class="line">533</span><br><span class="line">534</span><br><span class="line">535</span><br><span class="line">536</span><br><span class="line">537</span><br><span class="line">538</span><br><span class="line">539</span><br><span class="line">540</span><br><span class="line">541</span><br><span class="line">542</span><br><span class="line">543</span><br><span class="line">544</span><br><span class="line">545</span><br><span class="line">546</span><br><span class="line">547</span><br><span class="line">548</span><br><span class="line">549</span><br><span class="line">550</span><br><span class="line">551</span><br><span class="line">552</span><br><span class="line">553</span><br><span class="line">554</span><br><span class="line">555</span><br><span class="line">556</span><br><span class="line">557</span><br><span class="line">558</span><br><span class="line">559</span><br><span class="line">560</span><br><span class="line">561</span><br><span class="line">562</span><br><span class="line">563</span><br><span class="line">564</span><br><span class="line">565</span><br><span class="line">566</span><br><span class="line">567</span><br><span class="line">568</span><br><span class="line">569</span><br><span class="line">570</span><br><span class="line">571</span><br><span class="line">572</span><br><span class="line">573</span><br><span class="line">574</span><br><span class="line">575</span><br><span class="line">576</span><br><span class="line">577</span><br><span class="line">578</span><br><span class="line">579</span><br><span class="line">580</span><br><span class="line">581</span><br><span class="line">582</span><br><span class="line">583</span><br><span class="line">584</span><br><span class="line">585</span><br><span class="line">586</span><br><span class="line">587</span><br><span class="line">588</span><br><span class="line">589</span><br><span class="line">590</span><br><span class="line">591</span><br><span class="line">592</span><br><span class="line">593</span><br><span class="line">594</span><br><span class="line">595</span><br><span class="line">596</span><br><span class="line">597</span><br><span class="line">598</span><br><span class="line">599</span><br><span class="line">600</span><br><span class="line">601</span><br><span class="line">602</span><br><span class="line">603</span><br><span class="line">604</span><br><span class="line">605</span><br><span class="line">606</span><br><span class="line">607</span><br><span class="line">608</span><br><span class="line">609</span><br><span class="line">610</span><br><span class="line">611</span><br><span class="line">612</span><br><span class="line">613</span><br><span class="line">614</span><br><span class="line">615</span><br><span class="line">616</span><br><span class="line">617</span><br><span class="line">618</span><br><span class="line">619</span><br><span class="line">620</span><br><span class="line">621</span><br><span class="line">622</span><br><span class="line">623</span><br><span class="line">624</span><br><span class="line">625</span><br><span class="line">626</span><br><span class="line">627</span><br><span class="line">628</span><br><span class="line">629</span><br><span class="line">630</span><br><span class="line">631</span><br><span class="line">632</span><br><span class="line">633</span><br><span class="line">634</span><br><span class="line">635</span><br><span class="line">636</span><br><span class="line">637</span><br><span class="line">638</span><br><span class="line">639</span><br><span class="line">640</span><br><span class="line">641</span><br><span class="line">642</span><br><span class="line">643</span><br><span class="line">644</span><br><span class="line">645</span><br><span class="line">646</span><br><span class="line">647</span><br><span class="line">648</span><br><span class="line">649</span><br><span class="line">650</span><br><span class="line">651</span><br><span class="line">652</span><br><span class="line">653</span><br><span class="line">654</span><br><span class="line">655</span><br><span class="line">656</span><br><span class="line">657</span><br><span class="line">658</span><br><span class="line">659</span><br><span class="line">660</span><br><span class="line">661</span><br><span class="line">662</span><br><span class="line">663</span><br><span class="line">664</span><br><span class="line">665</span><br><span class="line">666</span><br><span class="line">667</span><br><span class="line">668</span><br><span class="line">669</span><br><span class="line">670</span><br><span class="line">671</span><br><span class="line">672</span><br><span class="line">673</span><br><span class="line">674</span><br><span class="line">675</span><br><span class="line">676</span><br><span class="line">677</span><br><span class="line">678</span><br><span class="line">679</span><br><span class="line">680</span><br><span class="line">681</span><br><span class="line">682</span><br><span class="line">683</span><br><span class="line">684</span><br><span class="line">685</span><br><span class="line">686</span><br><span class="line">687</span><br><span class="line">688</span><br><span class="line">689</span><br><span class="line">690</span><br><span class="line">691</span><br><span class="line">692</span><br><span class="line">693</span><br><span class="line">694</span><br><span class="line">695</span><br><span class="line">696</span><br><span class="line">697</span><br><span class="line">698</span><br><span class="line">699</span><br><span class="line">700</span><br><span class="line">701</span><br><span class="line">702</span><br><span class="line">703</span><br><span class="line">704</span><br><span class="line">705</span><br><span class="line">706</span><br><span class="line">707</span><br><span class="line">708</span><br><span class="line">709</span><br><span class="line">710</span><br><span class="line">711</span><br><span class="line">712</span><br><span class="line">713</span><br><span class="line">714</span><br><span class="line">715</span><br><span class="line">716</span><br><span class="line">717</span><br><span class="line">718</span><br><span class="line">719</span><br><span class="line">720</span><br><span class="line">721</span><br><span class="line">722</span><br><span class="line">723</span><br><span class="line">724</span><br><span class="line">725</span><br><span class="line">726</span><br><span class="line">727</span><br><span class="line">728</span><br><span class="line">729</span><br><span class="line">730</span><br><span class="line">731</span><br><span class="line">732</span><br><span class="line">733</span><br><span class="line">734</span><br><span class="line">735</span><br><span class="line">736</span><br><span class="line">737</span><br><span class="line">738</span><br><span class="line">739</span><br><span class="line">740</span><br><span class="line">741</span><br><span class="line">742</span><br><span class="line">743</span><br><span class="line">744</span><br><span class="line">745</span><br><span class="line">746</span><br><span class="line">747</span><br><span class="line">748</span><br><span class="line">749</span><br><span class="line">750</span><br><span class="line">751</span><br><span class="line">752</span><br><span class="line">753</span><br><span class="line">754</span><br><span class="line">755</span><br><span class="line">756</span><br><span class="line">757</span><br><span class="line">758</span><br><span class="line">759</span><br><span class="line">760</span><br><span class="line">761</span><br><span class="line">762</span><br><span class="line">763</span><br><span class="line">764</span><br><span class="line">765</span><br><span class="line">766</span><br><span class="line">767</span><br><span class="line">768</span><br><span class="line">769</span><br><span class="line">770</span><br><span class="line">771</span><br><span class="line">772</span><br><span class="line">773</span><br><span class="line">774</span><br><span class="line">775</span><br><span class="line">776</span><br><span class="line">777</span><br><span class="line">778</span><br><span class="line">779</span><br><span class="line">780</span><br><span class="line">781</span><br><span class="line">782</span><br><span class="line">783</span><br><span class="line">784</span><br><span class="line">785</span><br><span class="line">786</span><br><span class="line">787</span><br><span class="line">788</span><br><span class="line">789</span><br><span class="line">790</span><br><span class="line">791</span><br><span class="line">792</span><br><span class="line">793</span><br><span class="line">794</span><br><span class="line">795</span><br><span class="line">796</span><br><span class="line">797</span><br><span class="line">798</span><br><span class="line">799</span><br><span class="line">800</span><br><span class="line">801</span><br><span class="line">802</span><br><span class="line">803</span><br><span class="line">804</span><br><span class="line">805</span><br><span class="line">806</span><br><span class="line">807</span><br><span class="line">808</span><br><span class="line">809</span><br><span class="line">810</span><br><span class="line">811</span><br><span class="line">812</span><br><span class="line">813</span><br><span class="line">814</span><br><span class="line">815</span><br><span class="line">816</span><br><span class="line">817</span><br><span class="line">818</span><br><span class="line">819</span><br><span class="line">820</span><br><span class="line">821</span><br><span class="line">822</span><br><span class="line">823</span><br><span class="line">824</span><br><span class="line">825</span><br><span class="line">826</span><br><span class="line">827</span><br><span class="line">828</span><br><span class="line">829</span><br><span class="line">830</span><br><span class="line">831</span><br><span class="line">832</span><br><span class="line">833</span><br><span class="line">834</span><br><span class="line">835</span><br><span class="line">836</span><br><span class="line">837</span><br><span class="line">838</span><br><span class="line">839</span><br><span class="line">840</span><br><span class="line">841</span><br><span class="line">842</span><br><span class="line">843</span><br><span class="line">844</span><br><span class="line">845</span><br><span class="line">846</span><br><span class="line">847</span><br><span class="line">848</span><br><span class="line">849</span><br><span class="line">850</span><br><span class="line">851</span><br><span class="line">852</span><br><span class="line">853</span><br><span class="line">854</span><br><span class="line">855</span><br><span class="line">856</span><br><span class="line">857</span><br><span class="line">858</span><br><span class="line">859</span><br><span class="line">860</span><br><span class="line">861</span><br><span class="line">862</span><br><span class="line">863</span><br><span class="line">864</span><br><span class="line">865</span><br><span class="line">866</span><br><span class="line">867</span><br><span class="line">868</span><br><span class="line">869</span><br><span class="line">870</span><br><span class="line">871</span><br><span class="line">872</span><br><span class="line">873</span><br><span class="line">874</span><br><span class="line">875</span><br><span class="line">876</span><br><span class="line">877</span><br><span class="line">878</span><br><span class="line">879</span><br><span class="line">880</span><br><span class="line">881</span><br><span class="line">882</span><br><span class="line">883</span><br><span class="line">884</span><br><span class="line">885</span><br><span class="line">886</span><br><span class="line">887</span><br><span class="line">888</span><br><span class="line">889</span><br><span class="line">890</span><br><span class="line">891</span><br><span class="line">892</span><br><span class="line">893</span><br><span class="line">894</span><br><span class="line">895</span><br><span class="line">896</span><br><span class="line">897</span><br><span class="line">898</span><br><span class="line">899</span><br><span class="line">900</span><br><span class="line">901</span><br><span class="line">902</span><br><span class="line">903</span><br><span class="line">904</span><br><span class="line">905</span><br><span class="line">906</span><br><span class="line">907</span><br><span class="line">908</span><br><span class="line">909</span><br><span class="line">910</span><br><span class="line">911</span><br><span class="line">912</span><br><span class="line">913</span><br><span class="line">914</span><br><span class="line">915</span><br><span class="line">916</span><br><span class="line">917</span><br><span class="line">918</span><br><span class="line">919</span><br><span class="line">920</span><br><span class="line">921</span><br><span class="line">922</span><br><span class="line">923</span><br><span class="line">924</span><br><span class="line">925</span><br><span class="line">926</span><br><span class="line">927</span><br><span class="line">928</span><br><span class="line">929</span><br><span class="line">930</span><br><span class="line">931</span><br><span class="line">932</span><br><span class="line">933</span><br><span class="line">934</span><br><span class="line">935</span><br><span class="line">936</span><br><span class="line">937</span><br><span class="line">938</span><br><span class="line">939</span><br><span class="line">940</span><br><span class="line">941</span><br><span class="line">942</span><br><span class="line">943</span><br><span class="line">944</span><br><span class="line">945</span><br><span class="line">946</span><br><span class="line">947</span><br><span class="line">948</span><br><span class="line">949</span><br><span class="line">950</span><br><span class="line">951</span><br><span class="line">952</span><br><span class="line">953</span><br><span class="line">954</span><br><span class="line">955</span><br><span class="line">956</span><br><span class="line">957</span><br><span class="line">958</span><br><span class="line">959</span><br><span class="line">960</span><br><span class="line">961</span><br><span class="line">962</span><br><span class="line">963</span><br><span class="line">964</span><br><span class="line">965</span><br><span class="line">966</span><br><span class="line">967</span><br><span class="line">968</span><br><span class="line">969</span><br><span class="line">970</span><br><span class="line">971</span><br><span class="line">972</span><br><span class="line">973</span><br><span class="line">974</span><br><span class="line">975</span><br><span class="line">976</span><br><span class="line">977</span><br><span class="line">978</span><br><span class="line">979</span><br><span class="line">980</span><br><span class="line">981</span><br><span class="line">982</span><br><span class="line">983</span><br><span class="line">984</span><br><span class="line">985</span><br><span class="line">986</span><br><span class="line">987</span><br><span class="line">988</span><br><span class="line">989</span><br><span class="line">990</span><br><span class="line">991</span><br><span class="line">992</span><br><span class="line">993</span><br><span class="line">994</span><br><span class="line">995</span><br><span class="line">996</span><br><span class="line">997</span><br><span class="line">998</span><br><span class="line">999</span><br><span class="line">1000</span><br><span class="line">1001</span><br><span class="line">1002</span><br><span class="line">1003</span><br><span class="line">1004</span><br><span class="line">1005</span><br><span class="line">1006</span><br><span class="line">1007</span><br><span class="line">1008</span><br><span class="line">1009</span><br><span class="line">1010</span><br><span class="line">1011</span><br><span class="line">1012</span><br><span class="line">1013</span><br><span class="line">1014</span><br><span class="line">1015</span><br><span class="line">1016</span><br><span class="line">1017</span><br><span class="line">1018</span><br><span class="line">1019</span><br><span class="line">1020</span><br><span class="line">1021</span><br><span class="line">1022</span><br><span class="line">1023</span><br><span class="line">1024</span><br><span class="line">1025</span><br><span class="line">1026</span><br><span class="line">1027</span><br><span class="line">1028</span><br><span class="line">1029</span><br><span class="line">1030</span><br><span class="line">1031</span><br><span class="line">1032</span><br><span class="line">1033</span><br><span class="line">1034</span><br><span class="line">1035</span><br><span class="line">1036</span><br><span class="line">1037</span><br><span class="line">1038</span><br><span class="line">1039</span><br><span class="line">1040</span><br><span class="line">1041</span><br><span class="line">1042</span><br><span class="line">1043</span><br><span class="line">1044</span><br><span class="line">1045</span><br><span class="line">1046</span><br><span class="line">1047</span><br><span class="line">1048</span><br><span class="line">1049</span><br><span class="line">1050</span><br><span class="line">1051</span><br><span class="line">1052</span><br><span class="line">1053</span><br><span class="line">1054</span><br><span class="line">1055</span><br><span class="line">1056</span><br><span class="line">1057</span><br><span class="line">1058</span><br><span class="line">1059</span><br><span class="line">1060</span><br><span class="line">1061</span><br><span class="line">1062</span><br><span class="line">1063</span><br><span class="line">1064</span><br><span class="line">1065</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Hexo Butterfly Theme Configuration</span></span><br><span class="line"><span class="comment"># If you have any questions, please refer to the documentation</span></span><br><span class="line"><span class="comment"># Chinese: https://butterfly.js.org/</span></span><br><span class="line"><span class="comment"># English: https://butterfly.js.org/en/</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Navigation Settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">nav:</span></span><br><span class="line">  <span class="comment"># Navigation bar logo image</span></span><br><span class="line">  <span class="attr">logo:</span></span><br><span class="line">  <span class="attr">display_title:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">display_post_title:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Whether to fix navigation bar</span></span><br><span class="line">  <span class="attr">fixed:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="attr">menu:</span></span><br><span class="line">  <span class="comment"># Home: / || fas fa-home</span></span><br><span class="line">  <span class="comment"># List||fas fa-list:</span></span><br><span class="line">  <span class="comment">#   Music: /music/ || fas fa-music</span></span><br><span class="line">  <span class="comment">#   Movie: /movies/ || fas fa-video</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Code Blocks Settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">code_blocks:</span></span><br><span class="line">  <span class="comment"># Code block theme: darker / pale night / light / ocean / false</span></span><br><span class="line">  <span class="attr">theme:</span> <span class="string">light</span></span><br><span class="line">  <span class="attr">macStyle:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Code block height limit (unit: px)</span></span><br><span class="line">  <span class="attr">height_limit:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">word_wrap:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Toolbar</span></span><br><span class="line">  <span class="attr">copy:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">language:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button</span></span><br><span class="line">  <span class="attr">shrink:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">fullpage:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Social media links</span></span><br><span class="line"><span class="comment"># Formal:</span></span><br><span class="line"><span class="comment">#   icon: link || the description || color</span></span><br><span class="line"><span class="attr">social:</span></span><br><span class="line">  <span class="comment"># fab fa-github: https://github.com/xxxxx || Github || &#x27;#24292e&#x27;</span></span><br><span class="line">  <span class="comment"># fas fa-envelope: mailto:xxxxxx@gmail.com || Email || &#x27;#4a7dbe&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Image Settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">favicon:</span> <span class="string">/img/favicon.png</span></span><br><span class="line"></span><br><span class="line"><span class="attr">avatar:</span></span><br><span class="line">  <span class="attr">img:</span> <span class="string">/img/butterfly-icon.png</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Disable all banner images</span></span><br><span class="line"><span class="attr">disable_top_img:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># If the banner of page not setting, it will show the default_top_img</span></span><br><span class="line"><span class="attr">default_top_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The banner image of index page</span></span><br><span class="line"><span class="attr">index_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The banner image of archive page</span></span><br><span class="line"><span class="attr">archive_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># <span class="doctag">Note:</span> tag page, not tags page</span></span><br><span class="line"><span class="attr">tag_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The banner image of tag page, you can set the banner image for each tag</span></span><br><span class="line"><span class="comment"># Format:</span></span><br><span class="line"><span class="comment">#  - tag name: xxxxx</span></span><br><span class="line"><span class="attr">tag_per_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># <span class="doctag">Note:</span> category page, not categories page</span></span><br><span class="line"><span class="attr">category_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The banner image of category page, you can set the banner image for each category</span></span><br><span class="line"><span class="comment"># Format:</span></span><br><span class="line"><span class="comment">#  - category name: xxxxx</span></span><br><span class="line"><span class="attr">category_per_img:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The background image of footer</span></span><br><span class="line"><span class="attr">footer_img:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Website Background</span></span><br><span class="line"><span class="comment"># Can set it to color or image url</span></span><br><span class="line"><span class="attr">background:</span></span><br><span class="line"></span><br><span class="line"><span class="attr">cover:</span></span><br><span class="line">  <span class="comment"># Disable the cover or not</span></span><br><span class="line">  <span class="attr">index_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">aside_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">archives_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># When cover is not set, the default cover is displayed</span></span><br><span class="line">  <span class="attr">default_cover:</span></span><br><span class="line">    <span class="comment"># - xxx.jpg</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Replace Broken Images</span></span><br><span class="line"><span class="attr">error_img:</span></span><br><span class="line">  <span class="attr">flink:</span> <span class="string">/img/friend_404.gif</span></span><br><span class="line">  <span class="attr">post_page:</span> <span class="string">/img/404.jpg</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># A simple 404 page</span></span><br><span class="line"><span class="attr">error_404:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">subtitle:</span> <span class="string">&#x27;Page Not Found&#x27;</span></span><br><span class="line">  <span class="attr">background:</span> <span class="string">/img/error-page.png</span></span><br><span class="line"></span><br><span class="line"><span class="attr">post_meta:</span></span><br><span class="line">  <span class="comment"># Home Page</span></span><br><span class="line">  <span class="attr">page:</span></span><br><span class="line">    <span class="comment"># Choose: created / updated / both</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">created</span></span><br><span class="line">    <span class="comment"># Choose: date / relative</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">post:</span></span><br><span class="line">    <span class="comment"># Choose: left / center</span></span><br><span class="line">    <span class="attr">position:</span> <span class="string">left</span></span><br><span class="line">    <span class="comment"># Choose: created / updated / both</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">both</span></span><br><span class="line">    <span class="comment"># Choose: date / relative</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Index page settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The top_img settings of home page</span></span><br><span class="line"><span class="comment"># default: top img - full screen, site info - middle</span></span><br><span class="line"><span class="comment"># The position of site info, eg: 300px/300em/300rem/10%</span></span><br><span class="line"><span class="attr">index_site_info_top:</span></span><br><span class="line"><span class="comment"># The height of top_img, eg: 300px/300em/300rem</span></span><br><span class="line"><span class="attr">index_top_img_height:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The subtitle on homepage</span></span><br><span class="line"><span class="attr">subtitle:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Typewriter Effect</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Customize typed.js</span></span><br><span class="line">  <span class="comment"># https://github.com/mattboldt/typed.js/#customization</span></span><br><span class="line">  <span class="attr">typed_option:</span></span><br><span class="line">  <span class="comment"># Source - Call the third-party service API (Chinese only)</span></span><br><span class="line">  <span class="comment"># It will show the source first, then show the content of sub</span></span><br><span class="line">  <span class="comment"># Choose: false/1/2/3</span></span><br><span class="line">  <span class="comment"># false - disable the function</span></span><br><span class="line">  <span class="comment"># 1 - hitokoto.cn</span></span><br><span class="line">  <span class="comment"># 2 - yijuzhan.com</span></span><br><span class="line">  <span class="comment"># 3 - jinrishici.com</span></span><br><span class="line">  <span class="attr">source:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># If you close the typewriter effect, the subtitle will only show the first line of sub</span></span><br><span class="line">  <span class="attr">sub:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Article layout on the homepage</span></span><br><span class="line"><span class="comment"># 1: Cover on the left, info on the right</span></span><br><span class="line"><span class="comment"># 2: Cover on the right, info on the left</span></span><br><span class="line"><span class="comment"># 3: Cover and info alternate between left and right</span></span><br><span class="line"><span class="comment"># 4: Cover on top, info on the bottom</span></span><br><span class="line"><span class="comment"># 5: Info displayed on the cover</span></span><br><span class="line"><span class="comment"># 6: Masonry layout - Cover on top, info on the bottom</span></span><br><span class="line"><span class="comment"># 7: Masonry layout - Info displayed on the cover</span></span><br><span class="line"><span class="attr">index_layout:</span> <span class="number">3</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Display the article introduction on homepage</span></span><br><span class="line"><span class="comment"># 1: description</span></span><br><span class="line"><span class="comment"># 2: both (if the description exists, it will show description, or show the auto_excerpt)</span></span><br><span class="line"><span class="comment"># 3: auto_excerpt (default)</span></span><br><span class="line"><span class="comment"># false: do not show the article introduction</span></span><br><span class="line"><span class="attr">index_post_content:</span></span><br><span class="line">  <span class="attr">method:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># If you set method to 2 or 3, the length need to config</span></span><br><span class="line">  <span class="attr">length:</span> <span class="number">500</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Post Settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">toc:</span></span><br><span class="line">  <span class="attr">post:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">page:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">expand:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Only for post</span></span><br><span class="line">  <span class="attr">style_simple:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">scroll_percent:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="attr">post_copyright:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">decode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">author_href:</span></span><br><span class="line">  <span class="attr">license:</span> <span class="string">CC</span> <span class="string">BY-NC-SA</span> <span class="number">4.0</span></span><br><span class="line">  <span class="attr">license_url:</span> <span class="string">https://creativecommons.org/licenses/by-nc-sa/4.0/</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Sponsor/reward</span></span><br><span class="line"><span class="attr">reward:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">  <span class="attr">QR_code:</span></span><br><span class="line">    <span class="comment"># - img: /img/wechat.jpg</span></span><br><span class="line">    <span class="comment">#   link:</span></span><br><span class="line">    <span class="comment">#   text: wechat</span></span><br><span class="line">    <span class="comment"># - img: /img/alipay.jpg</span></span><br><span class="line">    <span class="comment">#   link:</span></span><br><span class="line">    <span class="comment">#   text: alipay</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Post edit</span></span><br><span class="line"><span class="comment"># Easily browse and edit blog source code online.</span></span><br><span class="line"><span class="attr">post_edit:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/</span></span><br><span class="line">  <span class="comment"># For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/</span></span><br><span class="line">  <span class="attr">url:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Related Articles</span></span><br><span class="line"><span class="attr">related_post:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Number of posts displayed</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">6</span></span><br><span class="line">  <span class="comment"># Choose: created / updated</span></span><br><span class="line">  <span class="attr">date_type:</span> <span class="string">created</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Choose: 1 / 2 / false</span></span><br><span class="line"><span class="comment"># 1: The &#x27;next post&#x27; will link to old post</span></span><br><span class="line"><span class="comment"># 2: The &#x27;next post&#x27; will link to new post</span></span><br><span class="line"><span class="comment"># false: disable pagination</span></span><br><span class="line"><span class="attr">post_pagination:</span> <span class="number">1</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Displays outdated notice for a post</span></span><br><span class="line"><span class="attr">noticeOutdate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Style: simple / flat</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">flat</span></span><br><span class="line">  <span class="comment"># When will it be shown</span></span><br><span class="line">  <span class="attr">limit_day:</span> <span class="number">365</span></span><br><span class="line">  <span class="comment"># Position: top / bottom</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">top</span></span><br><span class="line">  <span class="attr">message_prev:</span> <span class="string">It</span> <span class="string">has</span> <span class="string">been</span></span><br><span class="line">  <span class="attr">message_next:</span> <span class="string">days</span> <span class="string">since</span> <span class="string">the</span> <span class="string">last</span> <span class="string">update,</span> <span class="string">the</span> <span class="string">content</span> <span class="string">of</span> <span class="string">the</span> <span class="string">article</span> <span class="string">may</span> <span class="string">be</span> <span class="string">outdated.</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Footer Settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="attr">footer:</span></span><br><span class="line">  <span class="attr">nav:</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">since:</span> <span class="number">2019</span></span><br><span class="line">  <span class="attr">custom_text:</span></span><br><span class="line">  <span class="comment"># Copyright of theme and framework</span></span><br><span class="line">  <span class="attr">copyright:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">version:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Aside Settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">aside:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hide:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Show the button to hide the aside in bottom right button</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Position: left / right</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line">  <span class="attr">display:</span></span><br><span class="line">    <span class="attr">archive:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tag:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">category:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_author:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">description:</span></span><br><span class="line">    <span class="attr">button:</span></span><br><span class="line">      <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">Follow</span> <span class="string">Me</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://github.com/xxxxxx</span></span><br><span class="line">  <span class="attr">card_announcement:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">content:</span> <span class="string">This</span> <span class="string">is</span> <span class="string">my</span> <span class="string">Blog</span></span><br><span class="line">  <span class="attr">card_recent_post:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">5</span></span><br><span class="line">    <span class="comment"># Sort: date / updated</span></span><br><span class="line">    <span class="attr">sort:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_newest_comments:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">6</span></span><br><span class="line">    <span class="comment"># Unit: mins, save data to localStorage</span></span><br><span class="line">    <span class="attr">storage:</span> <span class="number">10</span></span><br><span class="line">    <span class="attr">avatar:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_categories:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span></span><br><span class="line">    <span class="comment"># Choose: none / true / false</span></span><br><span class="line">    <span class="attr">expand:</span> <span class="string">none</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_tags:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">40</span></span><br><span class="line">    <span class="attr">color:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># Order of tags, random/name/length</span></span><br><span class="line">    <span class="attr">orderby:</span> <span class="string">random</span></span><br><span class="line">    <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">1</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_archives:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># Type: monthly / yearly</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">monthly</span></span><br><span class="line">    <span class="comment"># Eg: YYYY年MM月</span></span><br><span class="line">    <span class="attr">format:</span> <span class="string">MMMM</span> <span class="string">YYYY</span></span><br><span class="line">    <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_post_series:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># The title shows the series name</span></span><br><span class="line">    <span class="attr">series_title:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># Order by title or date</span></span><br><span class="line">    <span class="attr">orderBy:</span> <span class="string">&#x27;date&#x27;</span></span><br><span class="line">    <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line">  <span class="attr">card_webinfo:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">post_count:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">last_push_date:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">    <span class="comment"># Time difference between publish date and now</span></span><br><span class="line">    <span class="comment"># Formal: Month/Day/Year Time or Year/Month/Day Time</span></span><br><span class="line">    <span class="comment"># Leave it empty if you don&#x27;t enable this feature</span></span><br><span class="line">    <span class="attr">runtime_date:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Bottom right button</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The distance between the bottom right button and the bottom (default unit: px)</span></span><br><span class="line"><span class="attr">rightside_bottom:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Conversion between Traditional and Simplified Chinese</span></span><br><span class="line"><span class="attr">translate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># The text of a button</span></span><br><span class="line">  <span class="attr">default:</span> <span class="string">繁</span></span><br><span class="line">  <span class="comment"># the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese）</span></span><br><span class="line">  <span class="attr">defaultEncoding:</span> <span class="number">2</span></span><br><span class="line">  <span class="comment"># Time delay</span></span><br><span class="line">  <span class="attr">translateDelay:</span> <span class="number">0</span></span><br><span class="line">  <span class="comment"># The text of the button when the language is Simplified Chinese</span></span><br><span class="line">  <span class="attr">msgToTraditionalChinese:</span> <span class="string">&#x27;繁&#x27;</span></span><br><span class="line">  <span class="comment"># The text of the button when the language is Traditional Chinese</span></span><br><span class="line">  <span class="attr">msgToSimplifiedChinese:</span> <span class="string">&#x27;簡&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Read Mode</span></span><br><span class="line"><span class="attr">readmode:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Dark Mode</span></span><br><span class="line"><span class="attr">darkmode:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Toggle Button to switch dark/light mode</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Switch dark/light mode automatically</span></span><br><span class="line">  <span class="comment"># autoChangeMode: 1  Following System Settings, if the system doesn&#x27;t support dark mode, it will switch dark mode between 6 pm to 6 am</span></span><br><span class="line">  <span class="comment"># autoChangeMode: 2  Switch dark mode between 6 pm to 6 am</span></span><br><span class="line">  <span class="comment"># autoChangeMode: false</span></span><br><span class="line">  <span class="attr">autoChangeMode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18</span></span><br><span class="line">  <span class="attr">start:</span></span><br><span class="line">  <span class="attr">end:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Show scroll percent in scroll-to-top button</span></span><br><span class="line"><span class="attr">rightside_scroll_percent:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work</span></span><br><span class="line"><span class="comment"># Choose: readmode,translate,darkmode,hideAside,toc,chat,comment</span></span><br><span class="line"><span class="comment"># Don&#x27;t repeat the same value</span></span><br><span class="line"><span class="attr">rightside_item_order:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Default: readmode,translate,darkmode,hideAside</span></span><br><span class="line">  <span class="attr">hide:</span></span><br><span class="line">  <span class="comment"># Default: toc,chat,comment</span></span><br><span class="line">  <span class="attr">show:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Animation for the bottom right config button</span></span><br><span class="line"><span class="attr">rightside_config_animation:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Global Settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">anchor:</span></span><br><span class="line">  <span class="comment"># When you scroll, the URL will update according to header id.</span></span><br><span class="line">  <span class="attr">auto_update:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Click the headline to scroll and update the anchor</span></span><br><span class="line">  <span class="attr">click_to_scroll:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="attr">photofigcaption:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="attr">copy:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Add the copyright information after copied content</span></span><br><span class="line">  <span class="attr">copyright:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">limit_count:</span> <span class="number">150</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Need to install the hexo-wordcount plugin</span></span><br><span class="line"><span class="attr">wordcount:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Display the word count of the article in post meta</span></span><br><span class="line">  <span class="attr">post_wordcount:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Display the time to read the article in post meta</span></span><br><span class="line">  <span class="attr">min2read:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Display the total word count of the website in aside&#x27;s webinfo</span></span><br><span class="line">  <span class="attr">total_wordcount:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Busuanzi count for PV / UV in site</span></span><br><span class="line"><span class="attr">busuanzi:</span></span><br><span class="line">  <span class="attr">site_uv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">site_pv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">page_pv:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Math</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># About the per_page</span></span><br><span class="line"><span class="comment"># if you set it to true, it will load mathjax/katex script in each page</span></span><br><span class="line"><span class="comment"># if you set it to false, it will load mathjax/katex script according to your setting (add the &#x27;mathjax: true&#x27; or &#x27;katex: true&#x27; in page&#x27;s front-matter)</span></span><br><span class="line"><span class="attr">math:</span></span><br><span class="line">  <span class="comment"># Choose: mathjax, katex</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need math</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hide_scrollbar:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">mathjax:</span></span><br><span class="line">    <span class="comment"># Enable the contextual menu</span></span><br><span class="line">    <span class="attr">enableMenu:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># Choose: all / ams / none, This controls whether equations are numbered and how</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="string">none</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">katex:</span></span><br><span class="line">    <span class="comment"># Enable the copy KaTeX formula</span></span><br><span class="line">    <span class="attr">copy_tex:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Search</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="comment"># Choose: algolia_search / local_search / docsearch</span></span><br><span class="line">  <span class="comment"># leave it empty if you don&#x27;t need search</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="attr">placeholder:</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Algolia Search</span></span><br><span class="line">  <span class="attr">algolia_search:</span></span><br><span class="line">    <span class="comment"># Number of search results per page</span></span><br><span class="line">    <span class="attr">hitsPerPage:</span> <span class="number">6</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Local Search</span></span><br><span class="line">  <span class="attr">local_search:</span></span><br><span class="line">    <span class="comment"># Preload the search data when the page loads.</span></span><br><span class="line">    <span class="attr">preload:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># Show top n results per article, show all results by setting to -1</span></span><br><span class="line">    <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line">    <span class="comment"># Unescape html strings to the readable one.</span></span><br><span class="line">    <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">CDN:</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Docsearch</span></span><br><span class="line">  <span class="comment"># https://docsearch.algolia.com/</span></span><br><span class="line">  <span class="attr">docsearch:</span></span><br><span class="line">    <span class="attr">appId:</span></span><br><span class="line">    <span class="attr">apiKey:</span></span><br><span class="line">    <span class="attr">indexName:</span></span><br><span class="line">    <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Share System</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">share:</span></span><br><span class="line">  <span class="comment"># Choose: sharejs / addtoany</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need share</span></span><br><span class="line">  <span class="attr">use:</span> <span class="string">sharejs</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Share.js</span></span><br><span class="line">  <span class="comment"># https://github.com/overtrue/share.js</span></span><br><span class="line">  <span class="attr">sharejs:</span></span><br><span class="line">    <span class="attr">sites:</span> <span class="string">facebook,twitter,wechat,weibo,qq</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># AddToAny</span></span><br><span class="line">  <span class="comment"># https://www.addtoany.com/</span></span><br><span class="line">  <span class="attr">addtoany:</span></span><br><span class="line">    <span class="attr">item:</span> <span class="string">facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Comments System</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">comments:</span></span><br><span class="line">  <span class="comment"># Up to two comments system, the first will be shown as default</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need comments</span></span><br><span class="line">  <span class="comment"># Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk</span></span><br><span class="line">  <span class="comment"># Format of two comments system : Disqus,Waline</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="comment"># Display the comment name next to the button</span></span><br><span class="line">  <span class="attr">text:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Lazyload: The comment system will be load when comment element enters the browser&#x27;s viewport.</span></span><br><span class="line">  <span class="comment"># If you set it to true, the comment count will be invalid</span></span><br><span class="line">  <span class="attr">lazyload:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Display comment count in post&#x27;s top_img</span></span><br><span class="line">  <span class="attr">count:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Display comment count in Home Page</span></span><br><span class="line">  <span class="attr">card_post_count:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Disqus</span></span><br><span class="line"><span class="comment"># https://disqus.com/</span></span><br><span class="line"><span class="attr">disqus:</span></span><br><span class="line">  <span class="attr">shortname:</span></span><br><span class="line">  <span class="comment"># For newest comments widget</span></span><br><span class="line">  <span class="attr">apikey:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Alternative Disqus - Render comments with Disqus API</span></span><br><span class="line"><span class="comment"># https://github.com/SukkaW/DisqusJS</span></span><br><span class="line"><span class="attr">disqusjs:</span></span><br><span class="line">  <span class="attr">shortname:</span></span><br><span class="line">  <span class="attr">apikey:</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Livere</span></span><br><span class="line"><span class="comment"># https://www.livere.com/</span></span><br><span class="line"><span class="attr">livere:</span></span><br><span class="line">  <span class="attr">uid:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Gitalk</span></span><br><span class="line"><span class="comment"># https://github.com/gitalk/gitalk</span></span><br><span class="line"><span class="attr">gitalk:</span></span><br><span class="line">  <span class="attr">client_id:</span></span><br><span class="line">  <span class="attr">client_secret:</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">  <span class="attr">admin:</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Valine</span></span><br><span class="line"><span class="comment"># https://valine.js.org</span></span><br><span class="line"><span class="attr">valine:</span></span><br><span class="line">  <span class="attr">appId:</span></span><br><span class="line">  <span class="attr">appKey:</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">monsterid</span></span><br><span class="line">  <span class="comment"># This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span></span><br><span class="line">  <span class="attr">serverURLs:</span></span><br><span class="line">  <span class="attr">bg:</span></span><br><span class="line">  <span class="comment"># Use Valine visitor count as the page view count</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Waline - A simple comment system with backend support fork from Valine</span></span><br><span class="line"><span class="comment"># https://waline.js.org/</span></span><br><span class="line"><span class="attr">waline:</span></span><br><span class="line">  <span class="attr">serverURL:</span></span><br><span class="line">  <span class="attr">bg:</span></span><br><span class="line">  <span class="comment"># Use Waline pageview count as the page view count</span></span><br><span class="line">  <span class="attr">pageview:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Utterances</span></span><br><span class="line"><span class="comment"># https://utteranc.es/</span></span><br><span class="line"><span class="attr">utterances:</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="comment"># Issue Mapping: pathname/url/title/og:title</span></span><br><span class="line">  <span class="attr">issue_term:</span> <span class="string">pathname</span></span><br><span class="line">  <span class="comment"># Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark</span></span><br><span class="line">  <span class="attr">light_theme:</span> <span class="string">github-light</span></span><br><span class="line">  <span class="attr">dark_theme:</span> <span class="string">photon-dark</span></span><br><span class="line">  <span class="attr">js:</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Facebook Comments Plugin</span></span><br><span class="line"><span class="comment"># https://developers.facebook.com/docs/plugins/comments/</span></span><br><span class="line"><span class="attr">facebook_comments:</span></span><br><span class="line">  <span class="attr">app_id:</span></span><br><span class="line">  <span class="comment"># optional</span></span><br><span class="line">  <span class="attr">user_id:</span></span><br><span class="line">  <span class="attr">pageSize:</span> <span class="number">10</span></span><br><span class="line">  <span class="comment"># Choose: social / time / reverse_time</span></span><br><span class="line">  <span class="attr">order_by:</span> <span class="string">social</span></span><br><span class="line">  <span class="attr">lang:</span> <span class="string">zh_TW</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Twikoo</span></span><br><span class="line"><span class="comment"># https://github.com/imaegoo/twikoo</span></span><br><span class="line"><span class="attr">twikoo:</span></span><br><span class="line">  <span class="attr">envId:</span></span><br><span class="line">  <span class="attr">region:</span></span><br><span class="line">  <span class="comment"># Use Twikoo visitor count as the page view count</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Giscus</span></span><br><span class="line"><span class="comment"># https://giscus.app/</span></span><br><span class="line"><span class="attr">giscus:</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="attr">repo_id:</span></span><br><span class="line">  <span class="attr">category_id:</span></span><br><span class="line">  <span class="attr">light_theme:</span> <span class="string">light</span></span><br><span class="line">  <span class="attr">dark_theme:</span> <span class="string">dark</span></span><br><span class="line">  <span class="attr">js:</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Remark42</span></span><br><span class="line"><span class="comment"># https://remark42.com/docs/configuration/frontend/</span></span><br><span class="line"><span class="attr">remark42:</span></span><br><span class="line">  <span class="attr">host:</span></span><br><span class="line">  <span class="attr">siteId:</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Artalk</span></span><br><span class="line"><span class="comment"># https://artalk.js.org/guide/frontend/config.html</span></span><br><span class="line"><span class="attr">artalk:</span></span><br><span class="line">  <span class="attr">server:</span></span><br><span class="line">  <span class="attr">site:</span></span><br><span class="line">  <span class="comment"># Use Artalk visitor count as the page view count</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Chat Services</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">chat:</span></span><br><span class="line">  <span class="comment"># Choose: chatra/tidio/crisp</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need chat</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="comment"># Chat Button [recommend]</span></span><br><span class="line">  <span class="comment"># It will create a button in the bottom right corner of website, and hide the origin button</span></span><br><span class="line">  <span class="attr">rightside_button:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down</span></span><br><span class="line">  <span class="attr">button_hide_show:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://chatra.io/</span></span><br><span class="line"><span class="attr">chatra:</span></span><br><span class="line">  <span class="attr">id:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://www.tidio.com/</span></span><br><span class="line"><span class="attr">tidio:</span></span><br><span class="line">  <span class="attr">public_key:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://crisp.chat/en/</span></span><br><span class="line"><span class="attr">crisp:</span></span><br><span class="line">  <span class="attr">website_id:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Analysis</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://tongji.baidu.com/web/welcome/login</span></span><br><span class="line"><span class="attr">baidu_analytics:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://analytics.google.com/analytics/web/</span></span><br><span class="line"><span class="attr">google_analytics:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://www.cloudflare.com/zh-tw/web-analytics/</span></span><br><span class="line"><span class="attr">cloudflare_analytics:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://clarity.microsoft.com/</span></span><br><span class="line"><span class="attr">microsoft_clarity:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://umami.is/</span></span><br><span class="line"><span class="attr">umami_analytics:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># For self-hosted setups, configure the hostname of the Umami instance</span></span><br><span class="line">  <span class="attr">serverURL:</span></span><br><span class="line">  <span class="attr">website_id:</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">  <span class="attr">UV_PV:</span></span><br><span class="line">    <span class="attr">site_uv:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">site_pv:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">page_pv:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># Umami Cloud (API key) / self-hosted Umami (token)</span></span><br><span class="line">    <span class="attr">token:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://www.googletagmanager.com/</span></span><br><span class="line"><span class="attr">google_tag_manager:</span></span><br><span class="line">  <span class="attr">tag_id:</span></span><br><span class="line">  <span class="attr">domain:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Advertisement</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Google Adsense</span></span><br><span class="line"><span class="attr">google_adsense:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">auto_ads:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">js:</span> <span class="string">https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</span></span><br><span class="line">  <span class="attr">client:</span></span><br><span class="line">  <span class="attr">enable_page_level_ads:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Insert ads manually</span></span><br><span class="line"><span class="comment"># Leave it empty if you don&#x27;t need ads</span></span><br><span class="line"><span class="attr">ad:</span></span><br><span class="line">  <span class="comment"># Insert ads in the index (every three posts)</span></span><br><span class="line">  <span class="attr">index:</span></span><br><span class="line">  <span class="comment"># Insert ads in aside</span></span><br><span class="line">  <span class="attr">aside:</span></span><br><span class="line">  <span class="comment"># Insert ads in the post (before pagination)</span></span><br><span class="line">  <span class="attr">post:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Verification</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="attr">site_verification:</span></span><br><span class="line">  <span class="comment"># - name: google-site-verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxx</span></span><br><span class="line">  <span class="comment"># - name: baidu-site-verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxxx</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Beautify / Effect</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Theme color for customize</span></span><br><span class="line"><span class="comment"># Notice: color value must in double quotes like &quot;#000&quot; or may cause error!</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># theme_color:</span></span><br><span class="line"><span class="comment">#   enable: true</span></span><br><span class="line"><span class="comment">#   main: &quot;#49B1F5&quot;</span></span><br><span class="line"><span class="comment">#   paginator: &quot;#00c4b6&quot;</span></span><br><span class="line"><span class="comment">#   button_hover: &quot;#FF7242&quot;</span></span><br><span class="line"><span class="comment">#   text_selection: &quot;#00c4b6&quot;</span></span><br><span class="line"><span class="comment">#   link_color: &quot;#99a9bf&quot;</span></span><br><span class="line"><span class="comment">#   meta_color: &quot;#858585&quot;</span></span><br><span class="line"><span class="comment">#   hr_color: &quot;#A4D8FA&quot;</span></span><br><span class="line"><span class="comment">#   code_foreground: &quot;#F47466&quot;</span></span><br><span class="line"><span class="comment">#   code_background: &quot;rgba(27, 31, 35, .05)&quot;</span></span><br><span class="line"><span class="comment">#   toc_color: &quot;#00c4b6&quot;</span></span><br><span class="line"><span class="comment">#   blockquote_padding_color: &quot;#49b1f5&quot;</span></span><br><span class="line"><span class="comment">#   blockquote_background_color: &quot;#49b1f5&quot;</span></span><br><span class="line"><span class="comment">#   scrollbar_color: &quot;#49b1f5&quot;</span></span><br><span class="line"><span class="comment">#   meta_theme_color_light: &quot;ffffff&quot;</span></span><br><span class="line"><span class="comment">#   meta_theme_color_dark: &quot;#0d0d0d&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The user interface setting of category and tag page</span></span><br><span class="line"><span class="comment"># Choose: index - same as Homepage UI / default - same as archives UI</span></span><br><span class="line"><span class="comment"># leave it empty or index</span></span><br><span class="line"><span class="attr">category_ui:</span></span><br><span class="line"><span class="attr">tag_ui:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Rounded corners for UI elements</span></span><br><span class="line"><span class="attr">rounded_corners_ui:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Stretches the lines so that each line has equal width</span></span><br><span class="line"><span class="attr">text_align_justify:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Add a mask to the header and footer</span></span><br><span class="line"><span class="attr">mask:</span></span><br><span class="line">  <span class="attr">header:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">footer:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Loading Animation</span></span><br><span class="line"><span class="attr">preloader:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># source</span></span><br><span class="line">  <span class="comment"># 1. fullpage-loading</span></span><br><span class="line">  <span class="comment"># 2. pace (progress bar)</span></span><br><span class="line">  <span class="attr">source:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># pace theme (see https://codebyzach.github.io/pace/)</span></span><br><span class="line">  <span class="attr">pace_css_url:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Page Transition</span></span><br><span class="line"><span class="attr">enter_transitions:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Default display mode - light (default) / dark</span></span><br><span class="line"><span class="attr">display_mode:</span> <span class="string">light</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Configuration for beautifying the content of the article</span></span><br><span class="line"><span class="attr">beautify:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Specify the field to beautify (site or post)</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="comment"># Specify the icon to be used as a prefix for the title, such as &#x27;\f0c1&#x27;</span></span><br><span class="line">  <span class="attr">title_prefix_icon:</span></span><br><span class="line">  <span class="comment"># Specify the color of the title prefix icon, such as &#x27;#F47466&#x27;</span></span><br><span class="line">  <span class="attr">title_prefix_icon_color:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Global font settings</span></span><br><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work</span></span><br><span class="line"><span class="attr">font:</span></span><br><span class="line">  <span class="attr">global_font_size:</span></span><br><span class="line">  <span class="attr">code_font_size:</span></span><br><span class="line">  <span class="attr">font_family:</span></span><br><span class="line">  <span class="attr">code_font_family:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Font settings for the site title and site subtitle</span></span><br><span class="line"><span class="attr">blog_title_font:</span></span><br><span class="line">  <span class="attr">font_link:</span></span><br><span class="line">  <span class="attr">font_family:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># The setting of divider icon</span></span><br><span class="line"><span class="attr">hr_icon:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># The unicode value of Font Awesome icon, such as &#x27;\3423&#x27;</span></span><br><span class="line">  <span class="attr">icon:</span></span><br><span class="line">  <span class="attr">icon_top:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Typewriter Effect</span></span><br><span class="line"><span class="comment"># https://github.com/disjukr/activate-power-mode</span></span><br><span class="line"><span class="attr">activate_power_mode:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">colorful:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">shake:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Background effects</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># canvas_ribbon</span></span><br><span class="line"><span class="comment"># See: https://github.com/hustcc/ribbon.js</span></span><br><span class="line"><span class="attr">canvas_ribbon:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># The size of ribbon</span></span><br><span class="line">  <span class="attr">size:</span> <span class="number">150</span></span><br><span class="line">  <span class="comment"># The opacity of ribbon (0 ~ 1)</span></span><br><span class="line">  <span class="attr">alpha:</span> <span class="number">0.6</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line">  <span class="attr">click_to_change:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Fluttering Ribbon</span></span><br><span class="line"><span class="attr">canvas_fluttering_ribbon:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># canvas_nest</span></span><br><span class="line"><span class="comment"># https://github.com/hustcc/canvas-nest.js</span></span><br><span class="line"><span class="attr">canvas_nest:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Color of lines, default: &#x27;0,0,0&#x27;; RGB values: (R,G,B).(<span class="doctag">note:</span> use &#x27;,&#x27; to separate.)</span></span><br><span class="line">  <span class="attr">color:</span> <span class="string">&#x27;0,0,255&#x27;</span></span><br><span class="line">  <span class="comment"># The opacity of line (0~1)</span></span><br><span class="line">  <span class="attr">opacity:</span> <span class="number">0.7</span></span><br><span class="line">  <span class="comment"># The z-index property of the background</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line">  <span class="comment"># The number of lines</span></span><br><span class="line">  <span class="attr">count:</span> <span class="number">99</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Mouse click effects: fireworks</span></span><br><span class="line"><span class="attr">fireworks:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">9999</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Mouse click effects: Heart symbol</span></span><br><span class="line"><span class="attr">click_heart:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Mouse click effects: words</span></span><br><span class="line"><span class="attr">clickShowText:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">    <span class="comment"># - I</span></span><br><span class="line">    <span class="comment"># - LOVE</span></span><br><span class="line">    <span class="comment"># - YOU</span></span><br><span class="line">  <span class="attr">fontSize:</span> <span class="string">15px</span></span><br><span class="line">  <span class="attr">random:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Lightbox Settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Choose: fancybox / medium_zoom</span></span><br><span class="line"><span class="comment"># https://github.com/francoischalifour/medium-zoom</span></span><br><span class="line"><span class="comment"># https://fancyapps.com/fancybox/</span></span><br><span class="line"><span class="comment"># Leave it empty if you don&#x27;t need lightbox</span></span><br><span class="line"><span class="attr">lightbox:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Tag Plugins settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Series</span></span><br><span class="line"><span class="attr">series:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Order by title or date</span></span><br><span class="line">  <span class="attr">orderBy:</span> <span class="string">&#x27;title&#x27;</span></span><br><span class="line">  <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">  <span class="attr">order:</span> <span class="number">1</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># ABCJS - The ABC Music Notation Plugin</span></span><br><span class="line"><span class="comment"># https://github.com/paulrosen/abcjs</span></span><br><span class="line"><span class="attr">abcjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Mermaid</span></span><br><span class="line"><span class="comment"># https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Write Mermaid diagrams using code blocks</span></span><br><span class="line">  <span class="attr">code_write:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># built-in themes: default / forest / dark / neutral</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># chartjs</span></span><br><span class="line"><span class="comment"># see https://www.chartjs.org/docs/latest/</span></span><br><span class="line"><span class="attr">chartjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Do not modify unless you understand how they work.</span></span><br><span class="line">  <span class="comment"># The default settings are only used when the MD syntax is not specified.</span></span><br><span class="line">  <span class="comment"># General font color for the chart</span></span><br><span class="line">  <span class="attr">fontColor:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">&quot;rgba(0, 0, 0, 0.8)&quot;</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">&quot;rgba(255, 255, 255, 0.8)&quot;</span></span><br><span class="line">  <span class="comment"># General border color for the chart</span></span><br><span class="line">  <span class="attr">borderColor:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">&quot;rgba(0, 0, 0, 0.1)&quot;</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">&quot;rgba(255, 255, 255, 0.2)&quot;</span></span><br><span class="line">  <span class="comment"># Background color for scale labels on radar and polar area charts</span></span><br><span class="line">  <span class="attr">scale_ticks_backdropColor:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">&quot;transparent&quot;</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">&quot;transparent&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Note - Bootstrap Callout</span></span><br><span class="line"><span class="attr">note:</span></span><br><span class="line">  <span class="comment"># Note tag style values:</span></span><br><span class="line">  <span class="comment">#  - simple    bs-callout old alert style. Default.</span></span><br><span class="line">  <span class="comment">#  - modern    bs-callout new (v2-v3) alert style.</span></span><br><span class="line">  <span class="comment">#  - flat      flat callout style with background, like on Mozilla or StackOverflow.</span></span><br><span class="line">  <span class="comment">#  - disabled  disable all CSS styles import of note tag.</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">flat</span></span><br><span class="line">  <span class="attr">icons:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">border_radius:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line">  <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line">  <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"><span class="comment"># Other Settings</span></span><br><span class="line"><span class="comment"># --------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># https://github.com/MoOx/pjax</span></span><br><span class="line"><span class="attr">pjax:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Exclude the specified pages from pjax, such as &#x27;/music/&#x27;</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="comment"># - /xxxxxx/</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Inject the css and script (aplayer/meting)</span></span><br><span class="line"><span class="attr">aplayerInject:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Snackbar - Toast Notification</span></span><br><span class="line"><span class="comment"># https://github.com/polonel/SnackBar</span></span><br><span class="line"><span class="comment"># position: top-left / top-center / top-right / bottom-left / bottom-center / bottom-right</span></span><br><span class="line"><span class="attr">snackbar:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">bottom-left</span></span><br><span class="line">  <span class="comment"># The background color of Toast Notification in light mode and dark mode</span></span><br><span class="line">  <span class="attr">bg_light:</span> <span class="string">&#x27;#49b1f5&#x27;</span></span><br><span class="line">  <span class="attr">bg_dark:</span> <span class="string">&#x27;#1f1f1f&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Instant.page</span></span><br><span class="line"><span class="comment"># https://instant.page/</span></span><br><span class="line"><span class="attr">instantpage:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Lazyload</span></span><br><span class="line"><span class="comment"># https://github.com/verlok/vanilla-lazyload</span></span><br><span class="line"><span class="attr">lazyload:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Use browser&#x27;s native lazyload instead of vanilla-lazyload</span></span><br><span class="line">  <span class="attr">native:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Specify the field to use lazyload (site or post)</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">site</span></span><br><span class="line">  <span class="attr">placeholder:</span></span><br><span class="line">  <span class="attr">blur:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># PWA</span></span><br><span class="line"><span class="comment"># See https://github.com/JLHwung/hexo-offline</span></span><br><span class="line"><span class="comment"># ---------------</span></span><br><span class="line"><span class="attr">pwa:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">manifest:</span></span><br><span class="line">  <span class="attr">apple_touch_icon:</span></span><br><span class="line">  <span class="attr">favicon_32_32:</span></span><br><span class="line">  <span class="attr">favicon_16_16:</span></span><br><span class="line">  <span class="attr">mask_icon:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Open graph meta tags</span></span><br><span class="line"><span class="comment"># https://hexo.io/docs/helpers#open-graph</span></span><br><span class="line"><span class="attr">Open_Graph_meta:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">    <span class="comment"># twitter_card:</span></span><br><span class="line">    <span class="comment"># twitter_image:</span></span><br><span class="line">    <span class="comment"># twitter_id:</span></span><br><span class="line">    <span class="comment"># twitter_site:</span></span><br><span class="line">    <span class="comment"># google_plus:</span></span><br><span class="line">    <span class="comment"># fb_admins:</span></span><br><span class="line">    <span class="comment"># fb_app_id:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Structured Data</span></span><br><span class="line"><span class="comment"># https://developers.google.com/search/docs/guides/intro-structured-data</span></span><br><span class="line"><span class="attr">structured_data:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Add the vendor prefixes to ensure compatibility</span></span><br><span class="line"><span class="attr">css_prefix:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Inject</span></span><br><span class="line"><span class="comment"># Insert the code to head (before &#x27;&lt;/head&gt;&#x27; tag) and the bottom (before &#x27;&lt;/body&gt;&#x27; tag)</span></span><br><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="comment"># - &lt;link rel=&quot;stylesheet&quot; href=&quot;/xxx.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="comment"># - &lt;script src=&quot;xxxx&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># CDN Settings</span></span><br><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work</span></span><br><span class="line"><span class="attr">CDN:</span></span><br><span class="line">  <span class="comment"># The CDN provider for internal and third-party scripts</span></span><br><span class="line">  <span class="comment"># Options for both: local/jsdelivr/unpkg/cdnjs/custom</span></span><br><span class="line">  <span class="comment"># <span class="doctag">Note:</span> Dev version can only use &#x27;local&#x27; for internal scripts</span></span><br><span class="line">  <span class="comment"># <span class="doctag">Note:</span> When setting third-party scripts to &#x27;local&#x27;, you need to install hexo-butterfly-extjs</span></span><br><span class="line">  <span class="attr">internal_provider:</span> <span class="string">local</span></span><br><span class="line">  <span class="attr">third_party_provider:</span> <span class="string">jsdelivr</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Add version number to url, true or false</span></span><br><span class="line">  <span class="attr">version:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Custom format</span></span><br><span class="line">  <span class="comment"># For example: https://cdn.staticfile.org/$&#123;cdnjs_name&#125;/$&#123;version&#125;/$&#123;min_cdnjs_file&#125;</span></span><br><span class="line">  <span class="attr">custom_format:</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure><h2 id="Language"><a href="#Language" class="headerlink" title="Language"></a>Language</h2><p>Modify Hexo&#39;s configuration file <code>_config.yml</code></p><p>The default language is <code>en</code></p><p>The theme supports the following languages:</p><ul><li>default (en)</li><li>zh-CN (Simplified Chinese)</li><li>zh-TW (Traditional Chinese)</li><li>zh-HK (Traditional Chinese)</li><li>ja (Japanese)</li><li>ko (Korean)</li></ul><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">## Website Information</span></span><br><span class="line"></span><br><span class="line"><span class="string">To</span> <span class="string">modify</span> <span class="string">various</span> <span class="string">website</span> <span class="string">data,</span> <span class="string">such</span> <span class="string">as</span> <span class="string">title,</span> <span class="string">subtitle,</span> <span class="string">and</span> <span class="string">personal</span> <span class="string">information</span> <span class="string">like</span> <span class="string">email,</span> <span class="string">please</span> <span class="string">edit</span> <span class="string">Hexo&#x27;s</span> <span class="string">`_config.yml`</span></span><br><span class="line"></span><br><span class="line"><span class="type">![butterfly</span><span class="string">-docs-hexo-config.png](https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-hexo-config.png)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">## Navigation</span></span><br><span class="line"></span><br><span class="line"><span class="comment">### Parameter Settings</span></span><br><span class="line"></span><br><span class="line"><span class="string">```yaml</span></span><br><span class="line"><span class="attr">nav:</span></span><br><span class="line">  <span class="comment"># Navigation bar logo image</span></span><br><span class="line">  <span class="attr">logo:</span> <span class="string">/xxxx.png</span></span><br><span class="line">  <span class="attr">display_title:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">display_post_title:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Whether to fix navigation bar</span></span><br><span class="line">  <span class="attr">fixed:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>logo</td><td>The website&#39;s logo, supports images, just input the image link</td></tr><tr><td>display_title</td><td>Whether to display the website title, write true or false</td></tr><tr><td>display_post_title</td><td>Whether to display the post title, write true or false</td></tr><tr><td>fixed</td><td>Whether to fix the status bar, write true or false</td></tr></tbody></table><h3 id="Menu"><a href="#Menu" class="headerlink" title="Menu"></a>Menu</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">Home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-home</span></span><br><span class="line"><span class="attr">Archives:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-archive</span></span><br><span class="line"><span class="attr">Tags:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-tags</span></span><br><span class="line"><span class="attr">Categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-folder-open</span></span><br><span class="line"><span class="string">List||fas</span> <span class="attr">fa-list:</span></span><br><span class="line">  <span class="attr">Music:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">  <span class="attr">Movie:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br><span class="line"><span class="attr">Link:</span> <span class="string">/link/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-link</span></span><br><span class="line"><span class="attr">About:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-heart</span></span><br></pre></td></tr></table></figure><p>Must be <code>/xxx/</code>, followed by <code>||</code> to separate, then write the icon name.</p><p>If you do not wish to display an icon, the icon name can be omitted.</p><p>By default, subdirectories are expanded. If you want to hide them, add <code>hide</code> inside the subdirectory.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">List||fas</span> <span class="string">fa-list||hide:</span></span><br><span class="line">  <span class="attr">Music:</span> <span class="string">/music/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-music</span></span><br><span class="line">  <span class="attr">Movie:</span> <span class="string">/movies/</span> <span class="string">||</span> <span class="string">fas</span> <span class="string">fa-video</span></span><br></pre></td></tr></table></figure><p><strong>Note：</strong> The text of the navigation can be changed as desired.</p><p>For example:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line">  Home: / || fas fa-home</span><br><span class="line">  Timeline: /archives/ || fas fa-archive</span><br><span class="line">  Tags: /tags/ || fas fa-tags</span><br><span class="line">  Categories: /categories/ || fas fa-folder-open</span><br><span class="line">  List||fa fa-heartbeat:</span><br><span class="line">  Music: /music/ || fas fa-music</span><br><span class="line">  Photos: /Gallery/ || fas fa-images</span><br><span class="line">  Movies: /movies/ || fas fa-video</span><br><span class="line">  Links: /link/ || fas fa-link</span><br><span class="line">  About: /about/ || fas fa-heart</span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-menu.png" alt="hexo-theme-butterfly-doc-menu.png"></p><h2 id="Code-Blocks"><a href="#Code-Blocks" class="headerlink" title="Code Blocks"></a>Code Blocks</h2><div class="note info flat"><p>All features within code blocks are only applicable to Hexo&#39;s built-in code rendering.</p><p>If using a third-party renderer, it may not be effective.</p></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">code_blocks:</span></span><br><span class="line">  <span class="comment"># Code block theme: darker / pale night / light / ocean / false</span></span><br><span class="line">  <span class="attr">theme:</span> <span class="string">light</span></span><br><span class="line">  <span class="attr">macStyle:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Code block height limit (unit: px)</span></span><br><span class="line">  <span class="attr">height_limit:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">word_wrap:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Toolbar</span></span><br><span class="line">  <span class="attr">copy:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">language:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button</span></span><br><span class="line">  <span class="attr">shrink:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">fullpage:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>theme</td><td>Code highlight theme, options: darker &#x2F; pale night &#x2F; light &#x2F; ocean &#x2F; false</td></tr><tr><td>macStyle</td><td>Whether to use Mac style</td></tr><tr><td>height_limit</td><td>Code block height limit (unit: px), can be a number or false</td></tr><tr><td>word_wrap</td><td>Whether to automatically wrap lines</td></tr><tr><td>copy</td><td>Whether to show the copy button</td></tr><tr><td>language</td><td>Whether to show the language label</td></tr><tr><td>shrink</td><td>true: collapse code block &#x2F; false: expand code block &#x2F; none: expand code block and hide button</td></tr><tr><td>fullpage</td><td>Whether to show the full page button</td></tr></tbody></table><h3 id="Code-Highlight-Theme"><a href="#Code-Highlight-Theme" class="headerlink" title="Code Highlight Theme"></a>Code Highlight Theme</h3><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Default Theme</button><button type="button" class="tab">Custom Theme</button></div><div class="tab-contents"><div class="tab-item-content active"><p><code>Butterfly</code> supports 4 types of code highlight styles:</p><ul><li>darker</li><li>pale night</li><li>light</li><li>ocean</li></ul><p>If you need a MacOS style code highlight, you can set <code>macStyle</code> to <code>true</code>.</p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>darker</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-darker.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>pale night</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-pane-night.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>light</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-light.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>ocean</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-orcean.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>macStyle</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-code-macstyle-light.png"></p></div><div class="tab-item-content"><p>Starting from version 3.0, the theme supports custom code color themes.</p><p>To learn how to create a custom theme, refer to the following article:</p><p><a href="/en/posts/customize-code-coloring/" title="Customize code coloring">Custom Code Colors</a></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h3 id="Code-Block-Expand-Collapse"><a href="#Code-Block-Expand-Collapse" class="headerlink" title="Code Block Expand&#x2F;Collapse"></a>Code Block Expand&#x2F;Collapse</h3><p>By default, code blocks are automatically expanded. You can set whether all code blocks are in a collapsed state, and they can be expanded by clicking <code>&gt;</code>.</p><ul><li>true All code blocks are collapsed and require clicking <code>&gt;</code> to open.</li><li>false Code blocks are expanded and have a <code>&gt;</code> click button.</li><li>none The <code>&gt;</code> button is not displayed.</li></ul><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_shrink:</span> <span class="literal">true</span> <span class="comment"># Code blocks are collapsed and require clicking &#x27;&gt;&#x27; to open.</span></span><br></pre></td></tr></table></figure><div class="note info flat"><p>You can also add <code>highlight_shrink</code> in the front-matter of the corresponding markdown file for a post&#x2F;page to configure it independently.</p><p>When <code>highlight_shrink</code> in the <strong>theme configuration file</strong> is set to true, you can add <code>highlight_shrink: false</code> in the front-matter to configure the article to expand code blocks individually.</p><p>When <code>highlight_shrink</code> in the <strong>theme configuration file</strong> is set to false, you can add <code>highlight_shrink: true</code> in the front-matter to configure the article to collapse code blocks individually.</p></div><p><code>highlight_shrink: true</code></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-highlight-shrink-true.png" alt="hexo-theme-butterfly-doc-highlight-shrink-true.png"></p><p><code>highlight_shrink: false</code></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-highlight-shrink-false.png" alt="hexo-theme-butterfly-doc-highlight-shrink-false.png"></p><p><code>highlight_shrink: none</code></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-highlight-shirk-none.png" alt="hexo-theme-butterfly-docs-highlight-shirk-none.png"></p><h3 id="Code-Word-Wrap"><a href="#Code-Word-Wrap" class="headerlink" title="Code Word Wrap"></a>Code Word Wrap</h3><p>By default, Hexo does not implement automatic word wrapping for code during compilation. If you prefer not to have a horizontal scrollbar within the code block area, you might want to enable this feature.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">code_word_wrap:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>If you are using highlight for rendering, you need to find your site&#39;s Hexo configuration file <code>_config.yml</code> and change <code>line_number</code> to <code>false</code>:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">false</span> <span class="comment"># &lt;- Change here</span></span><br><span class="line">  <span class="attr">auto_detect:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tab_replace:</span></span><br></pre></td></tr></table></figure><p>If you are using prismjs for rendering, you need to find your site&#39;s Hexo configuration file <code>_config.yml</code> and change <code>line_number</code> to <code>false</code>:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">prismjs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">preprocess:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">false</span> <span class="comment"># &lt;- Change here</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">&#x27;&#x27;</span></span><br></pre></td></tr></table></figure><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Before setting <code>code_word_wrap</code></p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-code-word-wrap-before.png" alt="hexo-theme-butterfly-doc-code-word-wrap-before.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>After setting <code>code_word_wrap</code></p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-code-word-wrap-after.png" alt="hexo-theme-butterfly-doc-code-word-wrap-after.png"></p><h3 id="Code-Height-Limit"><a href="#Code-Height-Limit" class="headerlink" title="Code Height Limit"></a>Code Height Limit</h3><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Supported from version 3.7.0 and above</p></div><p>You can configure a height limit for code blocks. Any content exceeding this limit will be hidden, with a button to expand it shown.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_height_limit:</span> <span class="literal">false</span> <span class="comment"># unit: px</span></span><br></pre></td></tr></table></figure><p>Notes:</p><ol><li><p>The unit is <code>px</code>. Add a number directly, such as 200.</p></li><li><p>The actual height limit is <code>highlight_height_limit + 30 px</code>. An additional 30px is added to the limit to avoid showing the expand button when the code height exceeds the limit by just a little, resulting in no content being shown upon expansion.</p></li><li><p>This does not apply to code blocks that are hidden (with CSS <code>display: none</code>).</p></li></ol><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-highlight-heigh-limit.gif"></p><h2 id="Social-Icons"><a href="#Social-Icons" class="headerlink" title="Social Icons"></a>Social Icons</h2><p>Butterfly supports <a href="https://fontawesome.com/icons?from=io">font-awesome v6</a> icons.</p><p>The format is <code>icon name: url || descriptive text || color</code></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">social:</span></span><br><span class="line">  <span class="attr">fab fa-github:</span> <span class="string">https://github.com/xxxxx</span> <span class="string">||</span> <span class="string">Github</span> <span class="string">||</span> <span class="string">&quot;#hdhfbb&quot;</span></span><br><span class="line">  <span class="attr">fas fa-envelope:</span> <span class="string">mailto:xxxxxx@gmail.com</span> <span class="string">||</span> <span class="string">Email</span> <span class="string">||</span> <span class="string">&quot;#000000&quot;</span></span><br></pre></td></tr></table></figure><p>You can find the icon names here</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-fontawesome.png" alt="hexo-theme-butterfly-doc-fontawesome.png"></p><p>PC:</p><p>!<img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-fontawesome.png" alt="hexo-theme-butterfly-doc-fontawesome.png"></p><p>Mobile:</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-socila-icon-mobile.png" alt="hexo-theme-butterfly-doc-socila-icon-mobile.png"></p><h2 id="Image-Settings"><a href="#Image-Settings" class="headerlink" title="Image Settings"></a>Image Settings</h2><h3 id="Avatar"><a href="#Avatar" class="headerlink" title="Avatar"></a>Avatar</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">avatar:</span></span><br><span class="line">  <span class="attr">img:</span> <span class="string">/img/avatar.png</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">true</span> <span class="comment"># The avatar will keep rotating</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-avatar.png" alt="hexo-theme-butterfly-doc-avatar.png"></p><h3 id="Top-Image"><a href="#Top-Image" class="headerlink" title="Top Image"></a>Top Image</h3><div class="note info flat"><p>If you do not want to display the top image, you can directly configure <code>disable_top_img: true</code></p></div><div class="note primary flat"><p>The order of obtaining the top image, if none are configured, the top image will not be displayed.</p><ol><li><p>The order of obtaining the top image for pages:</p><p><code>Individually configured top_img</code> &gt; <code>default_top_img in the configuration file</code></p></li><li><p>The order of obtaining the top image for article pages:</p><p><code>Individually configured top_img</code> &gt; <code>cover</code> &gt; <code>default_top_img in the configuration file</code></p></li></ol></div><p>Values in the configuration:</p><table><thead><tr><th>Configuration</th><th>Explanation</th></tr></thead><tbody><tr><td>index_img</td><td>Top image for the homepage</td></tr><tr><td>default_top_img</td><td>Default top image, displayed when the page&#39;s top_img is not configured</td></tr><tr><td>archive_img</td><td>Top image for the archive page</td></tr><tr><td>tag_img</td><td>Default top image for tag subpages</td></tr><tr><td>tag_per_img</td><td>Top image for tag subpages, can configure a top_img for each tag</td></tr><tr><td>category_img</td><td>Default top image for category subpages</td></tr><tr><td>category_per_img</td><td>Top image for category subpages, can configure a top_img for each category</td></tr></tbody></table><p>For other pages (tags&#x2F;categories&#x2F;custom pages) and article pages, set the <code>top_img</code> in the <code>front-matter</code> of the corresponding markdown page.</p><p>All the above top_img can be configured with the following values:</p><table><thead><tr><th>Configuration Value</th><th>Effect</th></tr></thead><tbody><tr><td>Leave empty</td><td>Display the default top_img (if any), otherwise display the default color<br>(If the top_img of the article page is empty, the cover value will be displayed)</td></tr><tr><td>img link</td><td>Link to the image, display the configured image</td></tr><tr><td>Color (<br>HEX value - #0000FF<br>RGB value - rgb(0,0,255)<br>Color word - orange<br>Gradient color - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)<br>)</td><td>Corresponding color</td></tr><tr><td>transparent</td><td>Transparent</td></tr><tr><td>false</td><td>Do not display top_img</td></tr></tbody></table><p><code>tag_per_img</code> and <code>category_per_img</code> are new in version 3.2.0, allowing individual configuration for tags and categories.</p><p>It is not recommended to configure different top images for each tag and category, as too many configurations will slow down the generation speed.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">tag_per_img:</span></span><br><span class="line">  <span class="attr">aplayer:</span> <span class="string">https://xxxxxx.png</span></span><br><span class="line">  <span class="attr">android:</span> <span class="string">ddddddd.png</span></span><br><span class="line"></span><br><span class="line"><span class="string">category_per_img：</span></span><br><span class="line">  <span class="string">隨想:</span> <span class="string">hdhdh.png</span></span><br><span class="line">  <span class="string">推薦:</span> <span class="string">ddjdjdjd.png</span></span><br></pre></td></tr></table></figure><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>top_img: false</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-page-top-img-false.png" alt="theme-butterfly-docs-page-top-img-false.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-post-top-img-false-new.png" alt="theme-butterfly-docs-post-top-img-false-new.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>top_img: orange</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-top-img-orange.png" alt="theme-butterfly-docs-top-img-orange.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>top_img: &#39;linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)&#39;</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-top-img-color.png" alt="theme-butterfly-docs-top-img-color.png"></p><h3 id="Footer-Background-Image"><a href="#Footer-Background-Image" class="headerlink" title="Footer Background Image"></a>Footer Background Image</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Whether to display an image background for the footer (same as top_img)</span></span><br><span class="line"><span class="attr">footer_img:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Configuration Value</th><th>Effect</th></tr></thead><tbody><tr><td>Leave empty&#x2F;false</td><td>Display the default color</td></tr><tr><td>img link</td><td>Link to the image, display the configured image</td></tr><tr><td>Color (<br>HEX value - #0000FF<br>RGB value - rgb(0,0,255)<br>Color word - orange<br>Gradient color - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)<br>)</td><td>Corresponding color</td></tr><tr><td>transparent</td><td>Transparent</td></tr><tr><td>true</td><td>Display the same as top_img</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>true</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-footer.png"></p><h3 id="Website-Background"><a href="#Website-Background" class="headerlink" title="Website Background"></a>Website Background</h3><p>The default display is white, you can set an image or color</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Color (HEX value/RGB value/Color word/Gradient color)</span></span><br><span class="line"><span class="comment"># Leave empty to not display a background</span></span><br><span class="line"><span class="attr">background:</span></span><br></pre></td></tr></table></figure><p><em>Note:</em> If your website root directory is not &#39;&#x2F;&#39;, when using local images, you need to add your root directory.<br>For example: if the website is <code>https://yoursite.com/blog</code>, and you reference an image <code>img/xx.png</code>, then set the background to <code>/blog/img/xx.png</code></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>background:&#39;#49B202&#39;</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-set-body-background-color.png" alt="hexo-theme-butterfly-doc-set-body-background-color.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>background: <a href="https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png">https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png</a></p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-set-body-background-img.png" alt="hexo-theme-butterfly-doc-set-body-background-img.png"></p><h2 id="Article-Cover"><a href="#Article-Cover" class="headerlink" title="Article Cover"></a>Article Cover</h2><p>In the markdown document of the article, add <code>cover</code> in the <code>Front-matter</code> and fill in the image address to be displayed.</p><p>If <code>cover</code> is not configured, you can set a default cover to display.</p><p>If you do not want to display the cover on the homepage, you can set it to <code>false</code>.</p><div class="note info flat"><p>The order of obtaining the article cover: <code>Front-matter cover</code> &gt;<code>default_cover in the configuration file</code> &gt; <code>false</code></p></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">cover:</span></span><br><span class="line">  <span class="comment"># Whether to display the article cover</span></span><br><span class="line">  <span class="attr">index_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">aside_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">archives_enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">default_cover:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>index_enable</td><td>Whether to display the article cover on the homepage</td></tr><tr><td>aside_enable</td><td>Whether to display the article cover in the aside</td></tr><tr><td>archives_enable</td><td>Whether to display the article cover on the archive page</td></tr><tr><td>default_cover</td><td>Default cover, can configure image link&#x2F;color&#x2F;gradient color etc.</td></tr></tbody></table><p>When multiple images are configured, one will be randomly selected as the cover. The configuration should be written as</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">default_cover:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg.png</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg2.png</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg3.png</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-cover.png" alt="hexo-theme-butterfly-doc-post-cover.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-cover-show.png" alt="hexo-theme-butterfly-doc-post-cover-show.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-cover-false.png" alt="hexo-theme-butterfly-docs-cover-false.png"></p><h2 id="Page-Meta-Display"><a href="#Page-Meta-Display" class="headerlink" title="Page Meta Display"></a>Page Meta Display</h2><p>This option is used to display related information about the article.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_meta:</span></span><br><span class="line">  <span class="comment"># Home Page</span></span><br><span class="line">  <span class="attr">page:</span></span><br><span class="line">    <span class="comment"># Choose: created / updated / both</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">created</span></span><br><span class="line">    <span class="comment"># Choose: date / relative</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">post:</span></span><br><span class="line">    <span class="comment"># Choose: left / center</span></span><br><span class="line">    <span class="attr">position:</span> <span class="string">left</span></span><br><span class="line">    <span class="comment"># Choose: created / updated / both</span></span><br><span class="line">    <span class="attr">date_type:</span> <span class="string">both</span></span><br><span class="line">    <span class="comment"># Choose: date / relative</span></span><br><span class="line">    <span class="attr">date_format:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">categories:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tags:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">label:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>Home Page：</p><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>date_type</td><td>Displays the article&#39;s time, options: created &#x2F; updated &#x2F; both</td></tr><tr><td>date_format</td><td>Configures whether to show the exact time or relative time, options: date &#x2F; relative</td></tr><tr><td>categories</td><td>Whether to display the article&#39;s categories</td></tr><tr><td>tags</td><td>Whether to display the article&#39;s tags</td></tr><tr><td>label</td><td>Whether to display text labels</td></tr></tbody></table><p>Post：</p><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>position</td><td>Position of the article page meta display, options: left &#x2F; center</td></tr><tr><td>date_type</td><td>Displays the article&#39;s time, options: created &#x2F; updated &#x2F; both</td></tr><tr><td>date_format</td><td>Configures whether to show the exact time or relative time, options: date &#x2F; relative</td></tr><tr><td>categories</td><td>Whether to display the article&#39;s categories</td></tr><tr><td>tags</td><td>Whether to display the article&#39;s tags</td></tr><tr><td>label</td><td>Whether to display text labels</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Home Page</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-page-meta.png" alt="hexo-theme-butterfly-docs-page-meta.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Post</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-info.png" alt="hexo-theme-butterfly-doc-post-info.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-tag.png" alt="hexo-theme-butterfly-doc-post-tag.png"></p><p><code>date_format</code> is a new feature in version 3.2.0, allowing configuration of displaying exact or relative time.</p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Relative Time</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-relative-time.png" alt="theme-butterfly-docs-relative-time.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Exact Time</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/theme-butterfly-docs-full-date.png" alt="theme-butterfly-docs-full-date.png"></p><h2 id="Home-Page"><a href="#Home-Page" class="headerlink" title="Home Page"></a>Home Page</h2><h3 id="Home-Page-Top-Image-Size"><a href="#Home-Page-Top-Image-Size" class="headerlink" title="Home Page Top Image Size"></a>Home Page Top Image Size</h3><p>By default, the display is full-screen, and site information is centered.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Home page settings</span></span><br><span class="line"><span class="comment"># Default top_img is full screen, site_info is centered</span></span><br><span class="line"><span class="comment"># No need to fill if using default (recommended)</span></span><br><span class="line"><span class="attr">index_site_info_top:</span>  <span class="comment"># Distance of home page title from top, e.g., 300px/300em/300rem/10%</span></span><br><span class="line"><span class="attr">index_top_img_height:</span>  <span class="comment"># Height of home page top_img, e.g., 300px/300em/300rem, percentage not allowed</span></span><br></pre></td></tr></table></figure><p>Note: The value of <code>index_top_img_height</code> cannot be a percentage. If both are not filled, default values will be used.</p><p>Example: when</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index_top_img_height:</span> <span class="string">400px</span></span><br></pre></td></tr></table></figure><p>Effect:</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-index-top-img-setting.png" alt="hexo-theme-butterfly-doc-index-top-img-setting.png"></p><h3 id="Website-Subtitle"><a href="#Website-Subtitle" class="headerlink" title="Website Subtitle"></a>Website Subtitle</h3><p>Set a subtitle or favorite motto to display on the home page.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Home page subtitle</span></span><br><span class="line"><span class="attr">subtitle:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Typewriter Effect</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Customize typed.js</span></span><br><span class="line">  <span class="comment"># https://github.com/mattboldt/typed.js/#customization</span></span><br><span class="line">  <span class="attr">typed_option:</span></span><br><span class="line">  <span class="comment"># source: call third-party service</span></span><br><span class="line">  <span class="comment"># false: disable</span></span><br><span class="line">  <span class="comment"># 1: call a sentence from hitokoto.cn (simplified Chinese)</span></span><br><span class="line">  <span class="comment"># 2: call yijuzhan.com (simplified Chinese)</span></span><br><span class="line">  <span class="comment"># 3: call jinrishici.com (simplified Chinese)</span></span><br><span class="line">  <span class="comment"># subtitle will first display source, then sub content</span></span><br><span class="line">  <span class="attr">source:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># If typewriter effect is off, subtitle will only display the first line of sub</span></span><br><span class="line">  <span class="attr">sub:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">Never</span> <span class="string">put</span> <span class="string">off</span> <span class="string">till</span> <span class="string">tomorrow</span> <span class="string">what</span> <span class="string">you</span> <span class="string">can</span> <span class="string">do</span> <span class="string">today</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-index-subtitle.gif" alt="hexo-theme-butterfly-doc-index-subtitle.gif"></p><h3 id="Home-Page-Card-Layout"><a href="#Home-Page-Card-Layout" class="headerlink" title="Home Page Card Layout"></a>Home Page Card Layout</h3><p>The theme supports seven types of card layouts for the home page</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index_layout:</span> <span class="number">3</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>配置值</th><th>解釋</th></tr></thead><tbody><tr><td>1</td><td>Cover on the left, info on the right</td></tr><tr><td>2</td><td>Cover on the right, info on the left</td></tr><tr><td>3</td><td>Cover and info alternate between left and right</td></tr><tr><td>4</td><td>Cover on top, info on the bottom</td></tr><tr><td>5</td><td>Info displayed on the cover</td></tr><tr><td>6</td><td>Masonry layout - Cover on top, info on the bottom</td></tr><tr><td>7</td><td>Masonry layout - Info displayed on the cover</td></tr></tbody></table><p>Just fill in the <code>number</code>, the default is 3</p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>1: Cover on the left, info on the right</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-1.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>2: Cover on the right, info on the left</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-2.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>3: Cover and info alternate between left and right</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-3.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>4: Cover on top, info on the bottom</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-4.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>5: Info displayed on the cover</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-5.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>6: Masonry layout - Cover on top, info on the bottom</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/10/butterfy-docs-index-layout-6.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>7: Masonry layout - Info displayed on the cover</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/10/butterfly-docs-index-layout-7.png"></p><h3 id="Home-Page-Article-Excerpts"><a href="#Home-Page-Article-Excerpts" class="headerlink" title="Home Page Article Excerpts"></a>Home Page Article Excerpts</h3><p>Due to the theme&#39;s UI, <code>home page article excerpts</code> only support <code>automatic excerpts</code> and <code>article description</code>.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Display the article introduction on homepage</span></span><br><span class="line"><span class="comment"># 1: description</span></span><br><span class="line"><span class="comment"># 2: both (if the description exists, it will show description, or show the auto_excerpt)</span></span><br><span class="line"><span class="comment"># 3: auto_excerpt (default)</span></span><br><span class="line"><span class="comment"># false: do not show the article introduction</span></span><br><span class="line"><span class="attr">index_post_content:</span></span><br><span class="line">  <span class="attr">method:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># If you set method to 2 or 3, the length need to config</span></span><br><span class="line">  <span class="attr">length:</span> <span class="number">500</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>method</td><td>Method to display article content, four options available <br> 1 - Display only description <br> 2 - Prefer description, if not configured, display auto excerpt <br> 3 - Display only auto excerpt <br> 4 - Do not display article content</td></tr><tr><td>length</td><td>Length of the auto excerpt, only needs to be configured when method is 2 or 3</td></tr></tbody></table><p>Add <code>description</code> in front-matter:</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-description.png" alt="hexo-theme-butterfly-doc-post-description.png"></p><h2 id="Article-Page"><a href="#Article-Page" class="headerlink" title="Article Page"></a>Article Page</h2><h3 id="TOC-Table-of-Contents"><a href="#TOC-Table-of-Contents" class="headerlink" title="TOC (Table of Contents)"></a>TOC (Table of Contents)</h3><p>Display TOC (Table of Contents) in the aside.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">toc:</span></span><br><span class="line">  <span class="attr">post:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">page:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">expand:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Only for post</span></span><br><span class="line">  <span class="attr">style_simple:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">scroll_percent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Attribute</th><th>Explanation</th></tr></thead><tbody><tr><td>post</td><td>Whether to display TOC in article pages</td></tr><tr><td>page</td><td>Whether to display TOC in regular pages</td></tr><tr><td>number</td><td>Whether to show section numbers</td></tr><tr><td>expand</td><td>Whether to expand the TOC</td></tr><tr><td>style_simple</td><td>Simple mode (aside <strong>only</strong> shows TOC, only for articles)</td></tr><tr><td>scroll_percent</td><td>Whether to show scroll progress percentage</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Toc PC</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-toc-pc.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Toc Mobile</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-mobile.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>style_simple: true</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-toc-simple.png"></p><h4 id="Configuring-for-Specific-Articles"><a href="#Configuring-for-Specific-Articles" class="headerlink" title="Configuring for Specific Articles"></a>Configuring for Specific Articles</h4><p>Add <code>toc_number</code> and <code>toc</code> at the top of your article&#39;s <code>md</code> file, and set them to <code>true</code> or <code>false</code>.</p><p>The theme will prioritize the Front-matter configuration of the article&#39;s Markdown file. If not configured, it will use the configuration in the <strong>theme configuration file</strong>.</p><h3 id="Article-Copyright"><a href="#Article-Copyright" class="headerlink" title="Article Copyright"></a>Article Copyright</h3><p>Display copyright and license information for your blog articles.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_copyright:</span></span><br><span class="line">  <span class="comment"># Enable copyright declaration</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># URL decode</span></span><br><span class="line">  <span class="attr">decode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Author link</span></span><br><span class="line">  <span class="attr">author_href:</span></span><br><span class="line">  <span class="comment"># License type</span></span><br><span class="line">  <span class="attr">license:</span> <span class="string">CC</span> <span class="string">BY-NC-SA</span> <span class="number">4.0</span></span><br><span class="line">  <span class="comment"># License link</span></span><br><span class="line">  <span class="attr">license_url:</span> <span class="string">https://creativecommons.org/licenses/by-nc-sa/4.0/</span></span><br></pre></td></tr></table></figure><p>Since <code>Hexo 4.1</code>, URLs are decoded by default, so Chinese URLs will be decoded. Set <code>decode: true</code> to display Chinese URLs.</p><p>If some articles (e.g., reprints) do not need to display copyright, you can set it individually in the article&#39;s Front-matter:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">copyright:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>From version <code>3.0.0</code>, individual articles can have their own copyright information. Set it individually in the article&#39;s Front-matter:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">copyright<span class="emphasis">_author: xxxx</span></span><br><span class="line"><span class="emphasis">copyright_</span>author<span class="emphasis">_href: https://xxxxxx.com</span></span><br><span class="line"><span class="emphasis">copyright_</span>url: https://xxxxxx.com</span><br><span class="line">copyright<span class="emphasis">_info: 此文章版權歸 xxxxx 所有，如有轉載，請註明來自原作者</span></span><br></pre></td></tr></table></figure><p><strong>Copyright Display Screenshot</strong></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-copyright.png"></p><h3 id="Article-Donations-Sponsorship"><a href="#Article-Donations-Sponsorship" class="headerlink" title="Article Donations&#x2F;Sponsorship"></a>Article Donations&#x2F;Sponsorship</h3><p>At the end of each of your articles, you can add a donation button. You can configure the relevant QR codes yourself.</p><p>For those who haven&#39;t provided QR codes, you can configure an icon image for software and add the corresponding donation link. When users click the image, they&#39;ll be redirected to the link.</p><p>The link can be omitted, and it will default to the image link.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">reward:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">  <span class="attr">QR_code:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/img/wechat.jpg</span></span><br><span class="line">      <span class="attr">link:</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">WeChat</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">img:</span> <span class="string">/img/alipay.jpg</span></span><br><span class="line">      <span class="attr">link:</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">Alipay</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-donate.png"></p><h3 id="Article-Edit-Button"><a href="#Article-Edit-Button" class="headerlink" title="Article Edit Button"></a>Article Edit Button</h3><p>Display an edit button next to the article title. When clicked, it will redirect to the corresponding link.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Post edit</span></span><br><span class="line"><span class="comment"># Easily browse and edit blog source code online.</span></span><br><span class="line"><span class="attr">post_edit:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/</span></span><br><span class="line">  <span class="comment"># For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/</span></span><br><span class="line">  <span class="attr">url:</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-post-edit.png" alt="hexo-theme-butterfly-docs-post-edit.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-post-edit-2.png" alt="hexo-theme-butterfly-docs-post-edit-2.png"></p><h3 id="Related-Articles"><a href="#Related-Articles" class="headerlink" title="Related Articles"></a>Related Articles</h3><div class="note warning flat"><p>When the article cover is set to false or no cover configuration is available, the background for related articles will display the theme color.</p></div><p>The related articles recommendation is based on the tags associated with each article.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">related_post:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">6</span> <span class="comment"># Display the number of recommended articles</span></span><br><span class="line">  <span class="attr">date_type:</span> <span class="string">created</span> <span class="comment"># or created or updated (display creation date or update date)</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-releatedpost.png"></p><h3 id="Article-Pagination-Buttons"><a href="#Article-Pagination-Buttons" class="headerlink" title="Article Pagination Buttons"></a>Article Pagination Buttons</h3><div class="note warning flat"><p>When the article cover is set to false or no cover configuration is available, the background for pagination will display the theme color.</p></div><p>You can configure the logic for pagination or disable pagination display altogether.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># post_pagination</span></span><br><span class="line"><span class="comment"># value: 1 || 2 || false</span></span><br><span class="line"><span class="comment"># 1: The &#x27;next post&#x27; will link to old post</span></span><br><span class="line"><span class="comment"># 2: The &#x27;next post&#x27; will link to new post</span></span><br><span class="line"><span class="comment"># false: disable pagination</span></span><br><span class="line"><span class="attr">post_pagination:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>post_pagination: false</td><td>Disable pagination buttons</td></tr><tr><td>post_pagination: 1</td><td>Next post links to older post</td></tr><tr><td>post_pagination: 2</td><td>Next post links to newer post</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-post-pagination.png"></p><h3 id="Outdated-Article-Reminder"><a href="#Outdated-Article-Reminder" class="headerlink" title="Outdated Article Reminder"></a>Outdated Article Reminder</h3><div class="note warning flat"><p>if you want to close the out-of-date reminder for certain articles, you can configure <code>noticeOutdate: false</code> in the corresponding article&#39;s <code>front-matter</code> to close it individually.</p></div><p>You can choose to display an outdated notice for articles based on their update time.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Displays outdated notice for a post</span></span><br><span class="line"><span class="attr">noticeOutdate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Style: simple / flat</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">flat</span></span><br><span class="line">  <span class="comment"># When will it be shown</span></span><br><span class="line">  <span class="attr">limit_day:</span> <span class="number">365</span></span><br><span class="line">  <span class="comment"># Position: top / bottom</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">top</span></span><br><span class="line">  <span class="attr">message_prev:</span> <span class="string">It</span> <span class="string">has</span> <span class="string">been</span></span><br><span class="line">  <span class="attr">message_next:</span> <span class="string">days</span> <span class="string">since</span> <span class="string">the</span> <span class="string">last</span> <span class="string">update,</span> <span class="string">the</span> <span class="string">content</span> <span class="string">of</span> <span class="string">the</span> <span class="string">article</span> <span class="string">may</span> <span class="string">be</span> <span class="string">outdated.</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Configuration</th><th>Explanation</th></tr></thead><tbody><tr><td>enable</td><td>Enable article outdated notice</td></tr><tr><td>style</td><td>Notice style: simple &#x2F; flat</td></tr><tr><td>limit_day</td><td>Set how many days before the notice appears (default: 365 days)</td></tr><tr><td>position</td><td>Notice position: top &#x2F; bottom</td></tr><tr><td>message_prev</td><td>Custom message (prefix)</td></tr><tr><td>message_next</td><td>Custom message (suffix)</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>style: flat</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butteffly-docs-outdate-flat.png" alt="hexo-theme-butteffly-docs-outdate-flat.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>style: simple</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-outdated-simple.png" alt="hexo-theme-butterfly-docs-outdated-simple.png"></p><h2 id="Footer"><a href="#Footer" class="headerlink" title="Footer"></a>Footer</h2><h3 id="Footer-Navigation-Bar"><a href="#Footer-Navigation-Bar" class="headerlink" title="Footer Navigation Bar"></a>Footer Navigation Bar</h3><p>The footer navigation bar can be configured to display at the top of the footer, or not displayed at all.</p><blockquote><p>You can configure it or leave it empty.<br>If left empty, the old version of the footer will be shown.</p></blockquote><p>Example configuration:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">nav:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">width:</span></span><br><span class="line">    <span class="attr">content:</span></span><br><span class="line">      <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Docs</span></span><br><span class="line">        <span class="attr">item:</span></span><br><span class="line">          <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">🚀</span> <span class="string">Get</span> <span class="string">Started</span></span><br><span class="line">            <span class="attr">url:</span> <span class="string">/posts/21cfbf15/</span></span><br><span class="line">          <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">📑</span> <span class="string">Theme</span> <span class="string">Pages</span></span><br><span class="line">            <span class="attr">url:</span> <span class="string">/posts/dc584b87/</span></span><br><span class="line">          <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">📌</span> <span class="string">Theme</span> <span class="string">Configuration</span></span><br><span class="line">            <span class="attr">url:</span> <span class="string">/posts/4aa8abbe/</span></span><br><span class="line">          <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">⚔️</span> <span class="string">Tag</span> <span class="string">Plugins</span></span><br><span class="line">            <span class="attr">url:</span> <span class="string">/posts/ceeb73f/</span></span><br><span class="line">          <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">❓</span> <span class="string">Q&amp;A</span></span><br><span class="line">            <span class="attr">url:</span> <span class="string">/posts/98d20436/</span></span><br><span class="line">          <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">⚡️</span> <span class="string">Advanced</span> <span class="string">Tutorials</span></span><br><span class="line">            <span class="attr">url:</span> <span class="string">/posts/4073eda/</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">content:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Others</span></span><br><span class="line">      <span class="attr">item:</span></span><br><span class="line">        <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Gallery</span></span><br><span class="line">          <span class="attr">url:</span> <span class="string">/Gallery/</span></span><br><span class="line">        <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Message</span> <span class="string">Board</span></span><br><span class="line">          <span class="attr">url:</span> <span class="string">/messageboard/</span></span><br><span class="line">        <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Talking</span></span><br><span class="line">          <span class="attr">url:</span> <span class="string">/talking/</span></span><br><span class="line">        <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Example</span></span><br><span class="line">          <span class="attr">url:</span> <span class="string">/link/</span></span><br><span class="line">        <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Friends</span></span><br><span class="line">          <span class="attr">url:</span> <span class="string">/links/</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">content:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Framework</span></span><br><span class="line">      <span class="attr">item:</span></span><br><span class="line">        <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Hexo</span></span><br><span class="line">          <span class="attr">url:</span> <span class="string">https://hexo.io/</span></span><br><span class="line">        <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Butterfly</span></span><br><span class="line">          <span class="attr">url:</span> <span class="string">https://butterfly.js.org/</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">content:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Sponsor</span></span><br><span class="line">      <span class="attr">item:</span></span><br><span class="line">        <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">Alipay</span></span><br><span class="line">          <span class="attr">url:</span> <span class="string">https://jsd.012700.xyz/gh/jerryc127/CDN/Photo/alipay.jpg</span></span><br><span class="line">          <span class="attr">html:</span> <span class="string">&quot;&lt;img src=&#x27;https://jsd.012700.xyz/gh/jerryc127/CDN/Photo/alipay.jpg&#x27; alt=&#x27;JerryC&#x27; width=&#x27;100px&#x27; height=&#x27;100px&#x27;&gt;&quot;</span></span><br></pre></td></tr></table></figure><p>Configuration explanation</p><table><thead><tr><th>Option</th><th>Description</th></tr></thead><tbody><tr><td>width</td><td>Set the width, recommended to leave unset (optional)</td></tr><tr><td>content</td><td>Content of the footer navigation bar, supports multiple sections, each with multiple items</td></tr><tr><td>title</td><td>Title of the footer navigation bar section</td></tr><tr><td>item</td><td>Items in the footer navigation bar, supports multiple items, each with a title and link</td></tr><tr><td>title</td><td>Title of the navigation item</td></tr><tr><td>url</td><td>Link of the navigation item</td></tr><tr><td>html</td><td>HTML content for the navigation item, supports images and other content</td></tr></tbody></table><h3 id="Blog-Start-Year"><a href="#Blog-Start-Year" class="headerlink" title="Blog Start Year"></a>Blog Start Year</h3><p>The <code>since</code> option displays the starting year of your site. It appears at the bottom of the page.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">footer:</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">since:</span> <span class="number">2018</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-since.png" alt="hexo-theme-butterfly-doc-since.png"></p><h3 id="Custom-Footer-Text"><a href="#Custom-Footer-Text" class="headerlink" title="Custom Footer Text"></a>Custom Footer Text</h3><p>The <code>custom_text</code> option allows you to add custom text to the footer. You can use HTML here to write statements or other content.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">custom_text:</span> <span class="string">Hi,</span> <span class="string">welcome</span> <span class="string">to</span> <span class="string">my</span> <span class="string">&lt;a</span> <span class="string">href=&quot;https://butterfly.js.org/&quot;&gt;blog&lt;/a&gt;!</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-footer-text.png" alt="hexo-theme-butterfly-doc-footer-text.png"></p><p>For those who need to include an ICP (Internet Content Provider) number, you can also add it within the <code>custom_text</code>:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">custom_text:</span> <span class="string">&lt;a</span> <span class="string">href=&quot;ICP</span> <span class="string">link&quot;&gt;&lt;img</span> <span class="string">class=&quot;icp-icon&quot;</span> <span class="string">src=&quot;ICP</span> <span class="string">image&quot;&gt;&lt;span&gt;Record</span> <span class="string">Number：xxxxxx&lt;/span&gt;&lt;/a&gt;</span></span><br></pre></td></tr></table></figure><h2 id="Aside"><a href="#Aside" class="headerlink" title="Aside"></a>Aside</h2><h3 id="Aside-Configuration"><a href="#Aside-Configuration" class="headerlink" title="Aside Configuration"></a>Aside Configuration</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">aside:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hide:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Show the button to hide the aside in bottom right button</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Position: left / right</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">right</span></span><br><span class="line">  <span class="attr">display:</span></span><br><span class="line">    <span class="attr">archive:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">tag:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">category:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_author:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">description:</span></span><br><span class="line">    <span class="attr">button:</span></span><br><span class="line">      <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">fab</span> <span class="string">fa-github</span></span><br><span class="line">      <span class="attr">text:</span> <span class="string">Follow</span> <span class="string">Me</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://github.com/xxxxxx</span></span><br><span class="line">  <span class="attr">card_announcement:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">content:</span> <span class="string">This</span> <span class="string">is</span> <span class="string">my</span> <span class="string">Blog</span></span><br><span class="line">  <span class="attr">card_recent_post:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">5</span></span><br><span class="line">    <span class="comment"># Sort: date / updated</span></span><br><span class="line">    <span class="attr">sort:</span> <span class="string">date</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_newest_comments:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">6</span></span><br><span class="line">    <span class="comment"># Unit: mins, save data to localStorage</span></span><br><span class="line">    <span class="attr">storage:</span> <span class="number">10</span></span><br><span class="line">    <span class="attr">avatar:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">card_categories:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span></span><br><span class="line">    <span class="comment"># Choose: none / true / false</span></span><br><span class="line">    <span class="attr">expand:</span> <span class="string">none</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_tags:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">40</span></span><br><span class="line">    <span class="attr">color:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># Order of tags, random/name/length</span></span><br><span class="line">    <span class="attr">orderby:</span> <span class="string">random</span></span><br><span class="line">    <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">1</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_archives:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># Type: monthly / yearly</span></span><br><span class="line">    <span class="attr">type:</span> <span class="string">monthly</span></span><br><span class="line">    <span class="comment"># Eg: YYYY年MM月</span></span><br><span class="line">    <span class="attr">format:</span> <span class="string">MMMM</span> <span class="string">YYYY</span></span><br><span class="line">    <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line">    <span class="comment"># If set 0 will show all</span></span><br><span class="line">    <span class="attr">limit:</span> <span class="number">8</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">  <span class="attr">card_post_series:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="comment"># The title shows the series name</span></span><br><span class="line">    <span class="attr">series_title:</span> <span class="literal">false</span></span><br><span class="line">    <span class="comment"># Order by title or date</span></span><br><span class="line">    <span class="attr">orderBy:</span> <span class="string">&#x27;date&#x27;</span></span><br><span class="line">    <span class="comment"># Sort of order. 1, asc for ascending; -1, desc for descending</span></span><br><span class="line">    <span class="attr">order:</span> <span class="number">-1</span></span><br><span class="line">  <span class="attr">card_webinfo:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">post_count:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">last_push_date:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">sort_order:</span></span><br><span class="line">    <span class="comment"># Time difference between publish date and now</span></span><br><span class="line">    <span class="comment"># Formal: Month/Day/Year Time or Year/Month/Day Time</span></span><br><span class="line">    <span class="comment"># Leave it empty if you don&#x27;t enable this feature</span></span><br><span class="line">    <span class="attr">runtime_date:</span></span><br></pre></td></tr></table></figure><div class="note info flat"><p><code>sort_order</code> is used to configure the order of each card. If not configured, it will follow the order in the theme configuration file. The smaller the number, the higher its position.</p></div><table><thead><tr><th>Configuration</th><th>Explanation</th></tr></thead><tbody><tr><td>enable</td><td>Whether to enable the sidebar</td></tr><tr><td>hide</td><td>Whether to hide the sidebar by default</td></tr><tr><td>button</td><td>Whether to show the button to hide&#x2F;show the sidebar</td></tr><tr><td>mobile</td><td>Whether to display the sidebar on mobile devices</td></tr><tr><td>position</td><td>Sidebar position, left &#x2F; right</td></tr><tr><td>display.archive</td><td>Whether to display aside on the archive page</td></tr><tr><td>display.tag</td><td>Whether to display aside on the tag page</td></tr><tr><td>display.category</td><td>Whether to display aside on the category page</td></tr><tr><td>card_author.enable</td><td>Whether to display the author card</td></tr><tr><td>card_author.description</td><td>Author description information</td></tr><tr><td>card_author.button.enable</td><td>Whether to display the button</td></tr><tr><td>card_author.button.icon</td><td>Button icon, you can find the icon name here: <a href="https://fontawesome.com/icons?d=gallery&m=free">https://fontawesome.com/icons?d=gallery&amp;m=free</a></td></tr><tr><td>card_author.button.text</td><td>Button text</td></tr><tr><td>card_author.button.link</td><td>Button link</td></tr><tr><td>card_announcement.enable</td><td>Whether to display the announcement card</td></tr><tr><td>card_announcement.content</td><td>Announcement content (HTML tags can be used)</td></tr><tr><td>card_recent_post.enable</td><td>Whether to display the recent posts card</td></tr><tr><td>card_recent_post.limit</td><td>Number of posts to display, 0 for all</td></tr><tr><td>card_recent_post.sort</td><td>Sorting method, date &#x2F; updated</td></tr><tr><td>card_newest_comments.enable</td><td>Whether to display the newest comments card</td></tr><tr><td>card_newest_comments.limit</td><td>Number of comments to display, 0 for all</td></tr><tr><td>card_newest_comments.storage</td><td>Storage time in minutes, saved to local storage to avoid re-fetching data on every refresh</td></tr><tr><td>card_newest_comments.avatar</td><td>Whether to display avatars</td></tr><tr><td>card_categories.enable</td><td>Whether to display the categories card</td></tr><tr><td>card_categories.limit</td><td>Number of categories to display, 0 for all</td></tr><tr><td>card_categories.expand</td><td>Whether to expand categories, none &#x2F; true &#x2F; false</td></tr><tr><td>card_tags.enable</td><td>Whether to display the tags card</td></tr><tr><td>card_tags.limit</td><td>Number of tags to display, 0 for all</td></tr><tr><td>card_tags.color</td><td>Whether to display tag colors</td></tr><tr><td>card_tags.orderby</td><td>Tag sorting method, random &#x2F; name &#x2F; length</td></tr><tr><td>card_tags.order</td><td>Sorting method, 1 for ascending, -1 for descending</td></tr><tr><td>card_archives.enable</td><td>Whether to display the archives card</td></tr><tr><td>card_archives.type</td><td>Archive type, monthly &#x2F; yearly</td></tr><tr><td>card_archives.format</td><td>Archive display format, e.g., YYYY年MM月</td></tr><tr><td>card_archives.order</td><td>Sorting method, 1 for ascending, -1 for descending</td></tr><tr><td>card_archives.limit</td><td>Number of archives to display, 0 for all</td></tr><tr><td>card_post_series.enable</td><td>Whether to display the post series card</td></tr><tr><td>card_post_series.series_title</td><td>Whether to display the series name</td></tr><tr><td>card_post_series.orderBy</td><td>Sorting method, title &#x2F; date</td></tr><tr><td>card_post_series.order</td><td>Sorting method, 1 for ascending, -1 for descending</td></tr><tr><td>card_webinfo.enable</td><td>Whether to display the website info card</td></tr><tr><td>card_webinfo.post_count</td><td>Whether to display the number of posts</td></tr><tr><td>card_webinfo.last_push_date</td><td>Whether to display the last update date</td></tr><tr><td>card_webinfo.runtime_date</td><td>Display the website runtime, no need to enable, leave blank (if enabled, the format must be Month&#x2F;Day&#x2F;Year Time or Year&#x2F;Month&#x2F;Day Time)</td></tr></tbody></table><div class="note primary flat"><p>Currently, three comment systems - Livere, Facebook Comments, and Giscus do not support displaying the latest comments.</p><p>The latest comments are only loaded upon refreshing the page and do not update in real-time.</p><p>Due to API rate limits, to avoid excessive calls, the theme defaults to a storage duration of 10 minutes. This means, after a call, the data will be stored in localStorage, and refreshing the website within 10 minutes will only retrieve data from localStorage. After the 10-minute period, refreshing the page will call the API to load new data. (A <code>storage</code> configuration was added in version 3.6.0, allowing for custom cache duration settings.)</p></div><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>position: left</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-aside-left.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>position: right</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-aside-right.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>card_tags color: false</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-card-tags-color-false.png" alt="butterfly-docs-card-tags-color-false.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>card_tags color: true</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-card-tags-color-true.png" alt="butterfly-docs-card-tags-color-true.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>aside button</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-aside-button.gif"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>website runtime</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-runtime.png" alt="hexo-theme-butterfly-doc-runtime.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Newest Comments</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-newest-comment.png"></p><h3 id="Custom-Add-Aside-Widget"><a href="#Custom-Add-Aside-Widget" class="headerlink" title="Custom Add Aside Widget"></a>Custom Add Aside Widget</h3><a class="btn-beautify block green" href="/en/posts/ea33ab97/" title="Click to Visit"><i class="fas fa-lightbulb"></i><span>Click to Visit</span></a><h2 id="Bottom-Right-Buttons"><a href="#Bottom-Right-Buttons" class="headerlink" title="Bottom Right Buttons"></a>Bottom Right Buttons</h2><h3 id="Button-Position"><a href="#Button-Position" class="headerlink" title="Button Position"></a>Button Position</h3><p>When the chat service is enabled, the chat service button may cover the bottom right buttons. You can set the position of these buttons. It&#39;s not recommended to adjust this unless necessary, the default is fine.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># The distance between the bottom right button and the bottom (default unit: px)</span></span><br><span class="line"><span class="attr">rightside_bottom:</span></span><br></pre></td></tr></table></figure><p>The default unit is px, just add the number directly.</p><h3 id="Simplified-and-Traditional-Chinese-Conversion"><a href="#Simplified-and-Traditional-Chinese-Conversion" class="headerlink" title="Simplified and Traditional Chinese Conversion"></a>Simplified and Traditional Chinese Conversion</h3><p>The theme has a built-in simple conversion function between Simplified and Traditional Chinese, using a one-to-one pairing. In cases of multiple Traditional characters for a single Simplified character or vice versa, correct conversion may not occur. Please be aware.</p><p>After enabling, there will be a Simplified&#x2F;Traditional conversion button at the bottom right.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">translate:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Default button display text (if the website is in Simplified Chinese, set as &#x27;default: Traditional&#x27;)</span></span><br><span class="line">  <span class="attr">default:</span> <span class="string">Simplified</span></span><br><span class="line">  <span class="comment"># Default website language, 1: Traditional Chinese, 2: Simplified Chinese</span></span><br><span class="line">  <span class="attr">defaultEncoding:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># Delay time, if not at the beginning, set a delay translation time, like 100 for 100ms, default is 0</span></span><br><span class="line">  <span class="attr">translateDelay:</span> <span class="number">0</span></span><br><span class="line">  <span class="comment"># Text displayed on the button when the text is in Simplified Chinese</span></span><br><span class="line">  <span class="attr">msgToTraditionalChinese:</span> <span class="string">&#x27;Traditional&#x27;</span></span><br><span class="line">  <span class="comment"># Text displayed on the button when the text is in Traditional Chinese</span></span><br><span class="line">  <span class="attr">msgToSimplifiedChinese:</span> <span class="string">&#x27;Simplified&#x27;</span></span><br></pre></td></tr></table></figure><h3 id="Reading-Mode"><a href="#Reading-Mode" class="headerlink" title="Reading Mode"></a>Reading Mode</h3><p>Reading mode removes content other than the article itself to avoid distractions during reading.</p><p>It only appears on article pages, with a reading mode button at the bottom right.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">readmode:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-read-mode.png"></p><h3 id="Dark-Mode"><a href="#Dark-Mode" class="headerlink" title="Dark Mode"></a>Dark Mode</h3><p>There will be a dark mode button at the bottom right.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># dark mode</span></span><br><span class="line"><span class="attr">darkmode:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">button:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">autoChangeMode:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18</span></span><br><span class="line">  <span class="attr">start:</span> <span class="comment"># 8</span></span><br><span class="line">  <span class="attr">end:</span> <span class="comment"># 22</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>button</td><td>Whether to display the day&#x2F;night mode switch button at the bottom right</td></tr><tr><td>autoChangeMode</td><td>The mode of automatic switching<br />autoChangeMode: 1 Changes according to the system, browsers&#x2F;systems that do not support this will switch to light mode between the start and end times<br />autoChangeMode: 2 Only switches to light mode between the start and end times, other times will be dark mode<br />autoChangeMode: false Cancels automatic switching</td></tr><tr><td>start</td><td>The start time for light mode</td></tr><tr><td>end</td><td>The end time for light mode</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-dark-mode-1.png" alt="hexo-theme-butterfly-doc-dark-mode-1.png"></p><h3 id="Scroll-Status-Percentage"><a href="#Scroll-Status-Percentage" class="headerlink" title="Scroll Status Percentage"></a>Scroll Status Percentage</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># show scroll percent in scroll-to-top button</span></span><br><span class="line"><span class="attr">rightside_scroll_percent:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/hexo-butterfly-docs-scroll-percent-right-btn.gif"></p><h3 id="Button-Sorting"><a href="#Button-Sorting" class="headerlink" title="Button Sorting"></a>Button Sorting</h3><p>You can sort the buttons at the bottom right corner.</p><p><strong>Note：</strong> Do not duplicate</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work</span></span><br><span class="line"><span class="comment"># Choose: readmode,translate,darkmode,hideAside,toc,chat,comment</span></span><br><span class="line"><span class="comment"># Don&#x27;t repeat</span></span><br><span class="line"><span class="attr">rightside_item_order:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">hide:</span> <span class="comment"># readmode,translate,darkmode,hideAside</span></span><br><span class="line">  <span class="attr">show:</span> <span class="comment"># toc,chat,comment</span></span><br></pre></td></tr></table></figure><h2 id="Global-Configuration"><a href="#Global-Configuration" class="headerlink" title="Global Configuration"></a>Global Configuration</h2><h3 id="Page-Anchors"><a href="#Page-Anchors" class="headerlink" title="Page Anchors"></a>Page Anchors</h3><p>When page anchors are enabled, the page link will be updated according to the header ID as you scroll.<br>(Note: Each update will leave a history record. So if an article has many anchors, the web page&#39;s history record will be extensive.)</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># anchor</span></span><br><span class="line"><span class="attr">anchor:</span></span><br><span class="line">  <span class="comment"># when you scroll, the URL will update according to header id.</span></span><br><span class="line">  <span class="attr">auto_update:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Click the headline to scroll and update the anchor</span></span><br><span class="line">  <span class="attr">click_to_scroll:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>auto_update</td><td>When scrolling, the URL will update according to the header ID. Default is <code>false</code>.</td></tr><tr><td>click_to_scroll</td><td>Click the headline to scroll and update the anchor. Default is <code>false</code>.</td></tr></tbody></table><h3 id="Image-Captions"><a href="#Image-Captions" class="headerlink" title="Image Captions"></a>Image Captions</h3><p>You can enable Figcaption to display image descriptions.</p><p>It will prioritize the title attribute of the image, followed by the alt attribute.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">photofigcaption:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-photo-figcaption.png"></p><h3 id="Copy-Configuration"><a href="#Copy-Configuration" class="headerlink" title="Copy Configuration"></a>Copy Configuration</h3><p>You can configure whether the website content can be copied and whether to add copyright information to the copied content.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">copy:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Add the copyright information after copied content</span></span><br><span class="line">  <span class="attr">copyright:</span></span><br><span class="line">    <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">    <span class="attr">limit_count:</span> <span class="number">150</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>enable</td><td>Whether to enable copy permissions for the website</td></tr><tr><td>copyright</td><td>Add copyright information after the copied content</td></tr><tr><td>enable</td><td>Whether to enable adding copyright information</td></tr><tr><td>limit_count</td><td>Word limit. When the copied text exceeds this limit, copyright information will be added to the copied content</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>After adding copyright information</p></div><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">Author: Jerry</span><br><span class="line">Link: http://localhost:4000/posts/bd3c650b/#Paragraph</span><br><span class="line">Source: Butterfly</span><br><span class="line">Copyright belongs to the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.</span><br></pre></td></tr></table></figure><h3 id="Word-Count"><a href="#Word-Count" class="headerlink" title="Word Count"></a>Word Count</h3><p>To enable the word count feature, you need to install the <code>hexo-wordcount</code> plugin.</p><p>Run <code>npm install hexo-wordcount --save</code> or <code>yarn add hexo-wordcount</code> in the hexo working directory.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Need to install the hexo-wordcount plugin</span></span><br><span class="line"><span class="attr">wordcount:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Display the word count of the article in post meta</span></span><br><span class="line">  <span class="attr">post_wordcount:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Display the time to read the article in post meta</span></span><br><span class="line">  <span class="attr">min2read:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Display the total word count of the website in aside&#x27;s webinfo</span></span><br><span class="line">  <span class="attr">total_wordcount:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>post_wordcount</td><td>Display the word count on the article page</td></tr><tr><td>min2read</td><td>Display the reading time on the article page</td></tr><tr><td>total_wordcount</td><td>Display the total word count of the website in the sidebar</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-word-count.png" alt="hexo-theme-butterfly-doc-word-count.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-wordcount-totalcount.png" alt="hexo-theme-butterfly-docs-wordcount-totalcount.png"></p><h3 id="Visitor-Count-UV-and-PV-by-busuanzi"><a href="#Visitor-Count-UV-and-PV-by-busuanzi" class="headerlink" title="Visitor Count (UV and PV) by busuanzi"></a>Visitor Count (UV and PV) by busuanzi</h3><p>Visit the <a href="http://busuanzi.ibruce.info/">official website of busuanzi</a> for more information.</p><p>Due to the stability issues of busuanzi, there may be occasional access problems. Please be aware.</p><div class="note info flat"><p>The visitor count on the article page is implemented through the busuanzi plugin. Some comment systems have their own visitor count feature, which can be enabled in the corresponding comment system configuration and will replace the busuanzi count.</p></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">busuanzi:</span></span><br><span class="line">  <span class="attr">site_uv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">site_pv:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">page_pv:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><div class="note info flat"><p>If you need to modify the CDN link of busuanzi, you can do so through the <code>option</code> in the <code>CDN</code> section of the <code>theme configuration file</code>.</p></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">CDN:</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">  <span class="attr">busuanzi:</span> <span class="string">xxxxxxxxx</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-busuanzi-site-pv.png" alt="hexo-theme-butterfly-doc-busuanzi-site-pv.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-pv.png" alt="hexo-theme-butterfly-doc-pv.png"></p><h2 id="Math"><a href="#Math" class="headerlink" title="Math"></a>Math</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">General Configuration</button><button type="button" class="tab">MathJax</button><button type="button" class="tab">KaTeX</button></div><div class="tab-contents"><div class="tab-item-content active"><p>The theme supports two math formula rendering engines, <code>MathJax</code> and <code>KaTeX</code>. You can choose one according to your needs.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># About the per_page</span></span><br><span class="line"><span class="comment"># if you set it to true, it will load mathjax/katex script in each page</span></span><br><span class="line"><span class="comment"># if you set it to false, it will load mathjax/katex script according to your setting (add the &#x27;mathjax: true&#x27; or &#x27;katex: true&#x27; in page&#x27;s front-matter)</span></span><br><span class="line"><span class="attr">math:</span></span><br><span class="line">  <span class="comment"># Choose: mathjax, katex</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need math</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hide_scrollbar:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>use</td><td>Choose the math formula rendering engine, select <code>mathjax</code> or <code>katex</code>. Leave it empty if you don&#39;t need math formulas.</td></tr><tr><td>per_page</td><td>Whether to load the math formula rendering engine on each page. If set to <code>false</code>, you need to add <code>mathjax: true</code> or <code>katex: true</code> in the article&#39;s <code>Front-matter</code> to load the math formula rendering engine for that article.</td></tr><tr><td>hide_scrollbar</td><td>Whether to hide the scrollbar</td></tr></tbody></table></div><div class="tab-item-content"><div class="note warning flat"><p>Do not use MathJax syntax in titles. The TOC may not display MathJax correctly and might show MathJax code instead.</p></div><div class="note info flat"><p>It is recommended to use KaTeX for better results, as introduced below!</p></div><p>To enable MathJax, set <code>use</code> to <code>mathjax</code>.</p><p>MathJax configuration file</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mathjax:</span></span><br><span class="line">  <span class="comment"># Enable the contextual menu</span></span><br><span class="line">  <span class="attr">enableMenu:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Choose: all / ams / none, This controls whether equations are numbered and how</span></span><br><span class="line">  <span class="attr">tags:</span> <span class="string">none</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>enableMenu</td><td>Enable the right-click menu</td></tr><tr><td>tags</td><td>Choose whether to number equations. <code>all</code> for numbering all, <code>ams</code> for numbering only equations, <code>none</code> for no numbering</td></tr></tbody></table><p>Before using MathJax, you need to uninstall Hexo&#39;s markdown renderer and then install <a href="https://www.npmjs.com/package/hexo-renderer-kramed">hexo-renderer-kramed</a>.</p><p>Perform the following operations in your Hexo blog directory (<strong>not the Butterfly directory</strong>):</p><ol><li><p>Install the plugin</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall hexo-renderer-marked --save</span><br><span class="line">npm install hexo-renderer-kramed --save</span><br></pre></td></tr></table></figure></li><li><p>Configure the Hexo root directory configuration file</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">kramed:</span></span><br><span class="line">  <span class="attr">gfm:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">pedantic:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">sanitize:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tables:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">breaks:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">smartLists:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">smartypants:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure></li></ol><p>Effect:</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-mathjax-2.jpg" alt="hexo-theme-butterfly-doc-mathjax-2.jpg"></p></div><div class="tab-item-content"><div class="note warning flat"><p>Do not use KaTeX syntax in titles. The TOC cannot display KaTeX correctly.</p></div><p>To enable KaTeX, set <code>use</code> to <code>katex</code>.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">katex:</span></span><br><span class="line">  <span class="comment"># Enable the copy KaTeX formula</span></span><br><span class="line">  <span class="attr">copy_tex:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>copy_tex</td><td>Enable the copy KaTeX formula function</td></tr></tbody></table><p>You do not need to add <code>katex.min.js</code> to render math equations. Instead, you need to uninstall your previous Hexo markdown renderer and then install other plugins.</p><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">hexo-renderer-markdown-it [Recommended]</button><button type="button" class="tab">hexo-renderer-markdown-it-plus</button></div><div class="tab-contents"><div class="tab-item-content active"><p>Uninstall the marked plugin and install <a href="https://github.com/hexojs/hexo-renderer-markdown-it">hexo-renderer-markdown-it</a>.</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm un hexo-renderer-marked --save <span class="comment"># If installed, uninstall it</span></span><br><span class="line">npm un hexo-renderer-kramed --save <span class="comment"># If installed, uninstall it</span></span><br><span class="line"></span><br><span class="line">npm i hexo-renderer-markdown-it --save <span class="comment"># Install this rendering plugin</span></span><br><span class="line">npm install katex @renbaoshuo/markdown-it-katex <span class="comment"># Install this KaTeX plugin</span></span><br></pre></td></tr></table></figure><p>Configure the Hexo root directory <code>_config.yml</code>.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">markdown:</span></span><br><span class="line">  <span class="attr">plugins:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&#x27;@renbaoshuo/markdown-it-katex&#x27;</span></span><br></pre></td></tr></table></figure><p>For other parameter configurations, please refer to the <a href="https://katex.org/docs/options.html">KaTeX official website</a>.</p></div><div class="tab-item-content"><div class="note warning flat"><p>Note: This method generates KaTeX without italics.</p></div><p>Uninstall the marked plugin and then install the new <code>hexo-renderer-markdown-it-plus</code>:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Replace `hexo-renderer-kramed` or `hexo-renderer-marked` and other Hexo markdown renderers</span></span><br><span class="line"><span class="comment"># You can find Hexo markdown renderers in your package.json and uninstall them</span></span><br><span class="line">npm un hexo-renderer-marked --save</span><br><span class="line"></span><br><span class="line"><span class="comment"># or</span></span><br><span class="line"></span><br><span class="line">npm un hexo-renderer-kramed --save</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment"># 然後安裝 `hexo-renderer-markdown-it-plus`</span></span><br><span class="line">npm i @upupming/hexo-renderer-markdown-it-plus --save</span><br></pre></td></tr></table></figure><p>Note that <a href="https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus"><code>hexo-renderer-markdown-it-plus</code></a> is no longer maintained, so we use <a href="https://github.com/upupming/hexo-renderer-markdown-it-plus"><code>@upupming/hexo-renderer-markdown-it-plus</code></a>. This fork uses <a href="https://github.com/yzhang-gh/markdown-it-katex"><code>@neilsustc/markdown-it-katex</code></a>, which is also used by the VSCode plugin <a href="https://github.com/yzhang-gh/vscode-markdown">Markdown All in One</a>, so we can get the latest KaTeX features such as <code>\tag{}</code>.</p><p>You can also control KaTeX settings through <a href="https://github.com/yzhang-gh/markdown-it-katex"><code>@neilsustc/markdown-it-katex</code></a>. All configurable options can be found at <a href="https://katex.org/docs/options.html">https://katex.org/docs/options.html</a>. For example, if you want to disable the lengthy warning messages output by KaTeX on the command line, you can use the following configuration in the root directory <code>_config.yml</code> to set <code>strict</code> to false:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">markdown_it_plus:</span></span><br><span class="line">  <span class="attr">plugins:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">plugin:</span></span><br><span class="line">      <span class="attr">name:</span> <span class="string">&#x27;@neilsustc/markdown-it-katex&#x27;</span></span><br><span class="line">      <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">options:</span></span><br><span class="line">        <span class="attr">strict:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>Of course, you can also use this feature to define some commonly used <code>macros</code>.</p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><p>Since KaTeX is faster and lighter, it does not have as many features as MathJax (such as the right-click menu). For those using MathJax, the theme also includes the <a href="https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex">copy</a> function of KaTeX.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-katex.gif"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Search"><a href="#Search" class="headerlink" title="Search"></a>Search</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">General Configuration</button><button type="button" class="tab"><i class="fab fa-algolia"></i>Algolia</button><button type="button" class="tab"><i class="fas fa-search"></i>Local Search</button><button type="button" class="tab"><i class="fas fa-search"></i>DocSearch</button></div><div class="tab-contents"><div class="tab-item-content active"><p>The theme supports three search methods (algolia_search &#x2F; local_search &#x2F; docsearch). You can choose one or multiple search methods.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="comment"># Choose: algolia_search / local_search / docsearch</span></span><br><span class="line">  <span class="comment"># leave it empty if you don&#x27;t need search</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="attr">placeholder:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>use</td><td>Choose the search method you need; leave it empty if not needed</td></tr><tr><td>placeholder</td><td>Placeholder text in the search box</td></tr></tbody></table></div><div class="tab-item-content"><div class="note warning flat"><p>Remember to run <code>hexo clean</code></p></div><div class="note warning flat"><p>If you use <a href="https://github.com/LouisBarranqueiro/hexo-algoliasearch">hexo-algoliasearch</a>, make sure to configure the fields parameter with <code>title</code>, <code>permalink</code>, and <code>content</code>.</p></div><ol><li><p>Install <a href="https://github.com/oncletom/hexo-algolia">hexo-algolia</a> or <a href="https://github.com/LouisBarranqueiro/hexo-algoliasearch">hexo-algoliasearch</a> and configure according to their documentation.</p></li><li><p>Set the <code>use</code> parameter in the theme configuration file to <code>algolia_search</code>.</p></li></ol><p>Additional configuration:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Algolia Search</span></span><br><span class="line"><span class="attr">algolia_search:</span></span><br><span class="line">  <span class="comment"># Number of search results per page</span></span><br><span class="line">  <span class="attr">hitsPerPage:</span> <span class="number">6</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>hitsPerPage</td><td>Number of search results per page</td></tr></tbody></table><ol start="3"><li>Run Hexo.</li></ol></div><div class="tab-item-content"><div class="note warning flat"><p>Remember to run <code>hexo clean</code></p></div><ol><li><p>Install <a href="https://github.com/next-theme/hexo-generator-searchdb">hexo-generator-searchdb</a> or <a href="https://github.com/PaicHyperionDev/hexo-generator-search">hexo-generator-search</a> and configure according to their documentation.</p></li><li><p>Set the <code>use</code> parameter in the theme configuration file to <code>local_search</code>.</p></li></ol><p>Additional configuration:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Local Search</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="comment"># Preload the search data when the page loads.</span></span><br><span class="line">  <span class="attr">preload:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Show top n results per article, show all results by setting to -1</span></span><br><span class="line">  <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># Unescape html strings to the readable one.</span></span><br><span class="line">  <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">CDN:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>preload</td><td>Preload search data on page load. If disabled, search data loads when the search button is clicked.</td></tr><tr><td>top_n_per_article</td><td>Number of matched results to show per article, default is 1</td></tr><tr><td>unescape</td><td>Unescape HTML strings to readable text</td></tr><tr><td>CDN</td><td>CDN URL for search data (default is local link)</td></tr></tbody></table></div><div class="tab-item-content"><p>DocSearch is another search service provided by Algolia. For detailed application and usage, refer to the <a href="https://docsearch.algolia.com/">DocSearch documentation</a>.</p><ol><li>Apply for <a href="https://docsearch.algolia.com/">DocSearch</a> and obtain your <code>appId</code>, <code>apiKey</code>, and <code>indexName</code>.</li><li>Set the <code>use</code> parameter in the theme configuration file to <code>docsearch</code>.</li></ol><p>Additional configuration:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"># Docsearch</span><br><span class="line"># https://docsearch.algolia.com/</span><br><span class="line">docsearch:</span><br><span class="line">  appId:</span><br><span class="line">  apiKey:</span><br><span class="line">  indexName:</span><br><span class="line">  option:</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>appId</td><td>[Required] Your Algolia application ID</td></tr><tr><td>apiKey</td><td>[Required] Your Algolia search API key</td></tr><tr><td>indexName</td><td>[Required] Your Algolia index name</td></tr><tr><td>option</td><td>[Optional] Additional DocSearch configuration. Refer to the <a href="https://docsearch.algolia.com/docs/api/">documentation</a> for details.</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-docsearch.png" alt="hexo-theme-butterfly-docs-docsearch.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Share"><a href="#Share" class="headerlink" title="Share"></a>Share</h2><div class="note warning flat"><p>Only one sharing service can be selected.</p></div><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Sharejs</button><button type="button" class="tab">Sharejs</button><button type="button" class="tab">Addtoany</button></div><div class="tab-contents"><div class="tab-item-content active"><p>The theme supports two sharing methods: <code>sharejs</code> and <code>addtoany</code>.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">share:</span></span><br><span class="line">  <span class="comment"># Choose: sharejs / addtoany</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need share</span></span><br><span class="line">  <span class="attr">use:</span> <span class="string">sharejs</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>use</td><td>Choose the sharing method: <code>sharejs</code> or <code>addtoany</code>. Leave it empty if sharing is not needed.</td></tr></tbody></table></div><div class="tab-item-content"><p>If you&#39;re not familiar with <a href="https://github.com/overtrue/share.js/">sharejs</a>, check out its documentation.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Share.js</span></span><br><span class="line"><span class="comment"># https://github.com/overtrue/share.js</span></span><br><span class="line"><span class="attr">sharejs:</span></span><br><span class="line">  <span class="attr">sites:</span> <span class="string">facebook,twitter,wechat,weibo,qq</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-sharejs.png" alt="hexo-theme-butterfly-doc-sharejs.png"></p></div><div class="tab-item-content"><p>Refer to <a href="https://www.addtoany.com/">addtoany</a> for usage instructions.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">addtoany:</span></span><br><span class="line">  <span class="attr">item:</span> <span class="string">facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-addtoany.png" alt="hexo-theme-butterfly-doc-addtoany.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Comments-System"><a href="#Comments-System" class="headerlink" title="Comments System"></a>Comments System</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">General Settings</button><button type="button" class="tab">Disqus</button><button type="button" class="tab">Disqusjs</button><button type="button" class="tab">livere（來必力）</button><button type="button" class="tab">Gitalk</button><button type="button" class="tab">Valine</button><button type="button" class="tab">Waline</button><button type="button" class="tab">Utterances</button><button type="button" class="tab">Facebook Comments</button><button type="button" class="tab">Twikoo</button><button type="button" class="tab">Giscus</button><button type="button" class="tab">Remark42</button><button type="button" class="tab">Artalk</button></div><div class="tab-contents"><div class="tab-item-content active"><p>The theme supports multiple comment systems. You can choose one according to your preference. You can also select dual comments by configuring two comment systems (the first one will be shown by default).</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">comments:</span></span><br><span class="line">  <span class="comment"># Up to two comments system, the first will be shown as default</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need comments</span></span><br><span class="line">  <span class="comment"># Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk</span></span><br><span class="line">  <span class="comment"># Format of two comments system : Disqus,Waline</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="comment"># Display the comment name next to the button</span></span><br><span class="line">  <span class="attr">text:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Lazyload: The comment system will be load when comment element enters the browser&#x27;s viewport.</span></span><br><span class="line">  <span class="comment"># If you set it to true, the comment count will be invalid</span></span><br><span class="line">  <span class="attr">lazyload:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Display comment count in post&#x27;s top_img</span></span><br><span class="line">  <span class="attr">count:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Display comment count in Home Page</span></span><br><span class="line">  <span class="attr">card_post_count:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>use</td><td>The comment system(s) to use (note: up to two systems, leave empty if not needed).<br><em>Note: Dual comments cannot be Disqus and Disqusjs together due to shared ID conflicts.</em></td></tr><tr><td>text</td><td>Whether to display the comment service name next to the button.</td></tr><tr><td>lazyload</td><td>Whether to enable lazyload for comments. If enabled, the comment resources will load only when the comment section enters the viewport (<em>comment count will not be displayed if lazyload is enabled</em>).</td></tr><tr><td>count</td><td>Whether to display the comment count at the top of the post.<br> Livere, Giscus, and Utterances do not support comment count display.</td></tr><tr><td>card_post_count</td><td>Whether to display the comment count on the homepage post cards.<br>Gitalk, Livere, Giscus, and Utterances do not support comment count display.</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Single Comment</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-single-comments.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Dual Comments</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-double-comments.png"></p></div><div class="tab-item-content"><p>Register on <a href="https://disqus.com/">Disqus</a>, configure your Disqus settings, and then enable it in the <code>Butterfly</code> theme.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">disqus:</span></span><br><span class="line">  <span class="attr">shortname:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>shortname</td><td>Your Disqus shortname. You can create it <a href="https://disqus.com/admin/create/">here</a>.</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-disqus.png"></p></div><div class="tab-item-content"><p>Similar to Disqus, but can be used to display comments when Disqus is inaccessible in mainland China. Refer to <a href="https://github.com/SukkaW/DisqusJS">Disqusjs</a> for details.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">disqusjs:</span></span><br><span class="line">  <span class="attr">shortname:</span></span><br><span class="line">  <span class="attr">apikey:</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>shortname</td><td>Your Disqus shortname. You can create it <a href="https://disqus.com/admin/create/">here</a>.</td></tr><tr><td>apikey</td><td>Your Disqus API Key. You can create it <a href="https://disqus.com/api/applications/">here</a>.</td></tr><tr><td>option</td><td>Optional configuration.</td></tr></tbody></table><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Display when Disqus is inaccessible</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-disqusjs.png"></p></div><div class="tab-item-content"><p>Register on <a href="https://livere.com/">Livere</a>, configure your Livere settings, and then enable it in the <code>Butterfly</code> theme.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">livere:</span></span><br><span class="line">  <span class="attr">uid:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>uid</td><td>Your Livere UID. You can create it <a href="https://livere.com/">here</a>.</td></tr></tbody></table><p>The Livere UID can be found here:</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-laibili.jpg" alt="hexo-theme-butterfly-doc-laibili.jpg"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-livere.png"></p></div><div class="tab-item-content"><p>Follow the <a href="https://github.com/gitalk/gitalk">Gitalk</a> instructions to obtain your GitHub OAuth application client ID and secret, and check the related configuration instructions.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">gitalk:</span></span><br><span class="line">  <span class="attr">client_id:</span></span><br><span class="line">  <span class="attr">client_secret:</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="attr">owner:</span></span><br><span class="line">  <span class="attr">admin:</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>client_id</td><td>GitHub application&#39;s client ID.</td></tr><tr><td>client_secret</td><td>GitHub application&#39;s client secret.</td></tr><tr><td>repo</td><td>The repo to store issues.</td></tr><tr><td>owner</td><td>The owner of the repo to store issues.</td></tr><tr><td>admin</td><td>The owner and collaborators of the GitHub repository (users with write permissions to the repository).</td></tr><tr><td>option</td><td>Optional configuration.</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-gitalk.png"></p></div><div class="tab-item-content"><p>Follow the <a href="https://github.com/xCss/Valine">Valine</a> instructions to configure your LeanCloud application and check the relevant configuration instructions.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">valine:</span></span><br><span class="line">  <span class="attr">appId:</span></span><br><span class="line">  <span class="attr">appKey:</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">monsterid</span></span><br><span class="line">  <span class="comment"># This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span></span><br><span class="line">  <span class="attr">serverURLs:</span></span><br><span class="line">  <span class="attr">bg:</span></span><br><span class="line">  <span class="comment"># Use Valine visitor count as the page view count</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>appId</td><td>The appId of your LeanCloud application.</td></tr><tr><td>appKey</td><td>The appKey of your LeanCloud application.</td></tr><tr><td>avatar</td><td>Avatar type, optional values: <code>&#39;&#39;</code>, <code>mp</code>, <code>identicon</code>, <code>monsterid</code>, <code>wavatar</code>, <code>retro</code>, <code>robohash</code>, <code>blank</code>, <code>404</code>.</td></tr><tr><td>serverURLs</td><td>Custom LeanCloud server address. If you use a custom domain in mainland China, please fill in this item, otherwise, leave it empty.</td></tr><tr><td>bg</td><td>Background image, can be an image URL like <code>https://example.com/bg.jpg</code>.</td></tr><tr><td>visitor</td><td>Whether to display the article read count.</td></tr><tr><td>option</td><td>Optional configuration.</td></tr></tbody></table><div class="note info flat"><p>When visitor is enabled, the article read count on the article page will be provided by Valine, not <strong>Busuanzi</strong>.</p></div><p>Valine supports custom emojis from v1.4.5. If you need to configure them, set the <code>emojiCDN</code> to your custom emoji CDN.</p><p>Also, create a JSON file <code>valine.json</code> in the <code>source/_data/</code> directory under your Hexo working directory, equivalent to Valine&#39;s <code>emojiMaps</code> configuration. The <code>valine.json</code> can be configured as follows:</p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>valine.json</p></div><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;tv_doge&quot;</span><span class="punctuation">:</span> <span class="string">&quot;6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_親親&quot;</span><span class="punctuation">:</span> <span class="string">&quot;a8111ad55953ef5e3be3327ef94eb4a39d535d06.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_偷笑&quot;</span><span class="punctuation">:</span> <span class="string">&quot;bb690d4107620f1c15cff29509db529a73aee261.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_再見&quot;</span><span class="punctuation">:</span> <span class="string">&quot;180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_冷漠&quot;</span><span class="punctuation">:</span> <span class="string">&quot;b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_發怒&quot;</span><span class="punctuation">:</span> <span class="string">&quot;34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_發財&quot;</span><span class="punctuation">:</span> <span class="string">&quot;34db290afd2963723c6eb3c4560667db7253a21a.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_可愛&quot;</span><span class="punctuation">:</span> <span class="string">&quot;9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_吐血&quot;</span><span class="punctuation">:</span> <span class="string">&quot;09dd16a7aa59b77baa1155d47484409624470c77.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_呆&quot;</span><span class="punctuation">:</span> <span class="string">&quot;fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_嘔吐&quot;</span><span class="punctuation">:</span> <span class="string">&quot;9f996894a39e282ccf5e66856af49483f81870f3.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_困&quot;</span><span class="punctuation">:</span> <span class="string">&quot;241ee304e44c0af029adceb294399391e4737ef2.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_壞笑&quot;</span><span class="punctuation">:</span> <span class="string">&quot;1f0b87f731a671079842116e0991c91c2c88645a.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_大佬&quot;</span><span class="punctuation">:</span> <span class="string">&quot;093c1e2c490161aca397afc45573c877cdead616.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_大哭&quot;</span><span class="punctuation">:</span> <span class="string">&quot;23269aeb35f99daee28dda129676f6e9ea87934f.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_委屈&quot;</span><span class="punctuation">:</span> <span class="string">&quot;d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_害羞&quot;</span><span class="punctuation">:</span> <span class="string">&quot;a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_尷尬&quot;</span><span class="punctuation">:</span> <span class="string">&quot;7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_微笑&quot;</span><span class="punctuation">:</span> <span class="string">&quot;70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_思考&quot;</span><span class="punctuation">:</span> <span class="string">&quot;90cf159733e558137ed20aa04d09964436f618a1.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;tv_驚嚇&quot;</span><span class="punctuation">:</span> <span class="string">&quot;0d15c7e2ee58e935adc6a7193ee042388adc22af.png&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-valine.png" alt="hexo-theme-butterfly-doc-valine.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>default_avatar</p></div><table><thead><tr><th>參數</th><th>效果</th></tr></thead><tbody><tr><td>empty（Default）</td><td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000"></td></tr><tr><td>mp</td><td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp"></td></tr><tr><td>identicon</td><td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon"></td></tr><tr><td>monsterid</td><td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=monsterid"></td></tr><tr><td>wavatar</td><td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=wavatar"></td></tr><tr><td>retro</td><td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=retro"></td></tr><tr><td>robohash</td><td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=robohash"></td></tr><tr><td>blank</td><td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=blank&f=y"></td></tr><tr><td>404</td><td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"></td></tr></tbody></table></div><div class="tab-item-content"><p>Waline is a comment system derived from Valine that includes backend support. You can consider Waline as &quot;With backend Valine&quot;.</p><p>Refer to the <a href="https://waline.js.org/">Waline documentation</a> for detailed configuration.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">waline:</span></span><br><span class="line">  <span class="attr">serverURL:</span> <span class="comment"># Waline server address url</span></span><br><span class="line">  <span class="attr">bg:</span> <span class="comment"># waline background</span></span><br><span class="line">  <span class="attr">pageview:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>serverURL</td><td>Waline server address</td></tr><tr><td>bg</td><td>Background image URL, e.g., <code>https://example.com/bg.jpg</code></td></tr><tr><td>pageview</td><td>Whether to show article view count</td></tr><tr><td>option</td><td>Optional configuration</td></tr></tbody></table><div class="note info flat"><p>When pageview is enabled, the article view count will be provided by Waline instead of <strong>Busuanzi</strong>.</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-valine.png" alt="hexo-theme-butterfly-doc-valine.png"></p></div><div class="tab-item-content"><p>Like Gitalk, Utterances is a comment tool based on GitHub issues but with relatively fewer permissions required. Refer to <a href="https://utteranc.es/">Utterances documentation</a> for details.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">utterances:</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="comment"># 可選 pathname/url/title/og:title</span></span><br><span class="line">  <span class="attr">issue_term:</span> <span class="string">pathname</span></span><br><span class="line">  <span class="comment"># 可選 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark</span></span><br><span class="line">  <span class="attr">light_theme:</span> <span class="string">github-light</span></span><br><span class="line">  <span class="attr">dark_theme:</span> <span class="string">photon-dark</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>repo</td><td>GitHub repository full name, e.g., <code>owner/repo</code></td></tr><tr><td>issue_term</td><td>Label used to identify issues, options: pathname&#x2F;url&#x2F;title&#x2F;og:title</td></tr><tr><td>light_theme</td><td>Light theme, options: <code>github-light</code>, <code>github-dark</code>, <code>github-dark-orange</code>, <code>icy-dark</code>, <code>dark-blue</code>, <code>photon-dark</code></td></tr><tr><td>dark_theme</td><td>Dark theme, options: <code>github-light</code>, <code>github-dark</code>, <code>github-dark-orange</code>, <code>icy-dark</code>, <code>dark-blue</code>, <code>photon-dark</code></td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-Utterances.png" alt="hexo-theme-butterfly-docs-Utterances.png"></p></div><div class="tab-item-content"><p><code>Facebook Comments</code> is a plugin provided by Facebook, requiring users to log in with Facebook to comment.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Facebook Comments Plugin</span></span><br><span class="line"><span class="comment"># https://developers.facebook.com/docs/plugins/comments/</span></span><br><span class="line"><span class="attr">facebook_comments:</span></span><br><span class="line">  <span class="attr">app_id:</span></span><br><span class="line">  <span class="comment"># optional</span></span><br><span class="line">  <span class="attr">user_id:</span></span><br><span class="line">  <span class="attr">pageSize:</span> <span class="number">10</span></span><br><span class="line">  <span class="comment"># Choose: social / time / reverse_time</span></span><br><span class="line">  <span class="attr">order_by:</span> <span class="string">social</span></span><br><span class="line">  <span class="attr">lang:</span> <span class="string">zh_TW</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>app_id</td><td>Facebook App ID, which can be created <a href="https://developers.facebook.com/apps/">here</a></td></tr><tr><td>user_id</td><td>Optional, Facebook User ID for managing comments</td></tr><tr><td>pageSize</td><td>Number of comments to display</td></tr><tr><td>order_by</td><td>Comment sorting method: social&#x2F;time&#x2F;reverse_time</td></tr><tr><td>lang</td><td>Language</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-butterfly-docs-facebook-comments.png" alt="hexo-butterfly-docs-facebook-comments.png"></p></div><div class="tab-item-content"><p><code>Twikoo</code> is a simple, secure, and serverless comment system for static websites, based on <a href="https://curl.qcloud.com/KnnJtUom">Tencent Cloud Development</a>.</p><p>For detailed configuration, please refer to the <a href="https://twikoo.js.org/quick-start.html#%E7%8E%AF%E5%A2%83%E5%88%9D%E5%A7%8B%E5%8C%96">Twikoo documentation</a>.</p><p>你只需要把獲取到的 <code>環境ID (envId)</code> 填寫到配置上去就行</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">twikoo:</span></span><br><span class="line">  <span class="attr">envId:</span></span><br><span class="line">  <span class="attr">region:</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>envId</td><td>Environment ID</td></tr><tr><td>region</td><td>Environment region, default is <code>ap-shanghai</code>. If your region is different, specify here.</td></tr><tr><td>visitor</td><td>Whether to display article view count</td></tr><tr><td>option</td><td>Optional configuration</td></tr></tbody></table><div class="note info flat"><p>When visitor is enabled, the article view count will be provided by Twikoo instead of <strong>Busuanzi</strong>.</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-twikoo.png"></p></div><div class="tab-item-content"><p>A comment system based on <em>GitHub Discussions</em>.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Giscus</span></span><br><span class="line"><span class="comment"># https://giscus.app/</span></span><br><span class="line"><span class="attr">giscus:</span></span><br><span class="line">  <span class="attr">repo:</span></span><br><span class="line">  <span class="attr">repo_id:</span></span><br><span class="line">  <span class="attr">category_id:</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">light</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>repo</td><td>GitHub repository full name, e.g., <code>owner/repo</code></td></tr><tr><td>repo_id</td><td>GitHub repository ID</td></tr><tr><td>category_id</td><td>GitHub repository category ID</td></tr><tr><td>option</td><td>Optional configuration</td></tr></tbody></table><p>Refer to the Giscus <a href="https://giscus.app/">documentation</a> for details.</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-giscus.png" alt="hexo-theme-butterfly-docs-giscus.png"></p></div><div class="tab-item-content"><p>Remark42 is a comment system that only supports <strong>self-hosting</strong>.</p><p>For detailed setup, refer to <a href="https://remark42.com/docs/getting-started/installation/">Installation | Remark42</a>.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">remark42:</span></span><br><span class="line">  <span class="attr">host:</span> <span class="comment"># Your Host URL</span></span><br><span class="line">  <span class="attr">siteId:</span> <span class="comment"># Your Site ID</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>host</td><td>Your Host URL</td></tr><tr><td>siteId</td><td>Your Site ID</td></tr><tr><td>option</td><td>Optional configuration</td></tr></tbody></table><p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/hexo-butterfly-docs-remark42.png"></p></div><div class="tab-item-content"><p>Artalk is a comment system that only supports <strong>self-hosting</strong>.</p><p>For detailed setup, refer to <a href="https://artalk.js.org/">Artalk | Self-hosted Comment System</a>.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">artalk:</span></span><br><span class="line">  <span class="attr">server:</span></span><br><span class="line">  <span class="attr">site:</span></span><br><span class="line">  <span class="comment"># Use Artalk visitor count as the page view count</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>server</td><td>Your Server URL</td></tr><tr><td>site</td><td>Your Site ID</td></tr><tr><td>visitor</td><td>Whether to display article view count</td></tr><tr><td>option</td><td>Optional configuration</td></tr></tbody></table><div class="note info flat"><p>When visitor is enabled, the article view count will be provided by Artalk instead of <strong>Busuanzi</strong>.</p></div><p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/hexo-butterfly-docs-artalk.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Online-Chat"><a href="#Online-Chat" class="headerlink" title="Online Chat"></a>Online Chat</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">General Settings</button><button type="button" class="tab">chatra</button><button type="button" class="tab">tidio</button><button type="button" class="tab">crisp</button></div><div class="tab-contents"><div class="tab-item-content active"><p>The theme includes several online chat tools. You can choose to enable one to facilitate communication with your visitors.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">chat:</span></span><br><span class="line">  <span class="comment"># Choose: chatra/tidio/crisp</span></span><br><span class="line">  <span class="comment"># Leave it empty if you don&#x27;t need chat</span></span><br><span class="line">  <span class="attr">use:</span></span><br><span class="line">  <span class="comment"># Chat Button [recommend]</span></span><br><span class="line">  <span class="comment"># It will create a button in the bottom right corner of website, and hide the origin button</span></span><br><span class="line">  <span class="attr">rightside_button:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down</span></span><br><span class="line">  <span class="attr">button_hide_show:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>use</td><td>Choose the chat tool to use, options are <code>chatra</code>&#x2F;<code>tidio</code>&#x2F;<code>crisp</code></td></tr><tr><td>rightside_button</td><td>Enable the chat button at the bottom right corner</td></tr><tr><td>button_hide_show</td><td>Hide chat button when scrolling down, show when scrolling up</td></tr></tbody></table><p>These tools provide a button to open&#x2F;close the chat window. The theme also provides a custom button that will appear in the bottom right corner. Just enable the <code>rightside_button</code>.</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-chatbtn.png"></p><p>To avoid affecting user experience, the theme offers a <code>button_hide_show</code> configuration. Set to <code>true</code> to show the chat button only when scrolling up.</p></div><div class="tab-item-content"><div class="note info flat"><p>To enable Chatra, set the <code>chat</code> configuration <code>use</code> to <code>chatra</code>.</p></div><p>Configure Chatra by getting the <code>Public key</code>.</p><ol><li>Open <a href="https://chatra.com/">Chatra</a> and sign up.</li><li>Find the <code>Public key</code> in <code>Preferences</code>.</li></ol><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-chatra-id.png" alt="hexo-theme-butterfly-docs-chat-chatra-id.png"></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># chatra</span></span><br><span class="line"><span class="comment"># https://chatra.io/</span></span><br><span class="line"><span class="attr">chatra:</span></span><br><span class="line">  <span class="attr">id:</span> <span class="string">xxxxxxxx</span></span><br></pre></td></tr></table></figure><p>You can customize Chatra&#39;s style in <code>Chat Widget</code>.</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-chatra-ui-settings.png" alt="hexo-theme-butterfly-docs-chat-chatra-ui-settings.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Demo</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-chat-chatra-ui-demo.png"></p></div><div class="tab-item-content"><div class="note info flat"><p>To enable Tidio, set the <code>chat</code> configuration <code>use</code> to <code>tidio</code>.</p></div><p>Configure Tidio by getting the <code>Public key</code>.</p><ol><li>Open <a href="https://www.tidio.com/">Tidio</a> and sign up.</li><li>Find the <code>Public key</code> in <code>Preferences &gt; Developer</code>.</li></ol><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-tidio-id.png" alt="hexo-theme-butterfly-docs-chat-tidio-id.png"></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># tidio</span></span><br><span class="line"><span class="comment"># https://www.tidio.com/</span></span><br><span class="line"><span class="attr">tidio:</span></span><br><span class="line">  <span class="attr">public_key:</span> <span class="string">XXXX</span></span><br></pre></td></tr></table></figure><p>You can customize Tidio&#39;s style in <code>Channels</code>.</p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-chat-tidio-setting.png" alt="hexo-theme-butterfly-docs-chat-tidio-setting.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Demo</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-chat-tidio-demo.png"></p></div><div class="tab-item-content"><div class="note info flat"><p>To enable Crisp, set the <code>chat</code> configuration <code>use</code> to <code>crisp</code>.</p></div><p>Configure Crisp by getting the <code>Website ID</code>.</p><ol><li>Open <a href="https://crisp.chat/en/">Crisp</a> and sign up.</li><li>Find the <code>Website ID</code>.</li></ol><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># crisp</span></span><br><span class="line"><span class="comment"># https://crisp.chat/en/</span></span><br><span class="line"><span class="attr">crisp:</span></span><br><span class="line">  <span class="attr">website_id:</span> <span class="string">xxxxxxxx</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-buttefly-docs-chat-crisp.png" alt="hexo-theme-buttefly-docs-chat-crisp.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-crisp-demo.png" alt="hexo-theme-butterfly-docs-crisp-demo.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Analytics"><a href="#Analytics" class="headerlink" title="Analytics"></a>Analytics</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Baidu Analytics</button><button type="button" class="tab">Google Analytics</button><button type="button" class="tab">Cloudflare Analytics</button><button type="button" class="tab">Microsoft Clarity</button></div><div class="tab-contents"><div class="tab-item-content active"><ol><li><p>Log in to the Baidu Analytics <a href="https://tongji.baidu.com/web/welcome/login">official website</a>.</p></li><li><p>Locate your Baidu Analytics code.</p></li></ol><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-baidu-tongji.jpg" alt="hexo-theme-butterfly-doc-baidu-tongji.jpg"></p><ol start="3"><li>Modify the <code>theme configuration file</code>:</li></ol><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">baidu_analytics:</span> <span class="string">your_code</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content"><ol><li><p>Log in to the Google Analytics <a href="https://www.google.com/analytics/">official website</a>.</p></li><li><p>Find your Google Analytics tracking ID.</p></li></ol><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-google-analytics.jpg" alt="hexo-theme-butterfly-doc-google-analytics.jpg"></p><ol start="3"><li>Modify the <code>theme configuration file</code>:</li></ol><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">google_analytics:</span> <span class="string">your_code</span> <span class="comment"># usually starts with `UA-`</span></span><br></pre></td></tr></table></figure></div><div class="tab-item-content"><ol><li>Log in to the Cloudflare Analytics <a href="https://www.cloudflare.com/zh-tw/web-analytics/">official website</a>.</li><li>Locate the <code>JavaScript Snippet</code>.</li><li>Find your <code>token</code>.</li></ol><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-cloudflare-analytics-id.png" alt="hexo-theme-butterfly-docs-cloudflare-analytics-id.png"></p><ol start="4"><li><p>Modify the <code>theme configuration file</code>:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Cloudflare Analytics</span></span><br><span class="line"><span class="comment"># https://www.cloudflare.com/zh-tw/web-analytics/</span></span><br><span class="line"><span class="attr">cloudflare_analytics:</span></span><br></pre></td></tr></table></figure></li></ol></div><div class="tab-item-content"><ol><li><p>Log in to the Clarity <a href="https://clarity.microsoft.com/">official website</a>.</p></li><li><p>Create a <code>PROJECT</code>.</p></li><li><p>Find your <code>ID</code>.</p></li></ol><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-clarity-id.png" alt="hexo-theme-butterfly-docs-clarity-id.png"></p><ol start="4"><li><p>Modify the <code>theme configuration file</code>:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Microsoft Clarity</span></span><br><span class="line"><span class="comment"># https://clarity.microsoft.com/</span></span><br><span class="line"><span class="attr">microsoft_clarity:</span></span><br></pre></td></tr></table></figure></li></ol></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Advertisements"><a href="#Advertisements" class="headerlink" title="Advertisements"></a>Advertisements</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Google Ads</button><button type="button" class="tab">Manual Ad Configuration</button></div><div class="tab-contents"><div class="tab-item-content active"><p>The theme integrates Google Ads (Auto Ads).</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">google_adsense:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">auto_ads:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">js:</span> <span class="string">https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</span></span><br><span class="line">  <span class="attr">client:</span> <span class="comment"># your personal identification code</span></span><br><span class="line">  <span class="attr">enable_page_level_ads:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-google-adsense1.png" alt="hexo-theme-butterfly-docs-google-adsense1.png"></p></div><div class="tab-item-content"><p>The theme reserves three spots for inserting ads: after every three articles on the homepage, after the aside announcement, and after the post donation section. Fill in the HTML code in the corresponding position.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">ad:</span></span><br><span class="line">  <span class="attr">index:</span></span><br><span class="line">  <span class="attr">aside:</span></span><br><span class="line">  <span class="attr">post:</span></span><br></pre></td></tr></table></figure><p>例如:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index:</span> <span class="string">&lt;ins</span> <span class="string">class=&quot;adsbygoogle&quot;</span> <span class="string">style=&quot;display:block&quot;</span> <span class="string">data-ad-format=&quot;fluid&quot;</span> <span class="string">data-ad-layout-key=&quot;xxxxxxxxxxxx&quot;</span> <span class="string">data-ad-client=&quot;ca-pub-xxxxxxxxxx&quot;</span> <span class="string">data-ad-slot=&quot;xxxxxxxxxx&quot;&gt;&lt;/ins&gt;&lt;script&gt;(adsbygoogle=window.adsbygoogle||[]).push(&#123;&#125;)&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-ad-1.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-ad-2.png"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Website-Verification"><a href="#Website-Verification" class="headerlink" title="Website Verification"></a>Website Verification</h2><p>If you need search engines to index your site, you may need to log in to the corresponding search engine management platform for submission. Verification codes can be obtained from each management platform.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">site_verification:</span></span><br><span class="line">  <span class="comment"># - name: google-site-verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxx</span></span><br><span class="line">  <span class="comment"># - name: baidu-site-verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxxx</span></span><br></pre></td></tr></table></figure><h2 id="Beautify-Effect"><a href="#Beautify-Effect" class="headerlink" title="Beautify &#x2F; Effect"></a>Beautify &#x2F; Effect</h2><h3 id="Custom-Theme-Colors"><a href="#Custom-Theme-Colors" class="headerlink" title="Custom Theme Colors"></a>Custom Theme Colors</h3><p>You can modify most UI colors.</p><p>Edit the <code>theme configuration file</code>, for example:</p><div class="note info flat"><p>Color values must be enclosed in double quotes, like <code>&quot;#000&quot;</code> instead of <code>#000</code>. Otherwise, an error will occur during the build process!</p></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">theme_color:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">main:</span> <span class="string">&#x27;#49B1F5&#x27;</span></span><br><span class="line">  <span class="attr">paginator:</span> <span class="string">&#x27;#00c4b6&#x27;</span></span><br><span class="line">  <span class="attr">button_hover:</span> <span class="string">&#x27;#FF7242&#x27;</span></span><br><span class="line">  <span class="attr">text_selection:</span> <span class="string">&#x27;#00c4b6&#x27;</span></span><br><span class="line">  <span class="attr">link_color:</span> <span class="string">&#x27;#99a9bf&#x27;</span></span><br><span class="line">  <span class="attr">meta_color:</span> <span class="string">&#x27;#858585&#x27;</span></span><br><span class="line">  <span class="attr">hr_color:</span> <span class="string">&#x27;#A4D8FA&#x27;</span></span><br><span class="line">  <span class="attr">code_foreground:</span> <span class="string">&#x27;#F47466&#x27;</span></span><br><span class="line">  <span class="attr">code_background:</span> <span class="string">&#x27;rgba(27, 31, 35, .05)&#x27;</span></span><br><span class="line">  <span class="attr">toc_color:</span> <span class="string">&#x27;#00c4b6&#x27;</span></span><br><span class="line">  <span class="attr">blockquote_padding_color:</span> <span class="string">&#x27;#49b1f5&#x27;</span></span><br><span class="line">  <span class="attr">blockquote_background_color:</span> <span class="string">&#x27;#49b1f5&#x27;</span></span><br><span class="line">  <span class="attr">scrollbar_color:</span> <span class="string">&#x27;#49b1f5&#x27;</span></span><br><span class="line">  <span class="attr">meta_theme_color_light:</span> <span class="string">&#x27;ffffff&#x27;</span></span><br><span class="line">  <span class="attr">meta_theme_color_dark:</span> <span class="string">&#x27;#0d0d0d&#x27;</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>main</td><td>Main theme color</td></tr><tr><td>paginator</td><td>Paginator color</td></tr><tr><td>button_hover</td><td>Button hover color</td></tr><tr><td>text_selection</td><td>Text selection color</td></tr><tr><td>link_color</td><td>Link color</td></tr><tr><td>meta_color</td><td>Article metadata color</td></tr><tr><td>hr_color</td><td>Horizontal rule color</td></tr><tr><td>code_foreground</td><td>Code foreground color</td></tr><tr><td>code_background</td><td>Code background color</td></tr><tr><td>toc_color</td><td>Table of contents color</td></tr><tr><td>blockquote_padding_color</td><td>Blockquote padding color</td></tr><tr><td>blockquote_background_color</td><td>Blockquote background color</td></tr><tr><td>scrollbar_color</td><td>Scrollbar color</td></tr><tr><td>meta_theme_color_light</td><td>Light mode theme color</td></tr><tr><td>meta_theme_color_dark</td><td>Dark mode theme color</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-color_1.png"></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-color_2.png"></p><h3 id="Justify-Text-Alignment"><a href="#Justify-Text-Alignment" class="headerlink" title="Justify Text Alignment"></a>Justify Text Alignment</h3><p>You can set text to be justified, except for the last line.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Stretches the lines so that each line has equal width</span></span><br><span class="line"><span class="attr">text_align_justify:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>text_align_justify: false</p></div><p><img src="https://oss.012700.xyz/butterfly/2023/10/text-align-justify-false.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>text_align_justify: true</p></div><p><img src="https://oss.012700.xyz/butterfly/2023/10/text-align-justify-true.png"></p><h3 id="Black-Mask"><a href="#Black-Mask" class="headerlink" title="Black Mask"></a>Black Mask</h3><p>To avoid overly bright images making text unreadable, a black mask is added to <code>header</code> and <code>footer</code> by default.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Add a mask to the header and footer</span></span><br><span class="line"><span class="attr">mask:</span></span><br><span class="line">  <span class="attr">header:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">footer:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><h3 id="Page-Load-Animation-Preloader"><a href="#Page-Load-Animation-Preloader" class="headerlink" title="Page Load Animation (Preloader)"></a>Page Load Animation (Preloader)</h3><p>When entering a webpage, due to loading speed issues, the top_img image may appear fragmented, or the webpage may not load fully, resulting in a wait time. Enabling the preloader will show a loading animation, which will disappear once the page is fully loaded.</p><p>The theme supports the loading animation of pace.js, see <a href="https://codebyzach.github.io/pace/">pace.js</a> for details.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Loading Animation</span></span><br><span class="line"><span class="attr">preloader:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># source</span></span><br><span class="line">  <span class="comment"># 1. fullpage-loading</span></span><br><span class="line">  <span class="comment"># 2. pace (progress bar)</span></span><br><span class="line">  <span class="attr">source:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># pace theme (see https://codebyzach.github.io/pace/)</span></span><br><span class="line">  <span class="attr">pace_css_url:</span></span><br></pre></td></tr></table></figure><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>fullpage-loading</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-preloader.gif" alt="hexo-theme-butterfly-docs-preloader.gif"></p><h3 id="Page-Beautification"><a href="#Page-Beautification" class="headerlink" title="Page Beautification"></a>Page Beautification</h3><p>It changes the styles of ol, ul, h1-h5.</p><p><code>field</code> configuration applies to:</p><ul><li><code>post</code> Applies only to the post page</li><li><code>site</code> Applies to the entire site</li></ul><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Beautify page display</span></span><br><span class="line"><span class="attr">beautify:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">site</span> <span class="comment"># site/post</span></span><br><span class="line">  <span class="attr">title-prefix-icon:</span> <span class="string">&#x27;\f0c1&#x27;</span></span><br><span class="line">  <span class="attr">title-prefix-icon-color:</span> <span class="string">&#x27;#F47466&#x27;</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>enable</td><td>Enable beautification</td></tr><tr><td>field</td><td>Area to be beautified</td></tr><tr><td>title-prefix-icon</td><td>Prefix icon for titles</td></tr><tr><td>title-prefix-icon-color</td><td>Color of the prefix icon</td></tr></tbody></table><p><code>title-prefix-icon</code> is the Unicode value of the fontawesome icon.<br><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-fontwesome-unicode.png" alt="hexo-theme-butterfly-doc-fontwesome-unicode.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Beautification disabled</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-beautify.png" alt="hexo-theme-butterfly-doc-post-beautify.png"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Beautification enabled</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-post-beautif.png" alt="hexo-theme-butterfly-doc-post-beautif.png"></p><h3 id="Custom-Fonts-and-Font-Sizes"><a href="#Custom-Fonts-and-Font-Sizes" class="headerlink" title="Custom Fonts and Font Sizes"></a>Custom Fonts and Font Sizes</h3><h4 id="Global-Fonts"><a href="#Global-Fonts" class="headerlink" title="Global Fonts"></a>Global Fonts</h4><p>You can set the font-family for the entire site.</p><p><strong>If no configuration is needed, leave it empty.</strong></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Global font settings</span></span><br><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work (非必要不要修改)</span></span><br><span class="line"><span class="attr">font:</span></span><br><span class="line">  <span class="attr">global-font-size:</span></span><br><span class="line">  <span class="attr">code-font-size:</span></span><br><span class="line">  <span class="attr">font-family:</span> <span class="string">-apple-system,</span> <span class="string">BlinkMacSystemFont,</span> <span class="string">&quot;Segoe UI&quot;</span><span class="string">,</span> <span class="string">&quot;Helvetica Neue&quot;</span><span class="string">,</span> <span class="string">Lato,</span> <span class="string">Roboto,</span> <span class="string">&quot;PingFang SC&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft JhengHei&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft YaHei&quot;</span><span class="string">,</span> <span class="string">sans-serif</span></span><br><span class="line">  <span class="attr">code-font-family:</span> <span class="string">consolas,</span> <span class="string">Menlo,</span> <span class="string">&quot;PingFang SC&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft JhengHei&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft YaHei&quot;</span><span class="string">,</span> <span class="string">sans-serif</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>global-font-size</td><td>Global font size</td></tr><tr><td>code-font-size</td><td>Code font size</td></tr><tr><td>font-family</td><td>Global font family</td></tr><tr><td>code-font-family</td><td>Code font family</td></tr></tbody></table><h4 id="Blog-Title-Font"><a href="#Blog-Title-Font" class="headerlink" title="Blog Title Font"></a>Blog Title Font</h4><p>You can set the font-family for the site title and subtitle.<br><strong>If no configuration is needed, leave it empty.</strong><br><strong>If no web font is needed, leave <code>font_link</code> empty.</strong></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Font settings for the site title and site subtitle</span></span><br><span class="line"><span class="comment"># Site name on the top left, site name centered on the homepage</span></span><br><span class="line"><span class="attr">blog_title_font:</span></span><br><span class="line">  <span class="attr">font_link:</span> <span class="string">https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap</span></span><br><span class="line">  <span class="attr">font-family:</span> <span class="string">Titillium</span> <span class="string">Web,</span> <span class="string">&#x27;PingFang SC&#x27;</span><span class="string">,</span> <span class="string">&#x27;Hiragino Sans GB&#x27;</span><span class="string">,</span> <span class="string">&#x27;Microsoft JhengHei&#x27;</span><span class="string">,</span> <span class="string">&#x27;Microsoft YaHei&#x27;</span><span class="string">,</span> <span class="string">sans-serif</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>font_link</td><td>Link to the web font</td></tr><tr><td>font-family</td><td>Font family for the site title</td></tr></tbody></table><h3 id="Typing-Effect"><a href="#Typing-Effect" class="headerlink" title="Typing Effect"></a>Typing Effect</h3><p>Typing effect <a href="https://github.com/disjukr/activate-power-mode">activate-power-mode</a>.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Typewriter Effect</span></span><br><span class="line"><span class="comment"># https://github.com/disjukr/activate-power-mode</span></span><br><span class="line"><span class="attr">activate_power_mode:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">colorful:</span> <span class="literal">true</span> <span class="comment"># Enable particle animation</span></span><br><span class="line">  <span class="attr">shake:</span> <span class="literal">true</span> <span class="comment"># Enable shake effect</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>enable</td><td>Enable typing effect</td></tr><tr><td>colorful</td><td>Enable particle animation</td></tr><tr><td>shake</td><td>Enable shake effect</td></tr><tr><td>mobile</td><td>Enable typing effect on mobile</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-type-animation.gif" alt="hexo-theme-butterfly-doc-type-animation.gif"></p><h3 id="Background-Effects"><a href="#Background-Effects" class="headerlink" title="Background Effects"></a>Background Effects</h3><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Static Ribbon</button><button type="button" class="tab">Dynamic Ribbon</button><button type="button" class="tab">canvas-nest</button></div><div class="tab-contents"><div class="tab-item-content active"><p>Beautiful ribbon background, can be set to change ribbon on each refresh or on each click</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_ribbon:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># The size of ribbon</span></span><br><span class="line">  <span class="attr">size:</span> <span class="number">150</span></span><br><span class="line">  <span class="comment"># The opacity of ribbon (0 ~ 1)</span></span><br><span class="line">  <span class="attr">alpha:</span> <span class="number">0.6</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line">  <span class="attr">click_to_change:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>enable</td><td>Enable ribbon effect</td></tr><tr><td>size</td><td>Size of the ribbon</td></tr><tr><td>alpha</td><td>Opacity of the ribbon</td></tr><tr><td>zIndex</td><td>z-index of the ribbon</td></tr><tr><td>click_to_change</td><td>Change ribbon on click</td></tr><tr><td>mobile</td><td>Show ribbon on mobile</td></tr></tbody></table><p>For more configuration, refer to <a href="https://github.com/hustcc/ribbon.js">canvas_ribbon</a></p><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-canvas-ribbon.png"></p></div><div class="tab-item-content"><p>Beautiful ribbon background that floats</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_fluttering_ribbon:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span> <span class="comment"># false: do not display on mobile, true: display on mobile</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-docs-canvas_fluttering_ribbon.gif"></p></div><div class="tab-item-content"><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_nest:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Color of lines, default: &#x27;0,0,0&#x27;; RGB values: (R,G,B).(<span class="doctag">note:</span> use &#x27;,&#x27; to separate.)</span></span><br><span class="line">  <span class="attr">color:</span> <span class="string">&#x27;0,0,255&#x27;</span></span><br><span class="line">  <span class="comment"># The opacity of line (0~1)</span></span><br><span class="line">  <span class="attr">opacity:</span> <span class="number">0.7</span></span><br><span class="line">  <span class="comment"># The z-index property of the background</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line">  <span class="comment"># The number of lines</span></span><br><span class="line">  <span class="attr">count:</span> <span class="number">99</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>enable</td><td>Enable nest effect</td></tr><tr><td>color</td><td>Color of the lines</td></tr><tr><td>opacity</td><td>Opacity of the lines</td></tr><tr><td>zIndex</td><td>z-index of the lines</td></tr><tr><td>count</td><td>Number of lines</td></tr><tr><td>mobile</td><td>Show effect on mobile</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/butterfly-doc-canvas_nes.gif"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h3 id="Mouse-Click-Effects"><a href="#Mouse-Click-Effects" class="headerlink" title="Mouse Click Effects"></a>Mouse Click Effects</h3><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active"><i class="fas fa-fire-alt"></i>Fireworks</button><button type="button" class="tab"><i class="fas fa-heart"></i>Heart</button><button type="button" class="tab"><i class="fab fa-amilia"></i>Text</button></div><div class="tab-contents"><div class="tab-item-content active"><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">fireworks:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">9999</span> <span class="comment"># -1 or 9999</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>enable</td><td>Enable fireworks effect</td></tr><tr><td>zIndex</td><td>z-index of fireworks (<code>-1</code> means behind &#x2F; <code>9999</code> means in front)</td></tr><tr><td>mobile</td><td>Show fireworks on mobile</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-doc-firewall.gif" alt="hexo-theme-butterfly-doc-firewall.gif"></p></div><div class="tab-item-content"><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Click to show hearts</span></span><br><span class="line"><span class="attr">click_heart:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/click_heart.gif" alt="click_heart.gif"></p></div><div class="tab-item-content"><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Click to show text, text can be customized</span></span><br><span class="line"><span class="attr">ClickShowText:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">I</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">LOVE</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">YOU</span></span><br><span class="line">  <span class="attr">fontSize:</span> <span class="string">15px</span></span><br><span class="line">  <span class="attr">random:</span> <span class="literal">false</span> <span class="comment"># Randomize text display</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td>enable</td><td>Enable text effect</td></tr><tr><td>text</td><td>Text content</td></tr><tr><td>fontSize</td><td>Font size</td></tr><tr><td>random</td><td>Randomize text display</td></tr><tr><td>mobile</td><td>Show text on mobile</td></tr></tbody></table><p><img src="https://oss.012700.xyz/butterfly/2024/09/ClickShowText.gif" alt="ClickShowText.gif"></p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Lightbox"><a href="#Lightbox" class="headerlink" title="Lightbox"></a>Lightbox</h2><div class="note info flat"><p>If you do not want to add lightbox for a specific image, use HTML format to reference the image and add <code>no-lightbox</code> class name to the image</p></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Choose: fancybox / medium_zoom</span></span><br><span class="line"><span class="comment"># https://github.com/francoischalifour/medium-zoom</span></span><br><span class="line"><span class="comment"># https://fancyapps.com/fancybox/</span></span><br><span class="line"><span class="comment"># Leave it empty if you don&#x27;t need lightbox</span></span><br><span class="line"><span class="attr">lightbox:</span></span><br></pre></td></tr></table></figure><p>You can configure <code>fancybox</code> or <code>medium_zoom</code> to enable lightbox.<br>Leave it empty if no lightbox is needed.</p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>FancyBox</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/fancybox.gif" alt="fancybox.gif"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Medium Zoom</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/medium_zoom.gif" alt="medium_zoom.gif"></p><h2 id="Tag-Plugins"><a href="#Tag-Plugins" class="headerlink" title="Tag Plugins"></a>Tag Plugins</h2><p>For details, see <a href="https://butterfly.js.org/en/posts/butterfly-docs-en-4-tag-plugins/">Tag Plugins</a></p><h2 id="Mermaid"><a href="#Mermaid" class="headerlink" title="Mermaid"></a>Mermaid</h2><p>The theme supports Mermaid.js, which can be used to draw flowcharts, sequence diagrams, etc., in articles.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Mermaid</span></span><br><span class="line"><span class="comment"># https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Write Mermaid diagrams using code blocks</span></span><br><span class="line">  <span class="attr">code_write:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># built-in themes: default / forest / dark / neutral</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br></pre></td></tr></table></figure><h3 id="Writing-Methods"><a href="#Writing-Methods" class="headerlink" title="Writing Methods"></a>Writing Methods</h3><p>The theme supports two writing methods</p><h4 id="Tag-Plugin"><a href="#Tag-Plugin" class="headerlink" title="Tag Plugin"></a>Tag Plugin</h4><p>You can use the tag plugin method to use Mermaid.js For details, see <a href="https://butterfly.js.org/en/posts/butterfly-docs-en-4-tag-plugins/#Mermaid">Tag Plugins</a></p><h4 id="Code-Block-Writing"><a href="#Code-Block-Writing" class="headerlink" title="Code Block Writing"></a>Code Block Writing</h4><p>You can use the code block method to use Mermaid.js</p><ol><li><p>Hexo version needs to be 7.0 or above</p></li><li><p>Add <code>exclude_languages: [&#39;mermaid&#39;]</code> to the Hexo configuration file</p> <figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">syntax_highlighter:</span> <span class="string">&#x27;highlight.js&#x27;</span></span><br><span class="line"><span class="attr">highlight:</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">auto_detect:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="attr">wrap:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hljs:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">exclude_languages:</span> [<span class="string">&#x27;mermaid&#x27;</span>]</span><br><span class="line"><span class="attr">prismjs:</span></span><br><span class="line">  <span class="attr">preprocess:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="attr">exclude_languages:</span> [<span class="string">&#x27;mermaid&#x27;</span>]</span><br></pre></td></tr></table></figure></li><li><p>Set <code>code_write</code> to <code>true</code> in the Mermaid configuration of the Butterfly theme</p></li></ol><blockquote><p>Demo</p></blockquote><p><img src="https://oss.012700.xyz/butterfly/2025/01/butterfly-docs-mermaid-codewrite.png"></p><pre><code class="highlight mermaid">graph TD;  A--&gt;B;  A--&gt;C;  B--&gt;D;  C--&gt;D;</code></pre><h2 id="Pjax"><a href="#Pjax" class="headerlink" title="Pjax"></a>Pjax</h2><p>When a user clicks a link, the parts of the page that need to be updated are done so via Ajax, and then the browser&#39;s URL is modified using HTML5&#39;s pushState.</p><p>This avoids reloading identical resources (css&#x2F;js), thereby improving page load speed.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">pjax:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Exclude the specified pages from pjax, such as &#x27;/music/&#x27;</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="comment"># - /xxxxxx/</span></span><br></pre></td></tr></table></figure><div class="note info flat"><p>For some third-party plugins, Pjax may not be supported.<br>You can add <strong>web pages</strong> to the <code>exclude</code> list to exempt them from Pjax.<br>Clicking these pages will reload the website.</p><p>After using Pjax, some custom JavaScript may become ineffective and need to be re-invoked when navigating pages. Refer to the <a href="https://github.com/MoOx/pjax">Pjax documentation</a>.<br>Also, some specific pages&#39; js&#x2F;css will be loaded on all pages after using Pjax.</p></div><h2 id="Snackbar-Toast-Notification"><a href="#Snackbar-Toast-Notification" class="headerlink" title="Snackbar - Toast Notification"></a>Snackbar - Toast Notification</h2><p>Enable the Snackbar based on personal preference.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Snackbar - Toast Notification</span></span><br><span class="line"><span class="comment"># https://github.com/polonel/SnackBar</span></span><br><span class="line"><span class="comment"># position: top-left / top-center / top-right / bottom-left / bottom-center / bottom-right</span></span><br><span class="line"><span class="attr">snackbar:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">bottom-left</span></span><br><span class="line">  <span class="comment"># The background color of Toast Notification in light mode and dark mode</span></span><br><span class="line">  <span class="attr">bg_light:</span> <span class="string">&#x27;#49b1f5&#x27;</span></span><br><span class="line">  <span class="attr">bg_dark:</span> <span class="string">&#x27;#1f1f1f&#x27;</span></span><br></pre></td></tr></table></figure><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Snackbar not enabled</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/snackbar_false.gif"></p><div class="note purple icon-padding flat"><i class="note-icon fa-solid fa-wand-magic-sparkles"></i><p>Snackbar enabled</p></div><p><img src="https://oss.012700.xyz/butterfly/2024/09/snackbar_true.gif"></p><h2 id="Instantpage"><a href="#Instantpage" class="headerlink" title="Instantpage"></a>Instantpage</h2><p>When the mouse hovers over a link for more than 65 milliseconds, Instantpage preloads the link, improving access speed.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># https://instant.page/</span></span><br><span class="line"><span class="comment"># prefetch</span></span><br><span class="line"><span class="attr">instantpage:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><h2 id="PWA"><a href="#PWA" class="headerlink" title="PWA"></a>PWA</h2><p>To add PWA features to <code>Butterfly</code>, you need to follow these steps:</p><ol><li><p>Open the hexo working directory.</p></li><li><p>Run <code>npm install hexo-offline --save</code> or <code>yarn add hexo-offline</code>.</p></li><li><p>Create a file named <code>hexo-offline.config.cjs</code> in the hexo directory and add the following content:</p></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// offline config passed to workbox-build.</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">globPatterns</span>: [<span class="string">&#x27;**/*.&#123;js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2&#125;&#x27;</span>],</span><br><span class="line">  <span class="comment">// Include static files; if your site uses formats like webp, add them here.</span></span><br><span class="line">  <span class="attr">globDirectory</span>: <span class="string">&#x27;public&#x27;</span>,</span><br><span class="line">  <span class="attr">swDest</span>: <span class="string">&#x27;public/service-worker.js&#x27;</span>,</span><br><span class="line">  <span class="attr">maximumFileSizeToCacheInBytes</span>: <span class="number">10485760</span>, <span class="comment">// Maximum file size to cache in bytes.</span></span><br><span class="line">  <span class="attr">skipWaiting</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">clientsClaim</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">runtimeCaching</span>: [ <span class="comment">// Configure this option if you need to load CDN resources, otherwise it&#x27;s not necessary.</span></span><br><span class="line">    <span class="comment">// CDNs - should be CacheFirst, as they use specific versions and should not change</span></span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">urlPattern</span>: <span class="regexp">/^https:\/\/cdn\.example\.com\/.*/</span>, <span class="comment">// Replace with your URL</span></span><br><span class="line">      <span class="attr">handler</span>: <span class="string">&#x27;CacheFirst&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>For more details, refer to the official <a href="https://github.com/JLHwung/hexo-offline">hexo-offline</a> documentation.</p><ol start="4"><li>Enable the PWA option in the <code>theme configuration file</code>.</li></ol><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">pwa:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">manifest:</span> <span class="string">/img/pwa/manifest.json</span></span><br><span class="line">  <span class="attr">apple_touch_icon:</span> <span class="string">/img/pwa/apple-touch-icon.png</span></span><br><span class="line">  <span class="attr">favicon_32_32:</span> <span class="string">/img/pwa/32.png</span></span><br><span class="line">  <span class="attr">favicon_16_16:</span> <span class="string">/img/pwa/16.png</span></span><br><span class="line">  <span class="attr">mask_icon:</span> <span class="string">/img/pwa/safari-pinned-tab.svg</span></span><br></pre></td></tr></table></figure><ol start="5"><li>Create a <code>manifest.json</code> file in the <code>source/</code> directory.</li></ol><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;string&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;short_name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Junzhou&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;theme_color&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#49b1f5&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;background_color&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#49b1f5&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;display&quot;</span><span class="punctuation">:</span> <span class="string">&quot;standalone&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;scope&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;start_url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;/&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;icons&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">          <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/36.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;36x36&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">            <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/48.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;48x48&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">          <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/72.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;72x72&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">          <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/96.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;96x96&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">          <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/144.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;144x144&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">          <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/192.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;192x192&quot;</span><span class="punctuation">,</span></span><br><span class="line">          <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">            <span class="attr">&quot;src&quot;</span><span class="punctuation">:</span> <span class="string">&quot;images/pwaicons/512.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;sizes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;512x512&quot;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;type&quot;</span><span class="punctuation">:</span> <span class="string">&quot;image/png&quot;</span></span><br><span class="line">          <span class="punctuation">&#125;</span></span><br><span class="line">      <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">      <span class="attr">&quot;splash_pages&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">null</span></span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><p>You can also quickly create a <code>manifest.json</code> using the <a href="https://app-manifest.firebaseapp.com/">Web App Manifest</a>. (Web App Manifest requires at least one 512x512 pixel icon).</p><ol start="6"><li><p>Use the <code>Chrome</code> <code>Lighthouse</code> plugin to check if the PWA configuration is effective and correct.</p><ul><li>Open the blog page.</li><li>Launch the <code>Lighthouse</code> plugin (Lighthouse plugin requires at least one 512x512 pixel icon).</li></ul></li></ol><p>For more information on PWA (Progressive Web Apps), refer to <a href="https://developers.google.com/web/tools/lighthouse/audits/address-bar">Google Tools for Web Developers</a>.</p><h2 id="Open-Graph"><a href="#Open-Graph" class="headerlink" title="Open Graph"></a>Open Graph</h2><p>Add some meta data such as thumbnails, titles, and dates in the <code>head</code>. When you share a webpage on certain platforms, the platform will read the Open Graph content and display information like thumbnails and titles.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Open graph meta tags</span></span><br><span class="line"><span class="comment"># https://hexo.io/docs/helpers#open-graph</span></span><br><span class="line"><span class="attr">Open_Graph_meta:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">    <span class="comment"># twitter_card:</span></span><br><span class="line">    <span class="comment"># twitter_image:</span></span><br><span class="line">    <span class="comment"># twitter_id:</span></span><br><span class="line">    <span class="comment"># twitter_site:</span></span><br><span class="line">    <span class="comment"># google_plus:</span></span><br><span class="line">    <span class="comment"># fb_admins:</span></span><br><span class="line">    <span class="comment"># fb_app_id:</span></span><br></pre></td></tr></table></figure><h2 id="CSS-Prefixes"><a href="#CSS-Prefixes" class="headerlink" title="CSS Prefixes"></a>CSS Prefixes</h2><p>Some CSS properties are not supported by all browsers and need corresponding prefixes to be effective.</p><p>Enabling <code>css_prefix</code> will automatically add prefixes to some CSS properties (increasing the size by 20%).</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Add the vendor prefixes to ensure compatibility</span></span><br><span class="line"><span class="attr">css_prefix:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><h2 id="Inject"><a href="#Inject" class="headerlink" title="Inject"></a>Inject</h2><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Supported from version 2.3.0 and above</p></div><p>If you want to add extra JavaScript, CSS, meta tags, etc., you can add them in <code>inject</code>. This supports adding to the head (before the <code>&lt;/body&gt;</code> tag) and the bottom (before the <code>&lt;/html&gt;</code> tag).</p><p>Note: Add the content in standard HTML format.</p><p>For example:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/self.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;xxxx&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p><em>Note:</em> If your site root directory is not &#39;&#x2F;&#39;, you need to include your root directory when using local images.<br>For example: If your site is <code>https://yoursite.com/blog</code> and you want to reference <code>css/xx.css</code>, set it as <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/blog/css/xx.css&quot;&gt;</code>.</p><h2 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h2><p>The last part of the configuration file is CDN, which includes files referenced by the theme. You can configure the CDN yourself (please do not modify unless necessary, and confirm that the links are accessible after configuration).</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># CDN Settings</span></span><br><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work</span></span><br><span class="line"><span class="attr">CDN:</span></span><br><span class="line">  <span class="comment"># The CDN provider for internal and third-party scripts</span></span><br><span class="line">  <span class="comment"># Options for both: local/jsdelivr/unpkg/cdnjs/custom</span></span><br><span class="line">  <span class="comment"># <span class="doctag">Note:</span> Dev version can only use &#x27;local&#x27; for internal scripts</span></span><br><span class="line">  <span class="comment"># <span class="doctag">Note:</span> When setting third-party scripts to &#x27;local&#x27;, you need to install hexo-butterfly-extjs</span></span><br><span class="line">  <span class="attr">internal_provider:</span> <span class="string">local</span></span><br><span class="line">  <span class="attr">third_party_provider:</span> <span class="string">jsdelivr</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Add version number to url, true or false</span></span><br><span class="line">  <span class="attr">version:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Custom format</span></span><br><span class="line">  <span class="comment"># For example: https://cdn.staticfile.org/$&#123;cdnjs_name&#125;/$&#123;version&#125;/$&#123;min_cdnjs_file&#125;</span></span><br><span class="line">  <span class="attr">custom_format:</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">option:</span></span><br><span class="line">    <span class="comment"># abcjs_basic_js:</span></span><br><span class="line">    <span class="comment"># activate_power_mode:</span></span><br><span class="line">    <span class="comment"># algolia_js:</span></span><br><span class="line">    <span class="comment"># algolia_search:</span></span><br><span class="line">    <span class="comment"># aplayer_css:</span></span><br><span class="line">    <span class="comment"># aplayer_js:</span></span><br><span class="line">    <span class="comment"># artalk_css:</span></span><br><span class="line">    <span class="comment"># artalk_js:</span></span><br><span class="line">    <span class="comment"># blueimp_md5:</span></span><br><span class="line">    <span class="comment"># busuanzi:</span></span><br><span class="line">    <span class="comment"># canvas_fluttering_ribbon:</span></span><br><span class="line">    <span class="comment"># canvas_nest:</span></span><br><span class="line">    <span class="comment"># canvas_ribbon:</span></span><br><span class="line">    <span class="comment"># click_heart:</span></span><br><span class="line">    <span class="comment"># clickShowText:</span></span><br><span class="line">    <span class="comment"># disqusjs:</span></span><br><span class="line">    <span class="comment"># disqusjs_css:</span></span><br><span class="line">    <span class="comment"># docsearch_css:</span></span><br><span class="line">    <span class="comment"># docsearch_js:</span></span><br><span class="line">    <span class="comment"># egjs_infinitegrid:</span></span><br><span class="line">    <span class="comment"># fancybox:</span></span><br><span class="line">    <span class="comment"># fancybox_css:</span></span><br><span class="line">    <span class="comment"># fireworks:</span></span><br><span class="line">    <span class="comment"># fontawesome:</span></span><br><span class="line">    <span class="comment"># gitalk:</span></span><br><span class="line">    <span class="comment"># gitalk_css:</span></span><br><span class="line">    <span class="comment"># giscus:</span></span><br><span class="line">    <span class="comment"># instantpage:</span></span><br><span class="line">    <span class="comment"># instantsearch:</span></span><br><span class="line">    <span class="comment"># katex:</span></span><br><span class="line">    <span class="comment"># katex_copytex:</span></span><br><span class="line">    <span class="comment"># lazyload:</span></span><br><span class="line">    <span class="comment"># local_search:</span></span><br><span class="line">    <span class="comment"># main:</span></span><br><span class="line">    <span class="comment"># main_css:</span></span><br><span class="line">    <span class="comment"># mathjax:</span></span><br><span class="line">    <span class="comment"># medium_zoom:</span></span><br><span class="line">    <span class="comment"># mermaid:</span></span><br><span class="line">    <span class="comment"># meting_js:</span></span><br><span class="line">    <span class="comment"># prismjs_autoloader:</span></span><br><span class="line">    <span class="comment"># prismjs_js:</span></span><br><span class="line">    <span class="comment"># prismjs_lineNumber_js:</span></span><br><span class="line">    <span class="comment"># pjax:</span></span><br><span class="line">    <span class="comment"># sharejs:</span></span><br><span class="line">    <span class="comment"># sharejs_css:</span></span><br><span class="line">    <span class="comment"># snackbar:</span></span><br><span class="line">    <span class="comment"># snackbar_css:</span></span><br><span class="line">    <span class="comment"># translate:</span></span><br><span class="line">    <span class="comment"># twikoo:</span></span><br><span class="line">    <span class="comment"># typed:</span></span><br><span class="line">    <span class="comment"># utils:</span></span><br><span class="line">    <span class="comment"># valine:</span></span><br><span class="line">    <span class="comment"># waline_css:</span></span><br><span class="line">    <span class="comment"># waline_js:</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>internal_provider</td><td>Internal files of the theme<br />Options: local&#x2F;jsdelivr&#x2F;unpkg&#x2F;cdnjs&#x2F;custom<br />local for local loading, custom for custom format, needs to configure <code>custom_format</code><br /><strong>Note:</strong> If using the Dev version, it can only be set to local</td></tr><tr><td>third_party_provider</td><td>Third-party files<br />Options: local&#x2F;jsdelivr&#x2F;unpkg&#x2F;cdnjs&#x2F;custom<br />local for local loading, custom for custom format, needs to configure <code>custom_format</code><br /><strong>Note:</strong> If you choose local, you need to install the <code>hexo-butterfly-extjs</code> plugin</td></tr><tr><td>version</td><td>true&#x2F;false to add the specified version number to the CDN</td></tr><tr><td>custom_format</td><td>Custom format</td></tr><tr><td>option</td><td>You can replace some files here, which will override the original configuration</td></tr></tbody></table><h3 id="version"><a href="#version" class="headerlink" title="version"></a>version</h3><p>To modify the version number, you can change the version in the &#39;plugins.yml&#39; file in the <code>theme directory</code>.</p><p>Please ensure that the version number you modify is <strong>included</strong> in the CDN you use.</p><h3 id="custom-format"><a href="#custom-format" class="headerlink" title="custom_format"></a>custom_format</h3><p>Provides the following parameters:</p><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>name</td><td>Package name on npm</td></tr><tr><td>file</td><td>File path on npm</td></tr><tr><td>min_file</td><td>Minified file path on npm</td></tr><tr><td>cdnjs_name</td><td>Package name on cdnjs</td></tr><tr><td>cdnjs_file</td><td>File path on cdnjs</td></tr><tr><td>min_cdnjs_file</td><td>Minified file path on cdnjs</td></tr><tr><td>version</td><td>Plugin version number</td></tr></tbody></table><p>Partial list of available third-party CDNs:</p><div class="note info flat"><p>Please ensure that the CDN you choose includes the third-party plugins used by the theme.</p></div><table><thead><tr><th>Provider</th><th>Format</th><th>Remarks</th></tr></thead><tbody><tr><td><a href="https://www.staticfile.org/">Staticfile (Qiniu Cloud)</a></td><td><a href="https://cdn.staticfile.org/$%7Bcdnjs_name%7D/$%7Bversion%7D/$%7Bmin_cdnjs_file%7D">https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}</a></td><td>Sync with cdnjs</td></tr><tr><td><a href="https://www.bootcdn.cn/">BootCDN</a></td><td><a href="https://cdn.bootcdn.net/ajax/libs/$%7Bcdnjs_name%7D/$%7Bversion%7D/$%7Bmin_cdnjs_file%7D">https://cdn.bootcdn.net/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}</a></td><td>Sync with cdnjs</td></tr><tr><td><a href="https://cdn.baomitu.com/">Baomitu (360)</a></td><td>Latest version: <a href="https://lib.baomitu.com/$%7Bcdnjs_name%7D/latest/$%7Bmin_cdnjs_file%7D">https://lib.baomitu.com/${cdnjs_name}/latest/${min_cdnjs_file}</a><br />Specified version: <a href="https://lib.baomitu.com/$%7Bcdnjs_name%7D/$%7Bversion%7D/$%7Bmin_cdnjs_file%7D">https://lib.baomitu.com/${cdnjs_name}/${version}/${min_cdnjs_file}</a></td><td>Sync with cdnjs</td></tr><tr><td>Elemecdn</td><td>Latest version: <a href="https://npm.elemecdn.com/$%7Bname%7D@latest/$%7Bfile%7D">https://npm.elemecdn.com/${name}@latest/${file}</a><br />Specified version: <a href="https://npm.elemecdn.com/$%7Bname%7D@$%7Bversion%7D/$%7Bfile%7D">https://npm.elemecdn.com/${name}@${version}/${file}</a></td><td>Sync with npm</td></tr></tbody></table><a class="btn-beautify block red right larger" href="/en/posts/butterfly-docs-en-tag-plugins/" title="⚔️ Butterfly document - Tag Plugins"><i class="far fa-hand-point-right"></i><span>⚔️ Butterfly document - Tag Plugins</span></a>]]></content>
    
    
      
      
    <summary type="html">&lt;div class=&quot;note orange icon-padding flat&quot;&gt;&lt;i class=&quot;note-icon fas fa-language&quot;&gt;&lt;/i&gt;&lt;p&gt;This article is translated from ChatGPT.&lt;/p&gt;
&lt;/div&gt;

</summary>
      
    
    
    
    <category term="Docs" scheme="https://butterfly.js.org/en/categories/Docs/"/>
    
    <category term="EN" scheme="https://butterfly.js.org/en/categories/Docs/EN/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly document - Theme Pages</title>
    <link href="https://butterfly.js.org/en/posts/butterfly-docs-en-theme-pages/"/>
    <id>https://butterfly.js.org/en/posts/butterfly-docs-en-theme-pages/</id>
    <published>2023-06-30T06:41:20.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<div class="note orange icon-padding flat"><i class="note-icon fas fa-language"></i><p>This article is translated from ChatGPT.</p></div><div class="note green icon-padding flat"><i class="note-icon fas fa-rocket"></i><p> 📚  Table of Contents</p><p><a href="/en/posts/butterfly-docs-en-get-started/" title="Butterfly document - Get Started">🚀 Get Started</a> - <a href="/en/posts/butterfly-docs-en-theme-pages/" title="Butterfly document - Theme Pages">📑 Theme Pages</a> - <a href="/en/posts/butterfly-docs-en-theme-config/" title="Butterfly document - Theme Configuration">📌 Theme Configuration</a> - <a href="/en/posts/butterfly-docs-en-tag-plugins/" title="Butterfly document - Tag Plugins">⚔️ Tag Plugins</a> - <a href="/en/posts/butterfly-docs-en-theme-question/" title="Butterfly document - Q&amp;A">❓ Q&amp;A</a> - <a href="/en/posts/butterfly-docs-en-advanced-tutorial/" title="Butterfly document - Advanced Tutorial">⚡️ Advanced Tutorials</a></p></div><hr><h2 id="Front-matter"><a href="#Front-matter" class="headerlink" title="Front-matter"></a>Front-matter</h2><p><code>Front-matter</code> is the section at the top of a Markdown file, separated by <code>---</code>, and is used to specify variables for individual files.</p><ul><li>Page Front-matter is used for configuring a <code>page</code>.</li><li>Post Front-matter is used for configuring a <code>post</code>.</li></ul><div class="note info flat"><p>If a parameter is marked as <code>optional</code>, you can add it based on your needs, and it is not necessary to include all parameters in the Markdown file.</p></div><h3 id="Page-Front-matter"><a href="#Page-Front-matter" class="headerlink" title="Page Front-matter"></a>Page Front-matter</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title:</span><br><span class="line">date:</span><br><span class="line">updated:</span><br><span class="line">type:</span><br><span class="line">comments:</span><br><span class="line">description:</span><br><span class="line">keywords:</span><br><span class="line">top<span class="emphasis">_img:</span></span><br><span class="line"><span class="emphasis">mathjax:</span></span><br><span class="line"><span class="emphasis">katex:</span></span><br><span class="line"><span class="emphasis">aside:</span></span><br><span class="line"><span class="emphasis">aplayer:</span></span><br><span class="line"><span class="emphasis">highlight_</span>shrink:</span><br><span class="line">random:</span><br><span class="line">limit:</span><br><span class="line">  type:</span><br><span class="line"><span class="section">  value:</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Syntax</th><th>Explanation</th></tr></thead><tbody><tr><td>title</td><td>[Required] Page title</td></tr><tr><td>date</td><td>[Required] Page creation date</td></tr><tr><td>type</td><td>[Required] Used for tags, categories, and friends links pages</td></tr><tr><td>updated</td><td>[Optional] Page update date</td></tr><tr><td>description</td><td>[Optional] Page description</td></tr><tr><td>comments</td><td>[Optional] Display page comment module (default true)</td></tr><tr><td>top_img</td><td>[Optional] Page top image</td></tr><tr><td>mathjax</td><td>[Optional] Display MathJax (only needed when setting <code>per_page: false</code> for MathJax, default false)</td></tr><tr><td>katex</td><td>[Optional] Display KaTeX (only needed when setting <code>per_page: false</code> for KaTeX, default false)</td></tr><tr><td>aside</td><td>[Optional] Display sidebar (default true)</td></tr><tr><td>aplayer</td><td>[Optional] Load aplayer&#39;s js and css on the specified page, please refer to the <code>music</code> configuration below the article</td></tr><tr><td>highlight_shrink</td><td>[Optional] Configure whether code blocks are expanded (true&#x2F;false) (default is the setting of <code>highlight_shrink</code>)</td></tr><tr><td>random</td><td>[Optional] Configure whether to randomly sort friends links (default false)</td></tr><tr><td>limit</td><td>[Optional] Limit the number of displayed in shuoshuo</td></tr><tr><td>limit.type</td><td>[Optional] Limit type: <code>date</code> or <code>num</code></td></tr><tr><td>limit.value</td><td>[Optional] Limit value: <code>2024-06-21</code> or <code>5</code></td></tr></tbody></table><h3 id="Post-Front-matter"><a href="#Post-Front-matter" class="headerlink" title="Post Front-matter"></a>Post Front-matter</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><span class="line">5</span><br><span class="line">6</span><br><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><br><span class="line">title:</span><br><span class="line">date:</span><br><span class="line">updated:</span><br><span class="line">tags:</span><br><span class="line">categories:</span><br><span class="line">keywords:</span><br><span class="line">description:</span><br><span class="line">top<span class="emphasis">_img:</span></span><br><span class="line"><span class="emphasis">comments:</span></span><br><span class="line"><span class="emphasis">cover:</span></span><br><span class="line"><span class="emphasis">toc:</span></span><br><span class="line"><span class="emphasis">toc_</span>number:</span><br><span class="line">toc<span class="emphasis">_style_</span>simple:</span><br><span class="line">copyright:</span><br><span class="line">copyright<span class="emphasis">_author:</span></span><br><span class="line"><span class="emphasis">copyright_</span>author<span class="emphasis">_href:</span></span><br><span class="line"><span class="emphasis">copyright_</span>url:</span><br><span class="line">copyright<span class="emphasis">_info:</span></span><br><span class="line"><span class="emphasis">mathjax:</span></span><br><span class="line"><span class="emphasis">katex:</span></span><br><span class="line"><span class="emphasis">aplayer:</span></span><br><span class="line"><span class="emphasis">highlight_</span>shrink:</span><br><span class="line">aside:</span><br><span class="line">abcjs:</span><br><span class="line"><span class="section">noticeOutdate:</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure><table><thead><tr><th align="left">Syntax</th><th>Explanation</th></tr></thead><tbody><tr><td align="left">title</td><td>[Required] Article title</td></tr><tr><td align="left">date</td><td>[Required] Article creation date</td></tr><tr><td align="left">updated</td><td>[Optional] Article update date</td></tr><tr><td align="left">tags</td><td>[Optional] Article tags</td></tr><tr><td align="left">categories</td><td>[Optional] Article categories</td></tr><tr><td align="left">description</td><td>[Optional] Article description</td></tr><tr><td align="left">top_img</td><td>[Optional] Article top image</td></tr><tr><td align="left">cover</td><td>[Optional] Article cover (If top_img is not set, the cover will be displayed at the top of the article. Can be set to false&#x2F;image address&#x2F;empty)</td></tr><tr><td align="left">comments</td><td>[Optional] Display article comment module (default true)</td></tr><tr><td align="left">toc</td><td>[Optional] Display article Table of Contents (default setting in toc&#39;s enable configuration)</td></tr><tr><td align="left">toc_number</td><td>[Optional] Display toc_number (default setting in toc&#39;s number configuration)</td></tr><tr><td align="left">toc_style_simple</td><td>[Optional] Display TOC in a simple style</td></tr><tr><td align="left">copyright</td><td>[Optional] Display article copyright module (default setting in post_copyright&#39;s enable configuration)</td></tr><tr><td align="left">copyright_author</td><td>[Optional] Article copyright module&#39;s <code>author</code></td></tr><tr><td align="left">copyright_author_href</td><td>[Optional] Article copyright module&#39;s <code>author</code> link</td></tr><tr><td align="left">copyright_url</td><td>[Optional] Article copyright module&#39;s <code>article link</code> link</td></tr><tr><td align="left">copyright_info</td><td>[Optional] Article copyright module&#39;s <code>copyright statement</code> text</td></tr><tr><td align="left">mathjax</td><td>[Optional] Display MathJax (only needed when setting <code>per_page: false</code> for MathJax, default false)</td></tr><tr><td align="left">katex</td><td>[Optional] Display KaTeX (only needed when setting <code>per_page: false</code> for KaTeX, default false)</td></tr><tr><td align="left">aplayer</td><td>[Optional] Load aplayer&#39;s js and css on the specified page, please refer to the <code>music</code> configuration below the article</td></tr><tr><td align="left">highlight_shrink</td><td>[Optional] Configure whether code blocks are expanded (true&#x2F;false) (default is the setting of <code>highlight_shrink</code>)</td></tr><tr><td align="left">aside</td><td>[Optional] Display sidebar (default true)</td></tr><tr><td align="left">abcjs</td><td>[Optional] Load abcjs (only needed when setting <code>per_page: false</code> for abcjs, default false)</td></tr><tr><td align="left">noticeOutdate</td><td>[Optional] Article expiration reminder (default setting is the enable configuration in noticeOutdate)</td></tr></tbody></table><h2 id="Tags-Page"><a href="#Tags-Page" class="headerlink" title="Tags Page"></a>Tags Page</h2><div class="note info flat"><p>The filename for the tags page doesn’t necessarily have to be &quot;tags&quot;; the &quot;tags&quot; in the example is just for reference.<br>Remember to add <code>type: &quot;tags&quot;</code>.</p></div><ol><li><p>Go to the root directory of your Hexo blog.</p></li><li><p>Run <code>hexo new page tags</code>.</p></li><li><p>You will find the file <code>source/tags/index.md</code>.</p></li><li><p>Modify this file:</p></li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Tags</span><br><span class="line">date: 2018-01-05 00:00:00</span><br><span class="line">type: &quot;tags&quot;</span><br><span class="line">orderby: random</span><br><span class="line"><span class="section">order: 1</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Syntax</th><th>Explanation</th></tr></thead><tbody><tr><td>type</td><td>[Required] Page type, must be set to <code>tags</code>.</td></tr><tr><td>orderby</td><td>[Optional] Sorting method: random&#x2F;name&#x2F;length</td></tr><tr><td>order</td><td>[Optional] Sorting order: 1, asc for ascending; -1, desc for descending.</td></tr></tbody></table><h2 id="Categories-Page"><a href="#Categories-Page" class="headerlink" title="Categories Page"></a>Categories Page</h2><div class="note info flat"><p>The filename for the categories page doesn’t necessarily have to be &quot;categories&quot;; the &quot;categories&quot; in the example is just for reference.<br>Remember to add <code>type: &quot;categories&quot;</code>.</p></div><ol><li><p>Go to the root directory of your Hexo blog.</p></li><li><p>Run <code>hexo new page categories</code>.</p></li><li><p>You will find the file <code>source/categories/index.md</code>.</p></li><li><p>Modify this file:</p></li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Categories</span><br><span class="line">date: 2018-01-05 00:00:00</span><br><span class="line"><span class="section">type: &quot;categories&quot;</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure><h2 id="Friends-Links"><a href="#Friends-Links" class="headerlink" title="Friends Links"></a>Friends Links</h2><p>Create a page for your blog&#39;s friends links!</p><h3 id="Create-Friends-Links-Page"><a href="#Create-Friends-Links-Page" class="headerlink" title="Create Friends Links Page"></a>Create Friends Links Page</h3><div class="note info flat"><p>The filename for the friend links page doesn’t necessarily have to be &quot;link&quot;; the &quot;link&quot; in the example is just for reference.<br>Remember to add <code>type: &quot;link&quot;</code>.</p></div><ol><li><p>Go to the root directory of your Hexo blog.</p></li><li><p>Run <code>hexo new page link</code>.</p></li><li><p>You will find the file <code>source/link/index.md</code>.</p></li><li><p>Modify this file:</p></li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Friends Links</span><br><span class="line">date: 2018-06-07 22:17:49</span><br><span class="line"><span class="section">type: &quot;link&quot;</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure><h3 id="Add-Friends-Links"><a href="#Add-Friends-Links" class="headerlink" title="Add Friends Links"></a>Add Friends Links</h3><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Local Generation</button><button type="button" class="tab">Remote Fetching</button></div><div class="tab-contents"><div class="tab-item-content active"><p>In the <code>source/_data</code> directory of your Hexo blog (if the _data folder does not exist, create it), create a file named <code>link.yml</code>.</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">Friends</span> <span class="string">Links</span></span><br><span class="line">  <span class="attr">class_desc:</span> <span class="string">Those</span> <span class="string">people,</span> <span class="string">those</span> <span class="string">things</span></span><br><span class="line">  <span class="attr">link_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Hexo</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://hexo.io/zh-tw/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">Fast,</span> <span class="string">simple,</span> <span class="string">and</span> <span class="string">powerful</span> <span class="string">blogging</span> <span class="string">framework</span></span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">Websites</span></span><br><span class="line">  <span class="attr">class_desc:</span> <span class="string">Recommended</span> <span class="string">websites</span></span><br><span class="line">  <span class="attr">link_list:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Youtube</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://www.youtube.com/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">Video-sharing</span> <span class="string">website</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Weibo</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://www.weibo.com/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">China&#x27;s</span> <span class="string">largest</span> <span class="string">social</span> <span class="string">sharing</span> <span class="string">platform</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Twitter</span></span><br><span class="line">      <span class="attr">link:</span> <span class="string">https://twitter.com/</span></span><br><span class="line">      <span class="attr">avatar:</span> <span class="string">https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png</span></span><br><span class="line">      <span class="attr">descr:</span> <span class="string">Social</span> <span class="string">sharing</span> <span class="string">platform</span></span><br></pre></td></tr></table></figure><p><code>class_name</code> and <code>class_desc</code> support HTML formatting, but you can also leave them blank if not needed.</p></div><div class="tab-item-content"><p>Starting from version <code>4.0.0</code>, you can fetch friends links remotely in <strong>JSON</strong> format.</p><div class="note warning flat"><p>Note: If you choose remote fetching, the local generation method will be invalid.</p></div><p>In the front-matter of the <code>source/link/index.md</code> file, add the remote link:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">flink<span class="emphasis">_url: xxxxx</span></span><br></pre></td></tr></table></figure><p>JSON format:</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;class_name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Friends Links&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;class_desc&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Those people, those things&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;link_list&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;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Hexo&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;link&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://hexo.io/zh-tw/&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;avatar&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;descr&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Fast, simple, and powerful blogging framework&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 class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;class_name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Websites&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;class_desc&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Recommended websites&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;link_list&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;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Youtube&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;link&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://www.youtube.com/&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;avatar&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;descr&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Video-sharing website&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;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Weibo</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;link&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://www.weibo.com/&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;avatar&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;descr&quot;</span><span class="punctuation">:</span> <span class="string">&quot;China&#x27;s largest social sharing platform&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;name&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Twitter&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;link&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://twitter.com/&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;avatar&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;descr&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Social sharing platform&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><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h3 id="Random-Sorting-of-Friends-Links"><a href="#Random-Sorting-of-Friends-Links" class="headerlink" title="Random Sorting of Friends Links"></a>Random Sorting of Friends Links</h3><p>The theme supports random sorting of friends links. Just add <code>random: true</code> in the top front-matter.</p><h3 id="Friends-Links-Page-Customization"><a href="#Friends-Links-Page-Customization" class="headerlink" title="Friends Links Page Customization"></a>Friends Links Page Customization</h3><p>Starting from version 2.2.0, the friends links page can be customized by the user. You only need to set it in the MD file for friends links using regular Markdown formatting.</p><h2 id="Gallery"><a href="#Gallery" class="headerlink" title="Gallery"></a>Gallery</h2><p>The gallery page is just a regular page. You only need to create your page using <code>hexo n page xxxxx</code>.</p><p>Then, you can use the <code>galleryGroup</code> tag plugin <a href="https://butterfly.js.org/posts/4aa8abbe/#Gallery%E7%9B%B8%E5%86%8A%E5%9C%96%E5%BA%AB">galleryGroup</a> for specific usage details.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&lt;div</span> <span class="string">class=&quot;gallery-group-main&quot;&gt;</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">galleryGroup</span> <span class="string">&#x27;Wallpapers&#x27;</span> <span class="string">&#x27;Collection of some wallpapers&#x27;</span> <span class="string">&#x27;/Gallery/wallpaper&#x27;</span> <span class="string">https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png</span> <span class="string">%</span>&#125;</span><br><span class="line">&#123;<span class="string">%</span> <span class="string">galleryGroup</span> <span class="string">&#x27;Marvel&#x27;</span> <span class="string">&#x27;Pictures related to Marvel&#x27;</span> <span class="string">&#x27;/Gallery/marvel&#x27;</span> <span class="string">https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg</span> <span class="string">%</span>&#125;</span><br><span class="line">&#123;<span class="string">%</span> <span class="string">galleryGroup</span> <span class="string">&#x27;OH MY GIRL&#x27;</span> <span class="string">&#x27;Pictures related to OH MY GIRL&#x27;</span> <span class="string">&#x27;/Gallery/ohmygirl&#x27;</span> <span class="string">https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="string">&lt;/div&gt;</span></span><br></pre></td></tr></table></figure><div class="gallery-group-main"><figure class="gallery-group">    <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png' alt="Group Image Gallery">    <figcaption>      <div class="gallery-group-name">Wallpapers</div>      <p>Collection of some wallpapers</p>      <a href='/en/Gallery/wallpaper'></a>    </figcaption>  </figure><figure class="gallery-group">    <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg' alt="Group Image Gallery">    <figcaption>      <div class="gallery-group-name">Marvel</div>      <p>Pictures related to Marvel</p>      <a href='/en/Gallery/marvel'></a>    </figcaption>  </figure><figure class="gallery-group">    <img class="gallery-group-img no-lightbox" 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>Pictures related to OH MY GIRL</p>      <a href='/en/Gallery/ohmygirl'></a>    </figcaption>  </figure></div><h3 id="Subpage"><a href="#Subpage" class="headerlink" title="Subpage"></a>Subpage</h3><p>Subpages are also regular pages. You only need to create your page using <code>hexo n page xxxxx</code>.</p><p>Then, you can use the <code>gallery</code> tag plugin <a href="/posts/4aa8abbe/#Gallery%E7%9B%B8%E5%86%8A">gallery</a> for specific usage details.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="string">%</span> <span class="string">gallery</span> <span class="string">%</span>&#125;</span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)</span></span><br><span class="line"><span class="type">![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)</span></span><br><span class="line">&#123;<span class="string">%</span> <span class="string">endgallery</span> <span class="string">%</span>&#125;</span><br></pre></td></tr></table></figure><div class="gallery-container" data-type="data" data-button="" data-limit="10" data-first="10">    <div class="gallery-items">[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":"","title":""}]</div>  </div><div class="note pink icon-padding flat"><i class="note-icon fas fa-sitemap"></i><p>If you want to use links like <code>/photo/ohmygirl</code> to display your image content, you can move the entire <code>ohmygirl</code> folder to the <code>photo</code> folder.</p></div><h2 id="404-Page"><a href="#404-Page" class="headerlink" title="404 Page"></a>404 Page</h2><p>The theme comes with a simple 404 page, which you can enable in the settings.</p><div class="note info flat"><p>When previewing locally, the 404 page won&#39;t show up for the error pages.</p><p>To preview the 404 page, visit <code>http://localhost:4000/404.html</code>.</p></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># A simple 404 page</span></span><br><span class="line"><span class="attr">error_404:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">subtitle:</span> <span class="string">&quot;Page not found&quot;</span></span><br><span class="line">  <span class="attr">background:</span> </span><br></pre></td></tr></table></figure><p><img src="https://oss.012700.xyz/butterfly/2024/09/hexo-theme-butterfly-docs-error404.png" alt="hexo-theme-butterfly-docs-error404.png"></p><h2 id="Shuoshuo-Page"><a href="#Shuoshuo-Page" class="headerlink" title="Shuoshuo Page"></a>Shuoshuo Page</h2><div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-bell"></i><p>Added in V5.0</p></div><p><strong>Please note that the Shuoshuo interface only supports native Markdown format and does not support tag plugins or mathematical formulas.</strong></p><h3 id="Creating-a-Shuoshuo-Page"><a href="#Creating-a-Shuoshuo-Page" class="headerlink" title="Creating a Shuoshuo Page"></a>Creating a Shuoshuo Page</h3><div class="note info flat"><p>The filename for the Shuoshuo page doesn’t necessarily have to be &quot;shuoshuo&quot;; the &quot;shuoshuo&quot; in the example is just for reference.<br>Remember to add <code>type: &quot;shuoshuo&quot;</code>.</p></div><ol><li><p>Navigate to the root directory of your Hexo.</p></li><li><p>Enter <code>hexo new page shuoshuo</code>.</p></li><li><p>You will find the file <code>source/shuoshuo/index.md</code>.</p></li><li><p>Modify this file:</p></li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Shuoshuo</span><br><span class="line">date: 2018-06-07 22:17:49</span><br><span class="line"><span class="section">type: &#x27;shuoshuo&#x27;</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure><p>You can hide some Shuoshuo posts with configurable parameters:</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">limit:</span><br><span class="line">  type: date</span><br><span class="line">  value: 2024-06-20</span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>limit</td><td>[Optional] Configure the number of Shuoshuo posts to display</td></tr><tr><td>limit.type</td><td>[Optional] Configure the type for the number of Shuoshuo posts to display (date or num)</td></tr><tr><td>limit.value</td><td>[Optional] Configure the value for the number of Shuoshuo posts to display (when type is set to date, value must be a date. When type is set to num, value must be a number and greater than 0)</td></tr></tbody></table><h3 id="Data-Source"><a href="#Data-Source" class="headerlink" title="Data Source"></a>Data Source</h3><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Local Generation</button><button type="button" class="tab">Remote Pull</button></div><div class="tab-contents"><div class="tab-item-content active"><p>In the <code>source/_data</code> directory of your Hexo root (if there is no <code>_data</code> folder, please create one), create a file named <code>shuoshuo.yml</code>.</p><div class="note blue icon-padding flat"><i class="note-icon fa-solid fa-user"></i><p><code>author</code> and <code>avatar</code> are optional and will automatically fetch from the configuration file.</p><p>If you need to enable comments, you must configure the <code>key</code>, otherwise the comment button will not be displayed.</p></div><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="attr">author:</span> <span class="string">Butterfly</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">https://butterfly.js.org/img/avatar.png</span></span><br><span class="line">  <span class="attr">date:</span> <span class="number">2024-06-21 23:33:26</span></span><br><span class="line">  <span class="attr">content:</span> <span class="string">|</span></span><br><span class="line"><span class="string">    This is a sample content for **Author 1**.</span></span><br><span class="line"><span class="string">    ![Sample Image](https://via.placeholder.com/150)</span></span><br><span class="line"><span class="string"></span>  <span class="attr">key:</span> <span class="string">key-1</span></span><br><span class="line">  <span class="attr">tags:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">tags1</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">tags2</span></span><br><span class="line"><span class="bullet">-</span> <span class="attr">author:</span> <span class="string">Butterfly</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">https://butterfly.js.org/img/avatar.png</span></span><br><span class="line">  <span class="attr">date:</span> <span class="number">2024-06-20 23:33:26</span></span><br><span class="line">  <span class="attr">content:</span> <span class="string">|</span></span><br><span class="line"><span class="string">    This is a sample content for **Author 2**.</span></span><br><span class="line"><span class="string">    ![Sample Image](https://via.placeholder.com/150)</span></span><br><span class="line"><span class="string"></span>  <span class="attr">key:</span> <span class="string">key-2</span></span><br><span class="line">  <span class="attr">tags:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">tag2</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">tag3</span></span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> <span class="attr">author:</span> <span class="string">Butterfly</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">https://butterfly.js.org/img/avatar.png</span></span><br><span class="line">  <span class="attr">date:</span> <span class="number">2024-06-19 23:33:26</span></span><br><span class="line">  <span class="attr">content:</span> <span class="string">|</span></span><br><span class="line">    <span class="string">This</span> <span class="string">is</span> <span class="string">a</span> <span class="string">sample</span> <span class="string">content</span> <span class="string">for</span> <span class="string">**Author</span> <span class="number">3</span><span class="string">**.</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>author</td><td>【Optional】Author&#39;s name</td></tr><tr><td>avatar</td><td>【Optional】Author&#39;s avatar</td></tr><tr><td>date</td><td>【Required】Date</td></tr><tr><td>content</td><td>【Required】Content (Markdown or HTML format)</td></tr><tr><td>key</td><td>【Optional】 Unique identifier for comments, required to enable comments</td></tr><tr><td>tags</td><td>【Optional】Tags</td></tr></tbody></table></div><div class="tab-item-content"><div class="note warning flat"><p>Note: Selecting remote loading will invalidate the local generation method.<br>Remote pulling only supports <code>json</code>.</p></div><p>Add the remote link in the front matter of the Shuoshuo page Markdown.</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">shuoshuo<span class="emphasis">_url: xxxxx</span></span><br></pre></td></tr></table></figure><p>The format for JSON:</p><div class="note blue icon-padding flat"><i class="note-icon fa-solid fa-user"></i><p><code>author</code> and <code>avatar</code> are optional and will automatically fetch from the configuration file.</p></div><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;author&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Butterfly&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;avatar&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://butterfly.js.org/img/avatar.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;date&quot;</span><span class="punctuation">:</span> <span class="string">&quot;2024-06-21 23:33:26&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;content&quot;</span><span class="punctuation">:</span> <span class="string">&quot;This is a sample content for **Author 1**.&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;key&quot;</span><span class="punctuation">:</span> <span class="string">&quot;key-1&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;tags&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;tags1&quot;</span><span class="punctuation">,</span> <span class="string">&quot;tags2&quot;</span><span class="punctuation">]</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;author&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Butterfly&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;avatar&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://butterfly.js.org/img/avatar.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;date&quot;</span><span class="punctuation">:</span> <span class="string">&quot;2024-06-20 23:33:26&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;content&quot;</span><span class="punctuation">:</span> <span class="string">&quot;This is a sample content for **Author 2**.&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;key&quot;</span><span class="punctuation">:</span> <span class="string">&quot;key-2&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;tags&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;tag2&quot;</span><span class="punctuation">,</span> <span class="string">&quot;tag3&quot;</span><span class="punctuation">]</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;author&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Butterfly&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;avatar&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://butterfly.js.org/img/avatar.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;date&quot;</span><span class="punctuation">:</span> <span class="string">&quot;2024-06-19 23:33:26&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;content&quot;</span><span class="punctuation">:</span> <span class="string">&quot;This is a sample content for **Author 3**.&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>author</td><td>【Optional】Author&#39;s name</td></tr><tr><td>avatar</td><td>【Optional】Author&#39;s avatar</td></tr><tr><td>date</td><td>【Required】Date</td></tr><tr><td>content</td><td>【Required】Content (Markdown or HTML format)</td></tr><tr><td>key</td><td>【Optional】 Unique identifier for comments, required to enable comments</td></tr><tr><td>tags</td><td>【Optional】Tags</td></tr></tbody></table></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><a class="btn-beautify block pink right larger" href="/en/posts/butterfly-docs-en-theme-config/" title="📌 Butterfly document - Theme Configuration"><i class="far fa-hand-point-right"></i><span>📌 Butterfly document - Theme Configuration</span></a>]]></content>
    
    
      
      
    <summary type="html">&lt;div class=&quot;note orange icon-padding flat&quot;&gt;&lt;i class=&quot;note-icon fas fa-language&quot;&gt;&lt;/i&gt;&lt;p&gt;This article is translated from ChatGPT.&lt;/p&gt;
&lt;/div&gt;

</summary>
      
    
    
    
    <category term="Docs" scheme="https://butterfly.js.org/en/categories/Docs/"/>
    
    <category term="EN" scheme="https://butterfly.js.org/en/categories/Docs/EN/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Butterfly document - Get Started</title>
    <link href="https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/"/>
    <id>https://butterfly.js.org/en/posts/butterfly-docs-en-get-started/</id>
    <published>2023-06-30T05:07:52.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<div class="note orange icon-padding flat"><i class="note-icon fas fa-language"></i><p>This article is translated from ChatGPT.</p></div><div class="note green icon-padding flat"><i class="note-icon fas fa-rocket"></i><p> 📚  Table of Contents</p><p><a href="/en/posts/butterfly-docs-en-get-started/" title="Butterfly document - Get Started">🚀 Get Started</a> - <a href="/en/posts/butterfly-docs-en-theme-pages/" title="Butterfly document - Theme Pages">📑 Theme Pages</a> - <a href="/en/posts/butterfly-docs-en-theme-config/" title="Butterfly document - Theme Configuration">📌 Theme Configuration</a> - <a href="/en/posts/butterfly-docs-en-tag-plugins/" title="Butterfly document - Tag Plugins">⚔️ Tag Plugins</a> - <a href="/en/posts/butterfly-docs-en-theme-question/" title="Butterfly document - Q&amp;A">❓ Q&amp;A</a> - <a href="/en/posts/butterfly-docs-en-advanced-tutorial/" title="Butterfly document - Advanced Tutorial">⚡️ Advanced Tutorials</a></p></div><hr><p><code>hexo-theme-butterfly</code> is a theme developed based on <a href="https://github.com/Molunerfinn/hexo-theme-melody">hexo-theme-melody</a>.</p><h2 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active"><i class="fab fa-github-square"></i>Git Installation</button><button type="button" class="tab"><i class="fab fa-npm"></i>npm Installation</button></div><div class="tab-contents"><div class="tab-item-content active"><details class="toggle" style="border: 1px solid  you can use Gitee to install"><summary class="toggle-button" style="background-color:  you can use Gitee to install;">If you are in mainland China and have difficulty accessing GitHub</summary><div class="toggle-content"><p><strong>Stable Version [Recommended]</strong></p><p>In your Hexo root directory:</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> master https://gitee.com/immyw/hexo<span class="literal">-theme-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure><p><strong>Dev version</strong></p><blockquote><p>The dev version may have bugs; if you prefer stability, please install the stable version.</p></blockquote><p>If you want to install the latest dev branch, you can:</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> dev https://gitee.com/immyw/hexo<span class="literal">-theme-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure><div class="note info flat"><p>Upgrade method: In the theme directory, run <code>git pull</code></p></div></div></details><p><strong>Stable Version [Recommended]</strong></p><p>In your Hexo root directory:</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> master https://github.com/jerryc127/hexo<span class="literal">-theme-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure><p><strong>Dev Version</strong></p><blockquote><p>The dev version may have bugs; if you prefer stability, please install the stable version.</p></blockquote><p>If you want to install the latest dev branch, you can:</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> dev https://github.com/jerryc127/hexo<span class="literal">-theme-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure><div class="note info flat"><p>Upgrade method: In the theme directory, run <code>git pull</code></p></div></div><div class="tab-item-content"><blockquote><p>This method only supports Hexo version 5.0.0 and above.</p><p><em><strong>Installing via npm will not create a theme folder in themes but will create one in node_modules.</strong></em></p></blockquote><p>In your Hexo root directory:</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo<span class="literal">-theme-butterfly</span></span><br></pre></td></tr></table></figure><div class="note info flat"><p>Upgrade method: In the Hexo root directory, run <code>npm update hexo-theme-butterfly</code></p></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Apply-the-Theme"><a href="#Apply-the-Theme" class="headerlink" title="Apply the Theme"></a>Apply the Theme</h2><p>Modify the <code>_config.yml</code> in your Hexo root directory to set the theme to <code>butterfly</code>:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">theme:</span> <span class="string">butterfly</span></span><br></pre></td></tr></table></figure><h2 id="Install-Plugins"><a href="#Install-Plugins" class="headerlink" title="Install Plugins"></a>Install Plugins</h2><p>If you do not have the pug and stylus renderers, please download and install them:</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo<span class="literal">-renderer-pug</span> hexo<span class="literal">-renderer-stylus</span> <span class="literal">--save</span></span><br></pre></td></tr></table></figure><h2 id="Upgrade-Suggestions"><a href="#Upgrade-Suggestions" class="headerlink" title="Upgrade Suggestions"></a>Upgrade Suggestions</h2><div class="note blue icon-padding flat"><i class="note-icon fas fa-train"></i><p>After upgrading, please visit the <a href="https://github.com/jerryc127/hexo-theme-butterfly/releases">Releases</a> page on GitHub to check the update details of the new version.</p><p>If there are changes to the <code>_config</code> file, please update your configuration accordingly.</p></div><p>To minimize the inconvenience caused by theme upgrades, please use the following method (<strong>recommended but optional</strong>).</p><p>Create a file named <code>_config.butterfly.yml</code> in the root directory of hexo, and copy the <strong>contents</strong> of the theme&#39;s <code>_config.yml</code> to <code>_config.butterfly.yml</code>.</p><blockquote><p><strong>Note:</strong> Copy the <code>_config.yml</code> from the theme, not the <code>_config.yml</code> from hexo.</p></blockquote><blockquote><p><strong>Note:</strong> Do not delete the <code>_config.yml</code> in the theme directory.</p></blockquote><blockquote><p><strong>Note:</strong> From now on, configure in <code>_config.butterfly.yml</code> only.<br>If you use <code>_config.butterfly.yml</code>, the configurations in the theme&#39;s <code>_config.yml</code> will not be effective.</p></blockquote><p>Hexo will automatically <strong>merge</strong> the configurations from the theme&#39;s <code>_config.yml</code> and <code>_config.butterfly.yml</code>. If there are duplicate configurations, the ones in <code>_config.butterfly.yml</code> will take precedence.</p><p><img src="https://oss.012700.xyz/butterfly/2024/08/butterfly-docs-install-suggestion-1.png" alt="butterfly-docs-install-suggestion-1.png"></p><a class="btn-beautify block right larger" href="/en/posts/butterfly-docs-en-theme-pages/" title="📑 Butterfly document - Theme Pages"><i class="far fa-hand-point-right"></i><span>📑 Butterfly document - Theme Pages</span></a>]]></content>
    
    
      
      
    <summary type="html">&lt;div class=&quot;note orange icon-padding flat&quot;&gt;&lt;i class=&quot;note-icon fas fa-language&quot;&gt;&lt;/i&gt;&lt;p&gt;This article is translated from ChatGPT.&lt;/p&gt;
&lt;/div&gt;

</summary>
      
    
    
    
    <category term="Docs" scheme="https://butterfly.js.org/en/categories/Docs/"/>
    
    <category term="EN" scheme="https://butterfly.js.org/en/categories/Docs/EN/"/>
    
    
    <category term="en" scheme="https://butterfly.js.org/en/tags/en/"/>
    
    <category term="docs" scheme="https://butterfly.js.org/en/tags/docs/"/>
    
    <category term="hexo" scheme="https://butterfly.js.org/en/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Custom Sidebar</title>
    <link href="https://butterfly.js.org/en/posts/custom-sidebar/"/>
    <id>https://butterfly.js.org/en/posts/custom-sidebar/</id>
    <published>2020-12-30T13:48:10.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<div class="note info flat"><p>Applicable to &gt;&#x3D; 3.8.0</p></div><p>The sidebar now supports customization, allowing you to add your favorite widgets. You can add your own widgets or sort existing ones (the <code>Blog Data</code> and <code>Announcement</code> widgets are fixed, but others can be sorted).</p><h2 id="Widget-Sorting"><a href="#Widget-Sorting" class="headerlink" title="Widget Sorting"></a>Widget Sorting</h2><p>You only need to configure the <code>sort_order</code>. (It uses the <code>order</code> property of the <code>Flex</code> layout. For specific details, you can refer to the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Mozilla documentation</a>. In simple terms, use <strong>numbers</strong> to specify the sorting order. If not configured, the default value is 0. The smaller the number, the higher the sorting order.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">aside:</span></span><br><span class="line"> <span class="string">...</span></span><br><span class="line">  <span class="attr">card_recent_post:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_categories:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_tags:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_archives:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line">  <span class="attr">card_webinfo:</span></span><br><span class="line">    <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br><span class="line"></span><br><span class="line"><span class="attr">newest_comments:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">sort_order:</span> <span class="comment"># Don&#x27;t modify the setting unless you know how it works</span></span><br></pre></td></tr></table></figure><h2 id="Customizing-Widgets"><a href="#Customizing-Widgets" class="headerlink" title="Customizing Widgets"></a>Customizing Widgets</h2><p>If you want to add your own content to the sidebar, you can customize it.</p><h3 id="Create-widget-yml"><a href="#Create-widget-yml" class="headerlink" title="Create widget.yml"></a>Create widget.yml</h3><p>Create a file <code>widget.yml</code> in the <code>source/_data</code> directory of your Hexo blog (if the _data folder doesn&#39;t exist, create it).</p><h3 id="Format"><a href="#Format" class="headerlink" title="Format"></a>Format</h3><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">top:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">class_name:</span></span><br><span class="line">    <span class="attr">id_name:</span></span><br><span class="line">    <span class="attr">name:</span></span><br><span class="line">    <span class="attr">icon:</span></span><br><span class="line">    <span class="attr">html:</span></span><br><span class="line"></span><br><span class="line"><span class="attr">bottom:</span></span><br><span class="line">  <span class="bullet">-</span> <span class="attr">class_name:</span></span><br><span class="line">    <span class="attr">id_name:</span></span><br><span class="line">    <span class="attr">name:</span></span><br><span class="line">    <span class="attr">icon:</span></span><br><span class="line">    <span class="attr">order:</span></span><br><span class="line">    <span class="attr">html:</span></span><br></pre></td></tr></table></figure><blockquote><p>Parameter Explanation</p></blockquote><p><strong>top</strong>: The created widget will appear in the non-sticky area (visible on all pages).</p><p><strong>bottom</strong>: The created widget will appear in the sticky area (except for the article page).</p><table><thead><tr><th>Parameter</th><th>Explanation</th></tr></thead><tbody><tr><td>class_name</td><td>The parent class name of the created widget (optional)</td></tr><tr><td>id_name</td><td>The parent id name of the created widget (optional)</td></tr><tr><td>name</td><td>The title of the created widget</td></tr><tr><td>icon</td><td>The icon of the created widget</td></tr><tr><td>order</td><td>The sorting order of the created widget (optional)</td></tr><tr><td>html</td><td>The relevant code of the created widget</td></tr></tbody></table><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/adside-diy-parameter.png" alt="image-20201230223506507"></p><p>The generated code will be:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card-widget Your_written_class_name&quot;</span> <span class="attr">id</span>=<span class="string">&quot;Your_written_id_name&quot;</span> <span class="attr">style</span>=<span class="string">&quot;order: Your_written_order&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item-headline&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;Your_written_icon&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span>&gt;</span>Your_written_name<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item-content&quot;</span>&gt;</span></span><br><span class="line">        Your_written_html</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>If you need to make UI adjustments to the added widgets, please add CSS to the inject.</p><h3 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h3><p>Let&#39;s take the <a href="https://clustrmaps.com/profile/1b7ep/widget/code/globe">Visitor Map</a> as an example:</p><ol><li><p>Get the HTML code for the visitor map:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">id</span>=<span class="string">&quot;clstr_globe&quot;</span> <span class="attr">src</span>=<span class="string">&quot;//clustrmaps.com/globe.js?d=5V2tOKp8qAdRM-i8eu7ETTO9ugt5uKbbG-U7Yj8uMl8&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>Create widget.yml:</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">bottom:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">user-map</span></span><br><span class="line">      <span class="attr">id_name:</span> <span class="string">user-map</span></span><br><span class="line">      <span class="attr">name:</span> <span class="string">Visitor</span> <span class="string">Map</span></span><br><span class="line">      <span class="attr">icon:</span> <span class="string">fas</span> <span class="string">fa-heartbeat</span></span><br><span class="line">      <span class="attr">order:</span></span><br><span class="line">      <span class="attr">html:</span> <span class="string">&#x27;&lt;script type=&quot;text/javascript&quot; id=&quot;clstr_globe&quot; src=&quot;//clustrmaps.com/globe.js?d=5V2tOKp8qAdRM-i8eu7ETTO9ugt5uKbbG-U7Yj8uMl8&quot;&gt;&lt;/script&gt;&#x27;</span></span><br></pre></td></tr></table></figure></li><li><p>Run Hexo</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/aside-diy-sample.png" alt="image-20201230224442356"></p></li></ol>]]></content>
    
    
    <summary type="html">Customize the sidebar in Hexo&#39;s butterfly theme</summary>
    
    
    
    <category term="Advanced Tutorials" scheme="https://butterfly.js.org/en/categories/Advanced-Tutorials/"/>
    
    
    <category term="Tutorial" scheme="https://butterfly.js.org/en/tags/Tutorial/"/>
    
    <category term="Hexo" scheme="https://butterfly.js.org/en/tags/Hexo/"/>
    
    <category term="Butterfly" scheme="https://butterfly.js.org/en/tags/Butterfly/"/>
    
    <category term="Theme" scheme="https://butterfly.js.org/en/tags/Theme/"/>
    
  </entry>
  
  <entry>
    <title>When Setting top_img to false</title>
    <link href="https://butterfly.js.org/en/posts/c9711c19/"/>
    <id>https://butterfly.js.org/en/posts/c9711c19/</id>
    <published>2020-10-28T06:15:34.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<p>When the top_img is set to false, the top image is not displayed.</p>]]></content>
    
    
    <summary type="html">When setting top_img to false</summary>
    
    
    
    <category term="Demo" scheme="https://butterfly.js.org/en/categories/Demo/"/>
    
    
    <category term="top_img" scheme="https://butterfly.js.org/en/tags/top-img/"/>
    
    <category term="butterfly" scheme="https://butterfly.js.org/en/tags/butterfly/"/>
    
  </entry>
  
  <entry>
    <title>Customize code coloring</title>
    <link href="https://butterfly.js.org/en/posts/customize-code-coloring/"/>
    <id>https://butterfly.js.org/en/posts/customize-code-coloring/</id>
    <published>2020-06-13T12:41:59.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<p>In the <a href="http://butterfly.js.org/en//posts/butterfly-docs-en-theme-config-one/">Butterfly document - Theme Configuration Part 1</a>, the process of using custom code highlighting themes has been explained.</p><p>This article serves as a practical tutorial on using custom code coloring.</p><h2 id="Highlight"><a href="#Highlight" class="headerlink" title="Highlight"></a>Highlight</h2><p>We&#39;ll take the example of using the <code>Kimbie dark</code> theme for code coloring.</p><h3 id="Configure-hljs-to-true"><a href="#Configure-hljs-to-true" class="headerlink" title="Configure hljs to true"></a>Configure <code>hljs</code> to <code>true</code></h3><p>Modify the <code>_config.yml</code> file in the root directory of your Hexo project.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">auto_detect:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tab_replace:</span></span><br><span class="line">  <span class="attr">hljs:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><h3 id="Configure-highlight-theme-to-false"><a href="#Configure-highlight-theme-to-false" class="headerlink" title="Configure highlight_theme to false"></a>Configure <code>highlight_theme</code> to <code>false</code></h3><p>Edit the theme configuration file.</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_theme:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><h3 id="Download-and-Modify-the-CSS-File"><a href="#Download-and-Modify-the-CSS-File" class="headerlink" title="Download and Modify the CSS File"></a>Download and Modify the CSS File</h3><p>Go to <a href="https://github.com/highlightjs/highlight.js/blob/master/src/styles/kimbie.dark.css">Github</a> and find the <code>Kimbie dark</code> CSS.</p><p>Create a folder named <code>self</code> in the <code>source</code> folder of your Hexo project. Inside the <code>self</code> folder, create a file named <code>Kimbiedark.css</code>.</p><p>Copy the CSS code of <code>Kimbie dark</code> from Github and paste it into <code>Kimbiedark.css</code>. (Alternatively, you can directly download this CSS file from Github)</p><p>The content of <strong>Kimbiedark.css</strong> is as follows:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    Name:     Kimbie (dark)</span></span><br><span class="line"><span class="comment">    Author:   Jan T. Sott</span></span><br><span class="line"><span class="comment">    License:  Creative Commons Attribution-ShareAlike 4.0 Unported License</span></span><br><span class="line"><span class="comment">    URL:      https://github.com/idleberg/Kimbie-highlight.js</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Comment */</span></span><br><span class="line"><span class="selector-class">.hljs-comment</span>,</span><br><span class="line"><span class="selector-class">.hljs-quote</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#d6baad</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Red */</span></span><br><span class="line"><span class="selector-class">.hljs-variable</span>,</span><br><span class="line"><span class="selector-class">.hljs-template-variable</span>,</span><br><span class="line"><span class="selector-class">.hljs-tag</span>,</span><br><span class="line"><span class="selector-class">.hljs-name</span>,</span><br><span class="line"><span class="selector-class">.hljs-selector-id</span>,</span><br><span class="line"><span class="selector-class">.hljs-selector-class</span>,</span><br><span class="line"><span class="selector-class">.hljs-regexp</span>,</span><br><span class="line"><span class="selector-class">.hljs-meta</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#dc3958</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Orange */</span></span><br><span class="line"><span class="selector-class">.hljs-number</span>,</span><br><span class="line"><span class="selector-class">.hljs-built_in</span>,</span><br><span class="line"><span class="selector-class">.hljs-builtin-name</span>,</span><br><span class="line"><span class="selector-class">.hljs-literal</span>,</span><br><span class="line"><span class="selector-class">.hljs-type</span>,</span><br><span class="line"><span class="selector-class">.hljs-params</span>,</span><br><span class="line"><span class="selector-class">.hljs-deletion</span>,</span><br><span class="line"><span class="selector-class">.hljs-link</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#f79a32</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Yellow */</span></span><br><span class="line"><span class="selector-class">.hljs-title</span>,</span><br><span class="line"><span class="selector-class">.hljs-section</span>,</span><br><span class="line"><span class="selector-class">.hljs-attribute</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#f06431</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Green */</span></span><br><span class="line"><span class="selector-class">.hljs-string</span>,</span><br><span class="line"><span class="selector-class">.hljs-symbol</span>,</span><br><span class="line"><span class="selector-class">.hljs-bullet</span>,</span><br><span class="line"><span class="selector-class">.hljs-addition</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#889b4a</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Purple */</span></span><br><span class="line"><span class="selector-class">.hljs-keyword</span>,</span><br><span class="line"><span class="selector-class">.hljs-selector-tag</span>,</span><br><span class="line"><span class="selector-class">.hljs-function</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#98676a</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hljs</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">overflow-x</span>: auto;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#221a0f</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#d3af86</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.5em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hljs-emphasis</span> &#123;</span><br><span class="line">  <span class="attribute">font-style</span>: italic;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hljs-strong</span> &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>Modify the css to</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    Name:     Kimbie (dark)</span></span><br><span class="line"><span class="comment">    Author:   Jan T. Sott</span></span><br><span class="line"><span class="comment">    License:  Creative Commons Attribution-ShareAlike 4.0 Unported License</span></span><br><span class="line"><span class="comment">    URL:      https://github.com/idleberg/Kimbie-highlight.js</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* Newly Added Content</span></span><br><span class="line"><span class="comment">  -------------------------------------</span></span><br><span class="line"><span class="comment">  --hl-color                  Font color of the code block 【Required】 (Copy the color from .hljs below)</span></span><br><span class="line"><span class="comment">  --hl-bg                     Background color of the code block 【Required】 (Copy the background from .hljs below)</span></span><br><span class="line"><span class="comment">  --hltools-bg: #321a0f       Background color of the top toolbar in the code block 【Optional】 (You can skip configuring this if you disable copy, lang, and shrink)</span></span><br><span class="line"><span class="comment">  --hltools-color: #fff       Font color of the top toolbar in the code block 【Optional】 (You can skip configuring this if you disable copy, lang, and shrink)</span></span><br><span class="line"><span class="comment">  --hlnumber-bg: #221a0f      Background color of line numbers in the code block 【Optional】 (You can skip configuring this if you disable line_number)</span></span><br><span class="line"><span class="comment">  --hlnumber-color: #fff      Font color of line numbers in the code block 【Optional】 (You can skip configuring this if you disable line_number)</span></span><br><span class="line"><span class="comment">  --hlscrollbar-bg: #d3af86   Color of the scrollbar in the code block 【Optional】 (By default, it takes the main theme color)</span></span><br><span class="line"><span class="comment">  --hlexpand-bg: #d3af86      Background color when the code block is expanded at the bottom 【Optional】 (You can skip configuring this if you disable highlight_height_limit)</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">  <span class="attr">--hl-color</span>: <span class="number">#d3af86</span>;</span><br><span class="line">  <span class="attr">--hl-bg</span>: <span class="number">#221a0f</span>;</span><br><span class="line">  <span class="attr">--hltools-bg</span>: <span class="number">#321a0f</span>;</span><br><span class="line">  <span class="attr">--hltools-color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--hlnumber-bg</span>: <span class="number">#221a0f</span>;</span><br><span class="line">  <span class="attr">--hlnumber-color</span>: <span class="number">#fff</span>;</span><br><span class="line">  <span class="attr">--hlscrollbar-bg</span>: <span class="number">#d3af86</span>;</span><br><span class="line">  <span class="attr">--hlexpand-bg</span>: <span class="number">#d3af86</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Comment */</span></span><br><span class="line"><span class="selector-class">.hljs-comment</span>,</span><br><span class="line"><span class="selector-class">.hljs-quote</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#d6baad</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Red */</span></span><br><span class="line"><span class="selector-class">.hljs-variable</span>,</span><br><span class="line"><span class="selector-class">.hljs-template-variable</span>,</span><br><span class="line"><span class="selector-class">.hljs-tag</span>,</span><br><span class="line"><span class="selector-class">.hljs-name</span>,</span><br><span class="line"><span class="selector-class">.hljs-selector-id</span>,</span><br><span class="line"><span class="selector-class">.hljs-selector-class</span>,</span><br><span class="line"><span class="selector-class">.hljs-regexp</span>,</span><br><span class="line"><span class="selector-class">.hljs-meta</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#dc3958</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Orange */</span></span><br><span class="line"><span class="selector-class">.hljs-number</span>,</span><br><span class="line"><span class="selector-class">.hljs-built_in</span>,</span><br><span class="line"><span class="selector-class">.hljs-builtin-name</span>,</span><br><span class="line"><span class="selector-class">.hljs-literal</span>,</span><br><span class="line"><span class="selector-class">.hljs-type</span>,</span><br><span class="line"><span class="selector-class">.hljs-params</span>,</span><br><span class="line"><span class="selector-class">.hljs-deletion</span>,</span><br><span class="line"><span class="selector-class">.hljs-link</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#f79a32</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Yellow */</span></span><br><span class="line"><span class="selector-class">.hljs-title</span>,</span><br><span class="line"><span class="selector-class">.hljs-section</span>,</span><br><span class="line"><span class="selector-class">.hljs-attribute</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#f06431</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Green */</span></span><br><span class="line"><span class="selector-class">.hljs-string</span>,</span><br><span class="line"><span class="selector-class">.hljs-symbol</span>,</span><br><span class="line"><span class="selector-class">.hljs-bullet</span>,</span><br><span class="line"><span class="selector-class">.hljs-addition</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#889b4a</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Kimbie Purple */</span></span><br><span class="line"><span class="selector-class">.hljs-keyword</span>,</span><br><span class="line"><span class="selector-class">.hljs-selector-tag</span>,</span><br><span class="line"><span class="selector-class">.hljs-function</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#98676a</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Modified content: Replace .hljs with #article-container figure.highlight .hljs *</span></span><br><span class="line"><span class="comment">/* ------------------------------------- */</span></span><br><span class="line"><span class="selector-id">#article-container</span> <span class="selector-tag">figure</span><span class="selector-class">.highlight</span> <span class="selector-class">.hljs</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: block;</span><br><span class="line">  <span class="attribute">overflow-x</span>: auto;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#221a0f</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#d3af86</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.5em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hljs-emphasis</span> &#123;</span><br><span class="line">  <span class="attribute">font-style</span>: italic;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hljs-strong</span> &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="File-Inclusion"><a href="#File-Inclusion" class="headerlink" title="File Inclusion"></a>File Inclusion</h3><p>Modify the <code>theme configuration file</code></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/self/Kimbiedark.css&quot;&gt;</span></span><br></pre></td></tr></table></figure><h3 id="Run-Hexo"><a href="#Run-Hexo" class="headerlink" title="Run Hexo"></a>Run Hexo</h3><p>After running Hexo, you should be able to see the modified effect.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-highlight-self-css.png"></p><h2 id="Prismjs"><a href="#Prismjs" class="headerlink" title="Prismjs"></a>Prismjs</h2><p>Using the <code>prism-duotone-light</code> theme for color scheme customization.</p><h3 id="Configure-highlight-theme-to-false-1"><a href="#Configure-highlight-theme-to-false-1" class="headerlink" title="Configure highlight_theme to false"></a>Configure <code>highlight_theme</code> to <code>false</code></h3><p>Modify the <code>theme configuration file</code></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight_theme:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><h3 id="Download-and-Modify-CSS-File"><a href="#Download-and-Modify-CSS-File" class="headerlink" title="Download and Modify CSS File"></a>Download and Modify CSS File</h3><p>Find the CSS file for <code>prism-duotone-light</code> on <a href="https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-light.css">Github</a></p><p>Create a <code>self</code> folder in the <code>source</code> directory of Hexo and then create a <code>duotone.css</code> file inside the <code>self</code> folder.</p><p>Copy the CSS code for <code>prism-duotone-light</code> from Github to the <code>duotone.css</code> file. (You can also directly download this CSS from Github)</p><p><strong>prism-duotone-light</strong> code is as follows:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">Name:   Duotone Light</span></span><br><span class="line"><span class="comment">Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css)</span></span><br><span class="line"><span class="comment">Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span>,</span><br><span class="line">pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> &#123;</span><br><span class="line"><span class="attribute">font-family</span>: Consolas, Menlo, Monaco, <span class="string">&quot;Andale Mono WT&quot;</span>, <span class="string">&quot;Andale Mono&quot;</span>, <span class="string">&quot;Lucida Console&quot;</span>, <span class="string">&quot;Lucida Sans Typewriter&quot;</span>, <span class="string">&quot;DejaVu Sans Mono&quot;</span>, <span class="string">&quot;Bitstream Vera Sans Mono&quot;</span>, <span class="string">&quot;Liberation Mono&quot;</span>, <span class="string">&quot;Nimbus Mono L&quot;</span>, <span class="string">&quot;Courier New&quot;</span>, Courier, monospace;</span><br><span class="line"><span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line"><span class="attribute">line-height</span>: <span class="number">1.375</span>;</span><br><span class="line"><span class="attribute">direction</span>: ltr;</span><br><span class="line"><span class="attribute">text-align</span>: left;</span><br><span class="line"><span class="attribute">white-space</span>: pre;</span><br><span class="line"><span class="attribute">word-spacing</span>: normal;</span><br><span class="line"><span class="attribute">word-break</span>: normal;</span><br><span class="line"></span><br><span class="line">-moz-<span class="attribute">tab-size</span>: <span class="number">4</span>;</span><br><span class="line">-o-<span class="attribute">tab-size</span>: <span class="number">4</span>;</span><br><span class="line"><span class="attribute">tab-size</span>: <span class="number">4</span>;</span><br><span class="line"></span><br><span class="line">-webkit-<span class="attribute">hyphens</span>: none;</span><br><span class="line">-moz-<span class="attribute">hyphens</span>: none;</span><br><span class="line">-ms-<span class="attribute">hyphens</span>: none;</span><br><span class="line"><span class="attribute">hyphens</span>: none;</span><br><span class="line"><span class="attribute">background</span>: <span class="number">#faf8f5</span>;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#728fcb</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">pre &gt; <span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> &#123;</span><br><span class="line"><span class="attribute">font-size</span>: <span class="number">1em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span>::-moz-selection, pre[class*=<span class="string">&quot;language-&quot;</span>] ::-moz-selection,</span><br><span class="line">code[class*=<span class="string">&quot;language-&quot;</span>]::-moz-selection, code[class*=<span class="string">&quot;language-&quot;</span>] ::-moz-selection &#123;</span><br><span class="line"><span class="attribute">text-shadow</span>: none;</span><br><span class="line"><span class="attribute">background</span>: <span class="number">#faf8f5</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span><span class="selector-pseudo">::selection</span>, pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> <span class="selector-pseudo">::selection</span>,</span><br><span class="line"><span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span><span class="selector-pseudo">::selection</span>, <span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> <span class="selector-pseudo">::selection</span> &#123;</span><br><span class="line"><span class="attribute">text-shadow</span>: none;</span><br><span class="line"><span class="attribute">background</span>: <span class="number">#faf8f5</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Code blocks */</span></span><br><span class="line">pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> &#123;</span><br><span class="line"><span class="attribute">padding</span>: <span class="number">1em</span>;</span><br><span class="line"><span class="attribute">margin</span>: .<span class="number">5em</span> <span class="number">0</span>;</span><br><span class="line"><span class="attribute">overflow</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Inline code */</span></span><br><span class="line"><span class="selector-pseudo">:not</span>(pre) &gt; <span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> &#123;</span><br><span class="line"><span class="attribute">padding</span>: .<span class="number">1em</span>;</span><br><span class="line"><span class="attribute">border-radius</span>: .<span class="number">3em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.comment</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.prolog</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.doctype</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.cdata</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#b6ad9a</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.punctuation</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#b6ad9a</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.namespace</span> &#123;</span><br><span class="line"><span class="attribute">opacity</span>: .<span class="number">7</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.tag</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.operator</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.number</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#063289</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.property</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.function</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#b29762</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.tag-id</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.selector</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.atrule-id</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#2d2006</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">code</span><span class="selector-class">.language-javascript</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.attr-name</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#896724</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">code</span><span class="selector-class">.language-css</span>,</span><br><span class="line"><span class="selector-tag">code</span><span class="selector-class">.language-scss</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.boolean</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.string</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.entity</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.url</span>,</span><br><span class="line"><span class="selector-class">.language-css</span> <span class="selector-class">.token</span><span class="selector-class">.string</span>,</span><br><span class="line"><span class="selector-class">.language-scss</span> <span class="selector-class">.token</span><span class="selector-class">.string</span>,</span><br><span class="line"><span class="selector-class">.style</span> <span class="selector-class">.token</span><span class="selector-class">.string</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.attr-value</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.keyword</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.control</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.directive</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.unit</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.statement</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.regex</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.atrule</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#728fcb</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.placeholder</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.variable</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#93abdc</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.deleted</span> &#123;</span><br><span class="line"><span class="attribute">text-decoration</span>: line-through;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.inserted</span> &#123;</span><br><span class="line"><span class="attribute">border-bottom</span>: <span class="number">1px</span> dotted <span class="number">#2d2006</span>;</span><br><span class="line"><span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.italic</span> &#123;</span><br><span class="line"><span class="attribute">font-style</span>: italic;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.important</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.bold</span> &#123;</span><br><span class="line"><span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.important</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#896724</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.entity</span> &#123;</span><br><span class="line"><span class="attribute">cursor</span>: help;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">pre &gt; <span class="selector-tag">code</span><span class="selector-class">.highlight</span> &#123;</span><br><span class="line"><span class="attribute">outline</span>: .<span class="number">4em</span> solid <span class="number">#896724</span>;</span><br><span class="line"><span class="attribute">outline-offset</span>: .<span class="number">4em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* overrides color-values for the Line Numbers plugin</span></span><br><span class="line"><span class="comment"> * http://prismjs.com/plugins/line-numbers/</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="selector-class">.line-numbers</span> <span class="selector-class">.line-numbers-rows</span> &#123;</span><br><span class="line"><span class="attribute">border-right-color</span>: <span class="number">#ece8de</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.line-numbers-rows</span> &gt; <span class="selector-tag">span</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#cdc4b1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* overrides color-values for the Line Highlight plugin</span></span><br><span class="line"><span class="comment"> * http://prismjs.com/plugins/line-highlight/</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="selector-class">.line-highlight</span> &#123;</span><br><span class="line"><span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0.2</span>);</span><br><span class="line"><span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(left, <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0.2</span>) <span class="number">70%</span>, <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0</span>));</span><br><span class="line"><span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to right, <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0.2</span>) <span class="number">70%</span>, <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>Modify the css to</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Newly Added Content</span></span><br><span class="line"><span class="comment">  ------------------------------------- </span></span><br><span class="line"><span class="comment">  --hl-color                  Code box font color [Required] (Copy the color from pre[class*=&quot;language-&quot;] below and paste it here)</span></span><br><span class="line"><span class="comment">  --hl-bg                     Code box background color [Required] (Copy the background from pre[class*=&quot;language-&quot;] below and paste it here)</span></span><br><span class="line"><span class="comment">  --hltools-bg: #321a0f       Code box top toolbar background color [Optional] (You can omit this if you have turned off copy, lang, and shrink)</span></span><br><span class="line"><span class="comment">  --hltools-color: #fff       Code box top toolbar font color [Optional] (You can omit this if you have turned off copy, lang, and shrink)</span></span><br><span class="line"><span class="comment">  --hlnumber-bg: #221a0f      Code box line number background color [Optional] (You can omit this if you have turned off line_number)</span></span><br><span class="line"><span class="comment">  --hlnumber-color: #fff      Code box line number font color [Optional] (You can omit this if you have turned off line_number)</span></span><br><span class="line"><span class="comment">  --hlscrollbar-bg: #d3af86   Code box scrollbar color [Optional] (Defaults to the main theme color)</span></span><br><span class="line"><span class="comment">  --hlexpand-bg: #d3af86      Code box bottom expansion background color [Optional] (You can omit this if you have turned off highlight_height_limit)</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">  <span class="attr">--hl-color</span>: <span class="number">#728fcb</span>;</span><br><span class="line">  <span class="attr">--hl-bg</span>: <span class="number">#faf8f5</span>;</span><br><span class="line">  <span class="attr">--hltools-bg</span>: xxxxxxx;</span><br><span class="line">  <span class="attr">--hltools-color</span>: xxxxxxx;</span><br><span class="line">  <span class="attr">--hlnumber-bg</span>: xxxxxxx;</span><br><span class="line">  <span class="attr">--hlnumber-color</span>: xxxxxxxx;</span><br><span class="line">  <span class="attr">--hlscrollbar-bg</span>: xxxxx;</span><br><span class="line">  <span class="attr">--hlexpand-bg</span>: xxxxxxx</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* ------------------------------------- */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* You can delete these (or keep them if there are conflicts) */</span></span><br><span class="line"><span class="comment">/* ------------------------------------- */</span></span><br><span class="line"><span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span>,</span><br><span class="line">pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> &#123;</span><br><span class="line"><span class="attribute">font-family</span>: Consolas, Menlo, Monaco, <span class="string">&quot;Andale Mono WT&quot;</span>, <span class="string">&quot;Andale Mono&quot;</span>, <span class="string">&quot;Lucida Console&quot;</span>, <span class="string">&quot;Lucida Sans Typewriter&quot;</span>, <span class="string">&quot;DejaVu Sans Mono&quot;</span>, <span class="string">&quot;Bitstream Vera Sans Mono&quot;</span>, <span class="string">&quot;Liberation Mono&quot;</span>, <span class="string">&quot;Nimbus Mono L&quot;</span>, <span class="string">&quot;Courier New&quot;</span>, Courier, monospace;</span><br><span class="line"><span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line"><span class="attribute">line-height</span>: <span class="number">1.375</span>;</span><br><span class="line"><span class="attribute">direction</span>: ltr;</span><br><span class="line"><span class="attribute">text-align</span>: left;</span><br><span class="line"><span class="attribute">white-space</span>: pre;</span><br><span class="line"><span class="attribute">word-spacing</span>: normal;</span><br><span class="line"><span class="attribute">word-break</span>: normal;</span><br><span class="line"></span><br><span class="line">-moz-<span class="attribute">tab-size</span>: <span class="number">4</span>;</span><br><span class="line">-o-<span class="attribute">tab-size</span>: <span class="number">4</span>;</span><br><span class="line"><span class="attribute">tab-size</span>: <span class="number">4</span>;</span><br><span class="line"></span><br><span class="line">-webkit-<span class="attribute">hyphens</span>: none;</span><br><span class="line">-moz-<span class="attribute">hyphens</span>: none;</span><br><span class="line">-ms-<span class="attribute">hyphens</span>: none;</span><br><span class="line"><span class="attribute">hyphens</span>: none;</span><br><span class="line"><span class="attribute">background</span>: <span class="number">#faf8f5</span>;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#728fcb</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">pre &gt; <span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> &#123;</span><br><span class="line"><span class="attribute">font-size</span>: <span class="number">1em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span>::-moz-selection, pre[class*=<span class="string">&quot;language-&quot;</span>] ::-moz-selection,</span><br><span class="line">code[class*=<span class="string">&quot;language-&quot;</span>]::-moz-selection, code[class*=<span class="string">&quot;language-&quot;</span>] ::-moz-selection &#123;</span><br><span class="line"><span class="attribute">text-shadow</span>: none;</span><br><span class="line"><span class="attribute">background</span>: <span class="number">#faf8f5</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span><span class="selector-pseudo">::selection</span>, pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> <span class="selector-pseudo">::selection</span>,</span><br><span class="line"><span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span><span class="selector-pseudo">::selection</span>, <span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> <span class="selector-pseudo">::selection</span> &#123;</span><br><span class="line"><span class="attribute">text-shadow</span>: none;</span><br><span class="line"><span class="attribute">background</span>: <span class="number">#faf8f5</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Code blocks */</span></span><br><span class="line">pre<span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> &#123;</span><br><span class="line"><span class="attribute">padding</span>: <span class="number">1em</span>;</span><br><span class="line"><span class="attribute">margin</span>: .<span class="number">5em</span> <span class="number">0</span>;</span><br><span class="line"><span class="attribute">overflow</span>: auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Inline code */</span></span><br><span class="line"><span class="selector-pseudo">:not</span>(pre) &gt; <span class="selector-tag">code</span><span class="selector-attr">[class*=<span class="string">&quot;language-&quot;</span>]</span> &#123;</span><br><span class="line"><span class="attribute">padding</span>: .<span class="number">1em</span>;</span><br><span class="line"><span class="attribute">border-radius</span>: .<span class="number">3em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* ------------------------------------- */</span></span><br><span class="line"><span class="comment">/* Up to this point, you can delete */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.comment</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.prolog</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.doctype</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.cdata</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#b6ad9a</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.punctuation</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#b6ad9a</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.namespace</span> &#123;</span><br><span class="line"><span class="attribute">opacity</span>: .<span class="number">7</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.tag</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.operator</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.number</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#063289</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.property</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.function</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#b29762</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.tag-id</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.selector</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.atrule-id</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#2d2006</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">code</span><span class="selector-class">.language-javascript</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.attr-name</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#896724</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">code</span><span class="selector-class">.language-css</span>,</span><br><span class="line"><span class="selector-tag">code</span><span class="selector-class">.language-scss</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.boolean</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.string</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.entity</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.url</span>,</span><br><span class="line"><span class="selector-class">.language-css</span> <span class="selector-class">.token</span><span class="selector-class">.string</span>,</span><br><span class="line"><span class="selector-class">.language-scss</span> <span class="selector-class">.token</span><span class="selector-class">.string</span>,</span><br><span class="line"><span class="selector-class">.style</span> <span class="selector-class">.token</span><span class="selector-class">.string</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.attr-value</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.keyword</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.control</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.directive</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.unit</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.statement</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.regex</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.atrule</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#728fcb</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.placeholder</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.variable</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#93abdc</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.deleted</span> &#123;</span><br><span class="line"><span class="attribute">text-decoration</span>: line-through;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.inserted</span> &#123;</span><br><span class="line"><span class="attribute">border-bottom</span>: <span class="number">1px</span> dotted <span class="number">#2d2006</span>;</span><br><span class="line"><span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.italic</span> &#123;</span><br><span class="line"><span class="attribute">font-style</span>: italic;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.important</span>,</span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.bold</span> &#123;</span><br><span class="line"><span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.important</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#896724</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.token</span><span class="selector-class">.entity</span> &#123;</span><br><span class="line"><span class="attribute">cursor</span>: help;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">pre &gt; <span class="selector-tag">code</span><span class="selector-class">.highlight</span> &#123;</span><br><span class="line"><span class="attribute">outline</span>: .<span class="number">4em</span> solid <span class="number">#896724</span>;</span><br><span class="line"><span class="attribute">outline-offset</span>: .<span class="number">4em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* overrides color-values for the Line Numbers plugin</span></span><br><span class="line"><span class="comment"> * http://prismjs.com/plugins/line-numbers/</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="selector-class">.line-numbers</span> <span class="selector-class">.line-numbers-rows</span> &#123;</span><br><span class="line"><span class="attribute">border-right-color</span>: <span class="number">#ece8de</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.line-numbers-rows</span> &gt; <span class="selector-tag">span</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#cdc4b1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* overrides color-values for the Line Highlight plugin</span></span><br><span class="line"><span class="comment"> * http://prismjs.com/plugins/line-highlight/</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="selector-class">.line-highlight</span> &#123;</span><br><span class="line"><span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0.2</span>);</span><br><span class="line"><span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(left, <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0.2</span>) <span class="number">70%</span>, <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0</span>));</span><br><span class="line"><span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to right, <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0.2</span>) <span class="number">70%</span>, <span class="built_in">rgba</span>(<span class="number">45</span>, <span class="number">32</span>, <span class="number">6</span>, <span class="number">0</span>));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="Import-Files"><a href="#Import-Files" class="headerlink" title="Import Files"></a>Import Files</h3><p>Modify the <code>theme configuration file</code></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/self/duotone.css&quot;&gt;</span></span><br></pre></td></tr></table></figure><h3 id="Run-Hexo-1"><a href="#Run-Hexo-1" class="headerlink" title="Run Hexo"></a>Run Hexo</h3><p>After running Hexo, you should be able to see the modified effect.</p><p><img src="https://jsd.012700.xyz/gh/jerryc127/CDN/img/butterfly-custom-code-color-prismjs.png" alt="image-20200831000324474"></p>]]></content>
    
    
    <summary type="html">Customizing Code Coloring</summary>
    
    
    
    <category term="Advanced Tutorials" scheme="https://butterfly.js.org/en/categories/Advanced-Tutorials/"/>
    
    
    <category term="Tutorial" scheme="https://butterfly.js.org/en/tags/Tutorial/"/>
    
    <category term="Hexo" scheme="https://butterfly.js.org/en/tags/Hexo/"/>
    
    <category term="Butterfly" scheme="https://butterfly.js.org/en/tags/Butterfly/"/>
    
    <category term="Theme" scheme="https://butterfly.js.org/en/tags/Theme/"/>
    
  </entry>
  
  <entry>
    <title>no cover</title>
    <link href="https://butterfly.js.org/en/posts/913b2502/"/>
    <id>https://butterfly.js.org/en/posts/913b2502/</id>
    <published>2020-03-09T19:45:41.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<p>This post no cover</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;This post no cover&lt;/p&gt;
</summary>
      
    
    
    
    <category term="Demo" scheme="https://butterfly.js.org/en/categories/Demo/"/>
    
    
    <category term="demo" scheme="https://butterfly.js.org/en/tags/demo/"/>
    
  </entry>
  
  <entry>
    <title>Tag Plugins</title>
    <link href="https://butterfly.js.org/en/posts/tag-plugins/"/>
    <id>https://butterfly.js.org/en/posts/tag-plugins/</id>
    <published>2020-01-05T13:41:03.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<h2 id="Tabs"><a href="#Tabs" class="headerlink" title="Tabs"></a>Tabs</h2><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">Sonnet No. 18</button><button type="button" class="tab">Gallery</button><button type="button" class="tab">Madrigal</button></div><div class="tab-contents"><div class="tab-item-content active"><p>Shall I compare thee to a summer’s day?<br>Thou art more lovely and more temperate:<br>Rough winds do shake the darling buds of May,<br>And summer’s lease hath all too short a date:<br>Sometime too hot the eye of heaven shines,<br>And often is his gold complexion dimm’d;<br>And every fair from fair sometime declines,<br>By chance, or nature’s changing course untrimm’d;<br>But thy eternal summer shall not fade,<br>Nor lose possession of that fair thou ow’st,<br>Nor shall death brag thou wander’st in his shade,<br>When in eternal lines to time thou grow’st:<br>So long as men can breathe, or eyes can see,<br>So long lives this, and this gives life to thee.</p></div><div class="tab-item-content"><div class="gallery-container" data-type="data" data-button="" data-limit="10" data-first="10">    <div class="gallery-items">[{"url":"https://i.loli.net/2019/12/25/Jj8FXuKVlOea4Ec.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/eqBGrXx9tWsZOao.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/LjW2CfNSD7OaY4v.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/pGIhaPjxtl438U9.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/hzjJBR2x5SEmsbC.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ucNDmUqQkrFfAWv.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/oj1wAnGSKtFvXIJ.jpg","alt":"","title":""}]</div>  </div></div><div class="tab-item-content"><p>My Love in her attire doth show her wit,<br>It doth so well become her;<br>For every season she hath dressings fit,<br>For Winter, Spring, and Summer.<br>No beauty she doth miss<br>When all her robes are on:<br>But Beauty’s self she is<br>When all her robes are gone.</p><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">To Celia</button><button type="button" class="tab">A Drinking Song</button><button type="button" class="tab">When You Are Old</button></div><div class="tab-contents"><div class="tab-item-content active"><p>Drink to me only with thine eyes,<br>And I will pledge with mine;<br>Or leave a kiss but in the cup,<br>And I’ll not look for wine.<br>The thirst that from the soul doth rise<br>Doth ask a drink divine;<br>But might I of Jove’s nectar sup,<br>I would not change for thine.</p><p>I sent thee late a rosy wreath,<br>Not so much honouring thee<br>As giving it a hope that there<br>It could not withered be.<br>But thou thereon didst only breathe,<br>And send’st it back to me;<br>Since when it grows and smells, I swear,<br>Not of itself but thee!</p></div><div class="tab-item-content"><p> Wine comes in at the mouth<br>And love comes in at the eye;<br>That’s all we know for truth<br>Before we grow and die.<br>I lift the glass to my mouth,<br>I look at you, and I sigh.</p></div><div class="tab-item-content"><p>When you are old and grey and full of sleep,<br>And nodding by the fire, take down this book,<br>And slowly read, and dream of the soft look<br>Your eyes had once, and of their shadows deep;</p><p>How many loved your moments of glad grace,<br>And loved your beauty with love false or true,<br>But one man loved the pilgrim Soul in you,<br>And loved the sorrows of your changing face;</p><p>And bending down beside the glowing bars,<br>Murmur, a little sadly, how Love fled<br>And paced upon the mountains overhead<br>And hid his face amid a crowd of stars.</p><div class="tabs"><div class="nav-tabs"><button type="button" class="tab active">one</button><button type="button" class="tab">two</button><button type="button" class="tab">three</button></div><div class="tab-contents"><div class="tab-item-content active"><p>qwertyuiop</p></div><div class="tab-item-content"><p>asdfghjkl</p></div><div class="tab-item-content"><p>zxcvbnm</p></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div><h2 id="Button"><a href="#Button" class="headerlink" title="Button"></a>Button</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><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">This is my website, click the button &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,,outline%&#125;</span><br></pre></td></tr></table></figure><p>This is my website, click the button <a class="btn-beautify " href="https://butterfly.js.org" title="Butterfly"><span>Butterfly</span></a></p><p>This is my website, click the button <a class="btn-beautify outline" href="https://butterfly.js.org" title="Butterfly"><span>Butterfly</span></a></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">This is my website, click the button  &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,block larger %&#125;</span><br><span class="line">This is my website, click the button  &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,block center larger %&#125;</span><br><span class="line">This is my website, click the button  &#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,block right blue larger %&#125;</span><br></pre></td></tr></table></figure><a class="btn-beautify block larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify block center larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify block right blue larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><h3 id="option"><a href="#option" class="headerlink" title="option"></a>option</h3><blockquote><p>more than one button in center</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-center&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,green larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><div class="btn-center"><a class="btn-beautify larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify blue larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify pink larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify red larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify purple larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify orange larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify green larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a></div><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-center&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://butterfly.js.org&#x27;,Butterfly,far fa-hand-point-right,outline green larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure><div class="btn-center"><a class="btn-beautify outline larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline blue larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline pink larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline red larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline purple larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline orange larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a><a class="btn-beautify outline green larger" href="https://butterfly.js.org" title="Butterfly"><i class="far fa-hand-point-right"></i><span>Butterfly</span></a></div><h2 id="mermaid"><a href="#mermaid" class="headerlink" title="mermaid"></a>mermaid</h2><div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>    pie    title Key elements in Product X    &quot;Calcium&quot; : 42.96    &quot;Potassium&quot; : 50.05    &quot;Magnesium&quot; : 10.01    &quot;Iron&quot; :  5  </pre></div><div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>    gantt    title A Gantt Diagram    dateFormat  YYYY-MM-DD    section Section    A task           :a1, 2014-01-01, 30d    Another task     :after a1  , 20d    section Another    Task in sec      :2014-01-12  , 12d    another task      : 24d  </pre></div><div class="mermaid-wrap"><pre class="mermaid-src" data-config="{}" hidden>    gantt    title A Gantt Diagram    dateFormat  YYYY-MM-DD    section Section    A task           :a1, 2014-01-01, 30d    Another task     :after a1  , 20d    section Another    Task in sec      :2014-01-12  , 12d    another task      : 24d  </pre></div><h2 id="Note-Bootstrap-Callout"><a href="#Note-Bootstrap-Callout" class="headerlink" title="Note (Bootstrap Callout)"></a>Note (Bootstrap Callout)</h2><h3 id="Usage-1"><a href="#Usage-1" class="headerlink" title="Usage 1"></a>Usage 1</h3><blockquote><p>simple</p></blockquote><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></pre></td><td class="code"><pre><span class="line">&#123;% note simple %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default simple %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary simple %&#125;</span><br><span class="line">Primary Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success simple %&#125;</span><br><span class="line">Success Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info simple %&#125;</span><br><span class="line">Info Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning simple %&#125;</span><br><span class="line">Warning Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger simple %&#125;</span><br><span class="line">Danger Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note simple"><p>Default Callout Tag</p></div><div class="note default simple"><p>Default Callout Tag</p></div><div class="note primary simple"><p>Primary Callout Tag</p></div><div class="note success simple"><p>Success Callout Tag</p></div><div class="note info simple"><p>Info Callout Tag</p></div><div class="note warning simple"><p>Warning Callout Tag</p></div><div class="note danger simple"><p>Danger Callout Tag</p></div><blockquote><p>modern</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><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">&#123;% note modern %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default modern %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary modern %&#125;</span><br><span class="line">Primary Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success modern %&#125;</span><br><span class="line">Success Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info modern %&#125;</span><br><span class="line">Info Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning modern %&#125;</span><br><span class="line">Warning Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger modern %&#125;</span><br><span class="line">Danger Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note modern"><p>Default Callout Tag</p></div><div class="note default modern"><p>Default Callout Tag</p></div><div class="note primary modern"><p>Primary Callout Tag</p></div><div class="note success modern"><p>Success Callout Tag</p></div><div class="note info modern"><p>Info Callout Tag</p></div><div class="note warning modern"><p>Warning Callout Tag</p></div><div class="note danger modern"><p>Danger Callout Tag</p></div><blockquote><p>flat</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><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">&#123;% note flat %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default flat %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary flat %&#125;</span><br><span class="line">Primary Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success flat %&#125;</span><br><span class="line">Success Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info flat %&#125;</span><br><span class="line">Info Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning flat %&#125;</span><br><span class="line">Warning Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger flat %&#125;</span><br><span class="line">Danger Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note flat"><p>Default Callout Tag</p></div><div class="note default flat"><p>Default Callout Tag</p></div><div class="note primary flat"><p>Primary Callout Tag</p></div><div class="note success flat"><p>Success Callout Tag</p></div><div class="note info flat"><p>Info Callout Tag</p></div><div class="note warning flat"><p>Warning Callout Tag</p></div><div class="note danger flat"><p>Danger Callout Tag</p></div><blockquote><p>disabled</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><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">&#123;% note disabled %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default disabled %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary disabled %&#125;</span><br><span class="line">Primary Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success disabled %&#125;</span><br><span class="line">Success Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info disabled %&#125;</span><br><span class="line">Info Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning disabled %&#125;</span><br><span class="line">Warning Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger disabled %&#125;</span><br><span class="line">Danger Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note disabled"><p>Default Callout Tag</p></div><div class="note default disabled"><p>Default Callout Tag</p></div><div class="note primary disabled"><p>Primary Callout Tag</p></div><div class="note success disabled"><p>Success Callout Tag</p></div><div class="note info disabled"><p>Info Callout Tag</p></div><div class="note warning disabled"><p>Warning Callout Tag</p></div><div class="note danger disabled"><p>Danger Callout Tag</p></div><blockquote><p>no-icon</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><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">&#123;% note no-icon %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note default no-icon %&#125;</span><br><span class="line">Default Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note primary no-icon %&#125;</span><br><span class="line">Primary Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note success no-icon %&#125;</span><br><span class="line">Success Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note info no-icon %&#125;</span><br><span class="line">Info Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note warning no-icon %&#125;</span><br><span class="line">Warning Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% note danger no-icon %&#125;</span><br><span class="line">Danger Callout Tag</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note no-icon flat"><p>Default Callout Tag</p></div><div class="note default no-icon flat"><p>Default Callout Tag</p></div><div class="note primary no-icon flat"><p>Primary Callout Tag</p></div><div class="note success no-icon flat"><p>Success Callout Tag</p></div><div class="note info no-icon flat"><p>Info Callout Tag</p></div><div class="note warning no-icon flat"><p>Warning Callout Tag</p></div><div class="note danger no-icon flat"><p>Danger Callout Tag</p></div><h3 id="Usage-2"><a href="#Usage-2" class="headerlink" title="Usage 2"></a>Usage 2</h3><blockquote><p>simple</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; simple %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; simple %&#125;</span><br><span class="line">2021 is coming soon...</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; simple %&#125;</span><br><span class="line">Drive safely, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; simple%&#125;</span><br><span class="line">Is this a three-blade fan or a four-blade fan?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; simple %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; simple %&#125;</span><br><span class="line">Rock-paper-scissors.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; simple %&#125;</span><br><span class="line">The most dreaded browser for front-end developers.</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note icon-padding simple"><i class="note-icon fab fa-cc-visa"></i><p>Are you using Visa or UnionPay?</p></div><div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p>2021 is coming soon...</p></div><div class="note pink icon-padding simple"><i class="note-icon fas fa-car-crash"></i><p>Drive safely, safety first.</p></div><div class="note red icon-padding simple"><i class="note-icon fas fa-fan"></i><p>Is this a three-blade fan or a four-blade fan?</p></div><div class="note orange icon-padding simple"><i class="note-icon fas fa-battery-half"></i><p>Are you using Visa or UnionPay?</p></div><div class="note purple icon-padding simple"><i class="note-icon far fa-hand-scissors"></i><p>Rock-paper-scissors.</p></div><div class="note green icon-padding simple"><i class="note-icon fab fa-internet-explorer"></i><p>The most dreaded browser for front-end developers.</p></div><blockquote><p>modern</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; modern %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; modern %&#125;</span><br><span class="line">2021 is coming soon...</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; modern %&#125;</span><br><span class="line">Drive safely, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; modern%&#125;</span><br><span class="line">Is this a three-blade fan or a four-blade fan?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; modern %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; modern %&#125;</span><br><span class="line">Rock-paper-scissors.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; modern %&#125;</span><br><span class="line">The most dreaded browser for front-end developers.</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note icon-padding modern"><i class="note-icon fab fa-cc-visa"></i><p>Are you using Visa or UnionPay?</p></div><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>2021 is coming soon...</p></div><div class="note pink icon-padding modern"><i class="note-icon fas fa-car-crash"></i><p>Drive safely, safety first.</p></div><div class="note red icon-padding modern"><i class="note-icon fas fa-fan"></i><p>Is this a three-blade fan or a four-blade fan?</p></div><div class="note orange icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p>Are you using Visa or UnionPay?</p></div><div class="note purple icon-padding modern"><i class="note-icon far fa-hand-scissors"></i><p>Rock-paper-scissors.</p></div><div class="note green icon-padding modern"><i class="note-icon fab fa-internet-explorer"></i><p>The most dreaded browser for front-end developers.</p></div><blockquote><p>flat</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; flat %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; flat %&#125;</span><br><span class="line">2021 is coming soon...</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; flat %&#125;</span><br><span class="line">Drive safely, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; flat%&#125;</span><br><span class="line">Is this a three-blade fan or a four-blade fan?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; flat %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; flat %&#125;</span><br><span class="line">Rock-paper-scissors.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; flat %&#125;</span><br><span class="line">The most dreaded browser for front-end developers.</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note icon-padding flat"><i class="note-icon fab fa-cc-visa"></i><p>Are you using Visa or UnionPay?</p></div><div class="note blue icon-padding flat"><i class="note-icon fas fa-bullhorn"></i><p>2021 is coming soon...</p></div><div class="note pink icon-padding flat"><i class="note-icon fas fa-car-crash"></i><p>Drive safely, safety first.</p></div><div class="note red icon-padding flat"><i class="note-icon fas fa-fan"></i><p>Is this a three-blade fan or a four-blade fan?</p></div><div class="note orange icon-padding flat"><i class="note-icon fas fa-battery-half"></i><p>Are you using Visa or UnionPay?</p></div><div class="note purple icon-padding flat"><i class="note-icon far fa-hand-scissors"></i><p>Rock-paper-scissors.</p></div><div class="note green icon-padding flat"><i class="note-icon fab fa-internet-explorer"></i><p>The most dreaded browser for front-end developers.</p></div><blockquote><p>disabled</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; disabled %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; disabled %&#125;</span><br><span class="line">2021 is coming soon...</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; disabled %&#125;</span><br><span class="line">Drive safely, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;fas fa-fan&#x27; disabled %&#125;</span><br><span class="line">Is this a three-blade fan or a four-blade fan?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; disabled %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; disabled %&#125;</span><br><span class="line">Rock-paper-scissors.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; disabled %&#125;</span><br><span class="line">The most dreaded browser for front-end developers.</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note icon-padding disabled"><i class="note-icon fab fa-cc-visa"></i><p>Are you using Visa or UnionPay?</p></div><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p>2021 is coming soon...</p></div><div class="note pink icon-padding disabled"><i class="note-icon fas fa-car-crash"></i><p>Drive safely, safety first.</p></div><div class="note red icon-padding disabled"><i class="note-icon fas fa-fan"></i><p>Is this a three-blade fan or a four-blade fan?</p></div><div class="note orange icon-padding disabled"><i class="note-icon fas fa-battery-half"></i><p>Are you using Visa or UnionPay?</p></div><div class="note purple icon-padding disabled"><i class="note-icon far fa-hand-scissors"></i><p>Rock-paper-scissors.</p></div><div class="note green icon-padding disabled"><i class="note-icon fab fa-internet-explorer"></i><p>The most dreaded browser for front-end developers.</p></div><blockquote><p>no-icon</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue no-icon %&#125;</span><br><span class="line">2021 is coming soon...</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink no-icon %&#125;</span><br><span class="line">Drive safely, safety first.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red no-icon %&#125;</span><br><span class="line">Is this a three-blade fan or a four-blade fan?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange no-icon %&#125;</span><br><span class="line">Are you using Visa or UnionPay?</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple no-icon %&#125;</span><br><span class="line">Rock-paper-scissors.</span><br><span class="line">&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green no-icon %&#125;</span><br><span class="line">The most dreaded browser for front-end developers.</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><div class="note no-icon flat"><p>Are you using Visa or UnionPay?</p></div><div class="note blue no-icon flat"><p>2021 is coming soon...</p></div><div class="note pink no-icon flat"><p>Drive safely, safety first.</p></div><div class="note red no-icon flat"><p>Is this a three-blade fan or a four-blade fan?</p></div><div class="note orange no-icon flat"><p>Are you using Visa or UnionPay?</p></div><div class="note purple no-icon flat"><p>Rock-paper-scissors.</p></div><div class="note green no-icon flat"><p>The most dreaded browser for front-end developers.</p></div><h2 id="Gallery-Photo-Collection"><a href="#Gallery-Photo-Collection" class="headerlink" title="Gallery Photo Collection"></a>Gallery Photo Collection</h2><div class="gallery-group-main"><figure class="gallery-group">    <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png' alt="Group Image Gallery">    <figcaption>      <div class="gallery-group-name">Wallpapers</div>      <p>A collection of wallpapers</p>      <a href='/en/Gallery/wallpaper'></a>    </figcaption>  </figure><figure class="gallery-group">    <img class="gallery-group-img no-lightbox" src='https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg' alt="Group Image Gallery">    <figcaption>      <div class="gallery-group-name">Marvel</div>      <p>Pictures related to Marvel</p>      <a href='/en/Gallery/marvel'></a>    </figcaption>  </figure><figure class="gallery-group">    <img class="gallery-group-img no-lightbox" 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>Pictures related to OH MY GIRL</p>      <a href='/en/Gallery/ohmygirl'></a>    </figcaption>  </figure></div><h2 id="Gallery-Album"><a href="#Gallery-Album" class="headerlink" title="Gallery Album"></a>Gallery Album</h2><div class="gallery-container" data-type="data" data-button="" data-limit="10" data-first="10">    <div class="gallery-items">[{"url":"https://i.loli.net/2019/12/25/Jj8FXuKVlOea4Ec.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/eqBGrXx9tWsZOao.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/LjW2CfNSD7OaY4v.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/pGIhaPjxtl438U9.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/hzjJBR2x5SEmsbC.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ucNDmUqQkrFfAWv.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/oj1wAnGSKtFvXIJ.jpg","alt":"","title":""}]</div>  </div><h2 id="tag-hide"><a href="#tag-hide" class="headerlink" title="tag-hide"></a>tag-hide</h2><p>If you want to hide certain text or content and provide a button for users to click and reveal it, you can use this <code>tag-hide</code> plugin.</p><h3 id="hide-inline"><a href="#hide-inline" class="headerlink" title="hide-inline"></a>hide-inline</h3><p>Which English letter is the coolest? <span class="hide-inline"><button type="button" class="hide-button" style="background-color: #FF7242;color: #fff">Reveal the answer</button><span class="hide-content">Because they wear suits (C for cool)</span></span></p><p>There&#39;s a person standing inside the door? <span class="hide-inline"><button type="button" class="hide-button" style="">Click</button><span class="hide-content">Blink</span></span></p><h3 id="hide-block"><a href="#hide-block" class="headerlink" title="hide-block"></a>hide-block</h3><p>Girls</p><div class="hide-block"><button type="button" class="hide-button" style="">answer</button><div class="hide-content"><div class="gallery-container" data-type="data" data-button="" data-limit="10" data-first="10">    <div class="gallery-items">[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":"","title":""}]</div>  </div></div></div><h3 id="hide-toggle"><a href="#hide-toggle" class="headerlink" title="hide-toggle"></a>hide-toggle</h3><details class="toggle" ><summary class="toggle-button" style="">Butterfly Installation Method</summary><div class="toggle-content"><p>In your blog&#39;s root directory,</p><p>git clone -b master <a href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes&#x2F;Butterfly</p><p>If you want to install the newer dev branch, you can use</p><p>git clone -b dev <a href="https://github.com/jerryc127/hexo-theme-butterfly.git">https://github.com/jerryc127/hexo-theme-butterfly.git</a> themes&#x2F;Butterfly</p><div class="gallery-container" data-type="data" data-button="" data-limit="10" data-first="10">    <div class="gallery-items">[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":"","title":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":"","title":""}]</div>  </div></div></details>]]></content>
    
    
    <summary type="html">Tag Plugins</summary>
    
    
    
    <category term="Demo" scheme="https://butterfly.js.org/en/categories/Demo/"/>
    
    
    <category term="Tag Plugins" scheme="https://butterfly.js.org/en/tags/Tag-Plugins/"/>
    
  </entry>
  
  <entry>
    <title>Markdown Style test</title>
    <link href="https://butterfly.js.org/en/posts/89757140/"/>
    <id>https://butterfly.js.org/en/posts/89757140/</id>
    <published>2018-07-24T15:31:06.000Z</published>
    <updated>2025-12-10T12:49:37.071Z</updated>
    
    <content type="html"><![CDATA[<p>This post is originated from <a href="https://gist.github.com/apackeer/4159268">here</a> and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.</p><span id="more"></span><hr><h2 id="Headers"><a href="#Headers" class="headerlink" title="Headers"></a>Headers</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><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="section"># H1</span></span><br><span class="line"><span class="section">## H2</span></span><br><span class="line"><span class="section">### H3</span></span><br><span class="line"><span class="section">#### H4</span></span><br><span class="line"><span class="section">##### H5</span></span><br><span class="line"><span class="section">###### H6</span></span><br><span class="line"></span><br><span class="line">Alternatively, for H1 and H2, an underline-ish style:</span><br><span class="line"></span><br><span class="line"><span class="section">Alt-H1</span></span><br><span class="line"><span class="section">======</span></span><br><span class="line"></span><br><span class="line"><span class="section">Alt-H2</span></span><br><span class="line"><span class="section">------</span></span><br></pre></td></tr></table></figure><h1 id="H1"><a href="#H1" class="headerlink" title="H1"></a>H1</h1><h2 id="H2"><a href="#H2" class="headerlink" title="H2"></a>H2</h2><h3 id="H3"><a href="#H3" class="headerlink" title="H3"></a>H3</h3><h4 id="H4"><a href="#H4" class="headerlink" title="H4"></a>H4</h4><h5 id="H5"><a href="#H5" class="headerlink" title="H5"></a>H5</h5><h6 id="H6"><a href="#H6" class="headerlink" title="H6"></a>H6</h6><p>Alternatively, for H1 and H2, an underline-ish style:</p><h1 id="Alt-H1"><a href="#Alt-H1" class="headerlink" title="Alt-H1"></a>Alt-H1</h1><h2 id="Alt-H2"><a href="#Alt-H2" class="headerlink" title="Alt-H2"></a>Alt-H2</h2><h2 id="Emphasis"><a href="#Emphasis" class="headerlink" title="Emphasis"></a>Emphasis</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">Emphasis, aka italics, with <span class="emphasis">*asterisks*</span> or <span class="emphasis">_underscores_</span>.</span><br><span class="line"></span><br><span class="line">Strong emphasis, aka bold, with <span class="strong">**asterisks**</span> or <span class="strong">__underscores__</span>.</span><br><span class="line"></span><br><span class="line">Combined emphasis with <span class="strong">**asterisks and <span class="emphasis">_underscores_</span>**</span>.</span><br><span class="line"></span><br><span class="line">Strikethrough uses two tildes. ~~Scratch this.~~</span><br></pre></td></tr></table></figure><p>Emphasis, aka italics, with <em>asterisks</em> or <em>underscores</em>.</p><p>Strong emphasis, aka bold, with <strong>asterisks</strong> or <strong>underscores</strong>.</p><p>Combined emphasis with <strong>asterisks and <em>underscores</em></strong>.</p><p>Strikethrough uses two tildes. <del>Scratch this.</del></p><h2 id="Lists"><a href="#Lists" class="headerlink" title="Lists"></a>Lists</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><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="bullet">1.</span> First ordered list item</span><br><span class="line"><span class="bullet">2.</span> Another item</span><br><span class="line"><span class="bullet">  *</span> Unordered sub-list.</span><br><span class="line"><span class="bullet">1.</span> Actual numbers don&#x27;t matter, just that it&#x27;s a number</span><br><span class="line"><span class="bullet">  1.</span> Ordered sub-list</span><br><span class="line"><span class="bullet">4.</span> And another item.</span><br><span class="line"></span><br><span class="line">   You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we&#x27;ll use three here to also align the raw Markdown).</span><br><span class="line"></span><br><span class="line">   To have a line break without a paragraph, you will need to use two trailing spaces.  </span><br><span class="line">   Note that this line is separate, but within the same paragraph.  </span><br><span class="line">   (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</span><br><span class="line"></span><br><span class="line"><span class="bullet">*</span> Unordered list can use asterisks</span><br><span class="line"><span class="bullet">-</span> Or minuses</span><br><span class="line"><span class="bullet">+</span> Or pluses</span><br><span class="line"><span class="bullet">-</span> Paragraph In unordered list</span><br><span class="line"></span><br><span class="line">  For example like this.</span><br><span class="line"></span><br><span class="line">Common Paragraph with some text.</span><br><span class="line">And more text.</span><br></pre></td></tr></table></figure><ol><li>First ordered list item</li><li>Another item</li></ol><ul><li>Unordered sub-list.</li></ul><ol><li><p>Actual numbers don&#39;t matter, just that it&#39;s a number</p></li><li><p>Ordered sub-list</p></li><li><p>And another item.</p><p>You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we&#39;ll use three here to also align the raw Markdown).</p><p>To have a line break without a paragraph, you will need to use two trailing spaces.<br>Note that this line is separate, but within the same paragraph.<br>(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</p></li></ol><ul><li>Unordered list can use asterisks</li></ul><ul><li>Or minuses</li></ul><ul><li>Or pluses</li></ul><ul><li><p>Paragraph In unordered list</p><p>For example like this.</p></li></ul><p>Common Paragraph with some text.<br>And more text.</p><h2 id="Inline-HTML"><a href="#Inline-HTML" class="headerlink" title="Inline HTML"></a>Inline HTML</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"><span class="language-xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span>To reboot your computer, press <span class="language-xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>ctrl<span class="language-xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span>+<span class="language-xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>alt<span class="language-xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span>+<span class="language-xml"><span class="tag">&lt;<span class="name">kbd</span>&gt;</span></span>del<span class="language-xml"><span class="tag">&lt;/<span class="name">kbd</span>&gt;</span></span>.<span class="language-xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">dl</span>&gt;</span></span></span><br><span class="line"><span class="code">    &lt;dt&gt;Definition list&lt;/dt&gt;</span></span><br><span class="line"><span class="code">    &lt;dd&gt;Is something people use sometimes.&lt;/dd&gt;</span></span><br><span class="line"><span class="code"></span></span><br><span class="line"><span class="code">    &lt;dt&gt;Markdown in HTML&lt;/dt&gt;</span></span><br><span class="line"><span class="code">    &lt;dd&gt;Does *not* work **very** well. Use HTML &lt;em&gt;tags&lt;/em&gt;.&lt;/dd&gt;</span></span><br><span class="line"><span class="code">&lt;/dl&gt;</span></span><br></pre></td></tr></table></figure><dl>    <dt>Definition list</dt>    <dd>Is something people use sometimes.</dd><pre><code>&lt;dt&gt;Markdown in HTML&lt;/dt&gt;&lt;dd&gt;Does *not* work **very** well. Use HTML &lt;em&gt;tags&lt;/em&gt;.&lt;/dd&gt;</code></pre></dl><h2 id="Links"><a href="#Links" class="headerlink" title="Links"></a>Links</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><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="string">I&#x27;m an inline-style link</span>](<span class="link">https://www.google.com</span>)</span><br><span class="line"></span><br><span class="line">[<span class="string">I&#x27;m an inline-style link with title</span>](<span class="link">https://www.google.com &quot;Google&#x27;s Homepage&quot;</span>)</span><br><span class="line"></span><br><span class="line">[<span class="string">I&#x27;m a reference-style link</span>][<span class="symbol">Arbitrary case-insensitive reference text</span>]</span><br><span class="line"></span><br><span class="line">[<span class="string">I&#x27;m a relative reference to a repository file</span>](<span class="link">../blob/master/LICENSE</span>)</span><br><span class="line"></span><br><span class="line">[<span class="string">You can use numbers for reference-style link definitions</span>][<span class="symbol">1</span>]</span><br><span class="line"></span><br><span class="line">Or leave it empty and use the [link text itself]</span><br><span class="line"></span><br><span class="line">Some text to show that the reference links can follow later.</span><br><span class="line"></span><br><span class="line">[<span class="symbol">arbitrary case-insensitive reference text</span>]: <span class="link">https://hexo.io</span></span><br><span class="line">[<span class="symbol">1</span>]: <span class="link">https://hexo.io/docs/</span></span><br><span class="line">[<span class="symbol">link text itself</span>]: <span class="link">https://hexo.io/api/</span></span><br></pre></td></tr></table></figure><p><a href="https://www.google.com/">I&#39;m an inline-style link</a></p><p><a href="https://www.google.com/" title="Google&#39;s Homepage">I&#39;m an inline-style link with title</a></p><p><a href="https://hexo.io/">I&#39;m a reference-style link</a></p><p><a href="../blob/master/LICENSE">I&#39;m a relative reference to a repository file</a></p><p><a href="https://hexo.io/docs/">You can use numbers for reference-style link definitions</a></p><p>Or leave it empty and use the <a href="https://hexo.io/api/">link text itself</a></p><p>Some text to show that the reference links can follow later.</p><h2 id="Images"><a href="#Images" class="headerlink" title="Images"></a>Images</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></pre></td><td class="code"><pre><span class="line">hover to see the title text:</span><br><span class="line"></span><br><span class="line">Inline-style:</span><br><span class="line"></span><br><span class="line">![<span class="string">alt text</span>](<span class="link">https://hexo.io/icon/favicon-196x196.png &quot;Logo Title Text 1&quot;</span>)</span><br><span class="line"></span><br><span class="line">Reference-style:</span><br><span class="line">![<span class="string">alt text</span>][<span class="symbol">logo</span>]</span><br><span class="line"></span><br><span class="line">[<span class="symbol">logo</span>]: <span class="link">https://hexo.io/icon/favicon-196x196.png &quot;Logo Title Text 2&quot;</span></span><br></pre></td></tr></table></figure><p>hover to see the title text:</p><p>Inline-style:</p><p><img src="https://hexo.io/icon/favicon-196x196.png" alt="alt text" title="Logo Title Text 1"></p><p>Reference-style:<br><img src="https://hexo.io/icon/favicon-196x196.png" alt="alt text" title="Logo Title Text 2"></p><h2 id="Code-and-Syntax-Highlighting"><a href="#Code-and-Syntax-Highlighting" class="headerlink" title="Code and Syntax Highlighting"></a>Code and Syntax Highlighting</h2><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> s = <span class="string">&quot;JavaScript syntax highlighting&quot;</span>;</span><br><span class="line"><span class="title function_">alert</span>(s);</span><br></pre></td></tr></table></figure><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">s = <span class="string">&quot;Python syntax highlighting&quot;</span></span><br><span class="line"><span class="built_in">print</span> s</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">No language indicated, so no syntax highlighting.</span><br><span class="line">But let&#x27;s throw in a &lt;b&gt;tag&lt;/b&gt;.</span><br></pre></td></tr></table></figure><h2 id="Tables"><a href="#Tables" class="headerlink" title="Tables"></a>Tables</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></pre></td><td class="code"><pre><span class="line">|                |ASCII                          |HTML                         |</span><br><span class="line">|----------------|-------------------------------|-----------------------------|</span><br><span class="line">|Single backticks|<span class="code">`&#x27;Isn&#x27;t this fun?&#x27;`</span>            |&#x27;Isn&#x27;t this fun?&#x27;            |</span><br><span class="line">|Quotes          |<span class="code">`&quot;Isn&#x27;t this fun?&quot;`</span>            |&quot;Isn&#x27;t this fun?&quot;            |</span><br><span class="line">|Dashes          |<span class="code">`-- is en-dash, --- is em-dash`</span>|-- is en-dash, --- is em-dash|</span><br></pre></td></tr></table></figure><table><thead><tr><th></th><th>ASCII</th><th>HTML</th></tr></thead><tbody><tr><td>Single backticks</td><td><code>&#39;Isn&#39;t this fun?&#39;</code></td><td>&#39;Isn&#39;t this fun?&#39;</td></tr><tr><td>Quotes</td><td><code>&quot;Isn&#39;t this fun?&quot;</code></td><td>&quot;Isn&#39;t this fun?&quot;</td></tr><tr><td>Dashes</td><td><code>-- is en-dash, --- is em-dash</code></td><td>-- is en-dash, --- is em-dash</td></tr></tbody></table><p>Colons can be used to align columns.</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">| Tables        | Are           | Cool  |</span><br><span class="line">| ------------- |:-------------:| -----:|</span><br><span class="line">| col 3 is      | right-aligned |  |</span><br><span class="line">| col 2 is      | centered      |    |</span><br><span class="line">| zebra stripes | are neat      |   </span><br></pre></td></tr></table></figure><table><thead><tr><th>Tables</th><th align="center">Are</th><th align="right">Cool</th></tr></thead><tbody><tr><td>col 3 is</td><td align="center">right-aligned</td><td align="right"></td></tr><tr><td>col 2 is</td><td align="center">centered</td><td align="right"></td></tr><tr><td>zebra stripes</td><td align="center">are neat</td><td align="right"></td></tr></tbody></table><p>The outer pipes (|) are optional, and you don&#39;t need to make the raw Markdown line up prettily. You can also use inline Markdown.</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Markdown | Less | Pretty</span><br><span class="line">--- | --- | ---</span><br><span class="line"><span class="emphasis">*Still*</span> | <span class="code">`renders`</span> | <span class="strong">**nicely**</span></span><br><span class="line">1 | 2 | 3</span><br></pre></td></tr></table></figure><table><thead><tr><th>Markdown</th><th>Less</th><th>Pretty</th></tr></thead><tbody><tr><td><em>Still</em></td><td><code>renders</code></td><td><strong>nicely</strong></td></tr><tr><td>1</td><td>2</td><td>3</td></tr></tbody></table><blockquote><p>You can find more information about <strong>LaTeX</strong> mathematical expressions <a href="https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference">here</a>.</p></blockquote><h2 id="Blockquotes"><a href="#Blockquotes" class="headerlink" title="Blockquotes"></a>Blockquotes</h2><blockquote><p>Blockquotes are very handy in email to emulate reply text.<br>This line is part of the same quote.</p></blockquote><p>Quote break.</p><blockquote><p>This is a very long line that will still be quoted properly when it wraps. Oh boy let&#39;s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Markdown</strong> into a blockquote.</p></blockquote><h2 id="Horizontal-Rule"><a href="#Horizontal-Rule" class="headerlink" title="Horizontal Rule"></a>Horizontal Rule</h2><p>Three or more...</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line"></span><br><span class="line">Hyphens</span><br><span class="line"></span><br><span class="line"><span class="strong">***</span></span><br><span class="line"><span class="strong"></span></span><br><span class="line"><span class="strong">Asterisks</span></span><br><span class="line"><span class="strong"></span></span><br><span class="line"><span class="strong">___</span></span><br><span class="line"><span class="strong"></span></span><br><span class="line"><span class="strong">Underscores</span></span><br></pre></td></tr></table></figure><hr><p>Hyphens</p><hr><p>Asterisks</p><hr><p>Underscores</p><h2 id="Line-Breaks"><a href="#Line-Breaks" class="headerlink" title="Line Breaks"></a>Line Breaks</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">Here&#x27;s a line for us to start with.</span><br><span class="line"></span><br><span class="line">This line is separated from the one above by two newlines, so it will be a <span class="emphasis">*separate paragraph*</span>.</span><br><span class="line"></span><br><span class="line">This line is also a separate paragraph, but...</span><br><span class="line">This line is only separated by a single newline, so it&#x27;s a separate line in the <span class="emphasis">*same paragraph*</span>.</span><br></pre></td></tr></table></figure><p>Here&#39;s a line for us to start with.</p><p>This line is separated from the one above by two newlines, so it will be a <em>separate paragraph</em>.</p><p>This line is also a separate paragraph, but...<br>This line is only separated by a single newline, so it&#39;s a separate line in the <em>same paragraph</em>.</p><hr><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">This is a regular paragraph.</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span></span><br><span class="line"><span class="code">    &lt;tr&gt;</span></span><br><span class="line"><span class="code">        &lt;td&gt;Foo&lt;/td&gt;</span></span><br><span class="line"><span class="code">    &lt;/tr&gt;</span></span><br><span class="line"><span class="code">&lt;/table&gt;</span></span><br><span class="line"><span class="code"></span></span><br><span class="line">This is another regular paragraph.</span><br></pre></td></tr></table></figure><p>This is a regular paragraph.</p><table>    <tr>        <td>Foo</td>    </tr></table><p>This is another regular paragraph.</p><h2 id="Youtube-videos"><a href="#Youtube-videos" class="headerlink" title="Youtube videos"></a>Youtube videos</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"><span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.youtube.com/watch?feature=player_embedded&amp;v=ARted4RniaU</span></span></span></span><br><span class="line"><span class="string"><span class="tag"><span class="language-xml">&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://img.youtube.com/vi/ARted4RniaU/0.jpg&quot;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml"><span class="attr">alt</span>=<span class="string">&quot;IMAGE ALT TEXT HERE&quot;</span> <span class="attr">width</span>=<span class="string">&quot;240&quot;</span> <span class="attr">height</span>=<span class="string">&quot;180&quot;</span> <span class="attr">border</span>=<span class="string">&quot;10&quot;</span> /&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">Pure markdown version:</span><br><span class="line"></span><br><span class="line">[<span class="string">![IMAGE ALT TEXT HERE</span>](<span class="link">https://img.youtube.com/vi/ARted4RniaU/0.jpg</span>)](<span class="link">https://www.youtube.com/watch?v=ARted4RniaU</span>)</span><br></pre></td></tr></table></figure><p><a href="https://www.youtube.com/watch?feature=player_embedded&v=ARted4RniaU" target="_blank"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg"alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a></p><p>Pure markdown version:</p><p><a href="https://www.youtube.com/watch?v=ARted4RniaU"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg" alt="IMAGE ALT TEXT HERE"></a></p>]]></content>
    
    
    <summary type="html">&lt;p&gt;This post is originated from &lt;a href=&quot;https://gist.github.com/apackeer/4159268&quot;&gt;here&lt;/a&gt; and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.&lt;/p&gt;</summary>
    
    
    
    <category term="Markdown" scheme="https://butterfly.js.org/en/categories/Markdown/"/>
    
    
    <category term="highlight" scheme="https://butterfly.js.org/en/tags/highlight/"/>
    
    <category term="Bar" scheme="https://butterfly.js.org/en/tags/Bar/"/>
    
  </entry>
  
</feed>
