biss/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3084e4f012aa553f455ece5622d77b419365e608
blog/atom.xml
T
biss 3084e4f012 update feed xsl files 
··[CST 2026-02-26 Thursday 18:12:50]
2026-02-26 18:12:50 +08:00

588 lines
436 KiB
XML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" href="/css/atom.xsl" ?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Bi&#39;s Blog</title>
<link href="https://blog.biss.click/atom.xml" rel="self"/>
<link href="https://blog.biss.click/"/>
<updated>2026-02-26T10:12:31.845Z</updated>
<id>https://blog.biss.click/</id>
<author>
<name>biss</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>新年快乐！</title>
<link href="https://blog.biss.click/posts/5785bd01/"/>
<id>https://blog.biss.click/posts/5785bd01/</id>
<published>2026-02-13T22:56:18.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>各位亲朋好友、合作伙伴及屏幕前的你：</p><p>值此二〇二六年蛇年来临之际，为贯彻落实“快乐至上”的核心价值观，进一步提升全体人员的幸福指数，现将有关事项通知如下：</p><p>一、各单位要切实做好“吃好喝好”保障工作，严禁在假期期间进行任何形式的emo。</p><p>二、请各有关人员在收到本通知后，务必在下方留言区留下你的新年愿望，由后台系统统一收集并祝愿其实现。</p><p>三、祝大家在新的一年里，身体健康，万事如意，所得皆所愿，所行化坦途！</p>]]></content>
<summary type="html">&lt;p&gt;各位亲朋好友、合作伙伴及屏幕前的你：&lt;/p&gt;
&lt;p&gt;值此二〇二六年蛇年来临之际，为贯彻落实“快乐至上”的核心价值观，进一步提升全体人员的幸福指数，现将有关事项通知如下：&lt;/p&gt;
&lt;p&gt;一、各单位要切实做好“吃好喝好”保障工作，严禁在假期期间进行任何形式的emo。&lt;/p&gt;
&lt;</summary>
<category term="生活" scheme="https://blog.biss.click/tags/life/"/>
</entry>
<entry>
<title>添加网站左上角菜单</title>
<link href="https://blog.biss.click/posts/7e921903/"/>
<id>https://blog.biss.click/posts/7e921903/</id>
<published>2026-02-09T23:11:14.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://blog.liushen.fun"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">liushen</div> <div class="tag-link-sitename">liushen</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>预计做好后是这种效果：</p><p><img src="https://pic.biss.click/image/8d374eff-8817-4337-86ed-5909ff0eefaa.webp" alt="示意图"></p><p>首先，修改<code>\themes\butterfly\layout\includes\header\nav.pug</code>:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line">nav#nav</span><br><span class="line"> //- 左侧区域：包含指纹菜单和网站名</span><br><span class="line"> span#blog-info</span><br><span class="line"> #ls-menu-container</span><br><span class="line"> i.fas.fa-fingerprint</span><br><span class="line"> #ls-menu-panel</span><br><span class="line"> .ls-section</span><br><span class="line"> .ls-title 😀 个人网站</span><br><span class="line"> .ls-grid</span><br><span class="line"> a(href=&quot;/&quot;) #[i.fas.fa-rss] 个人博客</span><br><span class="line"> a(href=&quot;https://github.com/bishshi&quot;) #[i.fab.fa-github] Github</span><br><span class="line"> .ls-section</span><br><span class="line"> .ls-title 😎 常用服务</span><br><span class="line"> .ls-grid</span><br><span class="line"> a(href=&quot;https://git.biss.click/biss&quot;) #[i.fas.fa-code] 代码仓库</span><br><span class="line"> a(href=&quot;https://mm.biss.click&quot;) #[i.fas.fa-pen-nib] 日常yy</span><br><span class="line"> a(href=&quot;https://statstic.biss.click&quot;) #[i.fas.fa-users] 访客统计</span><br><span class="line"> a(href=&quot;https://pic.biss.click&quot;) #[i.fas.fa-image] 图床</span><br><span class="line"> a(href=&quot;https://chat.biss.click&quot;) #[i.fas.fa-robot] AI网站</span><br><span class="line"> .ls-section</span><br><span class="line"> .ls-title 🛸 实用工具</span><br><span class="line"> .ls-grid</span><br><span class="line"> a(href=&quot;https://cover.biss.click&quot;) #[i.fas.fa-palette] 封面设计</span><br><span class="line"></span><br><span class="line"> a.nav-site-title(href=url_for(&#x27;/&#x27;))</span><br><span class="line"> if theme.nav.logo</span><br><span class="line"> img.site-icon(src=url_for(theme.nav.logo) alt=&#x27;Logo&#x27;)</span><br><span class="line"> if theme.nav.display_title</span><br><span class="line"> span.site-name=config.title</span><br><span class="line"></span><br><span class="line"> //- 中间区域：关键！必须在 nav 下一级，以便 JS 切换类名</span><br><span class="line"> if globalPageType === &#x27;post&#x27; &amp;&amp; theme.nav.display_post_title</span><br><span class="line"> a.nav-page-title(href=&#x27;javascript:void(0);&#x27; onclick=&#x27;btf.scrollToDest(0, 500)&#x27;)</span><br><span class="line"> span.site-name=(page.title || config.title)</span><br><span class="line"></span><br><span class="line"> //- 右侧区域</span><br><span class="line"> #nav-right</span><br><span class="line"> if theme.menu</span><br><span class="line"> #menus</span><br><span class="line"> != partial(&#x27;includes/header/menu_item&#x27;, &#123;&#125;, &#123;cache: true&#125;)</span><br><span class="line"> </span><br><span class="line"> if theme.search.use || true</span><br><span class="line"> #random-post-button</span><br><span class="line"> a.site-page.social-icon#random-post-link(href=&#x27;javascript:void(0);&#x27; onclick=&#x27;randomPost()&#x27;)</span><br><span class="line"> i.fas.fa-solid.fa-shuffle</span><br><span class="line"> #search-button</span><br><span class="line"> a.site-page.social-icon.search-typesense-trigger</span><br><span class="line"> i.fas.fa-search.fa-fw</span><br><span class="line"> #toggle-menu</span><br><span class="line"> span.site-page</span><br><span class="line"> i.fas.fa-bars.fa-fw</span><br></pre></td></tr></table></figure><p>在合适的目录下新建<code>nav.css</code>（例如<code>\themes\butterfly\source\css\nav.css</code>），这份css是磨砂玻璃的样式:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#nav-right</span>&#123;</span><br><span class="line"> <span class="attribute">flex</span>:<span class="number">1</span> <span class="number">1</span> auto;</span><br><span class="line"> <span class="attribute">justify-content</span>: flex-end;</span><br><span class="line"> <span class="attribute">margin-left</span>: auto;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">flex-wrap</span>:nowrap;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">/* 导航栏居中 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#sidebar</span> <span class="selector-id">#sidebar-menus</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.menus_item</span> &#123;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#sidebar</span> <span class="selector-id">#sidebar-menus</span> <span class="selector-class">.menus_items</span> <span class="selector-tag">a</span><span class="selector-class">.site-page</span> &#123;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#sidebar</span> <span class="selector-id">#sidebar-menus</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.site-page</span> &#123;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">6px</span> <span class="number">30px</span> <span class="number">6px</span> <span class="number">22px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--font-color);</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">1.15em</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="built_in">var</span>(--style-border-always);</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--icat-card-bg);</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#sidebar</span> <span class="selector-id">#sidebar-menus</span> <span class="selector-class">.menus_items</span> <span class="selector-class">.site-page</span> <span class="selector-tag">i</span><span class="selector-pseudo">:first-child</span> &#123;</span><br><span class="line"> <span class="attribute">text-align</span>: left;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-id">#menus</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-id">#blog-info</span> &#123;</span><br><span class="line"> <span class="attribute">flex-wrap</span>: nowrap;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">102</span>;</span><br><span class="line"> <span class="attribute">max-width</span>: fit-content;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">900px</span>) &#123;</span><br><span class="line"> <span class="selector-id">#nav</span> &#123;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">15px</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="selector-id">#nav-group</span> &#123;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">0.2rem</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="selector-id">#rightside</span> &#123;</span><br><span class="line"> <span class="attribute">right</span>: -<span class="number">42px</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* IPAD菜单栏调整 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 1. 容器溢出穿透 */</span></span><br><span class="line"><span class="selector-id">#nav</span>, <span class="selector-id">#blog-info</span>, <span class="selector-id">#nav-group</span> &#123;</span><br><span class="line"> <span class="attribute">overflow</span>: visible <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#ls-menu-container</span> &#123;</span><br><span class="line"> <span class="attribute">position</span>: relative <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">display</span>: inline-flex <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">15px</span>;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">2000</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 2. 悬浮面板：宽大且高不透明度 */</span></span><br><span class="line"><span class="selector-id">#ls-menu-panel</span> &#123;</span><br><span class="line"> <span class="attribute">position</span>: absolute <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">100%</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">15px</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">420px</span>; </span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">24px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">18px</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">/* 高不透明度磨砂玻璃 (0.9) */</span></span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.95</span>) <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">backdrop-filter</span>: <span class="built_in">blur</span>(<span class="number">20px</span>) <span class="built_in">saturate</span>(<span class="number">180%</span>) <span class="meta">!important</span>;</span><br><span class="line"> -webkit-<span class="attribute">backdrop-filter</span>: <span class="built_in">blur</span>(<span class="number">20px</span>) <span class="built_in">saturate</span>(<span class="number">180%</span>) <span class="meta">!important</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.5</span>) <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">20px</span> <span class="number">50px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.18</span>) <span class="meta">!important</span>;</span><br><span class="line"></span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">visibility</span>: hidden <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">12px</span>) <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">transition</span>: all <span class="number">0.3s</span> <span class="built_in">cubic-bezier</span>(<span class="number">0.4</span>, <span class="number">0</span>, <span class="number">0.2</span>, <span class="number">1</span>) <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">999999</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">cursor</span>: default;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 3. 透明感应桥梁 */</span></span><br><span class="line"><span class="selector-id">#ls-menu-panel</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">25px</span>;</span><br><span class="line"> <span class="attribute">background</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 4. 触发效果 */</span></span><br><span class="line"><span class="selector-id">#ls-menu-container</span><span class="selector-pseudo">:hover</span> <span class="selector-id">#ls-menu-panel</span> &#123;</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">1</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">visibility</span>: visible <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">0</span>) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#ls-menu-container</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">i</span><span class="selector-class">.fa-fingerprint</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#49b1f5</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.1</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 5. 内部网格：保持两列 */</span></span><br><span class="line"><span class="selector-class">.ls-section</span> &#123; <span class="attribute">margin-bottom</span>: <span class="number">22px</span>; &#125;</span><br><span class="line"><span class="selector-class">.ls-section</span><span class="selector-pseudo">:last-child</span> &#123; <span class="attribute">margin-bottom</span>: <span class="number">0</span>; &#125;</span><br><span class="line"><span class="selector-class">.ls-title</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#333</span>; </span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">800</span>; </span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">15px</span>; </span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">12px</span>; </span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0.9</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.ls-grid</span> &#123; </span><br><span class="line"> <span class="attribute">display</span>: grid <span class="meta">!important</span>; </span><br><span class="line"> <span class="attribute">grid-template-columns</span>: <span class="built_in">repeat</span>(<span class="number">2</span>, <span class="number">1</span>fr); <span class="comment">/* 恢复为两列 */</span></span><br><span class="line"> <span class="attribute">gap</span>: <span class="number">10px</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.ls-grid</span> <span class="selector-tag">a</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#444</span> <span class="meta">!important</span>; </span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">14px</span> <span class="meta">!important</span>; </span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">12px</span>; </span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">transition</span>: all <span class="number">0.2s</span> ease;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.02</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.ls-grid</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123; </span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#49b1f5</span> <span class="meta">!important</span>; </span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span> <span class="meta">!important</span>; </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">4px</span>); <span class="comment">/* 悬停时轻微右移，增加动感 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.ls-grid</span> <span class="selector-tag">a</span> <span class="selector-tag">i</span> &#123; </span><br><span class="line"> <span class="attribute">margin-right</span>: <span class="number">12px</span>; </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">20px</span>; </span><br><span class="line"> <span class="attribute">text-align</span>: center; </span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 6. 深色模式适配 */</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&#x27;dark&#x27;</span>]</span> <span class="selector-id">#ls-menu-panel</span> &#123;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">30</span>, <span class="number">30</span>, <span class="number">30</span>, <span class="number">0.95</span>) <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">border-color</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.1</span>) <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&#x27;dark&#x27;</span>]</span> <span class="selector-class">.ls-title</span> &#123; <span class="attribute">color</span>: <span class="number">#eee</span>; &#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&#x27;dark&#x27;</span>]</span> <span class="selector-class">.ls-grid</span> <span class="selector-tag">a</span> &#123; </span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#ccc</span> <span class="meta">!important</span>; </span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.05</span>); </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span><span class="selector-class">.show-title</span> <span class="selector-class">.nav-page-title</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: flex <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">1</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">visibility</span>: visible <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">50%</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">50%</span>) <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">1000</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span><span class="selector-class">.show-title</span> <span class="selector-id">#menus</span>,</span><br><span class="line"><span class="selector-id">#nav</span><span class="selector-class">.show-title</span> <span class="selector-class">.nav-site-title</span> &#123;</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0</span> <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">visibility</span>: hidden <span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">pointer-events</span>: none <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.nav-page-title</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: none; </span><br><span class="line"> <span class="attribute">transition</span>: opacity <span class="number">0.3s</span> ease;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-id">#blog-info</span> &#123;</span><br><span class="line"> <span class="attribute">overflow</span>: visible <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>然后在<code>_config.butterfly.yml</code>里面引用该css</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/css/nav.css&quot;&gt;</span></span><br></pre></td></tr></table></figure><p>然后重新构建应该就可以看到效果了。</p>]]></content>
<summary type="html">&lt;p&gt;看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。&lt;/p&gt;
&lt;div class=&#39;liushen-tag-link&#39;&gt;&lt;a class=&quot;tag-Link&quot; target=&quot;_blank&quot;</summary>
<category term="建站手札" scheme="https://blog.biss.click/categories/website/"/>
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
</entry>
<entry>
<title>将博客仓库转移到gitea</title>
<link href="https://blog.biss.click/posts/d2c8521/"/>
<id>https://blog.biss.click/posts/d2c8521/</id>
<published>2026-02-07T04:30:39.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>在上一篇文章中已经完成了gitea的安装<br>那么博客源码迁移倒是没问题，直接<code>git remote add origin</code>就行，但是action文件就有些变更。<br>这是我修改的action文件：</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></pre></td><td class="code"><pre><span class="line"><span class="attr">name:</span> <span class="string">自动部署</span></span><br><span class="line"><span class="attr">on:</span></span><br><span class="line"> <span class="attr">push:</span></span><br><span class="line"> <span class="attr">branches:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">master</span></span><br><span class="line"> <span class="attr">release:</span></span><br><span class="line"> <span class="attr">types:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">published</span></span><br><span class="line"> <span class="attr">workflow_dispatch:</span></span><br><span class="line"><span class="attr">env:</span></span><br><span class="line"> <span class="attr">TZ:</span> <span class="string">Asia/Shanghai</span></span><br><span class="line"><span class="attr">jobs:</span></span><br><span class="line"> <span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">runs-on:</span> <span class="string">ubuntu-latest</span></span><br><span class="line"> <span class="attr">steps:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">检查分支</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/checkout@v4</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">ref:</span> <span class="string">master</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">缓存项目</span> <span class="string">npm</span> <span class="string">包</span></span><br><span class="line"> <span class="attr">id:</span> <span class="string">cache-node-modules</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/cache@v3</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">node_modules</span></span><br><span class="line"> <span class="attr">key:</span> <span class="string">$&#123;&#123;</span> <span class="string">runner.os</span> <span class="string">&#125;&#125;-nodeModules-$&#123;&#123;</span> <span class="string">hashFiles(&#x27;package-lock.json&#x27;)</span> <span class="string">&#125;&#125;-$&#123;&#123;</span> <span class="string">hashFiles(&#x27;package.json&#x27;)</span> <span class="string">&#125;&#125;</span></span><br><span class="line"> <span class="attr">restore-keys:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> $&#123;&#123; runner.os &#125;&#125;-nodeModules-</span></span><br><span class="line"><span class="string"></span> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Node</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/setup-node@v4</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">node-version:</span> <span class="string">&quot;22.x&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Hexo</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> npm install hexo-cli --global</span></span><br><span class="line"><span class="string"></span> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装依赖</span></span><br><span class="line"> <span class="attr">if:</span> <span class="string">steps.cache-node-modules.outputs.cache-hit</span> <span class="type">!=</span> <span class="string">&#x27;true&#x27;</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> npm install</span></span><br><span class="line"><span class="string"></span> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">清理文件树</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> npm run clean</span></span><br><span class="line"><span class="string"></span> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">生成静态文件并压缩</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> npm run build</span></span><br><span class="line"><span class="string"></span> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">部署</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> cd ./public</span></span><br><span class="line"><span class="string"> git init</span></span><br><span class="line"><span class="string"> git config user.name &quot;$&#123;&#123; gitea.actor &#125;&#125;&quot;</span></span><br><span class="line"><span class="string"> git config user.email &quot;$&#123;&#123; gitea.actor &#125;&#125;@noreply.gitea.io&quot;</span></span><br><span class="line"><span class="string"> git add .</span></span><br><span class="line"><span class="string"> git commit -m &quot;$&#123;&#123; gitea.event.head_commit.message &#125;&#125;··[$(date +&quot;%Z %Y-%m-%d %A %H:%M:%S&quot;)]&quot;</span></span><br><span class="line"><span class="string"> git push --force --quiet &quot;https://$&#123;&#123; gitea.actor &#125;&#125;:$&#123;&#123; secrets.DEPLOY_TOKEN &#125;&#125;@git.biss.click/biss/blog.git&quot; master:page</span></span><br><span class="line"><span class="string"></span> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">Deploy</span> <span class="string">to</span> <span class="string">Server</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"> <span class="string">curl</span> <span class="string">-k</span> <span class="string">-X</span> <span class="string">POST</span> </span><br></pre></td></tr></table></figure><p>仅供参考吧，最后面是webhook，可以自己改改。</p>]]></content>
<summary type="html">&lt;p&gt;在上一篇文章中已经完成了gitea的安装&lt;br&gt;那么博客源码迁移倒是没问题，直接&lt;code&gt;git remote add origin&lt;/code&gt;就行，但是action文件就有些变更。&lt;br&gt;这是我修改的action文件：&lt;/p&gt;
&lt;figure</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="gitea" scheme="https://blog.biss.click/tags/gitea/"/>
</entry>
<entry>
<title>安装gitea</title>
<link href="https://blog.biss.click/posts/34725d47/"/>
<id>https://blog.biss.click/posts/34725d47/</id>
<published>2026-02-06T22:32:04.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>今天想把网站的源码转移到自建git仓，所以先来安装gitea吧（gitlab过于庞大，服务器配置不够）<br>PS:我的服务器为2C2G</p><h1 id="安装gitea"><a href="#安装gitea" class="headerlink" title="安装gitea"></a>安装gitea</h1><p>这里用二进制文件安装</p><h2 id="获取二进制文件："><a href="#获取二进制文件：" class="headerlink" title="获取二进制文件："></a>获取二进制文件：</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">wget -O gitea https://dl.gitea.com/gitea/1.25.4/gitea-1.25.4-linux-amd64</span><br><span class="line"><span class="built_in">chmod</span> +x gitea</span><br><span class="line"><span class="built_in">cp</span> gitea /usr/local/bin/gitea</span><br></pre></td></tr></table></figure><h2 id="创建用户"><a href="#创建用户" class="headerlink" title="创建用户"></a>创建用户</h2><p>这一步不是必须的，但是推荐这样，用root用户很容易出问题。</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><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># On Ubuntu/Debian:</span></span><br><span class="line">adduser \</span><br><span class="line"> --system \</span><br><span class="line"> --shell /bin/bash \</span><br><span class="line"> --gecos <span class="string">&#x27;Git Version Control&#x27;</span> \</span><br><span class="line"> --group \</span><br><span class="line"> --disabled-password \</span><br><span class="line"> --home /home/git \</span><br><span class="line"> git</span><br><span class="line"></span><br><span class="line"><span class="comment"># On Fedora/RHEL/CentOS:</span></span><br><span class="line">groupadd --system git</span><br><span class="line">adduser \</span><br><span class="line"> --system \</span><br><span class="line"> --shell /bin/bash \</span><br><span class="line"> --comment <span class="string">&#x27;Git Version Control&#x27;</span> \</span><br><span class="line"> --gid git \</span><br><span class="line"> --home-dir /home/git \</span><br><span class="line"> --create-home \</span><br><span class="line"> git</span><br></pre></td></tr></table></figure><h2 id="创建工作目录"><a href="#创建工作目录" class="headerlink" title="创建工作目录"></a>创建工作目录</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><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="built_in">mkdir</span> -p /var/lib/gitea/&#123;custom,data,<span class="built_in">log</span>&#125;</span><br><span class="line"><span class="built_in">chown</span> -R git:git /var/lib/gitea/</span><br><span class="line"><span class="built_in">chmod</span> -R 750 /var/lib/gitea/</span><br><span class="line"><span class="built_in">mkdir</span> /etc/gitea</span><br><span class="line"><span class="built_in">chown</span> root:git /etc/gitea</span><br><span class="line"><span class="built_in">chmod</span> 770 /etc/gitea</span><br><span class="line"><span class="built_in">chmod</span> 750 /etc/gitea</span><br><span class="line"><span class="built_in">chmod</span> 640 /etc/gitea/app.ini</span><br></pre></td></tr></table></figure><h2 id="创建系统服务"><a href="#创建系统服务" class="headerlink" title="创建系统服务"></a>创建系统服务</h2><p>直接把github上面的挪过来就可以</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/go-gitea/gitea/blob/release/v1.25/contrib/systemd/gitea.service"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/ed410d4e-d3f8-4b26-8840-50dd58f7dc4e.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">service文件</div> <div class="tag-link-sitename">github</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>然后注册服务并启动</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">sudo</span> systemctl <span class="built_in">enable</span> gitea</span><br><span class="line"><span class="built_in">sudo</span> systemctl start gitea</span><br></pre></td></tr></table></figure><h2 id="创建数据库"><a href="#创建数据库" class="headerlink" title="创建数据库"></a>创建数据库</h2><p>可以用MySQL数据库或者PostgreSQL，创建一个数据库在web页面填写进去就行。</p><p>反向代理略过，和普通网站的反向代理配置没有什么区别。</p><h1 id="安装runner"><a href="#安装runner" class="headerlink" title="安装runner"></a>安装runner</h1><p>这个runner也不是必须的，是为了实现github的action功能；在2C2G服务器上我看运行的还可以，当然，只是这个hexo博客的自动构建，占用资源也少；<br>使用doker，这也是官方建议。以下是compose文件：</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><br><span class="line"><span class="attr">services:</span></span><br><span class="line"> <span class="attr">runner:</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">gitea/act_runner:latest</span></span><br><span class="line"> <span class="attr">ports:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="number">8088</span><span class="string">:8088</span></span><br><span class="line"> <span class="attr">environment:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">CONFIG_FILE=/config.yaml</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">GITEA_INSTANCE_URL=https://git.biss.click</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">GITEA_RUNNER_REGISTRATION_TOKEN=</span> <span class="comment">#替换成自己的token</span></span><br><span class="line"> <span class="attr">volumes:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">./config.yaml:/config.yaml</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">./data:/data</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">/var/run/docker.sock:/var/run/docker.sock</span> <span class="comment"># 允许 Runner 调用宿主机 Docker</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><p>token在管理后台 工作流-运行器-新建运行器获取<br>config文件需要这样生成</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">docker run --entrypoint=<span class="string">&quot;&quot;</span> --<span class="built_in">rm</span> -it docker.io/gitea/act_runner:latest act_runner generate-config &gt; config.yaml</span><br></pre></td></tr></table></figure><p>在后台工作流运行器可以看见就没问题了。</p>]]></content>
<summary type="html">&lt;p&gt;今天想把网站的源码转移到自建git仓，所以先来安装gitea吧（gitlab过于庞大，服务器配置不够）&lt;br&gt;PS:我的服务器为2C2G&lt;/p&gt;
&lt;h1 id=&quot;安装gitea&quot;&gt;&lt;a href=&quot;#安装gitea&quot; class=&quot;headerlink&quot;</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="gitea" scheme="https://blog.biss.click/tags/gitea/"/>
</entry>
<entry>
<title>添加typesense搜索</title>
<link href="https://blog.biss.click/posts/f287c563/"/>
<id>https://blog.biss.click/posts/f287c563/</id>
<published>2026-02-05T05:14:16.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>最近在构建班级博客，用<code>ghost cms</code>，在构建搜索时发现了typesense，所以把他移植到这个博客上。</p><h1 id="安装typesense"><a href="#安装typesense" class="headerlink" title="安装typesense"></a>安装typesense</h1><p>直接用<code>docker-compose</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><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 class="attr">services:</span></span><br><span class="line"> <span class="attr">typesense:</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">typesense/typesense:30.1</span></span><br><span class="line"> <span class="attr">restart:</span> <span class="string">always</span></span><br><span class="line"> <span class="attr">ports:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;8108:8108&quot;</span></span><br><span class="line"> <span class="attr">volumes:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">./typesense-data:/data</span></span><br><span class="line"> <span class="attr">command:</span> <span class="string">&#x27;--data-dir /data --api-key=填写key --enable-cors&#x27;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><p>然后就是反向代理之类的，不过多写了。</p><h1 id="添加数据集"><a href="#添加数据集" class="headerlink" title="添加数据集"></a>添加数据集</h1><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 先安装库</span></span><br><span class="line">npm install hexo-generator-search</span><br><span class="line">npm install typesense xml2js</span><br></pre></td></tr></table></figure><p>然后在<code>config.yml</code>配置（就是把文章生成json）：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">search.json</span></span><br><span class="line"> <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line"> <span class="attr">content:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>创建一个数据同步脚本<code>sync_typesense.js</code>:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Typesense</span> = <span class="built_in">require</span>(<span class="string">&#x27;typesense&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> xml2js = <span class="built_in">require</span>(<span class="string">&#x27;xml2js&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// --- 配置区域 ---</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">CONFIG</span> = &#123;</span><br><span class="line"> <span class="attr">apiKey</span>: <span class="string">&#x27;你的Admin-API-Key&#x27;</span>, <span class="comment">// 必须是 Admin Key</span></span><br><span class="line"> <span class="attr">host</span>: <span class="string">&#x27;你的Typesense主机地址&#x27;</span>, </span><br><span class="line"> <span class="attr">port</span>: <span class="number">443</span>,</span><br><span class="line"> <span class="attr">protocol</span>: <span class="string">&#x27;https&#x27;</span>,</span><br><span class="line"> <span class="attr">collectionName</span>: <span class="string">&#x27;blogs&#x27;</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> client = <span class="keyword">new</span> <span class="title class_">Typesense</span>.<span class="title class_">Client</span>(&#123;</span><br><span class="line"> <span class="string">&#x27;nodes&#x27;</span>: [&#123; <span class="string">&#x27;host&#x27;</span>: <span class="variable constant_">CONFIG</span>.<span class="property">host</span>, <span class="string">&#x27;port&#x27;</span>: <span class="variable constant_">CONFIG</span>.<span class="property">port</span>, <span class="string">&#x27;protocol&#x27;</span>: <span class="variable constant_">CONFIG</span>.<span class="property">protocol</span> &#125;],</span><br><span class="line"> <span class="string">&#x27;apiKey&#x27;</span>: <span class="variable constant_">CONFIG</span>.<span class="property">apiKey</span>,</span><br><span class="line"> <span class="string">&#x27;connectionTimeoutSeconds&#x27;</span>: <span class="number">5</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">sync</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">try</span> &#123;</span><br><span class="line"> <span class="comment">// 1. 读取并解析 XML</span></span><br><span class="line"> <span class="keyword">const</span> xml = fs.<span class="title function_">readFileSync</span>(<span class="string">&#x27;./public/search.xml&#x27;</span>, <span class="string">&#x27;utf8&#x27;</span>);</span><br><span class="line"> <span class="keyword">const</span> parser = <span class="keyword">new</span> xml2js.<span class="title class_">Parser</span>(&#123; <span class="attr">explicitArray</span>: <span class="literal">false</span> &#125;);</span><br><span class="line"> <span class="keyword">const</span> result = <span class="keyword">await</span> parser.<span class="title function_">parseStringPromise</span>(xml);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 提取文章列表 (处理单篇文章和多篇文章的情况)</span></span><br><span class="line"> <span class="keyword">let</span> entries = result.<span class="property">search</span>.<span class="property">entry</span>;</span><br><span class="line"> <span class="keyword">if</span> (!<span class="title class_">Array</span>.<span class="title function_">isArray</span>(entries)) entries = [entries];</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 格式化数据以适配 Typesense</span></span><br><span class="line"> <span class="keyword">const</span> documents = entries.<span class="title function_">map</span>(<span class="function"><span class="params">post</span> =&gt;</span> (&#123;</span><br><span class="line"> <span class="attr">title</span>: post.<span class="property">title</span>,</span><br><span class="line"> <span class="attr">url</span>: post.<span class="property">url</span>,</span><br><span class="line"> <span class="attr">content</span>: post.<span class="property">content</span>,</span><br><span class="line"> <span class="attr">categories</span>: post.<span class="property">categories</span> ? (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(post.<span class="property">categories</span>.<span class="property">category</span>) ? post.<span class="property">categories</span>.<span class="property">category</span> : [post.<span class="property">categories</span>.<span class="property">category</span>]) : [],</span><br><span class="line"> <span class="attr">tags</span>: post.<span class="property">tags</span> ? (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(post.<span class="property">tags</span>.<span class="property">tag</span>) ? post.<span class="property">tags</span>.<span class="property">tag</span> : [post.<span class="property">tags</span>.<span class="property">tag</span>]) : [],</span><br><span class="line"> &#125;));</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 2. 检查或创建 Collection (Schema)</span></span><br><span class="line"> <span class="keyword">try</span> &#123;</span><br><span class="line"> <span class="keyword">await</span> client.<span class="title function_">collections</span>(<span class="variable constant_">CONFIG</span>.<span class="property">collectionName</span>).<span class="title function_">retrieve</span>();</span><br><span class="line"> &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line"> <span class="keyword">const</span> schema = &#123;</span><br><span class="line"> <span class="attr">name</span>: <span class="variable constant_">CONFIG</span>.<span class="property">collectionName</span>,</span><br><span class="line"> <span class="attr">fields</span>: [</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">&#x27;title&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;string&#x27;</span>, <span class="attr">locale</span>: <span class="string">&#x27;zh&#x27;</span>&#125;,</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">&#x27;content&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;string&#x27;</span>, <span class="attr">locale</span>: <span class="string">&#x27;zh&#x27;</span>&#125;,</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">&#x27;url&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;string&#x27;</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">&#x27;categories&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;string[]&#x27;</span>, <span class="attr">facet</span>: <span class="literal">true</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">&#x27;tags&#x27;</span>, <span class="attr">type</span>: <span class="string">&#x27;string[]&#x27;</span>, <span class="attr">facet</span>: <span class="literal">true</span> &#125;</span><br><span class="line"> ]</span><br><span class="line"> &#125;;</span><br><span class="line"> <span class="keyword">await</span> client.<span class="title function_">collections</span>().<span class="title function_">create</span>(schema);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Collection created!&#x27;</span>);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 3. 导入数据 (使用 upsert 模式：存在则更新，不存在则创建)</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`Syncing <span class="subst">$&#123;documents.length&#125;</span> posts to Typesense...`</span>);</span><br><span class="line"> <span class="keyword">await</span> client.<span class="title function_">collections</span>(<span class="variable constant_">CONFIG</span>.<span class="property">collectionName</span>).<span class="title function_">documents</span>().<span class="keyword">import</span>(documents, &#123; <span class="attr">action</span>: <span class="string">&#x27;upsert&#x27;</span> &#125;);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Sync complete!&#x27;</span>);</span><br><span class="line"></span><br><span class="line"> &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;Sync failed:&#x27;</span>, error);</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">sync</span>();</span><br></pre></td></tr></table></figure><p>然后运行<code>node sync_typesense.js</code></p><h1 id="创建只读key"><a href="#创建只读key" class="headerlink" title="创建只读key"></a>创建只读key</h1><p>把下面代码存储成js，node运行就行。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">&#x27;https&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> data = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(&#123;</span><br><span class="line"> <span class="string">&quot;description&quot;</span>: <span class="string">&quot;Public search only key&quot;</span>,</span><br><span class="line"> <span class="string">&quot;actions&quot;</span>: [<span class="string">&quot;documents:search&quot;</span>],</span><br><span class="line"> <span class="string">&quot;collections&quot;</span>: [<span class="string">&quot;blogs&quot;</span>]</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> options = &#123;</span><br><span class="line"> <span class="attr">hostname</span>: <span class="string">&#x27;&#x27;</span>, <span class="comment">// 不要带 https://</span></span><br><span class="line"> <span class="attr">port</span>: <span class="number">443</span>,</span><br><span class="line"> <span class="attr">path</span>: <span class="string">&#x27;/keys&#x27;</span>,</span><br><span class="line"> <span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>,</span><br><span class="line"> <span class="attr">headers</span>: &#123;</span><br><span class="line"> <span class="string">&#x27;X-TYPESENSE-API-KEY&#x27;</span>: <span class="string">&#x27;你的admin key&#x27;</span>,</span><br><span class="line"> <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/json&#x27;</span>,</span><br><span class="line"> <span class="string">&#x27;Content-Length&#x27;</span>: data.<span class="property">length</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> req = http.<span class="title function_">request</span>(options, <span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line"> res.<span class="title function_">on</span>(<span class="string">&#x27;data&#x27;</span>, <span class="function"><span class="params">d</span> =&gt;</span> &#123; process.<span class="property">stdout</span>.<span class="title function_">write</span>(d); &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">req.<span class="title function_">on</span>(<span class="string">&#x27;error&#x27;</span>, <span class="function"><span class="params">error</span> =&gt;</span> &#123; <span class="variable language_">console</span>.<span class="title function_">error</span>(error); &#125;);</span><br><span class="line">req.<span class="title function_">write</span>(data);</span><br><span class="line">req.<span class="title function_">end</span>();</span><br></pre></td></tr></table></figure><h1 id="博客添加搜索"><a href="#博客添加搜索" class="headerlink" title="博客添加搜索"></a>博客添加搜索</h1><p>在<code>config.yaml</code>inject bottom添加：</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="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p>为了方便，我直接修改了<code>\themes\butterfly\source\js\search\local_search.js</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><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></pre></td><td class="code"><pre><span class="line">(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line"> <span class="string">&#x27;use strict&#x27;</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="comment">// 配置区域 - 请根据实际情况修改</span></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="keyword">const</span> <span class="variable constant_">CONFIG</span> = &#123;</span><br><span class="line"> <span class="attr">apiKey</span>: <span class="string">&quot;&quot;</span>, <span class="comment">// ⚠️ 建议使用 Search-Only API Key</span></span><br><span class="line"> <span class="attr">server</span>: &#123;</span><br><span class="line"> <span class="attr">host</span>: <span class="string">&quot;host&quot;</span>,</span><br><span class="line"> <span class="attr">port</span>: <span class="string">&quot;443&quot;</span>,</span><br><span class="line"> <span class="attr">protocol</span>: <span class="string">&quot;https&quot;</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">indexName</span>: <span class="string">&quot;blogs&quot;</span>,</span><br><span class="line"> <span class="attr">searchParams</span>: &#123;</span><br><span class="line"> <span class="attr">query_by</span>: <span class="string">&quot;title,content&quot;</span>,</span><br><span class="line"> <span class="attr">highlight_full_fields</span>: <span class="string">&quot;title,content&quot;</span>,</span><br><span class="line"> <span class="attr">per_page</span>: <span class="number">8</span>,</span><br><span class="line"> <span class="attr">num_typos</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">typo_tokens_threshold</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">prefix</span>: <span class="literal">true</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">ui</span>: &#123;</span><br><span class="line"> <span class="attr">maxRetries</span>: <span class="number">10</span>,</span><br><span class="line"> <span class="attr">retryDelay</span>: <span class="number">100</span>,</span><br><span class="line"> <span class="attr">animationDuration</span>: <span class="number">300</span></span><br><span class="line"> &#125;</span><br><span class="line"> &#125;;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="comment">// 状态管理</span></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="keyword">let</span> searchInstance = <span class="literal">null</span>;</span><br><span class="line"> <span class="keyword">let</span> isInitialized = <span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">let</span> isSearchOpen = <span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">let</span> initRetryCount = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">const</span> <span class="variable constant_">MAX_INIT_RETRIES</span> = <span class="number">30</span>; <span class="comment">// 最多重试30次 (3秒)</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="comment">// 错误提示函数</span></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">showErrorMessage</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> hitsContainer = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;hits&#x27;</span>);</span><br><span class="line"> <span class="keyword">if</span> (!hitsContainer) <span class="keyword">return</span>;</span><br><span class="line"> </span><br><span class="line"> hitsContainer.<span class="property">innerHTML</span> = </span><br><span class="line"> <span class="string">&#x27;&lt;div class=&quot;ts-empty&quot;&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div style=&quot;color: #f44336;&quot;&gt;&lt;i class=&quot;fas fa-exclamation-triangle&quot; style=&quot;font-size: 3rem;&quot;&gt;&lt;/i&gt;&lt;/div&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div style=&quot;font-size: 1.1rem; font-weight: bold; margin: 15px 0;&quot;&gt;搜索服务加载失败&lt;/div&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div style=&quot;font-size: 0.9rem; color: #666; line-height: 1.8;&quot;&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;p&gt;依赖库未能正确加载，请检查以下配置：&lt;/p&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;ol style=&quot;text-align: left; max-width: 500px; margin: 15px auto;&quot;&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;li&gt;确认已在 &lt;code&gt;_config.butterfly.yml&lt;/code&gt; 中正确引入依赖&lt;/li&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;li&gt;检查 JS 文件加载顺序（先 instantsearch.js，再 adapter）&lt;/li&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;li&gt;尝试更换 CDN 或使用本地文件&lt;/li&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;li&gt;打开浏览器控制台查看详细错误信息&lt;/li&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;/ol&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;/div&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div style=&quot;margin-top: 20px;&quot;&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;button onclick=&quot;location.reload()&quot; style=&quot;padding: 10px 20px; background: #49b1f5; color: white; border: none; border-radius: 5px; cursor: pointer;&quot;&gt;重新加载页面&lt;/button&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;/div&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;/div&gt;&#x27;</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="comment">// 1. 动态插入 HTML 结构</span></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="keyword">const</span> searchHTML = <span class="string">`</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;typesense-search-mask&quot; class=&quot;ts-mask&quot; style=&quot;display:none;&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;typesense-search-container&quot; class=&quot;ts-container&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;ts-header&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;span class=&quot;ts-title&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt; 本站搜索</span></span><br><span class="line"><span class="string"> &lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;span id=&quot;close-typesense&quot; class=&quot;ts-close&quot; aria-label=&quot;关闭搜索&quot;&gt;&amp;times;&lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;searchbox&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;stats&quot; class=&quot;ts-stats&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;hits&quot; class=&quot;ts-hits&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;pagination&quot; class=&quot;ts-pagination&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;ts-footer&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;small&gt;Search powered by &lt;strong&gt;Typesense&lt;/strong&gt;&lt;/small&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> &lt;style&gt;</span></span><br><span class="line"><span class="string"> .ts-mask &#123;</span></span><br><span class="line"><span class="string"> position: fixed;</span></span><br><span class="line"><span class="string"> top: 0;</span></span><br><span class="line"><span class="string"> left: 0;</span></span><br><span class="line"><span class="string"> width: 100%;</span></span><br><span class="line"><span class="string"> height: 100%;</span></span><br><span class="line"><span class="string"> background: rgba(0, 0, 0, 0.7);</span></span><br><span class="line"><span class="string"> z-index: 10000;</span></span><br><span class="line"><span class="string"> backdrop-filter: blur(5px);</span></span><br><span class="line"><span class="string"> -webkit-backdrop-filter: blur(5px);</span></span><br><span class="line"><span class="string"> opacity: 0;</span></span><br><span class="line"><span class="string"> transition: opacity 300ms ease;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-mask.active &#123; opacity: 1; &#125;</span></span><br><span class="line"><span class="string"> .ts-container &#123;</span></span><br><span class="line"><span class="string"> margin: 5% auto;</span></span><br><span class="line"><span class="string"> width: 90%;</span></span><br><span class="line"><span class="string"> max-width: 650px;</span></span><br><span class="line"><span class="string"> background: var(--search-bg, var(--card-bg, #fff));</span></span><br><span class="line"><span class="string"> padding: 25px;</span></span><br><span class="line"><span class="string"> border-radius: 12px;</span></span><br><span class="line"><span class="string"> box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);</span></span><br><span class="line"><span class="string"> position: relative;</span></span><br><span class="line"><span class="string"> z-index: 10001;</span></span><br><span class="line"><span class="string"> transform: translateY(-50px);</span></span><br><span class="line"><span class="string"> opacity: 0;</span></span><br><span class="line"><span class="string"> transition: all 300ms ease;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-mask.active .ts-container &#123;</span></span><br><span class="line"><span class="string"> transform: translateY(0);</span></span><br><span class="line"><span class="string"> opacity: 1;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-header &#123;</span></span><br><span class="line"><span class="string"> display: flex;</span></span><br><span class="line"><span class="string"> justify-content: space-between;</span></span><br><span class="line"><span class="string"> align-items: center;</span></span><br><span class="line"><span class="string"> margin-bottom: 20px;</span></span><br><span class="line"><span class="string"> border-bottom: 2px solid var(--text-highlight-color, #49b1f5);</span></span><br><span class="line"><span class="string"> padding-bottom: 10px;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-title &#123;</span></span><br><span class="line"><span class="string"> font-size: 1.2rem;</span></span><br><span class="line"><span class="string"> font-weight: bold;</span></span><br><span class="line"><span class="string"> color: var(--text-highlight-color, #49b1f5);</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-close &#123;</span></span><br><span class="line"><span class="string"> cursor: pointer;</span></span><br><span class="line"><span class="string"> font-size: 28px;</span></span><br><span class="line"><span class="string"> color: var(--font-color, #333);</span></span><br><span class="line"><span class="string"> line-height: 1;</span></span><br><span class="line"><span class="string"> transition: color 0.2s, transform 0.2s;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-close:hover &#123;</span></span><br><span class="line"><span class="string"> color: var(--text-highlight-color, #49b1f5);</span></span><br><span class="line"><span class="string"> transform: scale(1.1);</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ais-SearchBox-input &#123;</span></span><br><span class="line"><span class="string"> position: relative;</span></span><br><span class="line"><span class="string"> z-index: 10002;</span></span><br><span class="line"><span class="string"> cursor: text;</span></span><br><span class="line"><span class="string"> padding: 12px 40px 12px 15px !important;</span></span><br><span class="line"><span class="string"> border-radius: 8px !important;</span></span><br><span class="line"><span class="string"> border: 2px solid #eee !important;</span></span><br><span class="line"><span class="string"> width: 100%;</span></span><br><span class="line"><span class="string"> outline: none;</span></span><br><span class="line"><span class="string"> transition: border-color 0.3s, box-shadow 0.3s;</span></span><br><span class="line"><span class="string"> background: var(--card-bg, #fff);</span></span><br><span class="line"><span class="string"> color: var(--font-color, #333);</span></span><br><span class="line"><span class="string"> font-size: 1rem;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ais-SearchBox-input:focus &#123;</span></span><br><span class="line"><span class="string"> border-color: var(--text-highlight-color, #49b1f5) !important;</span></span><br><span class="line"><span class="string"> box-shadow: 0 0 0 3px rgba(73, 177, 245, 0.1);</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-stats &#123;</span></span><br><span class="line"><span class="string"> margin: 10px 0;</span></span><br><span class="line"><span class="string"> font-size: 0.85rem;</span></span><br><span class="line"><span class="string"> color: var(--font-color, #666);</span></span><br><span class="line"><span class="string"> opacity: 0.8;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-hits &#123;</span></span><br><span class="line"><span class="string"> max-height: 55vh;</span></span><br><span class="line"><span class="string"> overflow-y: auto;</span></span><br><span class="line"><span class="string"> margin-top: 15px;</span></span><br><span class="line"><span class="string"> padding-right: 5px;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-hits::-webkit-scrollbar &#123; width: 6px; &#125;</span></span><br><span class="line"><span class="string"> .ts-hits::-webkit-scrollbar-track &#123;</span></span><br><span class="line"><span class="string"> background: var(--card-bg, #f1f1f1);</span></span><br><span class="line"><span class="string"> border-radius: 10px;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-hits::-webkit-scrollbar-thumb &#123;</span></span><br><span class="line"><span class="string"> background: var(--text-highlight-color, #49b1f5);</span></span><br><span class="line"><span class="string"> border-radius: 10px;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-empty &#123;</span></span><br><span class="line"><span class="string"> text-align: center;</span></span><br><span class="line"><span class="string"> padding: 40px 20px;</span></span><br><span class="line"><span class="string"> color: var(--font-color, #999);</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-empty i &#123;</span></span><br><span class="line"><span class="string"> font-size: 3rem;</span></span><br><span class="line"><span class="string"> margin-bottom: 15px;</span></span><br><span class="line"><span class="string"> opacity: 0.3;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-empty code &#123;</span></span><br><span class="line"><span class="string"> background: #f5f5f5;</span></span><br><span class="line"><span class="string"> padding: 2px 6px;</span></span><br><span class="line"><span class="string"> border-radius: 3px;</span></span><br><span class="line"><span class="string"> font-family: monospace;</span></span><br><span class="line"><span class="string"> color: #e91e63;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-empty ol &#123;</span></span><br><span class="line"><span class="string"> padding-left: 20px;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-empty li &#123;</span></span><br><span class="line"><span class="string"> margin: 8px 0;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-result-item &#123;</span></span><br><span class="line"><span class="string"> border-radius: 8px;</span></span><br><span class="line"><span class="string"> transition: all 0.2s ease;</span></span><br><span class="line"><span class="string"> margin-bottom: 10px;</span></span><br><span class="line"><span class="string"> padding: 15px;</span></span><br><span class="line"><span class="string"> border: 1px solid transparent;</span></span><br><span class="line"><span class="string"> text-decoration: none;</span></span><br><span class="line"><span class="string"> display: block;</span></span><br><span class="line"><span class="string"> background: var(--card-bg, #fff);</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-result-item:hover &#123;</span></span><br><span class="line"><span class="string"> background: var(--text-bg-hover, rgba(73, 177, 245, 0.05));</span></span><br><span class="line"><span class="string"> border-color: var(--text-highlight-color, #49b1f5);</span></span><br><span class="line"><span class="string"> transform: translateX(5px);</span></span><br><span class="line"><span class="string"> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-result-title &#123;</span></span><br><span class="line"><span class="string"> font-weight: bold;</span></span><br><span class="line"><span class="string"> color: var(--text-highlight-color, #49b1f5);</span></span><br><span class="line"><span class="string"> font-size: 1.1rem;</span></span><br><span class="line"><span class="string"> margin-bottom: 8px;</span></span><br><span class="line"><span class="string"> display: block;</span></span><br><span class="line"><span class="string"> line-height: 1.4;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-result-content &#123;</span></span><br><span class="line"><span class="string"> font-size: 0.9rem;</span></span><br><span class="line"><span class="string"> color: var(--font-color, #666);</span></span><br><span class="line"><span class="string"> line-height: 1.6;</span></span><br><span class="line"><span class="string"> opacity: 0.85;</span></span><br><span class="line"><span class="string"> display: -webkit-box;</span></span><br><span class="line"><span class="string"> -webkit-line-clamp: 2;</span></span><br><span class="line"><span class="string"> -webkit-box-orient: vertical;</span></span><br><span class="line"><span class="string"> overflow: hidden;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-result-item mark &#123;</span></span><br><span class="line"><span class="string"> background: #ffeb3b;</span></span><br><span class="line"><span class="string"> color: #000;</span></span><br><span class="line"><span class="string"> padding: 2px 4px;</span></span><br><span class="line"><span class="string"> border-radius: 3px;</span></span><br><span class="line"><span class="string"> font-weight: 500;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-pagination &#123;</span></span><br><span class="line"><span class="string"> margin-top: 20px;</span></span><br><span class="line"><span class="string"> display: flex;</span></span><br><span class="line"><span class="string"> justify-content: center;</span></span><br><span class="line"><span class="string"> gap: 5px;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ais-Pagination-list &#123;</span></span><br><span class="line"><span class="string"> display: flex;</span></span><br><span class="line"><span class="string"> list-style: none;</span></span><br><span class="line"><span class="string"> padding: 0;</span></span><br><span class="line"><span class="string"> margin: 0;</span></span><br><span class="line"><span class="string"> gap: 5px;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ais-Pagination-link &#123;</span></span><br><span class="line"><span class="string"> display: block;</span></span><br><span class="line"><span class="string"> padding: 8px 12px;</span></span><br><span class="line"><span class="string"> border: 1px solid #ddd;</span></span><br><span class="line"><span class="string"> border-radius: 5px;</span></span><br><span class="line"><span class="string"> color: var(--font-color, #333);</span></span><br><span class="line"><span class="string"> text-decoration: none;</span></span><br><span class="line"><span class="string"> transition: all 0.2s;</span></span><br><span class="line"><span class="string"> background: var(--card-bg, #fff);</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ais-Pagination-link:hover &#123;</span></span><br><span class="line"><span class="string"> background: var(--text-highlight-color, #49b1f5);</span></span><br><span class="line"><span class="string"> color: #fff;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ais-Pagination-item--selected .ais-Pagination-link &#123;</span></span><br><span class="line"><span class="string"> background: var(--text-highlight-color, #49b1f5);</span></span><br><span class="line"><span class="string"> color: #fff;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-footer &#123;</span></span><br><span class="line"><span class="string"> text-align: right;</span></span><br><span class="line"><span class="string"> margin-top: 15px;</span></span><br><span class="line"><span class="string"> border-top: 1px solid var(--border-color, #eee);</span></span><br><span class="line"><span class="string"> padding-top: 10px;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> @media (max-width: 768px) &#123;</span></span><br><span class="line"><span class="string"> .ts-container &#123;</span></span><br><span class="line"><span class="string"> margin: 10px;</span></span><br><span class="line"><span class="string"> width: calc(100% - 20px);</span></span><br><span class="line"><span class="string"> padding: 20px 15px;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> .ts-hits &#123; max-height: 50vh; &#125;</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> [data-theme=&quot;dark&quot;] .ts-mask,</span></span><br><span class="line"><span class="string"> .dark-mode .ts-mask &#123;</span></span><br><span class="line"><span class="string"> background: rgba(0, 0, 0, 0.85);</span></span><br><span class="line"><span class="string"> &#125;</span></span><br><span class="line"><span class="string"> &lt;/style&gt;</span></span><br><span class="line"><span class="string"> `</span>;</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">insertAdjacentHTML</span>(<span class="string">&#x27;beforeend&#x27;</span>, searchHTML);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> mask = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;typesense-search-mask&#x27;</span>);</span><br><span class="line"> <span class="keyword">const</span> closeBtn = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;close-typesense&#x27;</span>);</span><br><span class="line"> <span class="keyword">const</span> container = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;typesense-search-container&#x27;</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="comment">// 搜索控制</span></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">openSearch</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (isSearchOpen) <span class="keyword">return</span>;</span><br><span class="line"> isSearchOpen = <span class="literal">true</span>;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&#x27;block&#x27;</span>;</span><br><span class="line"> <span class="keyword">void</span> mask.<span class="property">offsetWidth</span>;</span><br><span class="line"> mask.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&#x27;active&#x27;</span>);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">overflow</span> = <span class="string">&#x27;hidden&#x27;</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!isInitialized) &#123;</span><br><span class="line"> <span class="title function_">initTypesense</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="title function_">focusSearchInput</span>();</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">closeSearch</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (!isSearchOpen) <span class="keyword">return</span>;</span><br><span class="line"> isSearchOpen = <span class="literal">false</span>;</span><br><span class="line"> mask.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&#x27;active&#x27;</span>);</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">display</span> = <span class="string">&#x27;none&#x27;</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">overflow</span> = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"> &#125;, <span class="variable constant_">CONFIG</span>.<span class="property">ui</span>.<span class="property">animationDuration</span>);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">focusSearchInput</span>(<span class="params">retryCount</span>) &#123;</span><br><span class="line"> retryCount = retryCount || <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">const</span> input = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.ais-SearchBox-input&#x27;</span>);</span><br><span class="line"> <span class="keyword">if</span> (input) &#123;</span><br><span class="line"> input.<span class="title function_">focus</span>();</span><br><span class="line"> input.<span class="title function_">select</span>();</span><br><span class="line"> &#125; <span class="keyword">else</span> <span class="keyword">if</span> (retryCount &lt; <span class="variable constant_">CONFIG</span>.<span class="property">ui</span>.<span class="property">maxRetries</span>) &#123;</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="title function_">focusSearchInput</span>(retryCount + <span class="number">1</span>);</span><br><span class="line"> &#125;, <span class="variable constant_">CONFIG</span>.<span class="property">ui</span>.<span class="property">retryDelay</span>);</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="comment">// 事件监听</span></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (e.<span class="property">target</span>.<span class="title function_">closest</span>(<span class="string">&#x27;.search-typesense-trigger&#x27;</span>)) &#123;</span><br><span class="line"> e.<span class="title function_">preventDefault</span>();</span><br><span class="line"> <span class="title function_">openSearch</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;);</span><br><span class="line"></span><br><span class="line"> closeBtn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, closeSearch);</span><br><span class="line"> mask.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (e.<span class="property">target</span> === mask) <span class="title function_">closeSearch</span>();</span><br><span class="line"> &#125;);</span><br><span class="line"> container.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line"> e.<span class="title function_">stopPropagation</span>();</span><br><span class="line"> &#125;);</span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;keydown&#x27;</span>, <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (e.<span class="property">key</span> === <span class="string">&#x27;Escape&#x27;</span> &amp;&amp; isSearchOpen) &#123;</span><br><span class="line"> <span class="title function_">closeSearch</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">if</span> ((e.<span class="property">ctrlKey</span> || e.<span class="property">metaKey</span>) &amp;&amp; e.<span class="property">key</span> === <span class="string">&#x27;k&#x27;</span>) &#123;</span><br><span class="line"> e.<span class="title function_">preventDefault</span>();</span><br><span class="line"> <span class="title function_">openSearch</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="comment">// Typesense 初始化（带重试限制）</span></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">initTypesense</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (isInitialized || searchInstance) &#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">&#x27;Typesense 搜索已初始化&#x27;</span>);</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> instantsearchLoaded = <span class="keyword">typeof</span> instantsearch !== <span class="string">&#x27;undefined&#x27;</span>;</span><br><span class="line"> <span class="keyword">var</span> adapterLoaded = <span class="keyword">typeof</span> <span class="title class_">TypesenseInstantSearchAdapter</span> !== <span class="string">&#x27;undefined&#x27;</span> || </span><br><span class="line"> <span class="keyword">typeof</span> <span class="variable language_">window</span>.<span class="property">TypesenseInstantSearchAdapter</span> !== <span class="string">&#x27;undefined&#x27;</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;📦 依赖库检查 (&#x27;</span> + (initRetryCount + <span class="number">1</span>) + <span class="string">&#x27;/&#x27;</span> + <span class="variable constant_">MAX_INIT_RETRIES</span> + <span class="string">&#x27;):&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27; instantsearch.js:&#x27;</span>, instantsearchLoaded ? <span class="string">&#x27;✅ 已加载&#x27;</span> : <span class="string">&#x27;❌ 未加载&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27; TypesenseAdapter:&#x27;</span>, adapterLoaded ? <span class="string">&#x27;✅ 已加载&#x27;</span> : <span class="string">&#x27;❌ 未加载&#x27;</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (!instantsearchLoaded || !adapterLoaded) &#123;</span><br><span class="line"> initRetryCount++;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (initRetryCount &gt;= <span class="variable constant_">MAX_INIT_RETRIES</span>) &#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;❌ Typesense 依赖库加载失败！&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;🔧 请检查 _config.butterfly.yml 配置：&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;inject:&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27; bottom: # ⚠️ 使用 bottom 而不是 head&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27; - &lt;script src=&quot;https://cdn.jsdelivr.net/npm/instantsearch.js@4.56.0&quot;&gt;&lt;/script&gt;&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27; - &lt;script src=&quot;https://cdn.jsdelivr.net/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js&quot;&gt;&lt;/script&gt;&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27; - &lt;script src=&quot;/js/typesense-search-fixed.js&quot;&gt;&lt;/script&gt;&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;💡 或在控制台手动检查：&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27; typeof instantsearch&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27; typeof TypesenseInstantSearchAdapter&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━&#x27;</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="title function_">showErrorMessage</span>();</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">&#x27;⏳ 100ms 后重试...&#x27;</span>);</span><br><span class="line"> <span class="built_in">setTimeout</span>(initTypesense, <span class="number">100</span>);</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> initRetryCount = <span class="number">0</span>;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;🚀 开始初始化 Typesense...&#x27;</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">try</span> &#123;</span><br><span class="line"> <span class="keyword">const</span> typesenseAdapter = <span class="keyword">new</span> <span class="title class_">TypesenseInstantSearchAdapter</span>(&#123;</span><br><span class="line"> <span class="attr">server</span>: &#123;</span><br><span class="line"> <span class="attr">apiKey</span>: <span class="variable constant_">CONFIG</span>.<span class="property">apiKey</span>,</span><br><span class="line"> <span class="attr">nodes</span>: [&#123;</span><br><span class="line"> <span class="attr">host</span>: <span class="variable constant_">CONFIG</span>.<span class="property">server</span>.<span class="property">host</span>,</span><br><span class="line"> <span class="attr">port</span>: <span class="variable constant_">CONFIG</span>.<span class="property">server</span>.<span class="property">port</span>,</span><br><span class="line"> <span class="attr">protocol</span>: <span class="variable constant_">CONFIG</span>.<span class="property">server</span>.<span class="property">protocol</span></span><br><span class="line"> &#125;],</span><br><span class="line"> <span class="attr">cacheSearchResultsForSeconds</span>: <span class="number">120</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">additionalSearchParameters</span>: <span class="variable constant_">CONFIG</span>.<span class="property">searchParams</span></span><br><span class="line"> &#125;);</span><br><span class="line"></span><br><span class="line"> searchInstance = <span class="title function_">instantsearch</span>(&#123;</span><br><span class="line"> <span class="attr">searchClient</span>: typesenseAdapter.<span class="property">searchClient</span>,</span><br><span class="line"> <span class="attr">indexName</span>: <span class="variable constant_">CONFIG</span>.<span class="property">indexName</span>,</span><br><span class="line"> <span class="attr">routing</span>: <span class="literal">false</span></span><br><span class="line"> &#125;);</span><br><span class="line"></span><br><span class="line"> searchInstance.<span class="title function_">addWidgets</span>([</span><br><span class="line"> instantsearch.<span class="property">widgets</span>.<span class="title function_">searchBox</span>(&#123;</span><br><span class="line"> <span class="attr">container</span>: <span class="string">&#x27;#searchbox&#x27;</span>,</span><br><span class="line"> <span class="attr">placeholder</span>: <span class="string">&#x27;输入关键词寻找故事...&#x27;</span>,</span><br><span class="line"> <span class="attr">autofocus</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">showReset</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">showSubmit</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">showLoadingIndicator</span>: <span class="literal">true</span></span><br><span class="line"> &#125;),</span><br><span class="line"> instantsearch.<span class="property">widgets</span>.<span class="title function_">stats</span>(&#123;</span><br><span class="line"> <span class="attr">container</span>: <span class="string">&#x27;#stats&#x27;</span>,</span><br><span class="line"> <span class="attr">templates</span>: &#123;</span><br><span class="line"> <span class="attr">text</span>: <span class="keyword">function</span>(<span class="params">data</span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (!data.<span class="property">query</span>) <span class="keyword">return</span> <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"> <span class="keyword">return</span> <span class="string">&#x27;找到 &lt;strong&gt;&#x27;</span> + data.<span class="property">nbHits</span> + <span class="string">&#x27;&lt;/strong&gt; 条结果 (&#x27;</span> + data.<span class="property">processingTimeMS</span> + <span class="string">&#x27;ms)&#x27;</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;),</span><br><span class="line"> instantsearch.<span class="property">widgets</span>.<span class="title function_">hits</span>(&#123;</span><br><span class="line"> <span class="attr">container</span>: <span class="string">&#x27;#hits&#x27;</span>,</span><br><span class="line"> <span class="attr">templates</span>: &#123;</span><br><span class="line"> <span class="attr">empty</span>: <span class="keyword">function</span>(<span class="params">results</span>) &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="string">&#x27;&lt;div class=&quot;ts-empty&quot;&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div&gt;&lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;&lt;/div&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div&gt;找不到与 &quot;&lt;strong&gt;&#x27;</span> + results.<span class="property">query</span> + <span class="string">&#x27;&lt;/strong&gt;&quot; 相关的内容&lt;/div&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div style=&quot;margin-top: 10px;&quot;&gt;试试其他关键词吧 (´·ω·`)&lt;/div&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;/div&gt;&#x27;</span>;</span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">item</span>: <span class="keyword">function</span>(<span class="params">hit</span>) &#123;</span><br><span class="line"> <span class="comment">// 使用 _highlightResult 获取高亮文本</span></span><br><span class="line"> <span class="keyword">var</span> titleHighlight = hit.<span class="property">_highlightResult</span> &amp;&amp; hit.<span class="property">_highlightResult</span>.<span class="property">title</span> </span><br><span class="line"> ? hit.<span class="property">_highlightResult</span>.<span class="property">title</span>.<span class="property">value</span> </span><br><span class="line"> : (hit.<span class="property">title</span> || <span class="string">&#x27;&#x27;</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> contentHighlight = hit.<span class="property">_highlightResult</span> &amp;&amp; hit.<span class="property">_highlightResult</span>.<span class="property">content</span> </span><br><span class="line"> ? hit.<span class="property">_highlightResult</span>.<span class="property">content</span>.<span class="property">value</span> </span><br><span class="line"> : (hit.<span class="property">content</span> || <span class="string">&#x27;&#x27;</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 截取内容长度</span></span><br><span class="line"> <span class="keyword">if</span> (contentHighlight.<span class="property">length</span> &gt; <span class="number">200</span>) &#123;</span><br><span class="line"> contentHighlight = contentHighlight.<span class="title function_">substring</span>(<span class="number">0</span>, <span class="number">200</span>) + <span class="string">&#x27;...&#x27;</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> <span class="string">&#x27;&lt;a href=&quot;&#x27;</span> + hit.<span class="property">url</span> + <span class="string">&#x27;&quot; class=&quot;ts-result-item&quot;&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div class=&quot;ts-result-title&quot;&gt;&#x27;</span> + titleHighlight + <span class="string">&#x27;&lt;/div&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;div class=&quot;ts-result-content&quot;&gt;&#x27;</span> + contentHighlight + <span class="string">&#x27;&lt;/div&gt;&#x27;</span> +</span><br><span class="line"> <span class="string">&#x27;&lt;/a&gt;&#x27;</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;),</span><br><span class="line"> instantsearch.<span class="property">widgets</span>.<span class="title function_">pagination</span>(&#123;</span><br><span class="line"> <span class="attr">container</span>: <span class="string">&#x27;#pagination&#x27;</span>,</span><br><span class="line"> <span class="attr">padding</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">showFirst</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">showLast</span>: <span class="literal">false</span></span><br><span class="line"> &#125;)</span><br><span class="line"> ]);</span><br><span class="line"></span><br><span class="line"> searchInstance.<span class="title function_">start</span>();</span><br><span class="line"> isInitialized = <span class="literal">true</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;✅ Typesense 初始化成功！&#x27;</span>);</span><br><span class="line"></span><br><span class="line"> searchInstance.<span class="title function_">on</span>(<span class="string">&#x27;render&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (isSearchOpen) &#123;</span><br><span class="line"> <span class="keyword">const</span> input = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.ais-SearchBox-input&#x27;</span>);</span><br><span class="line"> <span class="keyword">if</span> (input &amp;&amp; <span class="variable language_">document</span>.<span class="property">activeElement</span> !== input) &#123;</span><br><span class="line"> input.<span class="title function_">focus</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;);</span><br><span class="line"></span><br><span class="line"> &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">&#x27;❌ 初始化失败:&#x27;</span>, error);</span><br><span class="line"> <span class="title function_">showErrorMessage</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="comment">// 初始化</span></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">init</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;🔍 Typesense 搜索已准备就绪&#x27;</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;💡 快捷键: Ctrl/Cmd + K&#x27;</span>);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">readyState</span> === <span class="string">&#x27;loading&#x27;</span>) &#123;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;DOMContentLoaded&#x27;</span>, init);</span><br><span class="line"> &#125; <span class="keyword">else</span> &#123;</span><br><span class="line"> <span class="title function_">init</span>();</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="comment">// 全局接口</span></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">TypesenseSearch</span> = &#123;</span><br><span class="line"> <span class="attr">open</span>: openSearch,</span><br><span class="line"> <span class="attr">close</span>: closeSearch,</span><br><span class="line"> <span class="attr">isOpen</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; <span class="keyword">return</span> isSearchOpen; &#125;,</span><br><span class="line"> <span class="attr">getInstance</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123; <span class="keyword">return</span> searchInstance; &#125;</span><br><span class="line"> &#125;;</span><br><span class="line"></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure><h1 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h1><div class="note red flat"><p>indexName: “blogs” 和 collectionName: ‘posts’ 要一致！！！</p></div>]]></content>
<summary type="html">&lt;p&gt;最近在构建班级博客，用&lt;code&gt;ghost cms&lt;/code&gt;，在构建搜索时发现了typesense，所以把他移植到这个博客上。&lt;/p&gt;
&lt;h1 id=&quot;安装typesense&quot;&gt;&lt;a href=&quot;#安装typesense&quot; class=&quot;headerlink&quot;</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="建站手札" scheme="https://blog.biss.click/categories/technology/website/"/>
</entry>
<entry>
<title>自定义字体</title>
<link href="https://blog.biss.click/posts/b5601a7e/"/>
<id>https://blog.biss.click/posts/b5601a7e/</id>
<published>2026-01-15T23:47:15.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示</p><div class="note no-icon flat"><p>2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。</p></div><h1 id="选择字体"><a href="#选择字体" class="headerlink" title="选择字体"></a>选择字体</h1><p>首先在网上查找自己喜欢的字体，这里有一个网站</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://drxie.github.io/OSFCC/"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">中文开源字体集 Open Source Fonts Collection for Chinese</div> <div class="tag-link-sitename">开源字体</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站：</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://products.groupdocs.app/zh/conversion/ttf-to-woff2"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">转换网站</div> <div class="tag-link-sitename">ttf2woff2</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>利用这个网站把下载的ttf字体文件转换成woff2格式。</p><h1 id="添加字体"><a href="#添加字体" class="headerlink" title="添加字体"></a>添加字体</h1><p>新建一个css文件</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">&#x27;CascadiaCodePL&#x27;</span>;</span><br><span class="line"> <span class="attribute">font-display</span>: swap;</span><br><span class="line"> <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;/butterflyChange/fonts/font.woff2&#x27;</span>) <span class="built_in">format</span>(<span class="string">&quot;woff2&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>其中 <code>font.woff2</code>改成自己的文件名。<br>其他字体格式参考</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">&#x27;webfont&#x27;</span>;</span><br><span class="line"> <span class="attribute">font-display</span>: swap;</span><br><span class="line"> <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;.eot&#x27;</span>); <span class="comment">/*IE9*/</span></span><br><span class="line"> <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;.eot&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;embedded-opentype&#x27;</span>), <span class="comment">/* IE6-IE8 */</span></span><br><span class="line"> <span class="built_in">url</span>(<span class="string">&#x27;.woff2&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff2&#x27;</span>),</span><br><span class="line"> <span class="built_in">url</span>(<span class="string">&#x27;.woff&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff&#x27;</span>), <span class="comment">/*chrome、firefox */</span></span><br><span class="line"> <span class="built_in">url</span>(<span class="string">&#x27;.ttf&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;truetype&#x27;</span>), <span class="comment">/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/</span></span><br><span class="line"> <span class="built_in">url</span>(<span class="string">&#x27;.svg&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;svg&#x27;</span>); <span class="comment">/* iOS 4.1- */</span></span><br><span class="line">&#125;```</span><br><span class="line">然后在`_config<span class="selector-class">.butterfly</span><span class="selector-class">.yml</span>`里面引用这个css</span><br><span class="line">```yml</span><br><span class="line">- &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/<span class="attribute">font</span><span class="selector-class">.css</span>&quot;&gt;</span><br></pre></td></tr></table></figure><p>在主题文件的font配置区域修改字体：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">font:</span></span><br><span class="line"> <span class="attr">global_font_size:</span> <span class="number">110</span><span class="string">%</span></span><br><span class="line"> <span class="attr">code_font_size:</span> <span class="number">100</span><span class="string">%</span></span><br><span class="line"> <span class="attr">font_family:</span> <span class="comment"># ，全局字体，不带后缀名</span></span><br><span class="line"> <span class="attr">code_font_family:</span> <span class="comment"># 这是代码使用的字体</span></span><br></pre></td></tr></table></figure><h1 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h1><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://blog.imbhj.com/archives/0rIzmBIn"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">Ordis的博客</div> <div class="tag-link-sitename">ordis</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div>]]></content>
<summary type="html">&lt;p&gt;今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示&lt;/p&gt;
&lt;div class=&quot;note no-icon</summary>
<category term="建站手札" scheme="https://blog.biss.click/categories/website/"/>
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
</entry>
<entry>
<title>在侧边栏添加日历和倒计时</title>
<link href="https://blog.biss.click/posts/5ed2f1e6/"/>
<id>https://blog.biss.click/posts/5ed2f1e6/</id>
<published>2026-01-15T23:47:07.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）<br>效果图：</p><center><img src="https://pic.biss.click/image/b9819d72-3496-4204-9b7d-07d82e2e2f1b.webp" alt="效果图"></center><h1 id="添加js"><a href="#添加js" class="headerlink" title="添加js"></a>添加js</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;DOMContentLoaded&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">initializeCard</span>();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&quot;pjax:complete&quot;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line"> <span class="title function_">initializeCard</span>();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">initializeCard</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="title function_">cardTimes</span>();</span><br><span class="line"> <span class="title function_">cardRefreshTimes</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> year, month, week, date, dates, weekStr, monthStr, asideTime, asideDay, asideDayNum, animalYear, ganzhiYear, lunarMon, lunarDay;</span><br><span class="line"><span class="keyword">const</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">cardRefreshTimes</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">const</span> e = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;card-widget-schedule&quot;</span>);</span><br><span class="line"> <span class="keyword">if</span> (e) &#123;</span><br><span class="line"> asideDay = (now - asideTime) / <span class="number">1e3</span> / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#pBar_year&quot;</span>).<span class="property">value</span> = asideDay;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#p_span_year&quot;</span>).<span class="property">innerHTML</span> = (asideDay / <span class="number">365</span> * <span class="number">100</span>).<span class="title function_">toFixed</span>(<span class="number">1</span>) + <span class="string">&quot;%&quot;</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;.schedule-r0 .schedule-d1 .aside-span2&quot;</span>).<span class="property">innerHTML</span> = <span class="string">`还剩&lt;a&gt; <span class="subst">$&#123;(<span class="number">365</span> - asideDay).toFixed(<span class="number">0</span>)&#125;</span> &lt;/a&gt;天`</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#pBar_month&quot;</span>).<span class="property">value</span> = date;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#pBar_month&quot;</span>).<span class="property">max</span> = dates;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#p_span_month&quot;</span>).<span class="property">innerHTML</span> = (date / dates * <span class="number">100</span>).<span class="title function_">toFixed</span>(<span class="number">1</span>) + <span class="string">&quot;%&quot;</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;.schedule-r1 .schedule-d1 .aside-span2&quot;</span>).<span class="property">innerHTML</span> = <span class="string">`还剩&lt;a&gt; <span class="subst">$&#123;(dates - date)&#125;</span> &lt;/a&gt;天`</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#pBar_week&quot;</span>).<span class="property">value</span> = week === <span class="number">0</span> ? <span class="number">7</span> : week;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#p_span_week&quot;</span>).<span class="property">innerHTML</span> = ((week === <span class="number">0</span> ? <span class="number">7</span> : week) / <span class="number">7</span> * <span class="number">100</span>).<span class="title function_">toFixed</span>(<span class="number">1</span>) + <span class="string">&quot;%&quot;</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;.schedule-r2 .schedule-d1 .aside-span2&quot;</span>).<span class="property">innerHTML</span> = <span class="string">`还剩&lt;a&gt; <span class="subst">$&#123;(<span class="number">7</span> - (week === <span class="number">0</span> ? <span class="number">7</span> : week))&#125;</span> &lt;/a&gt;天`</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">cardTimes</span>(<span class="params"></span>) &#123;</span><br><span class="line"> year = now.<span class="title function_">getFullYear</span>();</span><br><span class="line"> month = now.<span class="title function_">getMonth</span>();</span><br><span class="line"> week = now.<span class="title function_">getDay</span>();</span><br><span class="line"> date = now.<span class="title function_">getDate</span>();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> e = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;card-widget-calendar&quot;</span>);</span><br><span class="line"> <span class="keyword">if</span> (e) &#123;</span><br><span class="line"> <span class="keyword">const</span> isLeapYear = year % <span class="number">4</span> === <span class="number">0</span> &amp;&amp; year % <span class="number">100</span> !== <span class="number">0</span> || year % <span class="number">400</span> === <span class="number">0</span>;</span><br><span class="line"> weekStr = [<span class="string">&quot;周日&quot;</span>, <span class="string">&quot;周一&quot;</span>, <span class="string">&quot;周二&quot;</span>, <span class="string">&quot;周三&quot;</span>, <span class="string">&quot;周四&quot;</span>, <span class="string">&quot;周五&quot;</span>, <span class="string">&quot;周六&quot;</span>][week];</span><br><span class="line"> <span class="keyword">const</span> monthData = [</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;1月&quot;</span>, <span class="attr">days</span>: <span class="number">31</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;2月&quot;</span>, <span class="attr">days</span>: isLeapYear ? <span class="number">29</span> : <span class="number">28</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;3月&quot;</span>, <span class="attr">days</span>: <span class="number">31</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;4月&quot;</span>, <span class="attr">days</span>: <span class="number">30</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;5月&quot;</span>, <span class="attr">days</span>: <span class="number">31</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;6月&quot;</span>, <span class="attr">days</span>: <span class="number">30</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;7月&quot;</span>, <span class="attr">days</span>: <span class="number">31</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;8月&quot;</span>, <span class="attr">days</span>: <span class="number">31</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;9月&quot;</span>, <span class="attr">days</span>: <span class="number">30</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;10月&quot;</span>, <span class="attr">days</span>: <span class="number">31</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;11月&quot;</span>, <span class="attr">days</span>: <span class="number">30</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">month</span>: <span class="string">&quot;12月&quot;</span>, <span class="attr">days</span>: <span class="number">31</span> &#125;</span><br><span class="line"> ];</span><br><span class="line"> monthStr = monthData[month].<span class="property">month</span>;</span><br><span class="line"> dates = monthData[month].<span class="property">days</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> t = (week + <span class="number">8</span> - date % <span class="number">7</span>) % <span class="number">7</span>;</span><br><span class="line"> <span class="keyword">let</span> n = <span class="string">&quot;&quot;</span>, d = <span class="literal">false</span>, s = <span class="number">7</span> - t;</span><br><span class="line"> <span class="keyword">const</span> o = (dates - s) % <span class="number">7</span> === <span class="number">0</span> ? <span class="title class_">Math</span>.<span class="title function_">floor</span>((dates - s) / <span class="number">7</span>) + <span class="number">1</span> : <span class="title class_">Math</span>.<span class="title function_">floor</span>((dates - s) / <span class="number">7</span>) + <span class="number">2</span>;</span><br><span class="line"> <span class="keyword">const</span> c = e.<span class="title function_">querySelector</span>(<span class="string">&quot;#calendar-main&quot;</span>);</span><br><span class="line"> <span class="keyword">const</span> l = e.<span class="title function_">querySelector</span>(<span class="string">&quot;#calendar-date&quot;</span>);</span><br><span class="line"></span><br><span class="line"> l.<span class="property">style</span>.<span class="property">fontSize</span> = [<span class="string">&quot;64px&quot;</span>, <span class="string">&quot;48px&quot;</span>, <span class="string">&quot;36px&quot;</span>][<span class="title class_">Math</span>.<span class="title function_">min</span>(o - <span class="number">3</span>, <span class="number">2</span>)];</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; o; i++) &#123;</span><br><span class="line"> <span class="keyword">if</span> (!c.<span class="title function_">querySelector</span>(<span class="string">`.calendar-r<span class="subst">$&#123;i&#125;</span>`</span>)) &#123;</span><br><span class="line"> c.<span class="property">innerHTML</span> += <span class="string">`&lt;div class=&#x27;calendar-r<span class="subst">$&#123;i&#125;</span>&#x27;&gt;&lt;/div&gt;`</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j &lt; <span class="number">7</span>; j++) &#123;</span><br><span class="line"> <span class="keyword">if</span> (i === <span class="number">0</span> &amp;&amp; j === t) &#123;</span><br><span class="line"> n = <span class="number">1</span>;</span><br><span class="line"> d = <span class="literal">true</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">const</span> r = n === date ? <span class="string">&quot; class=&#x27;now&#x27;&quot;</span> : <span class="string">&quot;&quot;</span>;</span><br><span class="line"> <span class="keyword">if</span> (!c.<span class="title function_">querySelector</span>(<span class="string">`.calendar-r<span class="subst">$&#123;i&#125;</span> .calendar-d<span class="subst">$&#123;j&#125;</span> a`</span>)) &#123;</span><br><span class="line"> c.<span class="title function_">querySelector</span>(<span class="string">`.calendar-r<span class="subst">$&#123;i&#125;</span>`</span>).<span class="property">innerHTML</span> += <span class="string">`&lt;div class=&#x27;calendar-d<span class="subst">$&#123;j&#125;</span>&#x27;&gt;&lt;a<span class="subst">$&#123;r&#125;</span>&gt;<span class="subst">$&#123;n&#125;</span>&lt;/a&gt;&lt;/div&gt;`</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">if</span> (n &gt;= dates) &#123;</span><br><span class="line"> n = <span class="string">&quot;&quot;</span>;</span><br><span class="line"> d = <span class="literal">false</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">if</span> (d) &#123;</span><br><span class="line"> n += <span class="number">1</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> lunarDate = chineseLunar.<span class="title function_">solarToLunar</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(year, month, date));</span><br><span class="line"> animalYear = chineseLunar.<span class="title function_">format</span>(lunarDate, <span class="string">&quot;A&quot;</span>);</span><br><span class="line"> ganzhiYear = chineseLunar.<span class="title function_">format</span>(lunarDate, <span class="string">&quot;T&quot;</span>).<span class="title function_">slice</span>(<span class="number">0</span>, -<span class="number">1</span>);</span><br><span class="line"> lunarMon = chineseLunar.<span class="title function_">format</span>(lunarDate, <span class="string">&quot;M&quot;</span>);</span><br><span class="line"> lunarDay = chineseLunar.<span class="title function_">format</span>(lunarDate, <span class="string">&quot;d&quot;</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> newYearDate = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;2026/02/16 00:00:00&quot;</span>);</span><br><span class="line"> <span class="keyword">const</span> daysUntilNewYear = <span class="title class_">Math</span>.<span class="title function_">floor</span>((newYearDate - now) / <span class="number">1e3</span> / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>);</span><br><span class="line"> asideTime = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">`<span class="subst">$&#123;<span class="keyword">new</span> <span class="built_in">Date</span>().getFullYear()&#125;</span>/01/01 00:00:00`</span>);</span><br><span class="line"> asideDay = (now - asideTime) / <span class="number">1e3</span> / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>;</span><br><span class="line"> asideDayNum = <span class="title class_">Math</span>.<span class="title function_">floor</span>(asideDay);</span><br><span class="line"> <span class="keyword">const</span> weekNum = week - asideDayNum % <span class="number">7</span> &gt;= <span class="number">0</span> ? <span class="title class_">Math</span>.<span class="title function_">ceil</span>(asideDayNum / <span class="number">7</span>) : <span class="title class_">Math</span>.<span class="title function_">ceil</span>(asideDayNum / <span class="number">7</span>) + <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#calendar-week&quot;</span>).<span class="property">innerHTML</span> = <span class="string">`第<span class="subst">$&#123;weekNum&#125;</span>周 <span class="subst">$&#123;weekStr&#125;</span>`</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#calendar-date&quot;</span>).<span class="property">innerHTML</span> = date.<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">&quot;0&quot;</span>);</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#calendar-solar&quot;</span>).<span class="property">innerHTML</span> = <span class="string">`<span class="subst">$&#123;year&#125;</span>年<span class="subst">$&#123;monthStr&#125;</span> 第<span class="subst">$&#123;asideDay.toFixed(<span class="number">0</span>)&#125;</span>天`</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">&quot;#calendar-lunar&quot;</span>).<span class="property">innerHTML</span> = <span class="string">`<span class="subst">$&#123;ganzhiYear&#125;</span><span class="subst">$&#123;animalYear&#125;</span>年 <span class="subst">$&#123;lunarMon&#125;</span><span class="subst">$&#123;lunarDay&#125;</span>`</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;schedule-days&quot;</span>).<span class="property">innerHTML</span> = daysUntilNewYear;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="添加css"><a href="#添加css" class="headerlink" title="添加css"></a>添加css</h1><p>在主题文件 <code>source/css/</code>新建 <code>calendar.css</code>。</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 浅色主题变量覆盖 -------------------------------- */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line"> <span class="attr">--anzhiyu-main</span>: <span class="number">#a0d2eb</span>; <span class="comment">/* 主强调色：柔和天空蓝 */</span></span><br><span class="line"> <span class="attr">--anzhiyu-main-op</span>: <span class="built_in">rgba</span>(<span class="number">160</span>, <span class="number">210</span>, <span class="number">235</span>, <span class="number">0.6</span>);</span><br><span class="line"> <span class="attr">--anzhiyu-main-op-deep</span>: <span class="built_in">rgba</span>(<span class="number">160</span>, <span class="number">210</span>, <span class="number">235</span>, <span class="number">0.4</span>);</span><br><span class="line"> <span class="attr">--anzhiyu-main-op-light</span>: <span class="built_in">rgba</span>(<span class="number">160</span>, <span class="number">210</span>, <span class="number">235</span>, <span class="number">0.2</span>);</span><br><span class="line"></span><br><span class="line"> <span class="attr">--efu-card-bg</span>: <span class="number">#fdfdfd</span>; <span class="comment">/* 卡片背景：几乎白 */</span></span><br><span class="line"> <span class="attr">--efu-fontcolor</span>: <span class="number">#444</span>; <span class="comment">/* 主文本：深灰 */</span></span><br><span class="line"> <span class="attr">--efu-secondtext</span>: <span class="number">#999</span>; <span class="comment">/* 次级文本：浅灰 */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.card-widget</span> &#123;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span><span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">max-height</span>: <span class="built_in">calc</span>(<span class="number">100vh</span> - <span class="number">100px</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.card-times</span> <span class="selector-tag">a</span>, <span class="selector-class">.card-times</span> <span class="selector-tag">div</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--efu-fontcolor);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#card-widget-calendar</span> <span class="selector-class">.item-content</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-area-left</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">45%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-area-right</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">55%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-area-left</span>, <span class="selector-id">#calendar-area-right</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">8px</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">justify-content</span>: flex-start;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-main</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-week</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1.2rem</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line"> <span class="attribute">letter-spacing</span>: <span class="number">1px</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-date</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">3rem</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1.3</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">64px</span>;</span><br><span class="line"> <span class="attribute">letter-spacing</span>: <span class="number">3px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">top</span>: <span class="built_in">calc</span>(<span class="number">50%</span> - <span class="number">2.1rem</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-lunar</span>, <span class="selector-id">#calendar-solar</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-solar</span> &#123;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">2.1rem</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-lunar</span> &#123;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--efu-secondtext);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-main</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-main</span> <span class="selector-tag">a</span><span class="selector-class">.now</span> &#123;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--efu-card-bg);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-main</span> <span class="selector-class">.calendar-rh</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--efu-secondtext);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.calendar-r0</span>, <span class="selector-class">.calendar-r1</span>, <span class="selector-class">.calendar-r2</span>, <span class="selector-class">.calendar-r3</span>, <span class="selector-class">.calendar-r4</span>, <span class="selector-class">.calendar-r5</span>, <span class="selector-class">.calendar-rh</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1.2rem</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.calendar-d0</span>, <span class="selector-class">.calendar-d1</span>, <span class="selector-class">.calendar-d2</span>, <span class="selector-class">.calendar-d3</span>, <span class="selector-class">.calendar-d4</span>, <span class="selector-class">.calendar-d5</span>, <span class="selector-class">.calendar-d6</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> / <span class="number">7</span>);</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#card-widget-schedule</span> <span class="selector-class">.item-content</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-area-left</span>, <span class="selector-id">#schedule-area-right</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-area-left</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">30%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-area-right</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">70%</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.schedule-r0</span>, <span class="selector-class">.schedule-r1</span>, <span class="selector-class">.schedule-r2</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">2rem</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.schedule-d0</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">margin-right</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.schedule-d1</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">35px</span>);</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1.5rem</span>;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">progress::-webkit-progress-bar &#123;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(to right, <span class="built_in">var</span>(--anzhiyu-main-op-deep), <span class="built_in">var</span>(--anzhiyu-main-op), <span class="built_in">var</span>(--anzhiyu-main-op-light));</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">progress::-webkit-progress-value &#123;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aside-span1</span>, <span class="selector-class">.aside-span2</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1rem</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aside-span1</span> &#123;</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aside-span2</span> &#123;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--efu-secondtext);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aside-span2</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">3px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#pBar_month</span>, <span class="selector-id">#pBar_week</span>, <span class="selector-id">#pBar_year</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-date</span>, <span class="selector-id">#schedule-days</span>, <span class="selector-id">#schedule-title</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">align-items</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-title</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">25px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-days</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">900</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--anzhiyu-main);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-date</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">1</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--efu-secondtext);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="引入"><a href="#引入" class="headerlink" title="引入"></a>引入</h1><p>新增+号后面内容</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line"> <span class="attr">head:</span></span><br><span class="line"> <span class="comment"># 自定义css</span></span><br><span class="line"><span class="string">+</span> <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/css/calendar.css&quot;&gt;</span></span><br><span class="line"></span><br><span class="line"> <span class="attr">bottom:</span></span><br><span class="line"> <span class="comment"># 自定义js</span></span><br><span class="line"><span class="string">+</span> <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;/js/calendar.js&quot;&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">+</span> <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;https://unpkg.com/chinese-lunar@0.1.4/lib/chinese-lunar.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure><p>在 <code>blogroot/source/_data</code> 文件夹下创建 <code>widget.yml</code> 文件，并添加以下内容：</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></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">calendar</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">card-widget-calendar</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 class="number">-1</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;calendar-area-left&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;calendar-week&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;calendar-date&quot; style=&quot;font-size: 48px;&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;calendar-solar&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;calendar-lunar&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;calendar-area-right&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;calendar-main&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">class_name:</span> <span class="string">schedule</span></span><br><span class="line"> <span class="attr">id_name:</span> <span class="string">card-widget-schedule</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 class="number">-1</span></span><br><span class="line"> <span class="attr">html:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;schedule-area-left&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;schedule-title&quot;&gt;距离除夕&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;schedule-days&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;schedule-date&quot;&gt;2025-01-28&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div id=&quot;schedule-area-right&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;schedule-r0&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;schedule-d0&quot;&gt;本年&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;schedule-d1&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;span id=&quot;p_span_year&quot; class=&quot;aside-span1&quot;&gt;&lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;span class=&quot;aside-span2&quot;&gt;还剩&lt;a&gt;&lt;/a&gt;天&lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;progress max=&quot;365&quot; id=&quot;pBar_year&quot;&gt;&lt;/progress&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;schedule-r1&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;schedule-d0&quot;&gt;本月&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;schedule-d1&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;span id=&quot;p_span_month&quot; class=&quot;aside-span1&quot;&gt;&lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;span class=&quot;aside-span2&quot;&gt;还剩&lt;a&gt;&lt;/a&gt;天&lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;progress max=&quot;30&quot; id=&quot;pBar_month&quot;&gt;&lt;/progress&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;schedule-r2&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;schedule-d0&quot;&gt;本周&lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;div class=&quot;schedule-d1&quot;&gt;</span></span><br><span class="line"><span class="string"> &lt;span id=&quot;p_span_week&quot; class=&quot;aside-span1&quot;&gt;&lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;span class=&quot;aside-span2&quot;&gt;还剩&lt;a&gt;&lt;/a&gt;天&lt;/span&gt;</span></span><br><span class="line"><span class="string"> &lt;progress max=&quot;7&quot; id=&quot;pBar_week&quot;&gt;&lt;/progress&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br><span class="line"><span class="string"> &lt;/div&gt;</span></span><br></pre></td></tr></table></figure><h1 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h1><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://blog.lohas.fun/hc/jc005/"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">乐活星球</div> <div class="tag-link-sitename">lohas</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div>]]></content>
<summary type="html">&lt;p&gt;突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）&lt;br&gt;效果图：&lt;/p&gt;
&lt;center&gt;&lt;img src=&quot;https://pic.biss.click/image/b9819d72-3496-4204-9b7d-07d82e2e2f1b.webp&quot;</summary>
<category term="建站手札" scheme="https://blog.biss.click/categories/website/"/>
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
</entry>
<entry>
<title>和朋友们的故事</title>
<link href="https://blog.biss.click/posts/a31d95d9/"/>
<id>https://blog.biss.click/posts/a31d95d9/</id>
<published>2026-01-05T05:14:16.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>最近一直忙于学习（<del>虽然也没怎么好好学</del>），所以一直忘了网站的更新；现在闲下来了，又不知道该写点什么；就写写我和朋友们的故事吧。<br>因为一次偶然的突发奇想，解锁了挂号信这种奇奇怪怪的通信方式，虽然现在网络发达，但感觉这种方式有一种独特的魅力。所以从去年开始就断断续续地给朋友们写信，这是一些挂号信收据：</p><center><img src="https://pic.biss.click/i/2026/01/05/y08m0d.jpg" alt="一些挂号信收据" /></center>这应该是去年上半年的一张图片，下半年也在零散的发，只不过下半年比较忙，没发多少。到年底的时候呢又想着写一点贺年信，当然感觉自己的水平下降，写不出什么好的文章。于是开始着手准备电子版贺卡，当然完全使用了AI工具，自己写太麻烦，也没什么精力去写，于是就有了下面的电子贺卡：<center><img src="https://pic.biss.click/i/2026/01/05/ys91t1.png" alt="电子贺卡" /></center>之后呢，又写了其他一些有趣的功能，但好像不是这篇文章的重点；再写信和创作电子贺卡是感慨万分，进入大学之后时间似乎变得十分快，感觉除了几个天天联系的好友之外，其他人都慢慢疏远了，不过这也是必然的事情，也没什么可悲伤的，只是感慨罢了。怎么说，就这样吧，下次有时间再在这篇文章里更新。]]></content>
<summary type="html">&lt;p&gt;最近一直忙于学习（&lt;del&gt;虽然也没怎么好好学&lt;/del&gt;），所以一直忘了网站的更新；现在闲下来了，又不知道该写点什么；就写写我和朋友们的故事吧。&lt;br&gt;因为一次偶然的突发奇想，解锁了挂号信这种奇奇怪怪的通信方式，虽然现在网络发达，但感觉这种方式有一种独特的魅力。所以从去年</summary>
<category term="杂谈" scheme="https://blog.biss.click/categories/miscellaneous/"/>
<category term="生活" scheme="https://blog.biss.click/tags/life/"/>
</entry>
<entry>
<title>Adguard和Openclash共存</title>
<link href="https://blog.biss.click/posts/66e66374/"/>
<id>https://blog.biss.click/posts/66e66374/</id>
<published>2025-10-05T07:18:00.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>在之前已经安装了<code>Openwrt</code>系统，并且也配置了<code>OpenClash</code>和<code>AdguardHome</code>，两者的原理简单看都是劫持<code>DNS</code>，所以两者要同时运行，必须经过一定的配置。<br>无非就这两种方式:</p><center><img src="https://pic.biss.click/i/2025/10/05/qyl83t.png" alt="image" /></center><p>左边的方式更简单一些，只需要修改<code>AdguardHome</code>的上游DNS服务器为<code>127.0.0.1:7874</code> 即可；<br>右边的方式需要将<code>OpenClash</code>里的<code>DNS</code>指向<code>AdguardHome</code>，但是可能有拦截失败的情况(好像没有遇到过)。</p>]]></content>
<summary type="html">&lt;p&gt;在之前已经安装了&lt;code&gt;Openwrt&lt;/code&gt;系统，并且也配置了&lt;code&gt;OpenClash&lt;/code&gt;和&lt;code&gt;AdguardHome&lt;/code&gt;，两者的原理简单看都是劫持&lt;code&gt;DNS&lt;/code&gt;，所以两者要同时运行，必须经过一定的配置。&lt;br</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="Openwrt" scheme="https://blog.biss.click/tags/Openwrt/"/>
<category term="AdguardHome" scheme="https://blog.biss.click/tags/AdguardHome/"/>
<category term="Openclash" scheme="https://blog.biss.click/tags/Openclash/"/>
</entry>
<entry>
<title>Adguard规则分享</title>
<link href="https://blog.biss.click/posts/69b16001/"/>
<id>https://blog.biss.click/posts/69b16001/</id>
<published>2025-10-05T04:18:00.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>众所周知，<code>Adguardhome</code>是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则：</p><ol><li>一个综合的过滤规则 <div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/217heidai/adblockfilters"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/ed410d4e-d3f8-4b26-8840-50dd58f7dc4e.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">adblockfilters</div> <div class="tag-link-sitename">adblockfilters</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div></li><li>广告过滤规则订阅中心 <div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://adguardfilters-chinese.pages.dev/"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">广告过滤规则订阅中心</div> <div class="tag-link-sitename">广告过滤规则订阅中心</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div> 集成了许多规则，可以挑选一下加入。</li></ol><center><img src="https://pic.biss.click/i/2025/10/05/lndn18.png" alt="image" /></center>这是我添加的规则，在这些规则下，用Adblocktester可以达到74分，基本够用<center><img src="https://pic.biss.click/i/2025/10/05/lqfc7z.png" alt="image" /></center>]]></content>
<summary type="html">&lt;p&gt;众所周知，&lt;code&gt;Adguardhome&lt;/code&gt;是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;一个综合的过滤规则 &lt;div class=&#39;liushen-tag-link&#39;&gt;&lt;a</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="Openwrt" scheme="https://blog.biss.click/tags/Openwrt/"/>
<category term="AdguardHome" scheme="https://blog.biss.click/tags/AdguardHome/"/>
</entry>
<entry>
<title>在Openwrt上安装AdguardHome</title>
<link href="https://blog.biss.click/posts/b57500e9/"/>
<id>https://blog.biss.click/posts/b57500e9/</id>
<published>2025-09-28T09:10:18.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>接续前言，<code>AdguardHome</code>是一款广告拦截软件，有了一台小软路由后就开始折腾了。</p><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><p>首先要下载软件包，但是经过尝试，软件源里面的<code>luci-app-adguardhome</code>不太好用<del>（也可能是我不会用）</del> ，所以我用的下面的包：</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/rufengsuixing/luci-app-adguardhome"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/ed410d4e-d3f8-4b26-8840-50dd58f7dc4e.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">luci-app-adguardhome</div> <div class="tag-link-sitename">rufengsuixing</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>虽然好几年没更新了，但还是能用。下载之后上传到路由器，使用<code>opkg install</code>命令安装，或者可以直接通过网页安装：</p><center><img src="https://pic.biss.click/i/2025/10/05/rek0qq.png" alt="image" /></center><h1 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h1><p>如下图所示进行操作，如果更新核心版本失败，考虑更换<code>升级用的下载链接</code>，使用镜像源，或者科学上网，错号框内的非必要不修改；</p><center><img src="https://pic.biss.click/i/2025/10/05/s46k8g.png" alt="Screenshot of the AdGuard Home configuration page in the OpenWrt web interface. The left sidebar menu is expanded to highlight the Services section and AdGuard Home submenu. The main panel displays configuration options including enable checkbox, web management port, update core version button, executable file path, compressed file option, configuration file path, working directory, and log file path. A large red X marks the configuration file path field, indicating it should not be modified. Visible text includes AdGuard Home, OpenClash, miniDLNA, UPnP IGD and PCP, enable, update core version, executable file path, configuration file path, working directory, log file path, and other related options. The interface is clean and instructional, with a neutral tone." /></center><p>最后点击“保存并应用”，然后点击<code>AdGuardHome Web:3000</code>，进行安装，建议关闭路由器自带DNS&#x2F;DHCP服务器，<code>AdguardHome</code>直接替代</p><center><img src="https://pic.biss.click/i/2025/10/05/s8livw.png" alt="Screenshot of the OpenWrt web interface showing the DHCP/DNS settings page. The left sidebar menu is expanded to highlight the network section and DHCP/DNS submenu. The main panel displays the General tab with options for enabling exclusive authorization and DNS redirect, both with checkboxes. The interface is clean and organized, with navigation tabs for additional settings such as DNS records, filters, logs, and PXE/TFTP. The overall tone is neutral and instructional. Visible text includes DHCP/DNS, 常规, 唯一授权, DNS redirect, 本地解析这些项目, 本地域名, and other configuration options." /></center><center><img src="https://pic.biss.click/i/2025/10/05/sa99dn.png" alt="alt=Screenshot of the OpenWrt web interface focused on DHCP/DNS settings. The left sidebar menu highlights the network section and DHCP/DNS submenu. Red arrows guide the user through selecting DHCP/DNS, then the settings and port tab, and finally entering 5353 in the DNS server port field. The main panel displays options for specifying interface addresses, listening interfaces, excluded interfaces, and DNS server port. Visible text includes DHCP/DNS, 设置及端口, 5353, 监听接口, 排除接口, DNS服务器端口, DNS查询端口, and related configuration options. The interface is clean and instructional, with a neutral and helpful tone." /></center><p>然后，设置AdguardHome的DHCP服务器，注意要先检查配置，再启用</p><center><img src="https://pic.biss.click/i/2025/10/05/scj0h4.png" alt="image" /></center>]]></content>
<summary type="html">&lt;p&gt;接续前言，&lt;code&gt;AdguardHome&lt;/code&gt;是一款广告拦截软件，有了一台小软路由后就开始折腾了。&lt;/p&gt;
&lt;h1 id=&quot;安装&quot;&gt;&lt;a href=&quot;#安装&quot; class=&quot;headerlink&quot;</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="Openwrt" scheme="https://blog.biss.click/tags/Openwrt/"/>
<category term="AdguardHome" scheme="https://blog.biss.click/tags/AdguardHome/"/>
</entry>
<entry>
<title>在Openwrt中安装OpenClash</title>
<link href="https://blog.biss.click/posts/2b2fb1a7/"/>
<id>https://blog.biss.click/posts/2b2fb1a7/</id>
<published>2025-09-02T13:00:00.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。</p><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><p>可以通过web管理页面安装，搜索openclash。</p><center><img src="https://pic.biss.click/i/2025/09/02/z5y0d1.png" alt="image" /></center><p>当然也可以在终端中执行命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">opkg update</span><br><span class="line">opkg install bash iptables dnsmasq-full curl ca-bundle ipset ip-full iptables-mod-tproxy iptables-mod-extra ruby ruby-yaml kmod-tun kmod-inet-diag unzip luci-compat luci luci-base</span><br><span class="line">opkg install luci-app-openclash</span><br></pre></td></tr></table></figure><h1 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h1><p>首先需要下载内核，推荐启用Smart内核。</p><center><img src="https://pic.biss.click/i/2025/09/02/zcllg4.png" alt="image" /></center><p>然后导入配置：</p><center><img src="https://pic.biss.click/i/2025/09/02/zdut38.png" alt="image" /></center><p>然后就可以开心使用啦！<br>感觉zashboard简洁好看一些，看自己感觉啦</p><center><img src="https://pic.biss.click/i/2025/09/02/zfix7i.png" alt="image" /></center>]]></content>
<summary type="html">&lt;h1 id=&quot;前言&quot;&gt;&lt;a href=&quot;#前言&quot; class=&quot;headerlink&quot; title=&quot;前言&quot;&gt;&lt;/a&gt;前言&lt;/h1&gt;&lt;p&gt;因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。&lt;/p&gt;
&lt;h1</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="Openwrt" scheme="https://blog.biss.click/tags/Openwrt/"/>
<category term="Openclash" scheme="https://blog.biss.click/tags/Openclash/"/>
</entry>
<entry>
<title>Cudy TR3000刷入Openwrt系统</title>
<link href="https://blog.biss.click/posts/8802e397/"/>
<id>https://blog.biss.click/posts/8802e397/</id>
<published>2025-08-31T12:15:00.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>最近搞到了一台<code>Cudy-TR3000</code>路由器，用来进行科学上网（小猫咪），先记录一下刷写<code>Openwrt</code>系统的过程。</p><h1 id="下载固件"><a href="#下载固件" class="headerlink" title="下载固件"></a>下载固件</h1><ol><li>中间固件<br>中间固件可以在<code>Cudy</code>官方网站上下载</li></ol><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://www.cudy.com/zh-cn/pages/download-center/tr3000-1-0"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">Cudy固件下载</div> <div class="tag-link-sitename">Cudy</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><center><img src="https://pic.biss.click/i/2025/08/31/xjk7op.png" alt="image" /></center>2. Openwrt固件在下面的网站中下载，下载最新的就行<div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://openwrt.ai/?target=mediatek%2Ffilogic&id=cudy_tr3000-256mb-v1"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">Openwrt固件</div> <div class="tag-link-sitename">Openwrt.ai</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><h1 id="刷写固件"><a href="#刷写固件" class="headerlink" title="刷写固件"></a>刷写固件</h1><p>访问<code>192.168.10.1</code>先刷入中间固件</p><center><img src="https://pic.biss.click/i/2025/08/31/xl9zvk.png" alt="image" /></center><p>然后访问<code>192.168.1.1</code>，刷入<code>Openwrt</code>插件</p><center><img src="https://pic.biss.click/i/2025/08/31/xnr3bb.png" alt="image" /></center><p>然后访问<code>10.0.0.1</code>，就可以看到openwrt登录页面了,默认密码是<code>root</code>。</p><center><img src="https://pic.biss.click/i/2025/08/31/xp14em.png" alt="image" /></center>]]></content>
<summary type="html">&lt;p&gt;最近搞到了一台&lt;code&gt;Cudy-TR3000&lt;/code&gt;路由器，用来进行科学上网（小猫咪），先记录一下刷写&lt;code&gt;Openwrt&lt;/code&gt;系统的过程。&lt;/p&gt;
&lt;h1 id=&quot;下载固件&quot;&gt;&lt;a href=&quot;#下载固件&quot; class=&quot;headerlink&quot;</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="Cudy-TR3000" scheme="https://blog.biss.click/tags/Cudy-TR3000/"/>
</entry>
<entry>
<title>搭建Owncloud并集成Onlyoffice</title>
<link href="https://blog.biss.click/posts/59c8572a/"/>
<id>https://blog.biss.click/posts/59c8572a/</id>
<published>2025-08-26T06:27:00.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<h1 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h1><p>因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。</p><h1 id="安装网盘"><a href="#安装网盘" class="headerlink" title="安装网盘"></a>安装网盘</h1><h2 id="建站"><a href="#建站" class="headerlink" title="建站"></a>建站</h2><p>在官网下载最新的安装包</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://owncloud.com/"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">Owncloud</div> <div class="tag-link-sitename">Owncloud</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>因为使用1panel，所以搭网站很简单，选择<code>php7.3</code>运行环境，添加必要的<code>php</code>扩展，新建一个<code>Mysql</code>数据库，按照正常步骤安装就行了。</p><h2 id="调优"><a href="#调优" class="headerlink" title="调优"></a>调优</h2><ol><li>配置Redis缓存<br> 在1panel安装Redis，<br>在config&#x2F;config.php中添加</li></ol><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&#x27;filelocking.enabled&#x27;</span> =&gt; <span class="literal">true</span>,</span><br><span class="line"><span class="string">&#x27;memcache.local&#x27;</span> =&gt; <span class="string">&#x27;\OC\Memcache\Redis&#x27;</span>,</span><br><span class="line"><span class="string">&#x27;memcache.locking&#x27;</span> =&gt; <span class="string">&#x27;\OC\Memcache\Redis&#x27;</span>,</span><br><span class="line"><span class="string">&#x27;redis&#x27;</span> =&gt; [</span><br><span class="line"> <span class="string">&#x27;host&#x27;</span> =&gt; <span class="string">&#x27;容器名&#x27;</span>, <span class="comment">// For a Unix domain socket, use &#x27;/var/run/redis/redis.sock&#x27;</span></span><br><span class="line"> <span class="string">&#x27;port&#x27;</span> =&gt; <span class="number">6379</span>, <span class="comment">// Set to 0 when using a Unix socket</span></span><br><span class="line"> <span class="string">&#x27;timeout&#x27;</span> =&gt; <span class="number">0</span>, <span class="comment">// Optional, keep connection open forever</span></span><br><span class="line"> <span class="string">&#x27;password&#x27;</span> =&gt; <span class="string">&#x27;password&#x27;</span>, <span class="comment">// Optional, if not defined no password will be used.</span></span><br><span class="line"> <span class="string">&#x27;dbindex&#x27;</span> =&gt; <span class="number">0</span>, <span class="comment">// Optional, if undefined SELECT will not run and will</span></span><br><span class="line"> <span class="comment">// use Redis Server&#x27;s default DB Index.</span></span><br><span class="line">],</span><br></pre></td></tr></table></figure><ol start="2"><li>添加Cron任务<br>首先在Owncloud的配置页面把计划任务调整为<code>Cron</code>。<br>在1panel的计划任务中添加，容器选择<code>php7.3</code>的容器，用户必须为<code>www-data</code>，时间为每15分钟。</li></ol><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">php sites/cloud.biss.click/index/occ system:cron</span><br></pre></td></tr></table></figure><h1 id="集成Onlyoffice"><a href="#集成Onlyoffice" class="headerlink" title="集成Onlyoffice"></a>集成Onlyoffice</h1><p>在1panel应用商店直接安装Onlyoffice，并反向代理到自己的域名<br>在Owncloud中搜索Onlyoffice插件，然后填写自己的域名、密钥（在参数中可以查到）</p>]]></content>
<summary type="html">&lt;h1 id=&quot;引言&quot;&gt;&lt;a href=&quot;#引言&quot; class=&quot;headerlink&quot; title=&quot;引言&quot;&gt;&lt;/a&gt;引言&lt;/h1&gt;&lt;p&gt;因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。&lt;/p&gt;
&lt;h1</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
</entry>
<entry>
<title>为博客添加CMS系统</title>
<link href="https://blog.biss.click/posts/3a26a97a/"/>
<id>https://blog.biss.click/posts/3a26a97a/</id>
<published>2025-08-25T14:03:00.000Z</published>
<updated>2025-08-26T00:01:00.000Z</updated>
<content type="html"><![CDATA[<h1 id="序言"><a href="#序言" class="headerlink" title="序言"></a>序言</h1><p>因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/sveltia/sveltia-cms"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/ed410d4e-d3f8-4b26-8840-50dd58f7dc4e.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">sveltia-cms</div> <div class="tag-link-sitename">sveltia</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><h2 id="安装包"><a href="#安装包" class="headerlink" title="安装包"></a>安装包</h2><p>在博客根目录下运行<code>npm i @sveltia/cms</code></p><h2 id="创建必要文件"><a href="#创建必要文件" class="headerlink" title="创建必要文件"></a>创建必要文件</h2><p>然后在博客<code>source</code>目录下创建<code>admin</code>目录<br>并在其下新建<code>index.html</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!doctype <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span> /&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;robots&quot;</span> <span class="attr">content</span>=<span class="string">&quot;noindex&quot;</span> /&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">title</span>&gt;</span>博客管理<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><p>新建<code>config.yml</code></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment"># https://decapcms.org/docs/configuration-options/</span></span><br><span class="line"><span class="attr">backend:</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">github</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="comment">#博客存储库</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="comment">#分支</span></span><br><span class="line"> <span class="attr">auth_type:</span> </span><br><span class="line"> <span class="attr">app_id:</span> </span><br><span class="line"><span class="attr">media_folder:</span> <span class="string">&quot;folder&quot;</span></span><br><span class="line"><span class="attr">public_folder:</span> <span class="string">&quot;folder&quot;</span></span><br><span class="line"><span class="attr">site_url:</span> <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">logo_url:</span> <span class="string">&quot;&quot;</span></span><br><span class="line"><span class="attr">locale:</span> <span class="string">&quot;zh_Hans&quot;</span></span><br><span class="line"><span class="attr">common_col_conf:</span> <span class="meta">&amp;common_col_conf</span></span><br><span class="line"> <span class="attr">create:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">slug:</span> <span class="string">&quot;<span class="template-variable">&#123;&#123;fields.filename&#125;&#125;</span>&quot;</span></span><br><span class="line"> <span class="attr">sortable_fields:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;commit_date&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;title&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;date&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;updated&quot;</span></span><br><span class="line"> <span class="comment"># https://decapcms.org/docs/widgets/</span></span><br><span class="line"> <span class="attr">fields:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;文件名&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;filename&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;string&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;标题&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;title&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;string&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;发表日期&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;date&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;datetime&quot;</span></span><br><span class="line"> <span class="attr">format:</span> <span class="string">&quot;YYYY-MM-DD HH:mm:ss&quot;</span></span><br><span class="line"> <span class="attr">date_format:</span> <span class="string">&quot;YYYY-MM-DD&quot;</span></span><br><span class="line"> <span class="attr">time_format:</span> <span class="string">&quot;HH:mm:ss&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;更新日期&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;updated&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;datetime&quot;</span></span><br><span class="line"> <span class="attr">format:</span> <span class="string">&quot;YYYY-MM-DD HH:mm:ss&quot;</span></span><br><span class="line"> <span class="attr">date_format:</span> <span class="string">&quot;YYYY-MM-DD&quot;</span></span><br><span class="line"> <span class="attr">time_format:</span> <span class="string">&quot;HH:mm:ss&quot;</span></span><br><span class="line"> <span class="attr">required:</span> <span class="literal">false</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;封面&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;cover&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;image&quot;</span></span><br><span class="line"> <span class="attr">required:</span> <span class="literal">false</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;标签&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;tags&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;select&quot;</span></span><br><span class="line"> <span class="attr">multiple:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">required:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">options:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;amazon&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;android&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;angularjs&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;azure&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;cdn&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;chartjs&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;chrome&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;csharp&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;css&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;devops&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;diary&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;docker&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;edge&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;git&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;github&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;hexo&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;html&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;icarus&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;java&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;js&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;life&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;material&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;mysql&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;nodejs&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;onedrive&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;oneindex&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;php&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;restapi&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;security&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;serverless&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;shadowdefender&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;tool&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;twikoo&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;ubuntu&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;vagrant&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;vb&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;vite&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;vue&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;webpack&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;windows&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;xlsx&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;小程序&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;分类&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;categories&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;select&quot;</span></span><br><span class="line"> <span class="attr">multiple:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">required:</span> <span class="literal">false</span></span><br><span class="line"> <span class="attr">options:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;Diary&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;Tool&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;Tech&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;FrontEnd&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;BackEnd&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;Windows&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;Android&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;Linux&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">&quot;Serverless&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;正文&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;body&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;markdown&quot;</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;原创&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;toc&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;boolean&quot;</span></span><br><span class="line"> <span class="attr">default:</span> <span class="literal">true</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">&quot;评论&quot;</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">&quot;comments&quot;</span></span><br><span class="line"> <span class="attr">widget:</span> <span class="string">&quot;boolean&quot;</span></span><br><span class="line"> <span class="attr">default:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">collections:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&quot;2023&quot;</span></span><br><span class="line"> <span class="attr">label:</span> <span class="string">&quot;2023&quot;</span></span><br><span class="line"> <span class="attr">folder:</span> <span class="string">&quot;source/_posts/2023&quot;</span></span><br><span class="line"> <span class="attr">preview_path:</span> <span class="string">&quot;2023/<span class="template-variable">&#123;&#123;filename&#125;&#125;</span>/&quot;</span></span><br><span class="line"> <span class="string">&lt;&lt;:</span> <span class="meta">*common_col_conf</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&quot;pages&quot;</span></span><br><span class="line"> <span class="attr">label:</span> <span class="string">&quot;Pages&quot;</span></span><br><span class="line"> <span class="attr">files:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&quot;friends&quot;</span></span><br><span class="line"> <span class="attr">label:</span> <span class="string">&quot;友链&quot;</span></span><br><span class="line"> <span class="attr">file:</span> <span class="string">&quot;source/friends/index.md&quot;</span></span><br><span class="line"> <span class="attr">preview_path:</span> <span class="string">&quot;friends/&quot;</span></span><br><span class="line"> <span class="string">&lt;&lt;:</span> <span class="meta">*common_col_conf</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">&quot;about&quot;</span></span><br><span class="line"> <span class="attr">label:</span> <span class="string">&quot;关于&quot;</span></span><br><span class="line"> <span class="attr">file:</span> <span class="string">&quot;source/about/index.md&quot;</span></span><br><span class="line"> <span class="attr">preview_path:</span> <span class="string">&quot;about/&quot;</span></span><br><span class="line"> <span class="string">&lt;&lt;:</span> <span class="meta">*common_col_conf</span></span><br></pre></td></tr></table></figure><p>需要自己修改一些配置；<br>一般到这一步就可以了，但是因为我使用自己的服务器，没办法用官方的auth系统，所以还要进一步配置。</p><h2 id="创建auth系统、授权"><a href="#创建auth系统、授权" class="headerlink" title="创建auth系统、授权"></a>创建auth系统、授权</h2><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/sveltia/sveltia-cms-auth"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/ed410d4e-d3f8-4b26-8840-50dd58f7dc4e.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">Sveltia CMS Authenticator</div> <div class="tag-link-sitename">Sveltia CMS Authenticator</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>比较简单，直接Cloudflare一键部署就可以<br>然后要在github新建一个oauth应用，就不写了，可以自己查找。<br>然后在cloudflare新建环境变量：<br><code>GITHUB_CLIENT_ID</code>:<br><code>GITHUB_CLIENT_SECRET</code>:<br>然后在<code>config.yml</code>添加</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">backend:</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">github</span> <span class="comment"># or gitlab</span></span><br><span class="line"> <span class="attr">repo:</span> <span class="string">username/repo</span></span><br><span class="line"> <span class="attr">branch:</span> <span class="string">main</span></span><br><span class="line"> <span class="attr">base_url:</span> <span class="string">&lt;YOUR_WORKER_URL&gt;</span></span><br></pre></td></tr></table></figure><h1 id="大功告成"><a href="#大功告成" class="headerlink" title="大功告成"></a>大功告成</h1><p>访问博客的admin就可以了</p>]]></content>
<summary type="html">&lt;h1 id=&quot;序言&quot;&gt;&lt;a href=&quot;#序言&quot; class=&quot;headerlink&quot;</summary>
<category term="建站手札" scheme="https://blog.biss.click/categories/website/"/>
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
</entry>
<entry>
<title>为1Panel添加自己想要的应用</title>
<link href="https://blog.biss.click/posts/bb18d851/"/>
<id>https://blog.biss.click/posts/bb18d851/</id>
<published>2025-08-19T02:43:16.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>记录一下自己为1Panel贡献自己应用的经历</p><h1 id="预准备"><a href="#预准备" class="headerlink" title="预准备"></a>预准备</h1><ol><li>Fork仓库 <div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/1Panel-dev/appstore"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/ed410d4e-d3f8-4b26-8840-50dd58f7dc4e.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">1Panel appstore 仓库</div> <div class="tag-link-sitename">1panel appstore</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div> 把仓库fork到自己的仓库</li><li>pull <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> -b dev https://&lt;your-github-username&gt;/appstore</span><br></pre></td></tr></table></figure> 创建新分支 <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> appstore</span><br><span class="line">git checkout -b app/&lt;app-name&gt;</span><br></pre></td></tr></table></figure></li></ol><h1 id="创建文件"><a href="#创建文件" class="headerlink" title="创建文件"></a>创建文件</h1><h2 id="文件目录"><a href="#文件目录" class="headerlink" title="文件目录"></a>文件目录</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">├──halo // 以 halo 的 key 命名 ，下面解释什么是 key </span><br><span class="line">├── logo.png // 应用 logo , 最好是 180 * 180 px 不要超过 10 KB </span><br><span class="line">├── data.yml // 应用声明文件</span><br><span class="line">├── README.md // 应用的 README</span><br><span class="line">├── 2.2.0 // 应用版本 注意不要以 v 开头</span><br><span class="line">│   ├── data.yml // 应用的参数配置，下面有详细介绍</span><br><span class="line">│   ├── data // 挂载出来的目录 </span><br><span class="line">| ├── scripts // 脚本目录 存放 init.sh upgrade.sh uninstall.sh</span><br><span class="line">│   └── docker-compose.yml // docker-compose 文件</span><br><span class="line">└── 2.3.2</span><br><span class="line"> ├── data.yml</span><br><span class="line"> ├── data</span><br><span class="line"> └── docker-compose.yml</span><br></pre></td></tr></table></figure><h2 id="应用声明文件data-yml"><a href="#应用声明文件data-yml" class="headerlink" title="应用声明文件data.yml"></a>应用声明文件<code>data.yml</code></h2><p>本文件主要用于声明应用的一些信息</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">additionalProperties:</span> <span class="comment">#固定参数</span></span><br><span class="line"> <span class="attr">key:</span> <span class="string">halo</span> <span class="comment">#应用的 key ，仅限英文，用于在 Linux 创建文件夹</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">Halo</span> <span class="comment">#应用名称</span></span><br><span class="line"> <span class="attr">tags:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">WebSite</span> <span class="comment">#应用标签，可以有多个，请参照下方的标签列表 </span></span><br><span class="line"><span class="attr">description:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">Powerful</span> <span class="string">and</span> <span class="string">easy-to-use</span> <span class="string">open</span> <span class="string">source</span> <span class="string">website</span> <span class="string">builder</span></span><br><span class="line"> <span class="attr">zh:</span> <span class="string">强大易用的开源建站工具</span> <span class="comment">#应用中文描述，不要超过30个字</span></span><br><span class="line"> <span class="attr">zh-Hant:</span></span><br><span class="line"> <span class="attr">ja:</span> </span><br><span class="line"> <span class="attr">ms:</span> </span><br><span class="line"> <span class="attr">pt-br:</span> </span><br><span class="line"> <span class="attr">ru:</span> </span><br><span class="line"> <span class="attr">ko:</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">website</span> <span class="comment">#应用类型，区别于应用分类，只能有一个，请参照下方的类型列表</span></span><br><span class="line"> <span class="attr">crossVersionUpdate:</span> <span class="literal">true</span> <span class="comment">#是否可以跨大版本升级</span></span><br><span class="line"> <span class="attr">limit:</span> <span class="number">0</span> <span class="comment">#应用安装数量限制，0 代表无限制</span></span><br><span class="line"> <span class="attr">website:</span> <span class="string">https://halo.run/</span> <span class="comment">#官网地址</span></span><br><span class="line"> <span class="attr">github:</span> <span class="string">https://github.com/halo-dev/halo</span> <span class="comment">#github 地址 </span></span><br><span class="line"> <span class="attr">document:</span> <span class="string">https://docs.halo.run/</span> <span class="comment">#文档地址</span></span><br></pre></td></tr></table></figure><h2 id="应用标签-tags-字段"><a href="#应用标签-tags-字段" class="headerlink" title="应用标签 - tags 字段"></a>应用标签 - tags 字段</h2><table><thead><tr><th>key</th><th>name</th></tr></thead><tbody><tr><td>WebSite</td><td>建站</td></tr><tr><td>Server</td><td>Web 服务器</td></tr><tr><td>Runtime</td><td>运行环境</td></tr><tr><td>Database</td><td>数据库</td></tr><tr><td>Tool</td><td>工具</td></tr><tr><td>CI&#x2F;CD</td><td>CI&#x2F;CD</td></tr><tr><td>Local</td><td>本地</td></tr></tbody></table><h1 id="应用类型-type-字段"><a href="#应用类型-type-字段" class="headerlink" title="应用类型 - type 字段"></a>应用类型 - type 字段</h1><table><thead><tr><th>type</th><th>说明</th></tr></thead><tbody><tr><td>website</td><td>website 类型在 1Panel 中支持在网站中一键部署,wordpress halo 都是此 type</td></tr><tr><td>runtime</td><td>mysql openresty redis 等类型的应用</td></tr><tr><td>tool</td><td>phpMyAdmin redis-commander jenkins 等类型的应用</td></tr></tbody></table><h1 id="应用参数配置文件-data-yml"><a href="#应用参数配置文件-data-yml" class="headerlink" title="应用参数配置文件 data.yml"></a>应用参数配置文件 data.yml</h1><p>（注意区分于应用主目录下面的 <code>data.yaml</code>）</p><p>本文件主要用于生成安装时要填写的 form 表单，在应用版本文件夹下面 可以无表单，但是需要有这个 data.yml文件，并且包含 formFields 字段</p><p>以安装 halo 时的 form 表单 为例</p><p>如果要生成上面的表单，需要这么填写 <code>data.yml</code></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">additionalProperties:</span> <span class="comment">#固定参数</span></span><br><span class="line"> <span class="attr">formFields:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">default:</span> <span class="string">&quot;&quot;</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">PANEL_DB_HOST</span> <span class="comment">#docker-compose 文件中的参数</span></span><br><span class="line"> <span class="attr">key:</span> <span class="string">mysql</span> <span class="comment">#依赖应用的 key , 例如 mysql</span></span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">Database</span> <span class="string">Service</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">データベースサービス</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">Perkhidmatan</span> <span class="string">Pangkalan</span> <span class="string">Data</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">Serviço</span> <span class="string">de</span> <span class="string">Banco</span> <span class="string">de</span> <span class="string">Dados</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">Сервис</span> <span class="string">базы</span> <span class="string">данных</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">데이터베이스</span> <span class="string">서비스</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">数据库服务</span> </span><br><span class="line"> <span class="attr">zh-Hant:</span> <span class="string">數據庫</span> <span class="string">服務</span></span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> <span class="comment">#是否必填</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">service</span> <span class="comment">#如果需要依赖其他应用，例如数据库，使用此 type </span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">default:</span> <span class="string">halo</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">PANEL_DB_NAME</span> </span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">Database</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">データベース</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">Pangkalan</span> <span class="string">Data</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">Banco</span> <span class="string">de</span> <span class="string">Dados</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">База</span> <span class="string">данных</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">데이터베이스</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">数据库名</span> </span><br><span class="line"> <span class="attr">zh-Hant:</span> <span class="string">資料庫名稱</span></span><br><span class="line"> <span class="attr">random:</span> <span class="literal">true</span> <span class="comment">#是否在 default 文字后面，增加随机字符串</span></span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">rule:</span> <span class="string">paramCommon</span> <span class="comment">#校验规则</span></span><br><span class="line"> <span class="attr">type:</span> <span class="string">text</span> <span class="comment">#需要手动填写的，使用此 type</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">default:</span> <span class="string">halo</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">PANEL_DB_USER</span> </span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">User</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">ユーザー</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">Pengguna</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">Usuário</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">Пользователь</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">사용자</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">数据库用户</span> </span><br><span class="line"> <span class="attr">zh-Hant:</span> <span class="string">資料庫使用者</span></span><br><span class="line"> <span class="attr">random:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">rule:</span> <span class="string">paramCommon</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">text</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">default:</span> <span class="string">halo</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">PANEL_DB_USER_PASSWORD</span> </span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">Password</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">パスワード</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">Kata</span> <span class="string">laluan</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">Senha</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">Пароль</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">비밀번호</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">数据库用户密码</span> </span><br><span class="line"> <span class="attr">zh-Hant:</span> <span class="string">資料庫使用者密碼</span> </span><br><span class="line"> <span class="attr">random:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">rule:</span> <span class="string">paramComplexity</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">password</span> <span class="comment">#密码字段使用此 type</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">default:</span> <span class="string">admin</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">HALO_ADMIN</span> </span><br><span class="line"> <span class="attr">labelEn:</span> <span class="string">Admin</span> <span class="string">Username</span> </span><br><span class="line"> <span class="attr">labelZh:</span> <span class="string">超级管理员用户名</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">rule:</span> <span class="string">paramCommon</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">text</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">default:</span> <span class="string">http://localhost:8080</span> </span><br><span class="line"> <span class="attr">edit:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">HALO_EXTERNAL_URL</span> </span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">External</span> <span class="string">URL</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">外部URL</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">URL</span> <span class="string">Luaran</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">URL</span> <span class="string">Externa</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">Внешний</span> <span class="string">URL</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">외부</span> <span class="string">URL</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">外部访问地址</span> </span><br><span class="line"> <span class="attr">zh-Hant:</span> <span class="string">外部訪問地址</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">rule:</span> <span class="string">paramExtUrl</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">text</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">default:</span> <span class="number">8080</span> </span><br><span class="line"> <span class="attr">edit:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">PANEL_APP_PORT_HTTP</span> </span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">Port</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">ポート</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">Port</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">Porta</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">Порт</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">포트</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">端口</span> </span><br><span class="line"> <span class="attr">zh-Hant:</span> <span class="string">埠</span></span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">rule:</span> <span class="string">paramPort</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">number</span> <span class="comment">#端口使用此 type </span></span><br></pre></td></tr></table></figure><h2 id="关于端口字段："><a href="#关于端口字段：" class="headerlink" title="关于端口字段："></a>关于端口字段：</h2><p><code>PANEL_APP_PORT_HTTP</code> 有 <code>web</code> 访问端口的优先使用此 <code>envKey</code><br><code>envKey</code> 中包含 <code>PANEL_APP_PORT</code> 前缀会被认定为端口类型，并且用于安装前的端口占用校验。注意：端口需要是外部端口</p><h2 id="关于-type-字段："><a href="#关于-type-字段：" class="headerlink" title="关于 type 字段："></a>关于 type 字段：</h2><table><thead><tr><th>type</th><th>说明</th></tr></thead><tbody><tr><td>service</td><td>type: service 如果该应用需要依赖其他组件，如 mysql redis 等，可以通过 key: mysql 定义依赖的名称，在创建应用时会要求先创建依赖的应用。</td></tr><tr><td>password</td><td>type: password 敏感信息，如密码相关的字段会默认不显示明文。</td></tr><tr><td>text</td><td>type: text 一般内容，比如数据库名称，默认明文显示。</td></tr><tr><td>number</td><td>type: number 一般用在端口相关的配置上，只允许输入数字。</td></tr></tbody></table><p>简单的例子</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># type: service，定义一个 mysql 的 service 依赖。</span></span><br><span class="line"><span class="bullet">-</span> <span class="attr">child:</span> </span><br><span class="line"> <span class="attr">default:</span> <span class="string">&quot;&quot;</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">PANEL_DB_HOST</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">service</span> </span><br><span class="line"> <span class="attr">default:</span> <span class="string">mysql</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">PANEL_DB_TYPE</span> </span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">Database</span> <span class="string">Service</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">データベースサービス</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">Perkhidmatan</span> <span class="string">Pangkalan</span> <span class="string">Data</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">Serviço</span> <span class="string">de</span> <span class="string">Banco</span> <span class="string">de</span> <span class="string">Dados</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">Сервис</span> <span class="string">баз</span> <span class="string">данных</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">데이터베이스</span> <span class="string">서비스</span> </span><br><span class="line"> <span class="attr">zh-hant:</span> <span class="string">資料庫服務</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">数据库服务</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">apps</span> </span><br><span class="line"> <span class="attr">values:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">MySQL</span> </span><br><span class="line"> <span class="attr">value:</span> <span class="string">mysql</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">MariaDB</span> </span><br><span class="line"> <span class="attr">value:</span> <span class="string">mariadb</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># type: password</span></span><br><span class="line"><span class="bullet">-</span> <span class="attr">default:</span> <span class="string">word</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">PANEL_DB_USER_PASSWORD</span> </span><br><span class="line"> <span class="attr">labelEn:</span> <span class="string">Database</span> <span class="string">Password</span> </span><br><span class="line"> <span class="attr">labelZh:</span> <span class="string">数据库密码</span> </span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">Database</span> <span class="string">Password</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">データベースのパスワード</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">Kata</span> <span class="string">Laluan</span> <span class="string">Pangkalan</span> <span class="string">Data</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">Senha</span> <span class="string">do</span> <span class="string">Banco</span> <span class="string">de</span> <span class="string">Dados</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">Пароль</span> <span class="string">базы</span> <span class="string">данных</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">데이터베이스</span> <span class="string">비밀번호</span> </span><br><span class="line"> <span class="attr">zh-hant:</span> <span class="string">資料庫密碼</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">数据库密码</span> </span><br><span class="line"> <span class="attr">random:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">password</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># type: text</span></span><br><span class="line"><span class="bullet">-</span> <span class="attr">default:</span> <span class="string">&quot;&quot;</span> </span><br><span class="line"> <span class="attr">edit:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">REDIS_HOST</span> </span><br><span class="line"> <span class="attr">key:</span> <span class="string">redis</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">service</span> </span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">Redis</span> <span class="string">Service</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">Redis</span> <span class="string">サービス</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">Perkhidmatan</span> <span class="string">Redis</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">Serviço</span> <span class="string">Redis</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">Сервис</span> <span class="string">Redis</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">Redis</span> <span class="string">서비스</span> </span><br><span class="line"> <span class="attr">zh-Hant:</span> <span class="string">Redis</span> <span class="string">服務</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">Redis</span> <span class="string">服务</span></span><br><span class="line"> </span><br><span class="line"><span class="comment"># type: number</span></span><br><span class="line"><span class="bullet">-</span> <span class="attr">default:</span> <span class="string">&quot;&quot;</span> </span><br><span class="line"> <span class="attr">edit:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">DBHUB_DB_PORT</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">text</span> </span><br><span class="line"> <span class="attr">label:</span> </span><br><span class="line"> <span class="attr">en:</span> <span class="string">Database</span> <span class="string">Port</span> </span><br><span class="line"> <span class="attr">ja:</span> <span class="string">データベースのポート</span> </span><br><span class="line"> <span class="attr">ms:</span> <span class="string">Pangkalan</span> <span class="string">Data</span> <span class="string">Port</span> </span><br><span class="line"> <span class="attr">pt-br:</span> <span class="string">Porta</span> <span class="string">do</span> <span class="string">Banco</span> <span class="string">de</span> <span class="string">Dados</span> </span><br><span class="line"> <span class="attr">ru:</span> <span class="string">Порт</span> <span class="string">базы</span> <span class="string">данных</span> </span><br><span class="line"> <span class="attr">ko:</span> <span class="string">데이터베이스</span> <span class="string">포트</span> </span><br><span class="line"> <span class="attr">zh-hant:</span> <span class="string">資料庫端口</span> </span><br><span class="line"> <span class="attr">zh:</span> <span class="string">数据库端口</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># type: select</span></span><br><span class="line"><span class="bullet">-</span> <span class="attr">default:</span> <span class="string">&quot;ERROR&quot;</span> </span><br><span class="line"> <span class="attr">envKey:</span> <span class="string">LOG_LEVEL</span> </span><br><span class="line"> <span class="attr">required:</span> <span class="literal">true</span> </span><br><span class="line"> <span class="attr">type:</span> <span class="string">select</span> </span><br><span class="line"> <span class="attr">values:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">DEBUG</span> </span><br><span class="line"> <span class="attr">value:</span> <span class="string">&quot;DEBUG&quot;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">INFO</span> </span><br><span class="line"> <span class="attr">value:</span> <span class="string">&quot;INFO&quot;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">WARNING</span> </span><br><span class="line"> <span class="attr">value:</span> <span class="string">&quot;WARNING&quot;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">ERROR</span> </span><br><span class="line"> <span class="attr">value:</span> <span class="string">&quot;ERROR&quot;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="attr">label:</span> <span class="string">CRITICAL</span> </span><br><span class="line"> <span class="attr">value:</span> <span class="string">&quot;CRITICAL&quot;</span></span><br></pre></td></tr></table></figure><p>rule 字段目前支持的几种校验</p><table><thead><tr><th>rule</th><th>规则</th></tr></thead><tbody><tr><td>paramPort</td><td>用于限制端口范围为 1-65535</td></tr><tr><td>paramExtUrl</td><td>格式为 http(s):&#x2F;&#x2F;(域名&#x2F;ip):(端口)</td></tr><tr><td>paramCommon</td><td>英文、数字、.-和_,长度2-30</td></tr><tr><td>paramComplexity</td><td>支持英文、数字、.%@$!&amp;~_-,长度6-30，特殊字符不能在首尾</td></tr></tbody></table><p>应用 <code>docker-compose.yml</code> 文件</p><p><code>$&#123;PANEL_APP_PORT_HTTP&#125; </code>类型的参数，都在 <code>data.yml</code> 中有声明</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">version:</span> <span class="string">&quot;3&quot;</span> </span><br><span class="line"><span class="attr">services:</span> </span><br><span class="line"> <span class="attr">halo:</span> </span><br><span class="line"> <span class="attr">image:</span> <span class="string">halohub/halo:2.2.0</span> </span><br><span class="line"> <span class="attr">container_name:</span> <span class="string">$&#123;CONTAINER_NAME&#125;</span> <span class="string">//</span> <span class="string">固定写法，勿改</span></span><br><span class="line"> <span class="attr">restart:</span> <span class="string">always</span> </span><br><span class="line"> <span class="attr">networks:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">1panel-network</span> <span class="string">//</span> <span class="string">1Panel</span> <span class="string">创建的应用都在此网络下</span></span><br><span class="line"> <span class="attr">volumes:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">./data:/root/.halo2</span> </span><br><span class="line"> <span class="attr">ports:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">$&#123;PANEL_APP_PORT_HTTP&#125;:8090</span> </span><br><span class="line"> <span class="attr">command:</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">--spring.r2dbc.url=r2dbc:pool:$&#123;HALO_PLATFORM&#125;://$&#123;PANEL_DB_HOST&#125;:$&#123;HALO_DB_PORT&#125;/$&#123;PANEL_DB_NAME&#125;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">--spring.r2dbc.username=$&#123;PANEL_DB_USER&#125;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">--spring.r2dbc.password=$&#123;PANEL_DB_USER_PASSWORD&#125;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">--spring.sql.init.platform=$&#123;HALO_PLATFORM&#125;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">--halo.external-url=$&#123;HALO_EXTERNAL_URL&#125;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">--halo.security.initializer.superadminusername=$&#123;HALO_ADMIN&#125;</span> </span><br><span class="line"> <span class="bullet">-</span> <span class="string">--halo.security.initializer.superadminpassword=$&#123;HALO_ADMIN_PASSWORD&#125;</span> </span><br><span class="line"> <span class="attr">labels:</span> </span><br><span class="line"> <span class="attr">createdBy:</span> <span class="string">&quot;Apps&quot;</span> </span><br><span class="line"> </span><br><span class="line"><span class="attr">networks:</span> </span><br><span class="line"> <span class="attr">1panel-network:</span> </span><br><span class="line"> <span class="attr">external:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><h2 id="脚本"><a href="#脚本" class="headerlink" title="脚本"></a>脚本</h2><p>1Panel 在 安装之前、升级之前、卸载之后支持执行 .sh 脚本<br>分别对应 init.sh upgrade.sh uninstall.sh<br>存放目录(以halo为例) : halo&#x2F;2.2.0&#x2F;scripts</p><h1 id="本地测试"><a href="#本地测试" class="headerlink" title="本地测试"></a>本地测试</h1><p>将应用目录上传到 1Panel 的 &#x2F;opt&#x2F;1panel&#x2F;resource&#x2F;apps&#x2F;local 文件夹下<br>注意：&#x2F;opt 为 1Panel 默认安装目录，请根据自己的实际情况修改<br>上传完成后，目录结构如下</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">├──halo </span><br><span class="line">├── logo.png </span><br><span class="line">├── data.yml</span><br><span class="line">├── README.md </span><br><span class="line">├── 2.2.0 </span><br><span class="line"> ├── data.yml </span><br><span class="line"> ├── data </span><br><span class="line"> └── docker-compose.yml</span><br></pre></td></tr></table></figure><p>在 1Panel 应用商店中，点击更新应用列表按钮同步本地应用</p><p>v1.2 版本及之前版本的本地应用，请参考这个文档修改</p><h1 id="提交文件"><a href="#提交文件" class="headerlink" title="提交文件"></a>提交文件</h1><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">&quot;Add my-app&quot;</span></span><br><span class="line">git push origin dev</span><br></pre></td></tr></table></figure><h1 id="提交-Pull-Request"><a href="#提交-Pull-Request" class="headerlink" title="提交 Pull Request"></a>提交 Pull Request</h1><p>在你的仓库点击 Pull requests 菜单<br>点击 New pull request ，填写标题和描述<br>选择由你的分支提交到 1Panel-dev&#x2F;appstore</p>]]></content>
<summary type="html">&lt;p&gt;记录一下自己为1Panel贡献自己应用的经历&lt;/p&gt;
&lt;h1 id=&quot;预准备&quot;&gt;&lt;a href=&quot;#预准备&quot; class=&quot;headerlink&quot; title=&quot;预准备&quot;&gt;&lt;/a&gt;预准备&lt;/h1&gt;&lt;ol&gt;
&lt;li&gt;Fork仓库 &lt;div</summary>
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
<category term="1panel" scheme="https://blog.biss.click/tags/1panel/"/>
</entry>
<entry>
<title>使用GitHub推送Hexo到服务器</title>
<link href="https://blog.biss.click/posts/ce1ec3fe/"/>
<id>https://blog.biss.click/posts/ce1ec3fe/</id>
<published>2025-08-18T09:10:18.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。</p><h1 id="建立GitHub仓库"><a href="#建立GitHub仓库" class="headerlink" title="建立GitHub仓库"></a>建立GitHub仓库</h1><p>因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。</p><ol><li><p>在本地安装git</p></li><li><p>打开git bash配置用户名和邮箱</p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name <span class="string">&quot;yourname&quot;</span></span><br><span class="line">git config --global user.email <span class="string">&quot;youremail&quot;</span></span><br></pre></td></tr></table></figure><p> 可以使用 git config –list查看当前所有的配置</p></li><li><p>在github上创建自己的账号（在自己的电脑和服务器上）</p></li><li><p>创建SSH Key<br> a:打开Git Bash，输入pwd查看当前路径<br> b.输入<code>ssh-keygen -t rsa –C “youremail@example.com”</code><br> (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤)</p> <center> <img src="https://pic.biss.click/i/2025/08/18/924058.webp" alt="924058.webp"> </center></li><li><p>在GitHub上传自己的公钥</p> <center><img src="https://pic.biss.click/i/2025/08/18/946620.webp" alt="946620.webp"></center></li><li><p>新建一个私有仓库</p></li></ol><h1 id="上传文件到仓库"><a href="#上传文件到仓库" class="headerlink" title="上传文件到仓库"></a>上传文件到仓库</h1><p>在自己hexo根目录下使用<code>powershell</code>，输入<code>git init</code>，然后git push到之前自己新建的仓库。</p><h1 id="创建Action"><a href="#创建Action" class="headerlink" title="创建Action"></a>创建Action</h1><h2 id="创建Action-1"><a href="#创建Action-1" class="headerlink" title="创建Action"></a>创建Action</h2><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="attr">name:</span> <span class="string">自动部署</span></span><br><span class="line"></span><br><span class="line"><span class="attr">on:</span></span><br><span class="line"> <span class="attr">push:</span></span><br><span class="line"> <span class="attr">branches:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">main</span> </span><br><span class="line"></span><br><span class="line"> <span class="attr">release:</span></span><br><span class="line"> <span class="attr">types:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">published</span></span><br><span class="line"></span><br><span class="line"> <span class="attr">workflow_dispatch:</span></span><br><span class="line"></span><br><span class="line"><span class="attr">env:</span></span><br><span class="line"> <span class="attr">TZ:</span> <span class="string">Asia/Shanghai</span></span><br><span class="line"></span><br><span class="line"><span class="attr">jobs:</span></span><br><span class="line"> <span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">runs-on:</span> <span class="string">ubuntu-latest</span></span><br><span class="line"> <span class="attr">steps:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">检查分支</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/checkout@v3</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">ref:</span> <span class="string">main</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">缓存项目</span> <span class="string">npm</span> <span class="string">包</span></span><br><span class="line"> <span class="attr">id:</span> <span class="string">cache-node-modules</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/cache@v3</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">path:</span> <span class="string">node_modules</span></span><br><span class="line"> <span class="attr">key:</span> <span class="string">$&#123;&#123;</span> <span class="string">runner.os</span> <span class="string">&#125;&#125;-nodeModules-$&#123;&#123;</span> <span class="string">hashFiles(&#x27;package-lock.json&#x27;)</span> <span class="string">&#125;&#125;-$&#123;&#123;</span> <span class="string">hashFiles(&#x27;package.json&#x27;)</span> <span class="string">&#125;&#125;</span></span><br><span class="line"> <span class="attr">restore-keys:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> $&#123;&#123; runner.os &#125;&#125;-nodeModules-</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Node</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">actions/setup-node@v3</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">node-version:</span> <span class="string">&quot;20.x&quot;</span></span><br><span class="line"></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装</span> <span class="string">Hexo</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> npm install hexo-cli --global</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">安装依赖</span></span><br><span class="line"> <span class="attr">if:</span> <span class="string">steps.cache-node-modules.outputs.cache-hit</span> <span class="type">!=</span> <span class="string">&#x27;true&#x27;</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> npm install</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">清理文件树</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> npm run clean</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">生成静态文件并压缩</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> npm run build</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">部署</span></span><br><span class="line"> <span class="attr">run:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> cd ./public</span></span><br><span class="line"><span class="string"> git init</span></span><br><span class="line"><span class="string"> git config user.name &quot;$&#123;&#123; github.actor &#125;&#125;&quot;</span></span><br><span class="line"><span class="string"> git config user.email &quot;$&#123;&#123; github.actor &#125;&#125;@users.noreply.github.com&quot;</span></span><br><span class="line"><span class="string"> git add .</span></span><br><span class="line"><span class="string"> git commit -m &quot;$&#123;&#123; github.event.head_commit.message &#125;&#125;··[$(date +&quot;%Z %Y-%m-%d %A %H:%M:%S&quot;)]&quot;</span></span><br><span class="line"><span class="string"> git push --force --quiet &quot;https://$&#123;&#123; github.actor &#125;&#125;:$&#123;&#123; secrets.GITHUB_TOKEN &#125;&#125;@github.com/$&#123;&#123; github.repository &#125;&#125;.git&quot; master:page</span></span><br><span class="line"><span class="string"></span> <span class="bullet">-</span> <span class="attr">name:</span> <span class="string">服务器执行拉取命令</span></span><br><span class="line"> <span class="attr">uses:</span> <span class="string">appleboy/ssh-action@v1</span></span><br><span class="line"> <span class="attr">with:</span></span><br><span class="line"> <span class="attr">host:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.SERVER_IP</span> <span class="string">&#125;&#125;</span></span><br><span class="line"> <span class="attr">username:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.USERNAME</span> <span class="string">&#125;&#125;</span></span><br><span class="line"> <span class="attr">key:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.KEY</span> <span class="string">&#125;&#125;</span></span><br><span class="line"> <span class="attr">passphrase:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.PASSPHRASE</span> <span class="string">&#125;&#125;</span></span><br><span class="line"> <span class="attr">port:</span> <span class="string">$&#123;&#123;</span> <span class="string">secrets.PORT</span> <span class="string">&#125;&#125;</span></span><br><span class="line"> <span class="attr">script:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> cd /opt/1panel/apps/openresty/openresty/www/sites/blog.liushen.fun/index/</span></span><br><span class="line"><span class="string"> git config --global --add safe.directory &quot;$(pwd)&quot;</span></span><br><span class="line"><span class="string"> git fetch --all --depth=1</span></span><br><span class="line"><span class="string"> git reset --hard origin/main</span></span><br><span class="line"><span class="string"> git pull --depth=1</span></span><br><span class="line"><span class="string"> echo &quot;✅ 已拉取 page 分支最新内容&quot;</span></span><br></pre></td></tr></table></figure><h2 id="环境变量"><a href="#环境变量" class="headerlink" title="环境变量"></a>环境变量</h2><p>此次添加变量较多，有：<code>SERVER_IP</code>，<code>USERNAME</code>，<code>PASSPHRASE</code>，<code>KEY</code>，<code>PORT</code>五个变量，如下：</p><p><code>SERVER_IP</code>：服务器IP<br><code>USERNAME</code>：SSH链接用户名，一般为root<br><code>PASSPHRASE</code>：密钥密码，用来提升强度用<br><code>KEY</code>：密钥(私钥)<br><code>PORT</code>：SSH登录端口，一般为22</p><h1 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h1><p>运行一下这个Action无报错即可。</p>]]></content>
<summary type="html">&lt;p&gt;1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。&lt;/p&gt;
&lt;h1 id=&quot;建立GitHub仓库&quot;&gt;&lt;a href=&quot;#建立GitHub仓库&quot; class=&quot;headerlink&quot;</summary>
<category term="建站手札" scheme="https://blog.biss.click/categories/website/"/>
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
</entry>
<entry>
<title>C# 基本语法</title>
<link href="https://blog.biss.click/posts/e9a8e898/"/>
<id>https://blog.biss.click/posts/e9a8e898/</id>
<published>2025-08-16T10:01:10.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<h1 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h1><p>C# 是一种面向对象的编程语言。在面向对象的程序设计方法中，程序由各种相互交互的对象组成。相同种类的对象通常具有相同的类型，或者说，是在相同的 class 中。</p><p>例如，以 Rectangle（矩形）对象为例。它具有 length 和 width 属性。根据设计，它可能需要接受这些属性值、计算面积和显示细节。</p><p>实例</p><figure class="highlight c#"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">using</span> System;</span><br><span class="line"><span class="keyword">namespace</span> <span class="title">RectangleApplication</span></span><br><span class="line">&#123;</span><br><span class="line"> <span class="keyword">class</span> <span class="title">Rectangle</span></span><br><span class="line"> &#123;</span><br><span class="line"> <span class="comment">// 成员变量</span></span><br><span class="line"> <span class="built_in">double</span> length;</span><br><span class="line"> <span class="built_in">double</span> width;</span><br><span class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">Acceptdetails</span>()</span></span><br><span class="line"> &#123;</span><br><span class="line"> length = <span class="number">4.5</span>; </span><br><span class="line"> width = <span class="number">3.5</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="function"><span class="keyword">public</span> <span class="built_in">double</span> <span class="title">GetArea</span>()</span></span><br><span class="line"> &#123;</span><br><span class="line"> <span class="keyword">return</span> length * width;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">Display</span>()</span></span><br><span class="line"> &#123;</span><br><span class="line"> Console.WriteLine(<span class="string">&quot;Length: &#123;0&#125;&quot;</span>, length);</span><br><span class="line"> Console.WriteLine(<span class="string">&quot;Width: &#123;0&#125;&quot;</span>, width);</span><br><span class="line"> Console.WriteLine(<span class="string">&quot;Area: &#123;0&#125;&quot;</span>, GetArea());</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">class</span> <span class="title">ExecuteRectangle</span></span><br><span class="line"> &#123;</span><br><span class="line"> <span class="function"><span class="keyword">static</span> <span class="keyword">void</span> <span class="title">Main</span>(<span class="params"><span class="built_in">string</span>[] <span class="keyword">args</span></span>)</span></span><br><span class="line"> &#123;</span><br><span class="line"> Rectangle r = <span class="keyword">new</span> Rectangle();</span><br><span class="line"> r.Acceptdetails();</span><br><span class="line"> r.Display();</span><br><span class="line"> Console.ReadLine();</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>尝试一下 »<br>当上面的代码被编译和执行时，它会产生下列结果：</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">Length: 4.5</span><br><span class="line">Width: 3.5</span><br><span class="line">Area: 15.75</span><br></pre></td></tr></table></figure><h1 id="using-关键字"><a href="#using-关键字" class="headerlink" title="using 关键字"></a>using 关键字</h1><p>在任何 C# 程序中的第一条语句都是：</p><p>using System;<br>using 关键字用于在程序中包含命名空间。一个程序可以包含多个 using 语句。</p><h1 id="class-关键字"><a href="#class-关键字" class="headerlink" title="class 关键字"></a>class 关键字</h1><p>class 关键字用于声明一个类。</p><h1 id="C-中的注释"><a href="#C-中的注释" class="headerlink" title="C# 中的注释"></a>C# 中的注释</h1><p>注释是用于解释代码。编译器会忽略注释的条目。在 C# 程序中，多行注释以 &#x2F;* 开始，并以字符 *&#x2F; 终止，如下所示：</p><figure class="highlight c#"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 这个程序演示</span></span><br><span class="line"><span class="comment">C# 的注释</span></span><br><span class="line"><span class="comment">使用 */</span></span><br></pre></td></tr></table></figure><p>单行注释是用 &#x2F;&#x2F; 符号表示。例如：</p><figure class="highlight c#"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这一行是注释 </span></span><br></pre></td></tr></table></figure><h1 id="成员变量"><a href="#成员变量" class="headerlink" title="成员变量"></a>成员变量</h1><p>变量是类的属性或数据成员，用于存储数据。在上面的程序中，Rectangle 类有两个成员变量，名为 length 和 width。</p><p>成员函数<br>函数是一系列执行指定任务的语句。类的成员函数是在类内声明的。我们举例的类 Rectangle 包含了三个成员函数： AcceptDetails、GetArea 和 Display。</p><p>实例化一个类<br>在上面的程序中，类 ExecuteRectangle 是一个包含 Main() 方法和实例化 Rectangle 类的类。</p><h1 id="标识符"><a href="#标识符" class="headerlink" title="标识符"></a>标识符</h1><p>标识符是用来识别类、变量、函数或任何其它用户定义的项目。在 C# 中，类的命名必须遵循如下基本规则：</p><ul><li>标识符必须以字母、下划线或 @ 开头，后面可以跟一系列的字母、数字（ 0 - 9 ）、下划线（ _ ）、@。</li><li>标识符中的第一个字符不能是数字。</li><li>标识符必须不包含任何嵌入的空格或符号，比如 ? - +! # % ^ &amp; * ( ) [ ] { } . ; : “ ‘ &#x2F; \。</li><li>标识符不能是 C# 关键字。除非它们有一个 @ 前缀。 例如，@if 是有效的标识符，但 if 不是，因为 if 是关键字。</li><li>标识符必须区分大小写。大写字母和小写字母被认为是不同的字母。</li><li>不能与C#的类库名称相同。</li></ul><h1 id="C-关键字"><a href="#C-关键字" class="headerlink" title="C# 关键字"></a>C# 关键字</h1><p>关键字是 C# 编译器预定义的保留字。这些关键字不能用作标识符，但是，如果您想使用这些关键字作为标识符，可以在关键字前面加上 @ 字符作为前缀。</p><p>在 C# 中，有些关键字在代码的上下文中有特殊的意义，如 get 和 set，这些被称为上下文关键字（contextual keywords）。</p><h1 id="顶级语句（Top-Level-Statements）"><a href="#顶级语句（Top-Level-Statements）" class="headerlink" title="顶级语句（Top-Level Statements）"></a>顶级语句（Top-Level Statements）</h1><p>在 C# 9.0 版本中，引入了顶级语句（Top-Level Statements）的概念，这是一种新的编程范式，允许开发者在文件的顶层直接编写语句，而不需要将它们封装在方法或类中。</p><h2 id="特点："><a href="#特点：" class="headerlink" title="特点："></a>特点：</h2><p>无需类或方法：顶级语句允许你直接在文件的顶层编写代码，无需定义类或方法。</p><p>文件作为入口点：包含顶级语句的文件被视为程序的入口点，类似于 C# 之前的 Main 方法。</p><p>自动 Main 方法：编译器会自动生成一个 Main 方法，并将顶级语句作为 Main 方法的主体。</p><p>支持局部函数：尽管不需要定义类，但顶级语句的文件中仍然可以定义局部函数。</p><p>更好的可读性：对于简单的脚本或工具，顶级语句提供了更好的可读性和简洁性。</p><p>适用于小型项目：顶级语句非常适合小型项目或脚本，可以快速编写和运行代码。</p><p>与现有代码兼容：顶级语句可以与现有的 C# 代码库一起使用，不会影响现有代码。</p><p>传统 C# 代码 - 在使用顶级语句之前，你必须像这样编写一个 C# 程序：</p><p>实例</p><figure class="highlight c#"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">using</span> System;</span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> <span class="title">MyApp</span></span><br><span class="line">&#123;</span><br><span class="line"> <span class="keyword">class</span> <span class="title">Program</span></span><br><span class="line"> &#123;</span><br><span class="line"> <span class="function"><span class="keyword">static</span> <span class="keyword">void</span> <span class="title">Main</span>(<span class="params"><span class="built_in">string</span>[] <span class="keyword">args</span></span>)</span></span><br><span class="line"> &#123;</span><br><span class="line"> Console.WriteLine(<span class="string">&quot;Hello, World!&quot;</span>);</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>使用顶级语句的 C# 代码 - 使用顶级语句，可以简化为：</p><p>实例</p><figure class="highlight c#"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">using</span> System;</span><br><span class="line"></span><br><span class="line">Console.WriteLine(<span class="string">&quot;Hello, World!&quot;</span>);</span><br></pre></td></tr></table></figure><p>顶级语句支持所有常见的 C# 语法，包括声明变量、定义方法、处理异常等。</p><p>实例</p><figure class="highlight c#"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">using</span> System;</span><br><span class="line"><span class="keyword">using</span> System.Linq;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 顶级语句中的变量声明</span></span><br><span class="line"><span class="built_in">int</span> number = <span class="number">42</span>;</span><br><span class="line"><span class="built_in">string</span> message = <span class="string">&quot;The answer to life, the universe, and everything is&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 输出变量</span></span><br><span class="line">Console.WriteLine(<span class="string">$&quot;<span class="subst">&#123;message&#125;</span> <span class="subst">&#123;number&#125;</span>.&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义和调用方法</span></span><br><span class="line"><span class="function"><span class="built_in">int</span> <span class="title">Add</span>(<span class="params"><span class="built_in">int</span> a, <span class="built_in">int</span> b</span>)</span> =&gt; a + b;</span><br><span class="line">Console.WriteLine(<span class="string">$&quot;Sum of 1 and 2 is <span class="subst">&#123;Add(<span class="number">1</span>, <span class="number">2</span>)&#125;</span>.&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 LINQ</span></span><br><span class="line"><span class="keyword">var</span> numbers = <span class="keyword">new</span>[] &#123; <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span> &#125;;</span><br><span class="line"><span class="keyword">var</span> evens = numbers.Where(n =&gt; n % <span class="number">2</span> == <span class="number">0</span>).ToArray();</span><br><span class="line">Console.WriteLine(<span class="string">&quot;Even numbers: &quot;</span> + <span class="built_in">string</span>.Join(<span class="string">&quot;, &quot;</span>, evens));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 异常处理</span></span><br><span class="line"><span class="keyword">try</span></span><br><span class="line">&#123;</span><br><span class="line"> <span class="built_in">int</span> zero = <span class="number">0</span>;</span><br><span class="line"> <span class="built_in">int</span> result = number / zero;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">catch</span> (DivideByZeroException ex)</span><br><span class="line">&#123;</span><br><span class="line"> Console.WriteLine(<span class="string">&quot;Error: &quot;</span> + ex.Message);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">&lt;h1 id=&quot;简介&quot;&gt;&lt;a href=&quot;#简介&quot; class=&quot;headerlink&quot; title=&quot;简介&quot;&gt;&lt;/a&gt;简介&lt;/h1&gt;&lt;p&gt;C#</summary>
<category term="学习" scheme="https://blog.biss.click/categories/learning/"/>
<category term="C#" scheme="https://blog.biss.click/tags/C/"/>
</entry>
<entry>
<title>C# 入门</title>
<link href="https://blog.biss.click/posts/bc56f789/"/>
<id>https://blog.biss.click/posts/bc56f789/</id>
<published>2025-08-15T01:56:17.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<p>今天开始学习C#</p><h1 id="环境安装"><a href="#环境安装" class="headerlink" title="环境安装"></a>环境安装</h1><p>下载Visual Studio,社区版就可以</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://visualstudio.microsoft.com/zh-hans/downloads/"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">Visual Studio</div> <div class="tag-link-sitename">Visual Studio</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>下载的是安装器选择.Net桌面开发，注意修改安装位置</p><center><img src="https://pic.biss.click/i/2025/08/15/776813.webp" alt=".Net 桌面开发"></center><h1 id="第一个程序"><a href="#第一个程序" class="headerlink" title="第一个程序"></a>第一个程序</h1><figure class="highlight c#"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">using</span> System;</span><br><span class="line"><span class="keyword">namespace</span> <span class="title">HelloWorldApplication</span></span><br><span class="line">&#123;</span><br><span class="line"> <span class="comment">/* 类名为 HelloWorld */</span></span><br><span class="line"> <span class="keyword">class</span> <span class="title">HelloWorld</span></span><br><span class="line"> &#123;</span><br><span class="line"> <span class="comment">/* main函数 */</span></span><br><span class="line"> <span class="function"><span class="keyword">static</span> <span class="keyword">void</span> <span class="title">Main</span>(<span class="params"><span class="built_in">string</span>[] <span class="keyword">args</span></span>)</span></span><br><span class="line"> &#123;</span><br><span class="line"> <span class="comment">/* 我的第一个 C# 程序 */</span></span><br><span class="line"> Console.WriteLine(<span class="string">&quot;Hello World!&quot;</span>);</span><br><span class="line"> Console.ReadKey();</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这也是一个默认的格式</p>]]></content>
<summary type="html">&lt;p&gt;今天开始学习C#&lt;/p&gt;
&lt;h1 id=&quot;环境安装&quot;&gt;&lt;a href=&quot;#环境安装&quot; class=&quot;headerlink&quot; title=&quot;环境安装&quot;&gt;&lt;/a&gt;环境安装&lt;/h1&gt;&lt;p&gt;下载Visual Studio,社区版就可以&lt;/p&gt;
&lt;div</summary>
<category term="学习" scheme="https://blog.biss.click/categories/learning/"/>
<category term="C#" scheme="https://blog.biss.click/tags/C/"/>
</entry>
<entry>
<title>自定义页脚（新）</title>
<link href="https://blog.biss.click/posts/c6143ad3/"/>
<id>https://blog.biss.click/posts/c6143ad3/</id>
<published>2025-08-14T09:05:27.000Z</published>
<updated>2026-02-26T10:12:31.845Z</updated>
<content type="html"><![CDATA[<h1 id="添加CSS"><a href="#添加CSS" class="headerlink" title="添加CSS"></a>添加CSS</h1><div class="note warning 1 flat"><p>修改有风险，注意备份</p></div><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*https://codepen.io/poojanahelia/pen/Exabvdy*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#footer</span> &#123;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>); <span class="comment">/* 修改透明色 */</span></span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#footer</span> <span class="selector-class">.footer-other</span> &#123;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.footer-copyright</span>&#123;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-logo</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: white;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-wave-svg</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(-<span class="number">1</span>, -<span class="number">1</span>) <span class="built_in">translateY</span>(-<span class="number">10px</span>); <span class="comment">/*;*/</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-wave-path</span> &#123;</span><br><span class="line"> <span class="attribute">fill</span>: <span class="number">#177ecd</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-content</span> &#123;</span><br><span class="line"> <span class="attribute">margin-left</span>: auto;</span><br><span class="line"> <span class="attribute">margin-right</span>: auto;</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">1230px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">40px</span> <span class="number">15px</span> <span class="number">450px</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-content-column</span> &#123;</span><br><span class="line"> <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line"> <span class="attribute">float</span>: left;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">15px</span>;</span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">15px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-content-column</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-logo-link</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-menu</span> &#123;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-menu-name</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fffff2</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">15px</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">900</span>;</span><br><span class="line"> <span class="attribute">letter-spacing</span>: .<span class="number">1em</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">18px</span>;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">text-transform</span>: uppercase;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-menu-list</span> &#123;</span><br><span class="line"> <span class="attribute">list-style</span>: none;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-menu-list</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">5px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-call-to-action-description</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fffff2</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-call-to-action-button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#fffff2</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#00bef0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.button</span><span class="selector-pseudo">:last-of-type</span> &#123;</span><br><span class="line"> <span class="attribute">margin-right</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-call-to-action-button</span> &#123;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#03708c</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">21px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fffff2</span>;</span><br><span class="line"> <span class="attribute">display</span>: inline-block;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">11px</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">900</span>;</span><br><span class="line"> <span class="attribute">letter-spacing</span>: .<span class="number">1em</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">18px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">12px</span> <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">10px</span> <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">text-decoration</span>: none;</span><br><span class="line"> <span class="attribute">text-transform</span>: uppercase;</span><br><span class="line"> <span class="attribute">transition</span>: background-color .<span class="number">2s</span>;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-call-to-action</span> &#123;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">17px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-call-to-action-title</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fffff2</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">900</span>;</span><br><span class="line"> <span class="attribute">letter-spacing</span>: .<span class="number">1em</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">18px</span>;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">text-transform</span>: uppercase;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-call-to-action-link-wrapper</span> &#123;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</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">.my-footer-call-to-action-link-wrapper</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-links</span> &#123;</span><br><span class="line"> <span class="attribute">bottom</span>: -<span class="number">1px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">54px</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">236px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-amoeba-svg</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">54px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">236px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-amoeba-path</span> &#123;</span><br><span class="line"> <span class="attribute">fill</span>: <span class="number">#03708c</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-link</span><span class="selector-class">.email</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">41px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">14px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">41px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-link</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hidden-link-text</span> &#123;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">clip</span>: <span class="built_in">rect</span>(<span class="number">1px</span> <span class="number">1px</span> <span class="number">1px</span> <span class="number">1px</span>);</span><br><span class="line"> <span class="attribute">clip</span>: <span class="built_in">rect</span>(<span class="number">1px</span>, <span class="number">1px</span>, <span class="number">1px</span>, <span class="number">1px</span>);</span><br><span class="line"> -webkit-<span class="attribute">clip-path</span>: <span class="built_in">inset</span>(<span class="number">0px</span> <span class="number">0px</span> <span class="number">99.9%</span> <span class="number">99.9%</span>);</span><br><span class="line"> <span class="attribute">clip-path</span>: <span class="built_in">inset</span>(<span class="number">0px</span> <span class="number">0px</span> <span class="number">99.9%</span> <span class="number">99.9%</span>);</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">1px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-icon-svg</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-icon-path</span> &#123;</span><br><span class="line"> <span class="attribute">fill</span>: <span class="number">#fffff2</span>;</span><br><span class="line"> <span class="attribute">transition</span>: fill .<span class="number">2s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-link</span><span class="selector-class">.follow</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">42px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">124px</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">13px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">42px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-link</span><span class="selector-class">.rss</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">43px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">178px</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">43px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-social-link</span><span class="selector-class">.github</span> &#123;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">62px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">54px</span>;</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">4px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">62px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-copyright</span> &#123;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#03708c</span>;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">15px</span> <span class="number">30px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-copyright-wrapper</span> &#123;</span><br><span class="line"> <span class="attribute">margin-left</span>: auto;</span><br><span class="line"> <span class="attribute">margin-right</span>: auto;</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">1200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-copyright-text</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">13px</span>;</span><br><span class="line"> <span class="attribute">font-weight</span>: <span class="number">400</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">18px</span>;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-copyright-link</span> &#123;</span><br><span class="line"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-content-div</span> &#123;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#177ecd</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.my-footer-svg-div</span> &#123;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">max-height</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Media Query For different screens */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">320px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">479px</span>) &#123;</span><br><span class="line"> <span class="comment">/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */</span></span><br><span class="line"> <span class="selector-class">.my-footer-content</span> &#123;</span><br><span class="line"> <span class="attribute">margin-left</span>: auto;</span><br><span class="line"> <span class="attribute">margin-right</span>: auto;</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">1230px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">40px</span> <span class="number">15px</span> <span class="number">649px</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">/* 不展示logo */</span></span><br><span class="line"> <span class="selector-class">.my-footer-logo</span> &#123;</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">480px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">599px</span>) &#123;</span><br><span class="line"> <span class="comment">/* smartphones, Android phones, landscape iPhone */</span></span><br><span class="line"> <span class="selector-class">.my-footer-content</span> &#123;</span><br><span class="line"> <span class="attribute">margin-left</span>: auto;</span><br><span class="line"> <span class="attribute">margin-right</span>: auto;</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">1230px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">40px</span> <span class="number">15px</span> <span class="number">738px</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.my-footer-logo</span> &#123;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">177px</span>; <span class="comment">/* Qlogo 稍微偏移一点 */</span></span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">170px</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">600px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">800px</span>) &#123;</span><br><span class="line"> <span class="comment">/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */</span></span><br><span class="line"> <span class="selector-class">.my-footer-content</span> &#123;</span><br><span class="line"> <span class="attribute">margin-left</span>: auto;</span><br><span class="line"> <span class="attribute">margin-right</span>: auto;</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">1230px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">40px</span> <span class="number">15px</span> <span class="number">758px</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">801px</span>) &#123;</span><br><span class="line"> <span class="comment">/* tablet, landscape iPad, lo-res laptops ands desktops */</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">1025px</span>) &#123;</span><br><span class="line"> <span class="comment">/* big landscape tablets, laptops, and desktops */</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">1281px</span>) &#123;</span><br><span class="line"> <span class="comment">/* hi-res laptops and desktops */</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">760px</span>) &#123;</span><br><span class="line"> <span class="selector-class">.my-footer-content</span> &#123;</span><br><span class="line"> <span class="attribute">margin-left</span>: auto;</span><br><span class="line"> <span class="attribute">margin-right</span>: auto;</span><br><span class="line"> <span class="attribute">max-width</span>: <span class="number">1230px</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">15px</span> <span class="number">237px</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="selector-class">.my-footer-content-column</span> &#123;</span><br><span class="line"> <span class="comment">/*五列的话 19.99 %*/</span></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">24.99%</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">568px</span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">600px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">760px</span>) &#123;</span><br><span class="line"> <span class="comment">/* 在这里编写适用于小屏幕的样式 */</span></span><br><span class="line"> <span class="selector-class">.my-footer-logo</span> &#123;</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">212px</span>; <span class="comment">/* Qlogo 稍微偏移一点 */</span></span><br><span class="line"> <span class="attribute">padding-right</span>: <span class="number">204px</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 页脚波浪的颜色 */</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&#x27;dark&#x27;</span>]</span> <span class="selector-class">.my-footer-wave-path</span> &#123;</span><br><span class="line"> <span class="attribute">fill</span>: <span class="number">#0f3858</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&#x27;dark&#x27;</span>]</span> <span class="selector-class">.my-footer-content-div</span> &#123;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#0f3858</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 页脚海底的颜色 */</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&#x27;dark&#x27;</span>]</span> <span class="selector-class">.my-footer-copyright</span> &#123;</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#2b3f49</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&#x27;dark&#x27;</span>]</span> <span class="selector-class">.my-footer-social-amoeba-path</span> &#123;</span><br><span class="line"> <span class="attribute">fill</span>: <span class="number">#2b3f49</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure><h1 id="注入"><a href="#注入" class="headerlink" title="注入"></a>注入</h1><p>打开主题配置文件 _config.butterfly.yml，写入以下内容（以目前我的页脚为例，具体内容请自行修改）：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><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></pre></td><td class="code"><pre><span class="line"># Footer Settings</span><br><span class="line"># --------------------------------------</span><br><span class="line">footer:</span><br><span class="line"> custom_text: |</span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-svg-div&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">svg</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-wave-svg&quot;</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="attr">viewBox</span>=<span class="string">&quot;0 0 1200 100&quot;</span> <span class="attr">preserveAspectRatio</span>=<span class="string">&quot;none&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">path</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-wave-path&quot;</span> <span class="attr">d</span>=<span class="string">&quot;M851.8,100c125,0,288.3-45,348.2-64V0H0v44c3.7-1,7.3-1.9,11-2.9C80.7,22,151.7,10.8,223.5,6.3C276.7,2.9,330,4,383,9.8 c52.2,5.7,103.3,16.2,153.4,32.8C623.9,71.3,726.8,100,851.8,100z&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">path</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">svg</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;my-footer-content-div&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;my-footer-content&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;my-footer-content-column&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;my-footer-logo&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-logo-link&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;hidden-link-text&quot;</span>&gt;</span>LOGO<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;/image/footer/qlogo_white_no_words.png&quot;</span> <span class="attr">style</span>=<span class="string">&quot;height:40%; width:40%&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">a</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;my-footer-menu&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-menu-name&quot;</span>&gt;</span>开始<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;menu-get-started&quot;</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-menu-list&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-product&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/pages/about.html&quot;</span>&gt;</span>关于本站<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</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;my-footer-content-column&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;my-footer-menu&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-menu-name&quot;</span>&gt;</span>快速链接<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;menu-company&quot;</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-menu-list&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-product&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://hexo.io/zh-cn/&quot;</span>&gt;</span>Hexo<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="symbol">&amp;nbsp;</span>⨯<span class="symbol">&amp;nbsp;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://github.com/jerryc127/hexo-theme-butterfly&quot;</span>&gt;</span>Butterfly<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-taxonomy menu-item-object-category&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/archives/&quot;</span>&gt;</span>时间轴<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="symbol">&amp;nbsp;</span>|<span class="symbol">&amp;nbsp;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/DO_NOT_render/cosmoscope/cosmoscope_trim.html&quot;</span>&gt;</span>关系图<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="symbol">&amp;nbsp;</span>|<span class="symbol">&amp;nbsp;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/pages/categories/&quot;</span>&gt;</span>分类<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-product&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/p/91b7dad/&quot;</span>&gt;</span>同款页脚<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-product&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.foreverblog.cn/&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;noopener external nofollow noreferrer&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span> &gt;</span> <span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">&quot;img-foreverblog&quot;</span> <span class="attr">src</span>=<span class="string">&quot;/image/footer/forever_logo_en_default_white.png&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width:auto;height:21px;margin-top:6px&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-content-column&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;my-footer-menu&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-menu-name&quot;</span>&gt;</span>法律声明<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;menu-legal&quot;</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-menu-list&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/pages/privacy.html&quot;</span>&gt;</span>隐私政策<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">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;my-footer-call-to-action&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-call-to-action-title&quot;</span>&gt;</span>联系本站<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;menu-legal&quot;</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-menu-list&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/DO_NOT_render/wechatOA/index.html&quot;</span>&gt;</span>微信公众号<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-170434&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-call-to-action-link&quot;</span> <span class="attr">href</span>=<span class="string">&quot;mailto:uuanqin@uuanqin.top&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_self&quot;</span>&gt;</span></span><br><span class="line"> uuan<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;display:none&quot;</span>&gt;</span>@<span class="tag">&lt;/<span class="name">span</span>&gt;</span>qi<span class="comment">&lt;!-- &gt;@ --&gt;</span>n@<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;display:none&quot;</span>&gt;</span>@<span class="tag">&lt;/<span class="name">span</span>&gt;</span>uu<span class="comment">&lt;!-- &gt;@. --&gt;</span>an<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;display:none&quot;</span>&gt;</span>@<span class="tag">&lt;/<span class="name">span</span>&gt;</span>qin.top</span><br><span class="line"> <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"> <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"> <span class="tag">&lt;/<span class="name">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;my-footer-content-column&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;menu-get-started&quot;</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-menu-list&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-product&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://notbyai.fyi/&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;external nofollow noopener noreferrer&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">&quot;img-not-ai&quot;</span> <span class="attr">src</span>=<span class="string">&quot;/image/footer/Written-By-Human-Not-By-AI-Badge-white.svg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;Written by Human, Not by AI&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-product&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/pages/cc.html&quot;</span> &gt;</span><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;/image/footer/by-nc-sa.svg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;署名-非商业性使用-相同方式共享 4.0 国际&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;menu-item menu-item-type-post_type menu-item-object-product&quot;</span>&gt;</span></span><br><span class="line"> ©2022-2025 By wuanqin</span><br><span class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-links&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">svg</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-amoeba-svg&quot;</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="attr">viewBox</span>=<span class="string">&quot;0 0 236 54&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">path</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-amoeba-path&quot;</span> <span class="attr">d</span>=<span class="string">&quot;M223.06,43.32c-.77-7.2,1.87-28.47-20-32.53C187.78,8,180.41,18,178.32,20.7s-5.63,10.1-4.07,16.7-.13,15.23-4.06,15.91-8.75-2.9-6.89-7S167.41,36,167.15,33a18.93,18.93,0,0,0-2.64-8.53c-3.44-5.5-8-11.19-19.12-11.19a21.64,21.64,0,0,0-18.31,9.18c-2.08,2.7-5.66,9.6-4.07,16.69s.64,14.32-6.11,13.9S108.35,46.5,112,36.54s-1.89-21.24-4-23.94S96.34,0,85.23,0,57.46,8.84,56.49,24.56s6.92,20.79,7,24.59c.07,2.75-6.43,4.16-12.92,2.38s-4-10.75-3.46-12.38c1.85-6.6-2-14-4.08-16.69a21.62,21.62,0,0,0-18.3-9.18C13.62,13.28,9.06,19,5.62,24.47A18.81,18.81,0,0,0,3,33a21.85,21.85,0,0,0,1.58,9.08,16.58,16.58,0,0,1,1.06,5A6.75,6.75,0,0,1,0,54H236C235.47,54,223.83,50.52,223.06,43.32Z&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">path</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-link github&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://github.com/uuanqin&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;external nofollow noopener noreferrer&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;hidden-link-text&quot;</span>&gt;</span>Github<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">svg</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-icon-svg&quot;</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="attr">viewBox</span>=<span class="string">&quot;0 0 32 32&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">path</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-icon-path&quot;</span> <span class="attr">d</span>=<span class="string">&quot;M 16 4 C 9.371094 4 4 9.371094 4 16 C 4 21.300781 7.4375 25.800781 12.207031 27.386719 C 12.808594 27.496094 13.027344 27.128906 13.027344 26.808594 C 13.027344 26.523438 13.015625 25.769531 13.011719 24.769531 C 9.671875 25.492188 8.96875 23.160156 8.96875 23.160156 C 8.421875 21.773438 7.636719 21.402344 7.636719 21.402344 C 6.546875 20.660156 7.71875 20.675781 7.71875 20.675781 C 8.921875 20.761719 9.554688 21.910156 9.554688 21.910156 C 10.625 23.746094 12.363281 23.214844 13.046875 22.910156 C 13.15625 22.132813 13.46875 21.605469 13.808594 21.304688 C 11.144531 21.003906 8.34375 19.972656 8.34375 15.375 C 8.34375 14.0625 8.8125 12.992188 9.578125 12.152344 C 9.457031 11.851563 9.042969 10.628906 9.695313 8.976563 C 9.695313 8.976563 10.703125 8.65625 12.996094 10.207031 C 13.953125 9.941406 14.980469 9.808594 16 9.804688 C 17.019531 9.808594 18.046875 9.941406 19.003906 10.207031 C 21.296875 8.65625 22.300781 8.976563 22.300781 8.976563 C 22.957031 10.628906 22.546875 11.851563 22.421875 12.152344 C 23.191406 12.992188 23.652344 14.0625 23.652344 15.375 C 23.652344 19.984375 20.847656 20.996094 18.175781 21.296875 C 18.605469 21.664063 18.988281 22.398438 18.988281 23.515625 C 18.988281 25.121094 18.976563 26.414063 18.976563 26.808594 C 18.976563 27.128906 19.191406 27.503906 19.800781 27.386719 C 24.566406 25.796875 28 21.300781 28 16 C 28 9.371094 22.628906 4 16 4 Z &quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">path</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-link email&quot;</span> <span class="attr">href</span>=<span class="string">&quot;mailto:uuanqin@uuanqin.top&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;external nofollow noopener noreferrer&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;hidden-link-text&quot;</span>&gt;</span>Email<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">svg</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-icon-svg&quot;</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="attr">viewBox</span>=<span class="string">&quot;0 0 512 512&quot;</span>&gt;</span></span><br><span class="line"> <span class="comment">&lt;!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">path</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-icon-path&quot;</span> <span class="attr">d</span>=<span class="string">&quot;M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z&quot;</span>/&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-link follow&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://app.follow.is/share/users/uuanqin&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;external nofollow noopener noreferrer&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;hidden-link-text&quot;</span>&gt;</span>Follow<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">svg</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-icon-svg&quot;</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="attr">viewBox</span>=<span class="string">&quot;0 0 448 512&quot;</span>&gt;</span></span><br><span class="line"> <span class="comment">&lt;!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">path</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-icon-path&quot;</span> <span class="attr">d</span>=<span class="string">&quot;M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z&quot;</span>/&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-link rss&quot;</span> <span class="attr">href</span>=<span class="string">&quot;/atom.xml&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;external nofollow noopener noreferrer&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;hidden-link-text&quot;</span>&gt;</span>RSS<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">svg</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-icon-svg&quot;</span> <span class="attr">xmlns</span>=<span class="string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="attr">viewBox</span>=<span class="string">&quot;0 0 448 512&quot;</span>&gt;</span></span><br><span class="line"> <span class="comment">&lt;!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">path</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-social-icon-path&quot;</span> <span class="attr">d</span>=<span class="string">&quot;M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z&quot;</span>/&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">svg</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-copyright&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;my-footer-copyright-wrapper&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;my-footer-copyright-text&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://beian.miit.gov.cn/&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;noopener external nofollow noreferrer&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">&quot;icp-icon&quot;</span> <span class="attr">src</span>=<span class="string">&quot;/image/footer/icp.ico&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>津ICP备2022002156号-1<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="symbol">&amp;nbsp;</span>|<span class="symbol">&amp;nbsp;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12011202000621&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;noopener external nofollow noreferrer&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">&quot;icp-icon&quot;</span> <span class="attr">src</span>=<span class="string">&quot;/image/footer/beian_logo.png&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>津公网安备 12011202000621号<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"> <span class="symbol">&amp;nbsp;</span>|<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">span</span>&gt;</span>违法与不良信息举报邮箱<span class="symbol">&amp;nbsp;</span></span><br><span class="line"> j<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;display:none&quot;</span>&gt;</span>@<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="comment">&lt;!-- &gt;@ --&gt;</span>b@<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;display:none&quot;</span>&gt;</span>@<span class="tag">&lt;/<span class="name">span</span>&gt;</span>uu<span class="comment">&lt;!-- &gt;@. --&gt;</span>an<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;display:none&quot;</span>&gt;</span>@<span class="tag">&lt;/<span class="name">span</span>&gt;</span>q.in</span><br><span class="line"> <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h1><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://blog.uuanqin.top/p/91b7dad/"> <div class="tag-link-tips">🪧引用站外地址，不保证站点的可用性和安全性</div> <div class="tag-link-bottom"> <div class="tag-link-left" style="background-image: url(https://pic.biss.click/image/1971bdc1-4349-4bb9-b683-20404f5da7d7.webp);"></div> <div class="tag-link-right"> <div class="tag-link-title">Wuanqin的博客</div> <div class="tag-link-sitename">Wuanqin</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div>]]></content>
<summary type="html">&lt;h1 id=&quot;添加CSS&quot;&gt;&lt;a href=&quot;#添加CSS&quot; class=&quot;headerlink&quot; title=&quot;添加CSS&quot;&gt;&lt;/a&gt;添加CSS&lt;/h1&gt;&lt;div class=&quot;note warning 1</summary>
<category term="建站手札" scheme="https://blog.biss.click/categories/website/"/>
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
</entry>
</feed>
Reference in New Issue View Git Blame Copy Permalink