408 lines
337 KiB
XML
408 lines
337 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<generator uri="https://hexo.io/">Hexo</generator>
|
||
<id>https://blog.biss.click/</id>
|
||
<link href="https://blog.biss.click/" rel="alternate"/>
|
||
<link href="https://blog.biss.click/atom.xml" rel="self"/>
|
||
<rights>All rights reserved 2026, biss</rights>
|
||
<title>Bi's Blog</title>
|
||
<updated>2026-04-11T11:56:17.367Z</updated>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="学习" scheme="https://blog.biss.click/categories/technology/learning/"/>
|
||
<category term="OpenGL" scheme="https://blog.biss.click/tags/OpenGL/"/>
|
||
<content>
|
||
<![CDATA[<p>这篇文章来介绍直线扫描转换算法</p><h1 id="DDA数值微分线段算法"><a href="#DDA数值微分线段算法" class="headerlink" title="DDA数值微分线段算法"></a>DDA数值微分线段算法</h1><h2 id="算法简介"><a href="#算法简介" class="headerlink" title="算法简介"></a>算法简介</h2><p>数值微分法即DDA法(Digital Differential Analyzer)，是一种基于微分方程来生成直线的方法。在计算机图形学中，并没有线段的概念，而是一个个像素点组成了线段。</p><p>DDA法生成线段的步骤一般如下：</p><ol><li>有了起始点（$x_1，y_1$）和终点（$x_n，y_n$）；</li><li>$$\Delta x =|x_n-x_1|, \Delta y=|y_n-y_1|$$</li><li>比较$\Delta x$和$\Delta y$的大小；<br> steps=$\Delta x$和$\Delta y$中较大者；</li><li>$$step_x=\frac{\Delta x}{steps}，step_y=\frac{\Delta y}{steps}$$</li></ol><h2 id="算法实现"><a href="#算法实现" class="headerlink" title="算法实现"></a>算法实现</h2><p>DDA算法实现如下：</p><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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="meta">#<span class="keyword">include</span> <span class="string"><cmath></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><iostream></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><GL/glut.h></span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 窗口宽度和高度</span></span><br><span class="line"><span class="type">const</span> <span class="type">int</span> WIDTH = <span class="number">640</span>;</span><br><span class="line"><span class="type">const</span> <span class="type">int</span> HEIGHT = <span class="number">480</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">drawDDALine</span><span class="params">(<span class="type">int</span> x1, <span class="type">int</span> y1, <span class="type">int</span> x2, <span class="type">int</span> y2)</span> </span>{</span><br><span class="line"> <span class="type">float</span> x = x1;</span><br><span class="line"> <span class="type">float</span> y = y1;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 计算差值</span></span><br><span class="line"> <span class="type">int</span> dx = x2 - x1;</span><br><span class="line"> <span class="type">int</span> dy = y2 - y1;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 确定步数，取 dx 和 dy 中绝对值较大的那个</span></span><br><span class="line"> <span class="type">int</span> steps = std::<span class="built_in">abs</span>(dx) > std::<span class="built_in">abs</span>(dy) ? std::<span class="built_in">abs</span>(dx) : std::<span class="built_in">abs</span>(dy); <span class="comment">//三元表达式</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 计算每一步的增量</span></span><br><span class="line"> <span class="type">float</span> xIncrement = (<span class="type">float</span>)dx / steps;</span><br><span class="line"> <span class="type">float</span> yIncrement = (<span class="type">float</span>)dy / steps;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 开始绘制点</span></span><br><span class="line"> <span class="built_in">glBegin</span>(GL_POINTS);</span><br><span class="line"> <span class="built_in">glVertex2i</span>((<span class="type">int</span>)<span class="built_in">round</span>(x), (<span class="type">int</span>)<span class="built_in">round</span>(y)); <span class="comment">// 绘制起点</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span> (<span class="type">int</span> k = <span class="number">0</span>; k < steps; k++) {</span><br><span class="line"> x += xIncrement;</span><br><span class="line"> y += yIncrement;</span><br><span class="line"> <span class="comment">// 将浮点坐标四舍五入取整转换为整数像素坐标</span></span><br><span class="line">std::cout << (<span class="type">int</span>)<span class="built_in">round</span>(x) << <span class="string">", "</span> << (<span class="type">int</span>)<span class="built_in">round</span>(y)<<<span class="string">"\n"</span>;</span><br><span class="line"> <span class="built_in">glVertex2i</span>((<span class="type">int</span>)<span class="built_in">round</span>(x), (<span class="type">int</span>)<span class="built_in">round</span>(y));</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">glEnd</span>();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 显示回调函数</span></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">display</span><span class="params">()</span> </span>{</span><br><span class="line"> <span class="built_in">drawDDALine</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">50</span>, <span class="number">20</span>);</span><br><span class="line"> <span class="built_in">glFlush</span>();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 初始化 OpenGL 设置</span></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">init</span><span class="params">()</span> </span>{</span><br><span class="line"> <span class="comment">// 设置背景颜色为白色</span></span><br><span class="line"> <span class="built_in">glClearColor</span>(<span class="number">1.0f</span>, <span class="number">1.0f</span>, <span class="number">1.0f</span>, <span class="number">1.0f</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 设置投影矩阵为 2D 正交投影</span></span><br><span class="line"> <span class="built_in">glMatrixMode</span>(GL_PROJECTION);</span><br><span class="line"> <span class="built_in">glLoadIdentity</span>();</span><br><span class="line"> <span class="comment">// 定义可视区域，左下角(0,0)，右上角(WIDTH, HEIGHT)</span></span><br><span class="line"> <span class="built_in">gluOrtho2D</span>(<span class="number">0.0</span>, WIDTH, <span class="number">0.0</span>, HEIGHT);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">(<span class="type">int</span> argc, <span class="type">char</span>** argv)</span> </span>{</span><br><span class="line"> <span class="comment">// 初始化 GLUT</span></span><br><span class="line"> <span class="built_in">glutInit</span>(&argc, argv);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 设置显示模式：单缓冲、RGB 颜色模式</span></span><br><span class="line"> <span class="built_in">glutInitDisplayMode</span>(GLUT_SINGLE | GLUT_RGB);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 设置窗口大小和位置</span></span><br><span class="line"> <span class="built_in">glutInitWindowSize</span>(WIDTH, HEIGHT);</span><br><span class="line"> <span class="built_in">glutInitWindowPosition</span>(<span class="number">100</span>, <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 创建窗口</span></span><br><span class="line"> <span class="built_in">glutCreateWindow</span>(<span class="string">"DDA算法"</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 注册回调函数</span></span><br><span class="line"> <span class="built_in">glutDisplayFunc</span>(display);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 初始化设置</span></span><br><span class="line"> <span class="built_in">init</span>();</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 进入主循环</span></span><br><span class="line"> <span class="built_in">glutMainLoop</span>();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="中点画线算法"><a href="#中点画线算法" class="headerlink" title="中点画线算法"></a>中点画线算法</h1><h2 id="算法简介-1"><a href="#算法简介-1" class="headerlink" title="算法简介"></a>算法简介</h2><p>只考虑当直线的斜率$|k|< 1$时的情况，假设现在有一条直线$(x_1,y_1,x_2,y_2)$,那么第一个点一定是$(x_1,y_1)$无疑，下一个点的$x$坐标为$x_1+1$,$y$坐标要么为$y1$要么为$y1+1$。关键在于每次取下一个点时，是取前一个的$y1$呢，还是$y1+1$,这时一定是取直线上点最靠近的那个了，而判断取哪个点就用到了中点，我们将中点代入直线中 $d=F(x_1+1,y_1+0.5)=a \cdot (x_1+1)+b \cdot (y_1+0.5)+c$。</p><ol><li>如果直线$d>=0$，则取下边的点也就是$(x_1+1,y_1)$。</li><li>如果直线$d<0$,则取上边的点也就是$(x_1+1,y_1+1)$。</li></ol><p>它的实际过程就是这样每次根据前边的点判断下一个点在哪，然后进行打亮，但这样每次判断的时候都得代入直线方程计算太麻烦了，我们将这俩种情况分别代入直线方程中可以找出规律：</p><ol><li>当直线$d>=0$时，经过化解得$d_1=d+a$;</li><li>当直线$d<0$时，经过化解得$d_2=d+a+b$;</li><li>初始值$d_0=a+0.5b$。</li></ol><p>也就是说每次的增量要么为$a$,要么为$a+b$,那么这样判断的时候就简单多了，因为我们每次只是判断它的正负。所以给等式同时乘2，将其中浮点数0.5化为整数，这样硬件操作时无疑更快了。</p><h2 id="算法实现-1"><a href="#算法实现-1" class="headerlink" title="算法实现"></a>算法实现</h2><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><GL/freeglut.h></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><iostream></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><cmath></span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 中点画线算法函数 (仅针对斜率 0 <= k <= 1 的情况进行演示，其它象限需类比处理)</span></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">drawLineMidpoint</span><span class="params">(<span class="type">int</span> x0, <span class="type">int</span> y0, <span class="type">int</span> x1, <span class="type">int</span> y1)</span> </span>{</span><br><span class="line"> <span class="type">int</span> a = y0 - y1;</span><br><span class="line"> <span class="type">int</span> b = x1 - x0;</span><br><span class="line"> <span class="type">int</span> d = <span class="number">2</span> * a + b;</span><br><span class="line"> <span class="type">int</span> d1 = <span class="number">2</span> * a;</span><br><span class="line"> <span class="type">int</span> d2 = <span class="number">2</span> * (a + b);</span><br><span class="line"></span><br><span class="line"> <span class="type">int</span> x = x0, y = y0;</span><br><span class="line"></span><br><span class="line"> <span class="built_in">glBegin</span>(GL_POINTS);</span><br><span class="line"> <span class="built_in">glVertex2i</span>(x, y); <span class="comment">// 画起点</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">while</span> (x < x1) {</span><br><span class="line"> <span class="keyword">if</span> (d < <span class="number">0</span>) {</span><br><span class="line"> x++;</span><br><span class="line"> y++;</span><br><span class="line"> d += d2;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> x++;</span><br><span class="line"> d += d1;</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">glVertex2i</span>(x, y);</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">glEnd</span>();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 渲染回调函数</span></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">display</span><span class="params">()</span> </span>{</span><br><span class="line"> <span class="built_in">glClear</span>(GL_COLOR_BUFFER_BIT);</span><br><span class="line"> <span class="built_in">glColor3f</span>(<span class="number">1.0</span>, <span class="number">1.0</span>, <span class="number">1.0</span>); <span class="comment">// 设置画笔颜色为白色</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 调用算法画一条直线 (x0, y0) 到 (x1, y1)</span></span><br><span class="line"> <span class="comment">// 注意：此处的坐标对应屏幕像素坐标</span></span><br><span class="line"> <span class="built_in">drawLineMidpoint</span>(<span class="number">50</span>, <span class="number">50</span>, <span class="number">450</span>, <span class="number">300</span>);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">glFlush</span>();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 初始化设置</span></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">init</span><span class="params">()</span> </span>{</span><br><span class="line"> <span class="built_in">glClearColor</span>(<span class="number">0.0</span>, <span class="number">0.0</span>, <span class="number">0.0</span>, <span class="number">1.0</span>); <span class="comment">// 背景设为黑色</span></span><br><span class="line"> <span class="built_in">glMatrixMode</span>(GL_PROJECTION);</span><br><span class="line"> <span class="built_in">glLoadIdentity</span>();</span><br><span class="line"> <span class="comment">// 设置正交投影矩阵，使坐标系与窗口像素对应</span></span><br><span class="line"> <span class="built_in">gluOrtho2D</span>(<span class="number">0</span>, <span class="number">500</span>, <span class="number">0</span>, <span class="number">500</span>); </span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">(<span class="type">int</span> argc, <span class="type">char</span>** argv)</span> </span>{</span><br><span class="line"> <span class="built_in">glutInit</span>(&argc, argv);</span><br><span class="line"> <span class="built_in">glutInitDisplayMode</span>(GLUT_SINGLE | GLUT_RGB);</span><br><span class="line"> <span class="built_in">glutInitWindowSize</span>(<span class="number">500</span>, <span class="number">500</span>);</span><br><span class="line"> <span class="built_in">glutInitWindowPosition</span>(<span class="number">100</span>, <span class="number">100</span>);</span><br><span class="line"> <span class="built_in">glutCreateWindow</span>(<span class="string">"Midpoint Line Algorithm - FreeGLUT"</span>);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">init</span>();</span><br><span class="line"> <span class="built_in">glutDisplayFunc</span>(display);</span><br><span class="line"> <span class="built_in">glutMainLoop</span>();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="Bresenham算法"><a href="#Bresenham算法" class="headerlink" title="Bresenham算法"></a>Bresenham算法</h1><h2 id="算法简介-2"><a href="#算法简介-2" class="headerlink" title="算法简介"></a>算法简介</h2><p>假设我们需要由$(x_0, y_0)$这一点，绘画一直线至右下角的另一点$(x_1, y_1)$，x,y分别代表其水平及垂直坐标，并且$x_1 - x_0 > y_1 - y_0$。在此我们使用电脑系统常用的坐标系，即$x$坐标值沿$x$轴向右增长，$y$坐标值沿$y$轴向下增长。</p><p>因此x及y之值分别向右及向下增加，而两点之水平距离为$x_{1}-x_{0}$且垂直距离为$y_{1}-y_{0}$。由此得之，该线的斜率必定介乎于$0$至$1$之间。而此算法之目的，就是找出在$x_{0}$与$x_{1}$之间，第$x$行相对应的第$y$列，从而得出一像素点，使得该像素点的位置最接近原本的线。</p><p>对于由$(x_0, y_0)$及$(x_1, y_1)$两点所组成之直线，公式如下：<br>$$y-y_{0}={\frac {y_{1}-y_{0}}{x_{1}-x_{0}}}(x-x_{0})$$<br>因此，对于每一点的x，其y的值是<br>$${\frac {y_{1}-y_{0}}{x_{1}-x_{0}}}(x-x_{0})+y_{0}$$<br>因为$x$及$y$皆为整数，但并非每一点$x$所对应的$y$皆为整数，故此没有必要去计算每一点x所对应之$y$值。反之由于此线之斜率介乎于$1$至$0$之间，故此我们只需要找出当$x$到达那一个数值时，会使$y$上升$1$，若$x$尚未到此值，则$y$不变。至于如何找出相关的$x$值，则需依靠斜率。斜率之计算方法为$m=(y_{1}-y_{0})/(x_{1}-x_{0})$。由于此值不变，故可于运算前预先计算，减少运算次数。</p><p>要实行此算法，我们需计算每一像素点与该线之间的误差。于上述例子中，误差应为每一点$x$中，其相对的像素点之$y$值与该线实际之$y$值的差距。每当$y$的值增加$1$，误差的值就会增加$m$。每当误差的值超出$0.5$，线就会比较靠近下一个映像点，因此$y$的值便会加$1$，且误差减$1$。</p><h2 id="算法实现-2"><a href="#算法实现-2" class="headerlink" title="算法实现"></a>算法实现</h2><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><GL/freeglut.h></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><iostream></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><cmath></span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 通用 Bresenham 画线算法</span></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">drawLineBresenham</span><span class="params">(<span class="type">int</span> x0, <span class="type">int</span> y0, <span class="type">int</span> x1, <span class="type">int</span> y1)</span> </span>{</span><br><span class="line"> <span class="type">int</span> dx = <span class="built_in">abs</span>(x1 - x0);</span><br><span class="line"> <span class="type">int</span> dy = <span class="built_in">abs</span>(y1 - y0);</span><br><span class="line"> <span class="type">int</span> sx = (x0 < x1) ? <span class="number">1</span> : <span class="number">-1</span>; <span class="comment">// X 方向步进</span></span><br><span class="line"> <span class="type">int</span> sy = (y0 < y1) ? <span class="number">1</span> : <span class="number">-1</span>; <span class="comment">// Y 方向步进</span></span><br><span class="line"> <span class="type">int</span> err = dx - dy; <span class="comment">// 初始误差项</span></span><br><span class="line"></span><br><span class="line"> <span class="built_in">glBegin</span>(GL_POINTS);</span><br><span class="line"> <span class="keyword">while</span> (<span class="literal">true</span>) {</span><br><span class="line"> <span class="built_in">glVertex2i</span>(x0, y0); <span class="comment">// 绘制当前点</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (x0 == x1 && y0 == y1) <span class="keyword">break</span>; <span class="comment">// 到达终点</span></span><br><span class="line"></span><br><span class="line"> <span class="type">int</span> e2 = <span class="number">2</span> * err;</span><br><span class="line"> <span class="comment">// 判断是否在 X 方向步进</span></span><br><span class="line"> <span class="keyword">if</span> (e2 > -dy) {</span><br><span class="line"> err -= dy;</span><br><span class="line"> x0 += sx;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 判断是否在 Y 方向步进</span></span><br><span class="line"> <span class="keyword">if</span> (e2 < dx) {</span><br><span class="line"> err += dx;</span><br><span class="line"> y0 += sy;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">glEnd</span>();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 渲染回调</span></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">display</span><span class="params">()</span> </span>{</span><br><span class="line"> <span class="built_in">glClear</span>(GL_COLOR_BUFFER_BIT);</span><br><span class="line"> <span class="built_in">glColor3f</span>(<span class="number">0.0f</span>, <span class="number">0.8f</span>, <span class="number">0.4f</span>); <span class="comment">// 设置一个好看的绿色（类似你图中的图标颜色）</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 绘制几条不同方向的线来测试算法的健壮性</span></span><br><span class="line"> <span class="built_in">drawLineBresenham</span>(<span class="number">50</span>, <span class="number">50</span>, <span class="number">450</span>, <span class="number">400</span>); <span class="comment">// 第一象限</span></span><br><span class="line"> <span class="built_in">drawLineBresenham</span>(<span class="number">50</span>, <span class="number">400</span>, <span class="number">450</span>, <span class="number">50</span>); <span class="comment">// 第四象限</span></span><br><span class="line"> <span class="built_in">drawLineBresenham</span>(<span class="number">250</span>, <span class="number">50</span>, <span class="number">250</span>, <span class="number">450</span>); <span class="comment">// 垂直线</span></span><br><span class="line"> <span class="built_in">drawLineBresenham</span>(<span class="number">50</span>, <span class="number">250</span>, <span class="number">450</span>, <span class="number">250</span>); <span class="comment">// 水平线</span></span><br><span class="line"></span><br><span class="line"> <span class="built_in">glFlush</span>();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">init</span><span class="params">()</span> </span>{</span><br><span class="line"> <span class="built_in">glClearColor</span>(<span class="number">0.1f</span>, <span class="number">0.1f</span>, <span class="number">0.1f</span>, <span class="number">1.0f</span>); <span class="comment">// 深色背景</span></span><br><span class="line"> <span class="built_in">glMatrixMode</span>(GL_PROJECTION);</span><br><span class="line"> <span class="built_in">glLoadIdentity</span>();</span><br><span class="line"> <span class="built_in">gluOrtho2D</span>(<span class="number">0</span>, <span class="number">500</span>, <span class="number">0</span>, <span class="number">500</span>); <span class="comment">// 建立 500x500 的直角坐标系</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">(<span class="type">int</span> argc, <span class="type">char</span>** argv)</span> </span>{</span><br><span class="line"> <span class="built_in">glutInit</span>(&argc, argv);</span><br><span class="line"> <span class="built_in">glutInitDisplayMode</span>(GLUT_SINGLE | GLUT_RGB);</span><br><span class="line"> <span class="built_in">glutInitWindowSize</span>(<span class="number">600</span>, <span class="number">600</span>);</span><br><span class="line"> <span class="built_in">glutCreateWindow</span>(<span class="string">"Bresenham Line Algorithm"</span>);</span><br><span class="line"> <span class="built_in">init</span>();</span><br><span class="line"> <span class="built_in">glutDisplayFunc</span>(display);</span><br><span class="line"> <span class="built_in">glutMainLoop</span>();</span><br><span class="line"> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/7207243b/</id>
|
||
<link href="https://blog.biss.click/posts/7207243b/"/>
|
||
<published>2026-04-11T11:01:02.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>这篇文章来介绍直线扫描转换算法</p>
|
||
<h1 id="DDA数值微分线段算法"><a href="#DDA数值微分线段算法" class="headerlink" title="DDA数值微分线段算法"></a>DDA数值微分线段算法</h1><h2]]>
|
||
</summary>
|
||
<title>OpenGL-直线的扫描转换</title>
|
||
<updated>2026-04-11T11:56:17.367Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="学习" scheme="https://blog.biss.click/categories/technology/learning/"/>
|
||
<category term="OpenGL" scheme="https://blog.biss.click/tags/OpenGL/"/>
|
||
<content>
|
||
<![CDATA[<h1 id="代码展示"><a href="#代码展示" class="headerlink" title="代码展示"></a>代码展示</h1><p>我们先从基本的OpenGL程序开始吧，这是一个简单的OpenGL程序：</p><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span><span class="string"><GL/glut.h></span></span></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> std;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 回调函数</span></span><br><span class="line"><span class="function"><span class="type">void</span> <span class="title">myDisplay</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>{</span><br><span class="line"><span class="comment">// 清除缓冲区</span></span><br><span class="line"><span class="built_in">glClearColor</span>(<span class="number">0.0</span>, <span class="number">0.0</span>, <span class="number">0.0</span>, <span class="number">0.0</span>);</span><br><span class="line"><span class="built_in">glClear</span>(GL_COLOR_BUFFER_BIT);</span><br><span class="line"><span class="comment">// 正交模式</span></span><br><span class="line"><span class="built_in">glMatrixMode</span>(GL_PROJECTION);</span><br><span class="line"><span class="built_in">gluOrtho2D</span>(<span class="number">0.0</span>, <span class="number">500.0</span>, <span class="number">0.0</span>, <span class="number">500.0</span>);</span><br><span class="line"><span class="built_in">glColor4f</span>(<span class="number">0.0</span>, <span class="number">1.0</span>, <span class="number">0.0</span>, <span class="number">0.0</span>);</span><br><span class="line"><span class="built_in">glRectf</span>(<span class="number">50.0</span>, <span class="number">50.0</span>, <span class="number">400.0</span>, <span class="number">400.0</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 划线</span></span><br><span class="line"><span class="built_in">glColor3f</span>(<span class="number">1.0</span>, <span class="number">1.0</span>, <span class="number">0.0</span>);</span><br><span class="line"><span class="built_in">glBegin</span>(GL_LINES);</span><br><span class="line"><span class="built_in">glVertex2f</span>(<span class="number">50.0</span>, <span class="number">50.0</span>);</span><br><span class="line"><span class="built_in">glVertex2f</span>(<span class="number">400.0</span>, <span class="number">400.0</span>);</span><br><span class="line"><span class="built_in">glVertex2f</span>(<span class="number">400.0</span>, <span class="number">50.0</span>);</span><br><span class="line"><span class="built_in">glVertex2f</span>(<span class="number">50.0</span>, <span class="number">400.0</span>);</span><br><span class="line"><span class="built_in">glEnd</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 画点</span></span><br><span class="line"><span class="built_in">glColor3f</span>(<span class="number">1.0</span>, <span class="number">0.0</span>, <span class="number">0.0</span>);</span><br><span class="line"><span class="built_in">glPointSize</span>(<span class="number">20.0</span>);</span><br><span class="line"><span class="built_in">glBegin</span>(GL_POINTS);</span><br><span class="line"><span class="built_in">glVertex2f</span>(<span class="number">15.0</span>, <span class="number">15.0</span>);</span><br><span class="line"><span class="built_in">glEnd</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 画三角形</span></span><br><span class="line"><span class="built_in">glBegin</span>(GL_TRIANGLES);</span><br><span class="line"><span class="built_in">glColor3f</span>(<span class="number">0.0</span>, <span class="number">0.0</span>, <span class="number">1.0</span>);</span><br><span class="line"><span class="built_in">glVertex2i</span>(<span class="number">200</span>, <span class="number">300</span>);</span><br><span class="line"><span class="built_in">glVertex2i</span>(<span class="number">100</span>, <span class="number">100</span>);</span><br><span class="line"><span class="built_in">glVertex2i</span>(<span class="number">300</span>, <span class="number">100</span>);</span><br><span class="line"><span class="built_in">glEnd</span>();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">glFlush</span>();</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">(<span class="type">int</span> argc, <span class="type">char</span>* argv[])</span></span></span><br><span class="line"><span class="function"></span>{</span><br><span class="line"><span class="built_in">glutInit</span>(&argc, argv);</span><br><span class="line"><span class="built_in">glutInitDisplayMode</span>(GLUT_RGB | GLUT_SINGLE);</span><br><span class="line"><span class="built_in">glutInitWindowPosition</span>(<span class="number">100</span>, <span class="number">100</span>);</span><br><span class="line"><span class="built_in">glutInitWindowSize</span>(<span class="number">500</span>, <span class="number">500</span>);</span><br><span class="line"><span class="built_in">glutCreateWindow</span>(<span class="string">""</span>);</span><br><span class="line"><span class="built_in">glutDisplayFunc</span>(&myDisplay);</span><br><span class="line"><span class="built_in">glutMainLoop</span>();</span><br><span class="line"><span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>这是运行结果图：<br><img src="https://pic.biss.click/image/0ef5fbe7-0338-4cd0-94c7-1874273461f7.png" alt="第一个OpenGL程序"></p><h1 id="代码解释"><a href="#代码解释" class="headerlink" title="代码解释"></a>代码解释</h1><p>这段代码展示了经典的 OpenGL (GLUT) 固定渲染管线基本操作。为了方便理解，我将这些函数按照 <strong>初始化与窗口管理</strong>、<strong>状态设置</strong>、<strong>坐标变换</strong> 以及 <strong>图形绘制</strong> 四个类别进行了整理。</p><h2 id="1-窗口管理与初始化-GLUT-库"><a href="#1-窗口管理与初始化-GLUT-库" class="headerlink" title="1. 窗口管理与初始化 (GLUT 库)"></a>1. 窗口管理与初始化 (GLUT 库)</h2><p>这类函数主要用于配置窗口系统和处理程序的运行流程。</p><table><thead><tr><th align="left">函数名称</th><th align="left">功能描述</th><th align="left">核心参数说明</th></tr></thead><tbody><tr><td align="left"><code>glutInit</code></td><td align="left">初始化 GLUT 库</td><td align="left">接收 <code>main</code> 函数的命令行参数</td></tr><tr><td align="left"><code>glutInitDisplayMode</code></td><td align="left">设置显示模式</td><td align="left"><code>GLUT_RGB</code> (使用颜色模式), <code>GLUT_SINGLE</code> (单缓冲区)</td></tr><tr><td align="left"><code>glutInitWindowPosition</code></td><td align="left">设置窗口在屏幕上的初始位置</td><td align="left">窗口左上角坐标 $(x, y)$</td></tr><tr><td align="left"><code>glutInitWindowSize</code></td><td align="left">设置窗口的宽度和高度</td><td align="left">像素值 (Width, Height)</td></tr><tr><td align="left"><code>glutCreateWindow</code></td><td align="left">创建窗口</td><td align="left">字符串参数作为窗口标题</td></tr><tr><td align="left"><code>glutDisplayFunc</code></td><td align="left">注册显示回调函数</td><td align="left">传入负责绘图的函数指针</td></tr><tr><td align="left"><code>glutMainLoop</code></td><td align="left">进入 GLUT 事件处理循环</td><td align="left">让程序持续运行，等待重绘或交互</td></tr></tbody></table><hr><h2 id="2-状态设置与缓冲区操作"><a href="#2-状态设置与缓冲区操作" class="headerlink" title="2. 状态设置与缓冲区操作"></a>2. 状态设置与缓冲区操作</h2><p>这些函数用于配置 OpenGL 的全局状态（如颜色、点大小）或清理画布。</p><table><thead><tr><th align="left">函数名称</th><th align="left">功能描述</th><th align="left">核心参数说明</th></tr></thead><tbody><tr><td align="left"><code>glClearColor</code></td><td align="left">设置清除颜色（背景色）</td><td align="left">RGBA 值 (0.0~1.0)，此处设为黑色</td></tr><tr><td align="left"><code>glClear</code></td><td align="left">清除指定的缓冲区</td><td align="left"><code>GL_COLOR_BUFFER_BIT</code> 表示清除颜色缓存</td></tr><tr><td align="left"><code>glColor4f</code></td><td align="left">设置当前的绘制颜色 (带透明度)</td><td align="left">RGBA 分量</td></tr><tr><td align="left"><code>glColor3f</code></td><td align="left">设置当前的绘制颜色 (不带透明度)</td><td align="left">RGB 分量</td></tr><tr><td align="left"><code>glPointSize</code></td><td align="left">设置点的像素大小</td><td align="left">浮点数，数值越大点越粗</td></tr><tr><td align="left"><code>glFlush</code></td><td align="left">强制刷新缓冲区</td><td align="left">确保绘图命令立即执行并输出到显示设备</td></tr></tbody></table><hr><h2 id="3-矩阵与坐标变换"><a href="#3-矩阵与坐标变换" class="headerlink" title="3. 矩阵与坐标变换"></a>3. 矩阵与坐标变换</h2><p>用于定义物体是如何投影到屏幕上的。</p><table><thead><tr><th align="left">函数名称</th><th align="left">功能描述</th><th align="left">核心参数说明</th></tr></thead><tbody><tr><td align="left"><code>glMatrixMode</code></td><td align="left">设置当前矩阵模式</td><td align="left"><code>GL_PROJECTION</code> 切换到投影矩阵堆栈</td></tr><tr><td align="left"><code>gluOrtho2D</code></td><td align="left">定义二维正交投影裁剪区域</td><td align="left">定义视野的左、右、下、上边界范围</td></tr></tbody></table><hr><h2 id="4-几何图形绘制"><a href="#4-几何图形绘制" class="headerlink" title="4. 几何图形绘制"></a>4. 几何图形绘制</h2><p>OpenGL 的核心绘图逻辑，通过指定顶点来构建形状。</p><table><thead><tr><th align="left">函数名称</th><th align="left">功能描述</th><th align="left">核心参数说明</th></tr></thead><tbody><tr><td align="left"><code>glRectf</code></td><td align="left">绘制一个实心矩形</td><td align="left">传入左下角坐标和右上角坐标 $(x1, y1, x2, y2)$</td></tr><tr><td align="left"><code>glBegin</code></td><td align="left">标记图元绘制的开始</td><td align="left"><code>GL_LINES</code> (线), <code>GL_POINTS</code> (点), <code>GL_TRIANGLES</code> (三角形)</td></tr><tr><td align="left"><code>glVertex2f</code></td><td align="left">指定一个二维顶点 (浮点型)</td><td align="left">坐标 $(x, y)$</td></tr><tr><td align="left"><code>glVertex2i</code></td><td align="left">指定一个二维顶点 (整型)</td><td align="left">坐标 $(x, y)$</td></tr><tr><td align="left"><code>glEnd</code></td><td align="left">标记图元绘制的结束</td><td align="left">必须与 <code>glBegin</code> 成对出现</td></tr></tbody></table><hr>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/437a5198/</id>
|
||
<link href="https://blog.biss.click/posts/437a5198/"/>
|
||
<published>2026-04-11T10:20:34.000Z</published>
|
||
<summary>
|
||
<![CDATA[<h1 id="代码展示"><a href="#代码展示" class="headerlink" title="代码展示"></a>代码展示</h1><p>我们先从基本的OpenGL程序开始吧，这是一个简单的OpenGL程序：</p>
|
||
<figure]]>
|
||
</summary>
|
||
<title>OpenGL-基础程序</title>
|
||
<updated>2026-04-11T11:56:17.367Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="学习" scheme="https://blog.biss.click/categories/technology/learning/"/>
|
||
<category term="OpenGL" scheme="https://blog.biss.click/tags/OpenGL/"/>
|
||
<content>
|
||
<![CDATA[<p>最近要学计算机图形学，所以会用到<code>OpenGL</code>，配置环境有点繁琐，记录了下来。</p><h1 id="安装Visual-Studio"><a href="#安装Visual-Studio" class="headerlink" title="安装Visual Studio"></a>安装Visual Studio</h1><p>现在我们先来安装<code>Visual Studio</code>：<a href="https://visualstudio.microsoft.com/zh-hans/vs/">visual studio</a>，下载后安装即可|在安装时选择“使用C++的桌面开发”，这样安装时就会安装C++的编译器了。<br><img src="https://pic.biss.click/image/2d3be78a-320f-41de-8773-e2fd7a2af66e.webp"></p><h1 id="安装-Cmake"><a href="#安装-Cmake" class="headerlink" title="安装 Cmake"></a>安装 Cmake</h1><p>这个可选，因为我们可以使用<code>Visual Studio</code>的编译器<code>MSVC</code>来编译项目。<br><code>Cmake</code>是一个开源的跨平台软件构建工具，它可以生成不同系统的构建文件，比如<code>Makefile</code>，<code>Ninja</code>，<code>VS</code>项目文件等等。<br>我们可以下载<code>Cmake</code>：<a href="https://cmake.org/download/">cmake</a>，下载后安装即可。</p><h1 id="安装GLFW"><a href="#安装GLFW" class="headerlink" title="安装GLFW"></a>安装GLFW</h1><p>OpenGL有许多工具，比如GLFW，GLEW等等，这里我们安装GLFW。</p><table><thead><tr><th>工具</th><th>类别</th><th>主要职责</th><th>特点</th></tr></thead><tbody><tr><td>GLUT</td><td>窗口管理 + 工具库</td><td>创建窗口、处理鼠标键盘、提供内置渲染循环。</td><td>古老、简单。使用“固定管线”（老旧技术），适合教学。</td></tr><tr><td>GLFW</td><td>窗口管理库</td><td>创建窗口、处理输入、管理多个上下文。</td><td>现代、轻量。只管窗口和输入，不负责渲染逻辑，是目前的主流。</td></tr><tr><td>GLAD</td><td>配置/加载库</td><td>加载 OpenGL 函数指针（连接驱动）。</td><td>底层必备。因为 OpenGL 函数在显卡驱动里，需要它来“找”函数地址。</td></tr></tbody></table><h2 id="下载GLFW-和-glad"><a href="#下载GLFW-和-glad" class="headerlink" title="下载GLFW 和 glad"></a>下载GLFW 和 glad</h2><p><code>GLFW</code>是一个开源的跨平台<code>C/C++</code>窗口管理库，它可以创建窗口、处理输入、管理多个上下文。<br>下载<code>GLFW</code>：<a href="https://www.glfw.org/download.html">glfw</a>，下载后解压即可。</p><h2 id="创建项目与配置"><a href="#创建项目与配置" class="headerlink" title="创建项目与配置"></a>创建项目与配置</h2><p>用<code>Visual Studio</code>创建一个空的<code>C++</code>项目，然后添加GLFW的目录到项目中。<br>在项目属性中添加GLFW的目录到“C/C++->General->Additional Include Directories”中。<br>如图所示：<br><img src="https://pic.biss.click/image/0097e9f0-d0ab-4bd1-b9de-c774cee0d4ef.webp"></p><h2 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h2><p>创建一个<code>main.cpp</code>文件，内容如下：</p><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><glad/glad.h></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><GLFW/glfw3.h></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><iostream></span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 顶点着色器源码</span></span><br><span class="line"><span class="type">const</span> <span class="type">char</span>* vertexShaderSource = <span class="string">"#version 330 core\n"</span></span><br><span class="line"> <span class="string">"layout (location = 0) in vec3 aPos;\n"</span></span><br><span class="line"> <span class="string">"void main() {\n"</span></span><br><span class="line"> <span class="string">" gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"</span></span><br><span class="line"> <span class="string">"}\0"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 片段着色器源码</span></span><br><span class="line"><span class="type">const</span> <span class="type">char</span>* fragmentShaderSource = <span class="string">"#version 330 core\n"</span></span><br><span class="line"> <span class="string">"out vec4 FragColor;\n"</span></span><br><span class="line"> <span class="string">"void main() {\n"</span></span><br><span class="line"> <span class="string">" FragColor = vec4(1.0f, 1.0f, 1.0f, 1.0f);\n"</span> <span class="comment">// 白色</span></span><br><span class="line"> <span class="string">"}\n\0"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">()</span> </span>{</span><br><span class="line"> <span class="comment">// 1. 初始化 GLFW</span></span><br><span class="line"> <span class="built_in">glfwInit</span>();</span><br><span class="line"> <span class="built_in">glfwWindowHint</span>(GLFW_CONTEXT_VERSION_MAJOR, <span class="number">3</span>);</span><br><span class="line"> <span class="built_in">glfwWindowHint</span>(GLFW_CONTEXT_VERSION_MINOR, <span class="number">3</span>);</span><br><span class="line"> <span class="built_in">glfwWindowHint</span>(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 2. 创建窗口</span></span><br><span class="line"> GLFWwindow* window = <span class="built_in">glfwCreateWindow</span>(<span class="number">800</span>, <span class="number">600</span>, <span class="string">"Simple OpenGL"</span>, <span class="literal">NULL</span>, <span class="literal">NULL</span>);</span><br><span class="line"> <span class="built_in">glfwMakeContextCurrent</span>(window);</span><br><span class="line"> <span class="built_in">gladLoadGLLoader</span>((GLADloadproc)glfwGetProcAddress);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 3. 编译着色器</span></span><br><span class="line"> <span class="type">unsigned</span> <span class="type">int</span> vertexShader = <span class="built_in">glCreateShader</span>(GL_VERTEX_SHADER);</span><br><span class="line"> <span class="built_in">glShaderSource</span>(vertexShader, <span class="number">1</span>, &vertexShaderSource, <span class="literal">NULL</span>);</span><br><span class="line"> <span class="built_in">glCompileShader</span>(vertexShader);</span><br><span class="line"></span><br><span class="line"> <span class="type">unsigned</span> <span class="type">int</span> fragmentShader = <span class="built_in">glCreateShader</span>(GL_FRAGMENT_SHADER);</span><br><span class="line"> <span class="built_in">glShaderSource</span>(fragmentShader, <span class="number">1</span>, &fragmentShaderSource, <span class="literal">NULL</span>);</span><br><span class="line"> <span class="built_in">glCompileShader</span>(fragmentShader);</span><br><span class="line"></span><br><span class="line"> <span class="type">unsigned</span> <span class="type">int</span> shaderProgram = <span class="built_in">glCreateProgram</span>();</span><br><span class="line"> <span class="built_in">glAttachShader</span>(shaderProgram, vertexShader);</span><br><span class="line"> <span class="built_in">glAttachShader</span>(shaderProgram, fragmentShader);</span><br><span class="line"> <span class="built_in">glLinkProgram</span>(shaderProgram);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 4. 定义三角形顶点数据</span></span><br><span class="line"> <span class="type">float</span> vertices[] = {</span><br><span class="line"> <span class="number">-0.5f</span>, <span class="number">-0.5f</span>, <span class="number">0.0f</span>, <span class="comment">// 左下</span></span><br><span class="line"> <span class="number">0.5f</span>, <span class="number">-0.5f</span>, <span class="number">0.0f</span>, <span class="comment">// 右下</span></span><br><span class="line"> <span class="number">0.0f</span>, <span class="number">0.5f</span>, <span class="number">0.0f</span> <span class="comment">// 顶部</span></span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="type">unsigned</span> <span class="type">int</span> VBO, VAO;</span><br><span class="line"> <span class="built_in">glGenVertexArrays</span>(<span class="number">1</span>, &VAO);</span><br><span class="line"> <span class="built_in">glGenBuffers</span>(<span class="number">1</span>, &VBO);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">glBindVertexArray</span>(VAO);</span><br><span class="line"> <span class="built_in">glBindBuffer</span>(GL_ARRAY_BUFFER, VBO);</span><br><span class="line"> <span class="built_in">glBufferData</span>(GL_ARRAY_BUFFER, <span class="built_in">sizeof</span>(vertices), vertices, GL_STATIC_DRAW);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">glVertexAttribPointer</span>(<span class="number">0</span>, <span class="number">3</span>, GL_FLOAT, GL_FALSE, <span class="number">3</span> * <span class="built_in">sizeof</span>(<span class="type">float</span>), (<span class="type">void</span>*)<span class="number">0</span>);</span><br><span class="line"> <span class="built_in">glEnableVertexAttribArray</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 5. 渲染循环</span></span><br><span class="line"> <span class="keyword">while</span> (!<span class="built_in">glfwWindowShouldClose</span>(window)) {</span><br><span class="line"> <span class="built_in">glClearColor</span>(<span class="number">0.2f</span>, <span class="number">0.3f</span>, <span class="number">0.3f</span>, <span class="number">1.0f</span>); <span class="comment">// 深青色背景</span></span><br><span class="line"> <span class="built_in">glClear</span>(GL_COLOR_BUFFER_BIT);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">glUseProgram</span>(shaderProgram);</span><br><span class="line"> <span class="built_in">glBindVertexArray</span>(VAO);</span><br><span class="line"> <span class="built_in">glDrawArrays</span>(GL_TRIANGLES, <span class="number">0</span>, <span class="number">3</span>);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">glfwSwapBuffers</span>(window);</span><br><span class="line"> <span class="built_in">glfwPollEvents</span>();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="built_in">glfwTerminate</span>();</span><br><span class="line"> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>如果能运行成功应该就没问题了。</p>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/c4477b0c/</id>
|
||
<link href="https://blog.biss.click/posts/c4477b0c/"/>
|
||
<published>2026-04-01T20:52:16.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>最近要学计算机图形学，所以会用到<code>OpenGL</code>，配置环境有点繁琐，记录了下来。</p>
|
||
<h1 id="安装Visual-Studio"><a href="#安装Visual-Studio" class="headerlink"]]>
|
||
</summary>
|
||
<title>配置OpenGL环境</title>
|
||
<updated>2026-04-11T11:56:17.363Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="opencv" scheme="https://blog.biss.click/tags/opencv/"/>
|
||
<content>
|
||
<![CDATA[<p>opencv对图像的算数运算，感觉都大同小异，分为以下几种：加减乘除和位运算。</p><table><thead><tr><th>函数</th><th>功能</th><th>应用场景</th></tr></thead><tbody><tr><td>cv2.bitwise_and()</td><td>按位与操作</td><td>掩码操作、图像分割</td></tr><tr><td>cv2.bitwise_or()</td><td>按位或操作</td><td>图像叠加</td></tr><tr><td>cv2.bitwise_not()</td><td>按位取反操作</td><td>图像反色</td></tr><tr><td>cv2.bitwise_xor()</td><td>按位异或操作</td><td>图像差异检测</td></tr></tbody></table><p>因为感觉都差不多，所以只把加法运算代码搬过来</p><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 加法</span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><opencv2/opencv.hpp></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><iostream></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> std;</span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> cv;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>{</span><br><span class="line"> string path1 = <span class="string">"../img/2.jpg"</span>;</span><br><span class="line"> string path2 = <span class="string">"../img/3.jpg"</span>;</span><br><span class="line"></span><br><span class="line"> Mat img1 = <span class="built_in">imread</span>(path1);</span><br><span class="line"> Mat img2 = <span class="built_in">imread</span>(path2);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (img<span class="number">1.</span><span class="built_in">empty</span>() || img<span class="number">2.</span><span class="built_in">empty</span>())</span><br><span class="line"> {</span><br><span class="line"> cout << <span class="string">"无法读取图片，请检查路径！"</span> << endl;</span><br><span class="line"> <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (img<span class="number">1.</span><span class="built_in">size</span>() != img<span class="number">2.</span><span class="built_in">size</span>())</span><br><span class="line"> {</span><br><span class="line"> cout << <span class="string">"尺寸不一致，正在自动调整 img2 的尺寸..."</span> << endl;</span><br><span class="line"> <span class="comment">// 将 img2 缩放到与 img1 相同的尺寸</span></span><br><span class="line"> <span class="built_in">resize</span>(img2, img2, img<span class="number">1.</span><span class="built_in">size</span>());</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> Mat result;</span><br><span class="line"> <span class="built_in">add</span>(img1, img2, result);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"Original Image 1"</span>, img1);</span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"Original Image 2"</span>, img2);</span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"Add Result"</span>, result);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 等待按键后关闭窗口</span></span><br><span class="line"> <span class="built_in">waitKey</span>(<span class="number">0</span>);</span><br><span class="line"> <span class="built_in">destroyAllWindows</span>();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>另外，把代码上传到了自建的git中</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://git.biss.click/biss/opencv-learning/src/branch/master/Arithmetic%20operations"> <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">opencv-learning</div> <div class="tag-link-sitename">opencv-learning</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/b559997d/</id>
|
||
<link href="https://blog.biss.click/posts/b559997d/"/>
|
||
<published>2026-03-17T05:13:08.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>opencv对图像的算数运算，感觉都大同小异，分为以下几种：加减乘除和位运算。</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>函数</th>
|
||
<th>功能</th>
|
||
<th>应用场景</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody><tr>
|
||
<td>cv2]]>
|
||
</summary>
|
||
<title>opencv应用-算术运算</title>
|
||
<updated>2026-04-11T11:56:17.363Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="opencv" scheme="https://blog.biss.click/tags/opencv/"/>
|
||
<content>
|
||
<![CDATA[<p>这里用C++进行编程，发现菜鸟教程只有python的版本，那就记录一下。</p><h1 id="图片读取与展示"><a href="#图片读取与展示" class="headerlink" title="图片读取与展示"></a>图片读取与展示</h1><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 读取图像</span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span><span class="string"><opencv2/opencv.hpp></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span><span class="string"><iostream></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> std;</span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> cv;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">()</span></span>{</span><br><span class="line"> Mat src = <span class="built_in">imread</span>(<span class="string">"../img/1.png"</span>);</span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"input"</span>,src);</span><br><span class="line"> <span class="built_in">waitKey</span>(<span class="number">0</span>);</span><br><span class="line"> <span class="built_in">destroyAllWindows</span>();</span><br><span class="line"> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="图像基本操作"><a href="#图像基本操作" class="headerlink" title="图像基本操作"></a>图像基本操作</h1><h2 id="读取像素"><a href="#读取像素" class="headerlink" title="读取像素"></a>读取像素</h2><p>需要用到三维向量数组Vect3b，这里需要注意的是，Opencv是BGR而不是我们常用的RGB。</p><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 读取像素</span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span><span class="string"><opencv2/opencv.hpp></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span><span class="string"><iostream></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> std;</span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> cv;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>{</span><br><span class="line"> string image_path = <span class="string">"../img/1.png"</span>;</span><br><span class="line"> Mat image = <span class="built_in">imread</span>(image_path);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (image.<span class="built_in">empty</span>()) {</span><br><span class="line"> cout << <span class="string">"错误：无法加载图像，请检查路径是否正确。"</span> << endl;</span><br><span class="line"> <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> Vec3b pixel_value = image.<span class="built_in">at</span><Vec3b>(<span class="number">100</span>, <span class="number">150</span>);</span><br><span class="line"></span><br><span class="line"> cout << <span class="string">"B: "</span> << (<span class="type">int</span>)pixel_value[<span class="number">0</span>] << <span class="string">" "</span></span><br><span class="line"> << <span class="string">"G: "</span> << (<span class="type">int</span>)pixel_value[<span class="number">1</span>] << <span class="string">" "</span></span><br><span class="line"> << <span class="string">"R: "</span> << (<span class="type">int</span>)pixel_value[<span class="number">2</span>] << endl;</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="修改像素"><a href="#修改像素" class="headerlink" title="修改像素"></a>修改像素</h2><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 修改像素</span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span><span class="string"><opencv2/opencv.hpp></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span><span class="string"><iostream></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> std;</span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> cv;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>{</span><br><span class="line"> string image_path = <span class="string">"../img/1.png"</span>;</span><br><span class="line"> Mat image = <span class="built_in">imread</span>(image_path);</span><br><span class="line"> Mat result = image.<span class="built_in">clone</span>();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (image.<span class="built_in">empty</span>()) {</span><br><span class="line"> cout << <span class="string">"错误：无法加载图像，请检查路径是否正确。"</span> << endl;</span><br><span class="line"> <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="function">Rect <span class="title">roi_rect</span><span class="params">(<span class="number">0</span>, <span class="number">0</span>, <span class="number">100</span>, <span class="number">100</span>)</span></span>;</span><br><span class="line"> Mat roi = <span class="built_in">result</span>(roi_rect);</span><br><span class="line"> roi.<span class="built_in">setTo</span>(<span class="built_in">Scalar</span>(<span class="number">0</span>, <span class="number">255</span>, <span class="number">0</span>));</span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"Original (Unchanged)"</span>, image);</span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"Modified Copy"</span>, result);</span><br><span class="line"> <span class="built_in">waitKey</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><opencv2/opencv.hpp></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string"><iostream></span></span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">()</span> </span>{</span><br><span class="line"> <span class="comment">// 读取图像</span></span><br><span class="line"> cv::Mat img = cv::<span class="built_in">imread</span>(<span class="string">"../img/1.png"</span>);</span><br><span class="line"> <span class="keyword">if</span> (img.<span class="built_in">empty</span>()) {</span><br><span class="line"> std::cout << <span class="string">"无法读取图像"</span> << std::endl;</span><br><span class="line"> <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 1. 缩放</span></span><br><span class="line"> cv::Mat resized_img;</span><br><span class="line"> cv::<span class="built_in">resize</span>(img, resized_img, cv::<span class="built_in">Size</span>(<span class="number">200</span>, <span class="number">200</span>));</span><br><span class="line"> cv::<span class="built_in">imshow</span>(<span class="string">"resized_img"</span>, resized_img);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 2. 旋转</span></span><br><span class="line"> cv::Mat rotated_img, M_rot;</span><br><span class="line"> <span class="function">cv::Point2f <span class="title">center</span><span class="params">(img.cols / <span class="number">2.0</span>, img.rows / <span class="number">2.0</span>)</span></span>;</span><br><span class="line"> M_rot = cv::<span class="built_in">getRotationMatrix2D</span>(center, <span class="number">45</span>, <span class="number">1.0</span>);</span><br><span class="line"> cv::<span class="built_in">warpAffine</span>(img, rotated_img, M_rot, img.<span class="built_in">size</span>());</span><br><span class="line"> cv::<span class="built_in">imshow</span>(<span class="string">"rotated_img"</span>, rotated_img);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 3. 平移</span></span><br><span class="line"> cv::Mat translated_img;</span><br><span class="line"> cv::Mat M_trans = (cv::<span class="built_in">Mat_</span><<span class="type">float</span>>(<span class="number">2</span>, <span class="number">3</span>) << <span class="number">1</span>, <span class="number">0</span>, <span class="number">100</span>, <span class="number">0</span>, <span class="number">1</span>, <span class="number">50</span>);</span><br><span class="line"> cv::<span class="built_in">warpAffine</span>(img, translated_img, M_trans, img.<span class="built_in">size</span>());</span><br><span class="line"> cv::<span class="built_in">imshow</span>(<span class="string">"translated_img"</span>, translated_img);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 4. 翻转</span></span><br><span class="line"> cv::Mat flipped_img;</span><br><span class="line"> cv::<span class="built_in">flip</span>(img, flipped_img, <span class="number">1</span>);</span><br><span class="line"> cv::<span class="built_in">imshow</span>(<span class="string">"flipped"</span>, flipped_img);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 显示结果</span></span><br><span class="line"> cv::<span class="built_in">imshow</span>(<span class="string">"Original"</span>, img);</span><br><span class="line"> cv::<span class="built_in">waitKey</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight cpp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 图像通道分离与合并</span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span><span class="string"><opencv2/opencv.hpp></span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span><span class="string"><iostream></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> std;</span><br><span class="line"><span class="keyword">using</span> <span class="keyword">namespace</span> cv;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="type">int</span> <span class="title">main</span><span class="params">()</span></span></span><br><span class="line"><span class="function"></span>{</span><br><span class="line"> string image_path = <span class="string">"../img/1.png"</span>;</span><br><span class="line"> Mat image = <span class="built_in">imread</span>(image_path);</span><br><span class="line"> Mat result = image.<span class="built_in">clone</span>();</span><br><span class="line"> <span class="comment">// 定义向量数组接收通道</span></span><br><span class="line"> vector<Mat> channels;</span><br><span class="line"> <span class="comment">// 拆分</span></span><br><span class="line"> <span class="built_in">split</span>(result,channels);</span><br><span class="line"></span><br><span class="line"> Mat b = channels[<span class="number">0</span>];</span><br><span class="line"> Mat g = channels[<span class="number">1</span>];</span><br><span class="line"> Mat r = channels[<span class="number">2</span>];</span><br><span class="line"></span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"Blue Channel (Grayscale)"</span>, channels[<span class="number">0</span>]);</span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"Green Channel (Grayscale)"</span>, channels[<span class="number">1</span>]);</span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"Red Channel (Grayscale)"</span>, channels[<span class="number">2</span>]);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// merge</span></span><br><span class="line"> Mat merged_img;</span><br><span class="line"> vector<cv::Mat> channels_to_merge;</span><br><span class="line"> channels_to_merge.<span class="built_in">push_back</span>(b);</span><br><span class="line"> channels_to_merge.<span class="built_in">push_back</span>(g);</span><br><span class="line"> channels_to_merge.<span class="built_in">push_back</span>(r);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">merge</span>(channels_to_merge, merged_img);</span><br><span class="line"> <span class="built_in">imshow</span>(<span class="string">"merged"</span>,merged_img);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">waitKey</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span>(<span class="number">0</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/e8f95ead/</id>
|
||
<link href="https://blog.biss.click/posts/e8f95ead/"/>
|
||
<published>2026-03-15T01:56:51.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>这里用C++进行编程，发现菜鸟教程只有python的版本，那就记录一下。</p>
|
||
<h1 id="图片读取与展示"><a href="#图片读取与展示" class="headerlink" title="图片读取与展示"></a>图片读取与展示</h1><figure]]>
|
||
</summary>
|
||
<title>opencv应用-基础操作</title>
|
||
<updated>2026-04-11T11:56:17.363Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="opencv" scheme="https://blog.biss.click/tags/opencv/"/>
|
||
<content>
|
||
<![CDATA[<h1 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h1><p>不知道为什么我们专业看起来与计算机八竿子打不着，竟然要学<code>opencv</code>，那就来记录一下吧！</p><h1 id="Ubuntu-篇"><a href="#Ubuntu-篇" class="headerlink" title="Ubuntu 篇"></a>Ubuntu 篇</h1><p><code>Ubuntu</code>因为有完善的包管理体系，所以配环境相对简单。</p><p>先安装<code>vscode</code>，当然也可以不安装，只是个编辑器；</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://code.visualstudio.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">vscode</div> <div class="tag-link-sitename">Microsoft</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>到这里下载<code>deb</code>格式的软件包，然后<code>dpkg</code>安装即可。可以安装这些扩展：</p><center><img src=https://pic.biss.click/image/3369ff6a-3286-4ccd-b261-a38802f7d9f2.webp)></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><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 先更新软件包</span></span><br><span class="line">apt update</span><br><span class="line">apt upgrade -y</span><br><span class="line"><span class="comment"># 安装C/C++编译器</span></span><br><span class="line">apt install gcc g++</span><br><span class="line"><span class="comment"># 安装opencv</span></span><br><span class="line">apt install -y mesa-utils</span><br><span class="line">apt install -y libopencv-dev</span><br><span class="line">apt install -y opencv</span><br><span class="line">apt install -y python3-opencv <span class="comment">#Python opencv</span></span><br></pre></td></tr></table></figure><p>然后就可以了。</p><h1 id="Windows-篇"><a href="#Windows-篇" class="headerlink" title="Windows 篇"></a>Windows 篇</h1><p><code>Windows</code> 下需要安装<code>Visual Studio</code>，比较简单，官网下载安装就行。选择使用C++桌面开发就行。<br>下载<code>opencv</code>，在下边网站下载<code>Windows</code>安装包，</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://opencv.org/releases/"> <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">opencv</div> <div class="tag-link-sitename">opencv</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div><p>下载后是一个自解压包，解压路径设置成自己想要的路径，<br>把安装路径添加到系统环境变量中，例如<code>D:\Opencv\opencv\build\x64\vc16\bin</code><br>然后应该就没问题了。</p>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/6e3332b/</id>
|
||
<link href="https://blog.biss.click/posts/6e3332b/"/>
|
||
<published>2026-03-14T03:48:36.000Z</published>
|
||
<summary>
|
||
<![CDATA[<h1 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h1><p>不知道为什么我们专业看起来与计算机八竿子打不着，竟然要学<code>opencv</code>，那就来记录一下吧！</p>
|
||
<h1]]>
|
||
</summary>
|
||
<title>配置opencv</title>
|
||
<updated>2026-04-11T11:56:17.363Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<content>
|
||
<![CDATA[<p>Bitwarden 是一款开源、端到端加密的密码管理器，支持 Windows、macOS、Linux、Android、iOS 以及几乎所有主流浏览器。<br>它可以帮你：</p><ul><li>安全存储密码、银行卡、笔记、密钥等敏感信息</li><li>全设备自动同步</li><li>一键自动填充账号密码</li><li>生成高强度随机密码</li><li>检测弱密码、重复密码、泄露密码</li></ul><p>之前一直使用浏览器自带的密码管理器，跨平台不太好用，所以自建一个Bitwarden服务器。<br>但是我们一般用Vaultwarden，占用更小，有一些Bitwarden的商业功能。</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">services:</span></span><br><span class="line"> <span class="attr">vaultwarden:</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">vaultwarden/server:latest</span></span><br><span class="line"> <span class="attr">container_name:</span> <span class="string">vaultwarden</span></span><br><span class="line"> <span class="attr">restart:</span> <span class="string">unless-stopped</span></span><br><span class="line"> <span class="attr">environment:</span></span><br><span class="line"> <span class="attr">DOMAIN:</span> <span class="string">"https://vw.domain.tld"</span> <span class="comment">#更改成自己的域名</span></span><br><span class="line"> <span class="attr">volumes:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">./vw-data/:/data/</span></span><br><span class="line"> <span class="attr">ports:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="number">127.0</span><span class="number">.0</span><span class="number">.1</span><span class="string">:8000:80</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><p>然后使用nignx进行反向代理，然后就可以尽情享用了。</p><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://github.com/dani-garcia/vaultwarden"> <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">vaultwarden</div> <div class="tag-link-sitename">vaultwarden</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/7baa41fc/</id>
|
||
<link href="https://blog.biss.click/posts/7baa41fc/"/>
|
||
<published>2026-02-25T03:09:23.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>Bitwarden 是一款开源、端到端加密的密码管理器，支持 Windows、macOS、Linux、Android、iOS]]>
|
||
</summary>
|
||
<title>自建bitwarden服务</title>
|
||
<updated>2026-04-11T11:56:17.359Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="gitea" scheme="https://blog.biss.click/tags/gitea/"/>
|
||
<content>
|
||
<![CDATA[<p>最近自建了<code>gitea</code>，所以把<code>renovatebot</code>也自建一下，毕竟<code>renovatebot</code>可以自动更新依赖，但是它不对自建<code>git</code>提供服务。<br>这是<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><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">services:</span></span><br><span class="line"> <span class="attr">renovate:</span></span><br><span class="line"> <span class="attr">image:</span> <span class="string">renovate/renovate:latest</span></span><br><span class="line"> <span class="attr">environment:</span></span><br><span class="line"> <span class="attr">RENOVATE_PLATFORM:</span> <span class="string">'gitea'</span></span><br><span class="line"> <span class="attr">RENOVATE_ENDPOINT:</span> <span class="string">'你的git api地址'</span></span><br><span class="line"> <span class="attr">RENOVATE_TOKEN:</span> <span class="string">'token'</span></span><br><span class="line"> <span class="attr">RENOVATE_AUTODISCOVER:</span> <span class="string">'true'</span></span><br><span class="line"> <span class="attr">RENOVATE_GIT_AUTHOR:</span> <span class="string">Renovate</span> <span class="string">Bot</span> <span class="string"><bot@biss.click></span></span><br><span class="line"> <span class="attr">RENOVATE_USERNAME:</span> <span class="string">renovate-bot</span></span><br><span class="line"> <span class="attr">volumes:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">./renovate-data:/tmp/renovate</span></span><br></pre></td></tr></table></figure><p>可以新建一个<code>renovate</code>用户来专门管理，然后登录这个账户创建一个登录<code>token</code>。然后再需要使用这个的仓库添加这个用户为协作者就可以了。<br>这个<code>docker</code>容器在运行后会自动退出，这是正常的。<br>可以在系统crontab新建一个定时任务，这样就可以自动运行更新。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> /www/compose/renovatebot && docker compose run --<span class="built_in">rm</span> renovate</span><br></pre></td></tr></table></figure><div class='liushen-tag-link'><a class="tag-Link" target="_blank" href="https://docs.renovatebot.com/examples/self-hosting/"> <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">Renovatebot</div> </div> <i class="fa-solid fa-angle-right"></i> </div> </a></div>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/56f57c0b/</id>
|
||
<link href="https://blog.biss.click/posts/56f57c0b/"/>
|
||
<published>2026-02-23T02:49:17.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>最近自建了<code>gitea</code>，所以把<code>renovatebot</code>也自建一下，毕竟<code>renovatebot</code>可以自动更新依赖，但是它不对自建<code>git</code>提供服务。<br>这是<code>docke]]>
|
||
</summary>
|
||
<title>自建renovate-bot</title>
|
||
<updated>2026-04-11T11:56:17.359Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="生活" scheme="https://blog.biss.click/tags/life/"/>
|
||
<content>
|
||
<![CDATA[<p>各位亲朋好友、合作伙伴及屏幕前的你：</p><p>值此二〇二六年蛇年来临之际，为贯彻落实“快乐至上”的核心价值观，进一步提升全体人员的幸福指数，现将有关事项通知如下：</p><p>一、各单位要切实做好“吃好喝好”保障工作，严禁在假期期间进行任何形式的emo。</p><p>二、请各有关人员在收到本通知后，务必在下方留言区留下你的新年愿望，由后台系统统一收集并祝愿其实现。</p><p>三、祝大家在新的一年里，身体健康，万事如意，所得皆所愿，所行化坦途！</p>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/5785bd01/</id>
|
||
<link href="https://blog.biss.click/posts/5785bd01/"/>
|
||
<published>2026-02-13T22:56:18.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>各位亲朋好友、合作伙伴及屏幕前的你：</p>
|
||
<p>值此二〇二六年蛇年来临之际，为贯彻落实“快乐至上”的核心价值观，进一步提升全体人员的幸福指数，现将有关事项通知如下：</p>
|
||
<p>一、各单位要切实做好“吃好喝好”保障工作，严禁在假期期间进行任何形式的emo。</p>
|
||
<]]>
|
||
</summary>
|
||
<title>新年快乐！</title>
|
||
<updated>2026-04-11T11:56:17.359Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="建站手札" scheme="https://blog.biss.click/categories/website/"/>
|
||
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
|
||
<content>
|
||
<![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="/") #[i.fas.fa-rss] 个人博客</span><br><span class="line"> a(href="https://github.com/bishshi") #[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="https://git.biss.click/biss") #[i.fas.fa-code] 代码仓库</span><br><span class="line"> a(href="https://mm.biss.click") #[i.fas.fa-pen-nib] 日常yy</span><br><span class="line"> a(href="https://statstic.biss.click") #[i.fas.fa-users] 访客统计</span><br><span class="line"> a(href="https://pic.biss.click") #[i.fas.fa-image] 图床</span><br><span class="line"> a(href="https://chat.biss.click") #[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="https://cover.biss.click") #[i.fas.fa-palette] 封面设计</span><br><span class="line"></span><br><span class="line"> a.nav-site-title(href=url_for('/'))</span><br><span class="line"> if theme.nav.logo</span><br><span class="line"> img.site-icon(src=url_for(theme.nav.logo) alt='Logo')</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 === 'post' && theme.nav.display_post_title</span><br><span class="line"> a.nav-page-title(href='javascript:void(0);' onclick='btf.scrollToDest(0, 500)')</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('includes/header/menu_item', {}, {cache: true})</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='javascript:void(0);' onclick='randomPost()')</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>{</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">}</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> {</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">}</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> {</span><br><span class="line"> <span class="attribute">padding-left</span>: <span class="number">0</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">.site-page</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">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">}</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> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-id">#menus</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">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">}</span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-id">#blog-info</span> {</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">}</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>) {</span><br><span class="line"> <span class="selector-id">#nav</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><br><span class="line"> <span class="selector-id">#nav-group</span> {</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"> }</span><br><span class="line"> <span class="selector-id">#rightside</span> {</span><br><span class="line"> <span class="attribute">right</span>: -<span class="number">42px</span>;</span><br><span class="line"> }</span><br><span class="line">}</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> {</span><br><span class="line"> <span class="attribute">overflow</span>: visible <span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#ls-menu-container</span> {</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">}</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> {</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">}</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> {</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">""</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">}</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> {</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">}</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> {</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">}</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> { <span class="attribute">margin-bottom</span>: <span class="number">22px</span>; }</span><br><span class="line"><span class="selector-class">.ls-section</span><span class="selector-pseudo">:last-child</span> { <span class="attribute">margin-bottom</span>: <span class="number">0</span>; }</span><br><span class="line"><span class="selector-class">.ls-title</span> { </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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.ls-grid</span> { </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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.ls-grid</span> <span class="selector-tag">a</span> { </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">}</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> { </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">}</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> { </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">}</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">'dark'</span>]</span> <span class="selector-id">#ls-menu-panel</span> {</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">}</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">'dark'</span>]</span> <span class="selector-class">.ls-title</span> { <span class="attribute">color</span>: <span class="number">#eee</span>; }</span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">'dark'</span>]</span> <span class="selector-class">.ls-grid</span> <span class="selector-tag">a</span> { </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">}</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> {</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">}</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> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.nav-page-title</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-id">#blog-info</span> {</span><br><span class="line"> <span class="attribute">overflow</span>: visible <span class="meta">!important</span>;</span><br><span class="line">}</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"><link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="/css/nav.css"></span></span><br></pre></td></tr></table></figure><p>然后重新构建应该就可以看到效果了。</p>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/7e921903/</id>
|
||
<link href="https://blog.biss.click/posts/7e921903/"/>
|
||
<published>2026-02-09T23:11:14.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。</p>
|
||
<div class='liushen-tag-link'><a class="tag-Link" target="_blank"]]>
|
||
</summary>
|
||
<title>添加网站左上角菜单</title>
|
||
<updated>2026-04-11T11:56:17.359Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="gitea" scheme="https://blog.biss.click/tags/gitea/"/>
|
||
<content>
|
||
<![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">${{</span> <span class="string">runner.os</span> <span class="string">}}-nodeModules-${{</span> <span class="string">hashFiles('package-lock.json')</span> <span class="string">}}-${{</span> <span class="string">hashFiles('package.json')</span> <span class="string">}}</span></span><br><span class="line"> <span class="attr">restore-keys:</span> <span class="string">|</span></span><br><span class="line"><span class="string"> ${{ runner.os }}-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">"22.x"</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">'true'</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 "${{ gitea.actor }}"</span></span><br><span class="line"><span class="string"> git config user.email "${{ gitea.actor }}@noreply.gitea.io"</span></span><br><span class="line"><span class="string"> git add .</span></span><br><span class="line"><span class="string"> git commit -m "${{ gitea.event.head_commit.message }}··[$(date +"%Z %Y-%m-%d %A %H:%M:%S")]"</span></span><br><span class="line"><span class="string"> git push --force --quiet "https://${{ gitea.actor }}:${{ secrets.DEPLOY_TOKEN }}@git.biss.click/biss/blog.git" 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>
|
||
<id>https://blog.biss.click/posts/d2c8521/</id>
|
||
<link href="https://blog.biss.click/posts/d2c8521/"/>
|
||
<published>2026-02-07T04:30:39.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>在上一篇文章中已经完成了gitea的安装<br>那么博客源码迁移倒是没问题，直接<code>git remote add origin</code>就行，但是action文件就有些变更。<br>这是我修改的action文件：</p>
|
||
<figure]]>
|
||
</summary>
|
||
<title>将博客仓库转移到gitea</title>
|
||
<updated>2026-04-11T11:56:17.363Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="gitea" scheme="https://blog.biss.click/tags/gitea/"/>
|
||
<content>
|
||
<![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">'Git Version Control'</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">'Git Version Control'</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/{custom,data,<span class="built_in">log</span>}</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">""</span> --<span class="built_in">rm</span> -it docker.io/gitea/act_runner:latest act_runner generate-config > config.yaml</span><br></pre></td></tr></table></figure><p>在后台工作流运行器可以看见就没问题了。</p>]]>
|
||
</content>
|
||
<id>https://blog.biss.click/posts/34725d47/</id>
|
||
<link href="https://blog.biss.click/posts/34725d47/"/>
|
||
<published>2026-02-06T22:32:04.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>今天想把网站的源码转移到自建git仓，所以先来安装gitea吧（gitlab过于庞大，服务器配置不够）<br>PS:我的服务器为2C2G</p>
|
||
<h1 id="安装gitea"><a href="#安装gitea" class="headerlink"]]>
|
||
</summary>
|
||
<title>安装gitea</title>
|
||
<updated>2026-04-11T11:56:17.359Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="建站手札" scheme="https://blog.biss.click/categories/technology/website/"/>
|
||
<content>
|
||
<![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">"8108:8108"</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">'--data-dir /data --api-key=填写key --enable-cors'</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">'typesense'</span>);</span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"><span class="keyword">const</span> xml2js = <span class="built_in">require</span>(<span class="string">'xml2js'</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> = {</span><br><span class="line"> <span class="attr">apiKey</span>: <span class="string">'你的Admin-API-Key'</span>, <span class="comment">// 必须是 Admin Key</span></span><br><span class="line"> <span class="attr">host</span>: <span class="string">'你的Typesense主机地址'</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">'https'</span>,</span><br><span class="line"> <span class="attr">collectionName</span>: <span class="string">'blogs'</span></span><br><span class="line">};</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>({</span><br><span class="line"> <span class="string">'nodes'</span>: [{ <span class="string">'host'</span>: <span class="variable constant_">CONFIG</span>.<span class="property">host</span>, <span class="string">'port'</span>: <span class="variable constant_">CONFIG</span>.<span class="property">port</span>, <span class="string">'protocol'</span>: <span class="variable constant_">CONFIG</span>.<span class="property">protocol</span> }],</span><br><span class="line"> <span class="string">'apiKey'</span>: <span class="variable constant_">CONFIG</span>.<span class="property">apiKey</span>,</span><br><span class="line"> <span class="string">'connectionTimeoutSeconds'</span>: <span class="number">5</span></span><br><span class="line">});</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>) {</span><br><span class="line"> <span class="keyword">try</span> {</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">'./public/search.xml'</span>, <span class="string">'utf8'</span>);</span><br><span class="line"> <span class="keyword">const</span> parser = <span class="keyword">new</span> xml2js.<span class="title class_">Parser</span>({ <span class="attr">explicitArray</span>: <span class="literal">false</span> });</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> =></span> ({</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"> }));</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> {</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"> } <span class="keyword">catch</span> (err) {</span><br><span class="line"> <span class="keyword">const</span> schema = {</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"> { <span class="attr">name</span>: <span class="string">'title'</span>, <span class="attr">type</span>: <span class="string">'string'</span>, <span class="attr">locale</span>: <span class="string">'zh'</span>},</span><br><span class="line"> { <span class="attr">name</span>: <span class="string">'content'</span>, <span class="attr">type</span>: <span class="string">'string'</span>, <span class="attr">locale</span>: <span class="string">'zh'</span>},</span><br><span class="line"> { <span class="attr">name</span>: <span class="string">'url'</span>, <span class="attr">type</span>: <span class="string">'string'</span> },</span><br><span class="line"> { <span class="attr">name</span>: <span class="string">'categories'</span>, <span class="attr">type</span>: <span class="string">'string[]'</span>, <span class="attr">facet</span>: <span class="literal">true</span> },</span><br><span class="line"> { <span class="attr">name</span>: <span class="string">'tags'</span>, <span class="attr">type</span>: <span class="string">'string[]'</span>, <span class="attr">facet</span>: <span class="literal">true</span> }</span><br><span class="line"> ]</span><br><span class="line"> };</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">'Collection created!'</span>);</span><br><span class="line"> }</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">${documents.length}</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, { <span class="attr">action</span>: <span class="string">'upsert'</span> });</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'Sync complete!'</span>);</span><br><span class="line"></span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">'Sync failed:'</span>, error);</span><br><span class="line"> }</span><br><span class="line">}</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">'https'</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>({</span><br><span class="line"> <span class="string">"description"</span>: <span class="string">"Public search only key"</span>,</span><br><span class="line"> <span class="string">"actions"</span>: [<span class="string">"documents:search"</span>],</span><br><span class="line"> <span class="string">"collections"</span>: [<span class="string">"blogs"</span>]</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> options = {</span><br><span class="line"> <span class="attr">hostname</span>: <span class="string">''</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">'/keys'</span>,</span><br><span class="line"> <span class="attr">method</span>: <span class="string">'POST'</span>,</span><br><span class="line"> <span class="attr">headers</span>: {</span><br><span class="line"> <span class="string">'X-TYPESENSE-API-KEY'</span>: <span class="string">'你的admin key'</span>,</span><br><span class="line"> <span class="string">'Content-Type'</span>: <span class="string">'application/json'</span>,</span><br><span class="line"> <span class="string">'Content-Length'</span>: data.<span class="property">length</span></span><br><span class="line"> }</span><br><span class="line">};</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> =></span> {</span><br><span class="line"> res.<span class="title function_">on</span>(<span class="string">'data'</span>, <span class="function"><span class="params">d</span> =></span> { process.<span class="property">stdout</span>.<span class="title function_">write</span>(d); });</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">req.<span class="title function_">on</span>(<span class="string">'error'</span>, <span class="function"><span class="params">error</span> =></span> { <span class="variable language_">console</span>.<span class="title function_">error</span>(error); });</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"><script</span> <span class="string">src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script></span></span><br><span class="line"><span class="bullet">-</span> <span class="string"><script</span> <span class="string">src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script></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>) {</span><br><span class="line"> <span class="string">'use strict'</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> = {</span><br><span class="line"> <span class="attr">apiKey</span>: <span class="string">""</span>, <span class="comment">// ⚠️ 建议使用 Search-Only API Key</span></span><br><span class="line"> <span class="attr">server</span>: {</span><br><span class="line"> <span class="attr">host</span>: <span class="string">"host"</span>,</span><br><span class="line"> <span class="attr">port</span>: <span class="string">"443"</span>,</span><br><span class="line"> <span class="attr">protocol</span>: <span class="string">"https"</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">indexName</span>: <span class="string">"blogs"</span>,</span><br><span class="line"> <span class="attr">searchParams</span>: {</span><br><span class="line"> <span class="attr">query_by</span>: <span class="string">"title,content"</span>,</span><br><span class="line"> <span class="attr">highlight_full_fields</span>: <span class="string">"title,content"</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"> },</span><br><span class="line"> <span class="attr">ui</span>: {</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"> }</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span 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>) {</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">'hits'</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">'<div class="ts-empty">'</span> +</span><br><span class="line"> <span class="string">'<div style="color: #f44336;"><i class="fas fa-exclamation-triangle" style="font-size: 3rem;"></i></div>'</span> +</span><br><span class="line"> <span class="string">'<div style="font-size: 1.1rem; font-weight: bold; margin: 15px 0;">搜索服务加载失败</div>'</span> +</span><br><span class="line"> <span class="string">'<div style="font-size: 0.9rem; color: #666; line-height: 1.8;">'</span> +</span><br><span class="line"> <span class="string">'<p>依赖库未能正确加载，请检查以下配置：</p>'</span> +</span><br><span class="line"> <span class="string">'<ol style="text-align: left; max-width: 500px; margin: 15px auto;">'</span> +</span><br><span class="line"> <span class="string">'<li>确认已在 <code>_config.butterfly.yml</code> 中正确引入依赖</li>'</span> +</span><br><span class="line"> <span class="string">'<li>检查 JS 文件加载顺序（先 instantsearch.js，再 adapter）</li>'</span> +</span><br><span class="line"> <span class="string">'<li>尝试更换 CDN 或使用本地文件</li>'</span> +</span><br><span class="line"> <span class="string">'<li>打开浏览器控制台查看详细错误信息</li>'</span> +</span><br><span class="line"> <span class="string">'</ol>'</span> +</span><br><span class="line"> <span class="string">'</div>'</span> +</span><br><span class="line"> <span class="string">'<div style="margin-top: 20px;">'</span> +</span><br><span class="line"> <span class="string">'<button onclick="location.reload()" style="padding: 10px 20px; background: #49b1f5; color: white; border: none; border-radius: 5px; cursor: pointer;">重新加载页面</button>'</span> +</span><br><span class="line"> <span class="string">'</div>'</span> +</span><br><span class="line"> <span class="string">'</div>'</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span 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"> <div id="typesense-search-mask" class="ts-mask" style="display:none;"></span></span><br><span class="line"><span class="string"> <div id="typesense-search-container" class="ts-container"></span></span><br><span class="line"><span class="string"> <div class="ts-header"></span></span><br><span class="line"><span class="string"> <span class="ts-title"></span></span><br><span class="line"><span class="string"> <i class="fas fa-search"></i> 本站搜索</span></span><br><span class="line"><span class="string"> </span></span></span><br><span class="line"><span class="string"> <span id="close-typesense" class="ts-close" aria-label="关闭搜索">&times;</span></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <div id="searchbox"></div></span></span><br><span class="line"><span class="string"> <div id="stats" class="ts-stats"></div></span></span><br><span class="line"><span class="string"> <div id="hits" class="ts-hits"></div></span></span><br><span class="line"><span class="string"> <div id="pagination" class="ts-pagination"></div></span></span><br><span class="line"><span class="string"> <div class="ts-footer"></span></span><br><span class="line"><span class="string"> <small>Search powered by <strong>Typesense</strong></small></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> <style></span></span><br><span class="line"><span class="string"> .ts-mask {</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"> }</span></span><br><span class="line"><span class="string"> .ts-mask.active { opacity: 1; }</span></span><br><span class="line"><span class="string"> .ts-container {</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"> }</span></span><br><span class="line"><span class="string"> .ts-mask.active .ts-container {</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"> }</span></span><br><span class="line"><span class="string"> .ts-header {</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"> }</span></span><br><span class="line"><span class="string"> .ts-title {</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"> }</span></span><br><span class="line"><span class="string"> .ts-close {</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"> }</span></span><br><span class="line"><span class="string"> .ts-close:hover {</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"> }</span></span><br><span class="line"><span class="string"> .ais-SearchBox-input {</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"> }</span></span><br><span class="line"><span class="string"> .ais-SearchBox-input:focus {</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"> }</span></span><br><span class="line"><span class="string"> .ts-stats {</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"> }</span></span><br><span class="line"><span class="string"> .ts-hits {</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"> }</span></span><br><span class="line"><span class="string"> .ts-hits::-webkit-scrollbar { width: 6px; }</span></span><br><span class="line"><span class="string"> .ts-hits::-webkit-scrollbar-track {</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"> }</span></span><br><span class="line"><span class="string"> .ts-hits::-webkit-scrollbar-thumb {</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"> }</span></span><br><span class="line"><span class="string"> .ts-empty {</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"> }</span></span><br><span class="line"><span class="string"> .ts-empty i {</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"> }</span></span><br><span class="line"><span class="string"> .ts-empty code {</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"> }</span></span><br><span class="line"><span class="string"> .ts-empty ol {</span></span><br><span class="line"><span class="string"> padding-left: 20px;</span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string"> .ts-empty li {</span></span><br><span class="line"><span class="string"> margin: 8px 0;</span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string"> .ts-result-item {</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"> }</span></span><br><span class="line"><span class="string"> .ts-result-item:hover {</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"> }</span></span><br><span class="line"><span class="string"> .ts-result-title {</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"> }</span></span><br><span class="line"><span class="string"> .ts-result-content {</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"> }</span></span><br><span class="line"><span class="string"> .ts-result-item mark {</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"> }</span></span><br><span class="line"><span class="string"> .ts-pagination {</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"> }</span></span><br><span class="line"><span class="string"> .ais-Pagination-list {</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"> }</span></span><br><span class="line"><span class="string"> .ais-Pagination-link {</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"> }</span></span><br><span class="line"><span class="string"> .ais-Pagination-link:hover {</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"> }</span></span><br><span class="line"><span class="string"> .ais-Pagination-item--selected .ais-Pagination-link {</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"> }</span></span><br><span class="line"><span class="string"> .ts-footer {</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"> }</span></span><br><span class="line"><span class="string"> @media (max-width: 768px) {</span></span><br><span class="line"><span class="string"> .ts-container {</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"> }</span></span><br><span class="line"><span class="string"> .ts-hits { max-height: 50vh; }</span></span><br><span class="line"><span class="string"> }</span></span><br><span class="line"><span class="string"> [data-theme="dark"] .ts-mask,</span></span><br><span class="line"><span class="string"> .dark-mode .ts-mask {</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"> }</span></span><br><span class="line"><span class="string"> </style></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">'beforeend'</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">'typesense-search-mask'</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">'close-typesense'</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">'typesense-search-container'</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>) {</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">'block'</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">'active'</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">'hidden'</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (!isInitialized) {</span><br><span class="line"> <span class="title function_">initTypesense</span>();</span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">focusSearchInput</span>();</span><br><span class="line"> }</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>) {</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">'active'</span>);</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> mask.<span class="property">style</span>.<span class="property">display</span> = <span class="string">'none'</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">''</span>;</span><br><span class="line"> }, <span class="variable constant_">CONFIG</span>.<span class="property">ui</span>.<span class="property">animationDuration</span>);</span><br><span class="line"> }</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>) {</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">'.ais-SearchBox-input'</span>);</span><br><span class="line"> <span class="keyword">if</span> (input) {</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"> } <span class="keyword">else</span> <span class="keyword">if</span> (retryCount < <span class="variable constant_">CONFIG</span>.<span class="property">ui</span>.<span class="property">maxRetries</span>) {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="title function_">focusSearchInput</span>(retryCount + <span class="number">1</span>);</span><br><span class="line"> }, <span class="variable constant_">CONFIG</span>.<span class="property">ui</span>.<span class="property">retryDelay</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span 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">'click'</span>, <span class="keyword">function</span>(<span class="params">e</span>) {</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">'.search-typesense-trigger'</span>)) {</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"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> closeBtn.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, closeSearch);</span><br><span class="line"> mask.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="keyword">function</span>(<span class="params">e</span>) {</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"> });</span><br><span class="line"> container.<span class="title function_">addEventListener</span>(<span class="string">'click'</span>, <span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line"> e.<span class="title function_">stopPropagation</span>();</span><br><span class="line"> });</span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">'keydown'</span>, <span class="keyword">function</span>(<span class="params">e</span>) {</span><br><span class="line"> <span class="keyword">if</span> (e.<span class="property">key</span> === <span class="string">'Escape'</span> && isSearchOpen) {</span><br><span class="line"> <span class="title function_">closeSearch</span>();</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> ((e.<span class="property">ctrlKey</span> || e.<span class="property">metaKey</span>) && e.<span class="property">key</span> === <span class="string">'k'</span>) {</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"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span 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>) {</span><br><span class="line"> <span class="keyword">if</span> (isInitialized || searchInstance) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">'Typesense 搜索已初始化'</span>);</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</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">'undefined'</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">'undefined'</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">'undefined'</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">'📦 依赖库检查 ('</span> + (initRetryCount + <span class="number">1</span>) + <span class="string">'/'</span> + <span class="variable constant_">MAX_INIT_RETRIES</span> + <span class="string">'):'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">' instantsearch.js:'</span>, instantsearchLoaded ? <span class="string">'✅ 已加载'</span> : <span class="string">'❌ 未加载'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">' TypesenseAdapter:'</span>, adapterLoaded ? <span class="string">'✅ 已加载'</span> : <span class="string">'❌ 未加载'</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (!instantsearchLoaded || !adapterLoaded) {</span><br><span class="line"> initRetryCount++;</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (initRetryCount >= <span class="variable constant_">MAX_INIT_RETRIES</span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">''</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">'❌ Typesense 依赖库加载失败！'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">'━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">''</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">'🔧 请检查 _config.butterfly.yml 配置：'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">''</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">'inject:'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">' bottom: # ⚠️ 使用 bottom 而不是 head'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">' - <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.56.0"></script>'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">' - <script src="https://cdn.jsdelivr.net/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script>'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">' - <script src="/js/typesense-search-fixed.js"></script>'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">''</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">'💡 或在控制台手动检查：'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">' typeof instantsearch'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">' typeof TypesenseInstantSearchAdapter'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">''</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">'━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'</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"> }</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">'⏳ 100ms 后重试...'</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"> }</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">'🚀 开始初始化 Typesense...'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">const</span> typesenseAdapter = <span class="keyword">new</span> <span class="title class_">TypesenseInstantSearchAdapter</span>({</span><br><span class="line"> <span class="attr">server</span>: {</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>: [{</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"> }],</span><br><span class="line"> <span class="attr">cacheSearchResultsForSeconds</span>: <span class="number">120</span></span><br><span class="line"> },</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"> });</span><br><span class="line"></span><br><span class="line"> searchInstance = <span class="title function_">instantsearch</span>({</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"> });</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>({</span><br><span class="line"> <span class="attr">container</span>: <span class="string">'#searchbox'</span>,</span><br><span class="line"> <span class="attr">placeholder</span>: <span class="string">'输入关键词寻找故事...'</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"> }),</span><br><span class="line"> instantsearch.<span class="property">widgets</span>.<span class="title function_">stats</span>({</span><br><span class="line"> <span class="attr">container</span>: <span class="string">'#stats'</span>,</span><br><span class="line"> <span class="attr">templates</span>: {</span><br><span class="line"> <span class="attr">text</span>: <span class="keyword">function</span>(<span class="params">data</span>) {</span><br><span class="line"> <span class="keyword">if</span> (!data.<span class="property">query</span>) <span class="keyword">return</span> <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'找到 <strong>'</span> + data.<span class="property">nbHits</span> + <span class="string">'</strong> 条结果 ('</span> + data.<span class="property">processingTimeMS</span> + <span class="string">'ms)'</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }),</span><br><span class="line"> instantsearch.<span class="property">widgets</span>.<span class="title function_">hits</span>({</span><br><span class="line"> <span class="attr">container</span>: <span class="string">'#hits'</span>,</span><br><span class="line"> <span class="attr">templates</span>: {</span><br><span class="line"> <span class="attr">empty</span>: <span class="keyword">function</span>(<span class="params">results</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'<div class="ts-empty">'</span> +</span><br><span class="line"> <span class="string">'<div><i class="fas fa-search"></i></div>'</span> +</span><br><span class="line"> <span class="string">'<div>找不到与 "<strong>'</span> + results.<span class="property">query</span> + <span class="string">'</strong>" 相关的内容</div>'</span> +</span><br><span class="line"> <span class="string">'<div style="margin-top: 10px;">试试其他关键词吧 (´·ω·`)</div>'</span> +</span><br><span class="line"> <span class="string">'</div>'</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">item</span>: <span class="keyword">function</span>(<span class="params">hit</span>) {</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> && 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">''</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> contentHighlight = hit.<span class="property">_highlightResult</span> && 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">''</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> > <span class="number">200</span>) {</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">'...'</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> <span class="string">'<a href="'</span> + hit.<span class="property">url</span> + <span class="string">'" class="ts-result-item">'</span> +</span><br><span class="line"> <span class="string">'<div class="ts-result-title">'</span> + titleHighlight + <span class="string">'</div>'</span> +</span><br><span class="line"> <span class="string">'<div class="ts-result-content">'</span> + contentHighlight + <span class="string">'</div>'</span> +</span><br><span class="line"> <span class="string">'</a>'</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }),</span><br><span class="line"> instantsearch.<span class="property">widgets</span>.<span class="title function_">pagination</span>({</span><br><span class="line"> <span class="attr">container</span>: <span class="string">'#pagination'</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"> })</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">'✅ Typesense 初始化成功！'</span>);</span><br><span class="line"></span><br><span class="line"> searchInstance.<span class="title function_">on</span>(<span class="string">'render'</span>, <span class="keyword">function</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">if</span> (isSearchOpen) {</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">'.ais-SearchBox-input'</span>);</span><br><span class="line"> <span class="keyword">if</span> (input && <span class="variable language_">document</span>.<span class="property">activeElement</span> !== input) {</span><br><span class="line"> input.<span class="title function_">focus</span>();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> } <span class="keyword">catch</span> (error) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">'❌ 初始化失败:'</span>, error);</span><br><span class="line"> <span class="title function_">showErrorMessage</span>();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span 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>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'🔍 Typesense 搜索已准备就绪'</span>);</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'💡 快捷键: Ctrl/Cmd + K'</span>);</span><br><span class="line"> }</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">'loading'</span>) {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">'DOMContentLoaded'</span>, init);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="title function_">init</span>();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// ============================================================================</span></span><br><span class="line"> <span 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> = {</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>) { <span class="keyword">return</span> isSearchOpen; },</span><br><span class="line"> <span class="attr">getInstance</span>: <span class="keyword">function</span>(<span class="params"></span>) { <span class="keyword">return</span> searchInstance; }</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line">})();</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>
|
||
<id>https://blog.biss.click/posts/f287c563/</id>
|
||
<link href="https://blog.biss.click/posts/f287c563/"/>
|
||
<published>2026-02-05T05:14:16.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>最近在构建班级博客，用<code>ghost cms</code>，在构建搜索时发现了typesense，所以把他移植到这个博客上。</p>
|
||
<h1 id="安装typesense"><a href="#安装typesense" class="headerlink"]]>
|
||
</summary>
|
||
<title>添加typesense搜索</title>
|
||
<updated>2026-04-11T11:56:17.359Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="建站手札" scheme="https://blog.biss.click/categories/website/"/>
|
||
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
|
||
<content>
|
||
<![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> {</span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">'CascadiaCodePL'</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">'/butterflyChange/fonts/font.woff2'</span>) <span class="built_in">format</span>(<span class="string">"woff2"</span>);</span><br><span class="line">}</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> {</span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">'webfont'</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">'.eot'</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">'.eot'</span>) <span class="built_in">format</span>(<span class="string">'embedded-opentype'</span>), <span class="comment">/* IE6-IE8 */</span></span><br><span class="line"> <span class="built_in">url</span>(<span class="string">'.woff2'</span>) <span class="built_in">format</span>(<span class="string">'woff2'</span>),</span><br><span class="line"> <span class="built_in">url</span>(<span class="string">'.woff'</span>) <span class="built_in">format</span>(<span class="string">'woff'</span>), <span class="comment">/*chrome、firefox */</span></span><br><span class="line"> <span class="built_in">url</span>(<span class="string">'.ttf'</span>) <span class="built_in">format</span>(<span class="string">'truetype'</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">'.svg'</span>) <span class="built_in">format</span>(<span class="string">'svg'</span>); <span class="comment">/* iOS 4.1- */</span></span><br><span class="line">}```</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">- <link rel="stylesheet" href="/css/<span class="attribute">font</span><span class="selector-class">.css</span>"></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>
|
||
<id>https://blog.biss.click/posts/b5601a7e/</id>
|
||
<link href="https://blog.biss.click/posts/b5601a7e/"/>
|
||
<published>2026-01-15T23:47:15.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示</p>
|
||
<div class="note no-icon]]>
|
||
</summary>
|
||
<title>自定义字体</title>
|
||
<updated>2026-04-11T11:56:17.347Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="建站手札" scheme="https://blog.biss.click/categories/website/"/>
|
||
<category term="网站" scheme="https://blog.biss.click/tags/web/"/>
|
||
<content>
|
||
<![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">"DOMContentLoaded"</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">initializeCard</span>();</span><br><span class="line">});</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">"pjax:complete"</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">initializeCard</span>();</span><br><span class="line">});</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>) {</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">}</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>) {</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">"card-widget-schedule"</span>);</span><br><span class="line"> <span class="keyword">if</span> (e) {</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">"#pBar_year"</span>).<span class="property">value</span> = asideDay;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">"#p_span_year"</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">"%"</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">".schedule-r0 .schedule-d1 .aside-span2"</span>).<span class="property">innerHTML</span> = <span class="string">`还剩<a> <span class="subst">${(<span class="number">365</span> - asideDay).toFixed(<span class="number">0</span>)}</span> </a>天`</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">"#pBar_month"</span>).<span class="property">value</span> = date;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">"#pBar_month"</span>).<span class="property">max</span> = dates;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">"#p_span_month"</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">"%"</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">".schedule-r1 .schedule-d1 .aside-span2"</span>).<span class="property">innerHTML</span> = <span class="string">`还剩<a> <span class="subst">${(dates - date)}</span> </a>天`</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">"#pBar_week"</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">"#p_span_week"</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">"%"</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">".schedule-r2 .schedule-d1 .aside-span2"</span>).<span class="property">innerHTML</span> = <span class="string">`还剩<a> <span class="subst">${(<span class="number">7</span> - (week === <span class="number">0</span> ? <span class="number">7</span> : week))}</span> </a>天`</span>;</span><br><span class="line"> }</span><br><span class="line">}</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>) {</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">"card-widget-calendar"</span>);</span><br><span class="line"> <span class="keyword">if</span> (e) {</span><br><span class="line"> <span class="keyword">const</span> isLeapYear = year % <span class="number">4</span> === <span class="number">0</span> && 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">"周日"</span>, <span class="string">"周一"</span>, <span class="string">"周二"</span>, <span class="string">"周三"</span>, <span class="string">"周四"</span>, <span class="string">"周五"</span>, <span class="string">"周六"</span>][week];</span><br><span class="line"> <span class="keyword">const</span> monthData = [</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"1月"</span>, <span class="attr">days</span>: <span class="number">31</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"2月"</span>, <span class="attr">days</span>: isLeapYear ? <span class="number">29</span> : <span class="number">28</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"3月"</span>, <span class="attr">days</span>: <span class="number">31</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"4月"</span>, <span class="attr">days</span>: <span class="number">30</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"5月"</span>, <span class="attr">days</span>: <span class="number">31</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"6月"</span>, <span class="attr">days</span>: <span class="number">30</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"7月"</span>, <span class="attr">days</span>: <span class="number">31</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"8月"</span>, <span class="attr">days</span>: <span class="number">31</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"9月"</span>, <span class="attr">days</span>: <span class="number">30</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"10月"</span>, <span class="attr">days</span>: <span class="number">31</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"11月"</span>, <span class="attr">days</span>: <span class="number">30</span> },</span><br><span class="line"> { <span class="attr">month</span>: <span class="string">"12月"</span>, <span class="attr">days</span>: <span class="number">31</span> }</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">""</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">"#calendar-main"</span>);</span><br><span class="line"> <span class="keyword">const</span> l = e.<span class="title function_">querySelector</span>(<span class="string">"#calendar-date"</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">"64px"</span>, <span class="string">"48px"</span>, <span class="string">"36px"</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 < o; i++) {</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">${i}</span>`</span>)) {</span><br><span class="line"> c.<span class="property">innerHTML</span> += <span class="string">`<div class='calendar-r<span class="subst">${i}</span>'></div>`</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j < <span class="number">7</span>; j++) {</span><br><span class="line"> <span class="keyword">if</span> (i === <span class="number">0</span> && j === t) {</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"> }</span><br><span class="line"> <span class="keyword">const</span> r = n === date ? <span class="string">" class='now'"</span> : <span class="string">""</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">${i}</span> .calendar-d<span class="subst">${j}</span> a`</span>)) {</span><br><span class="line"> c.<span class="title function_">querySelector</span>(<span class="string">`.calendar-r<span class="subst">${i}</span>`</span>).<span class="property">innerHTML</span> += <span class="string">`<div class='calendar-d<span class="subst">${j}</span>'><a<span class="subst">${r}</span>><span class="subst">${n}</span></a></div>`</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (n >= dates) {</span><br><span class="line"> n = <span class="string">""</span>;</span><br><span class="line"> d = <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (d) {</span><br><span class="line"> n += <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="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">"A"</span>);</span><br><span class="line"> ganzhiYear = chineseLunar.<span class="title function_">format</span>(lunarDate, <span class="string">"T"</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">"M"</span>);</span><br><span class="line"> lunarDay = chineseLunar.<span class="title function_">format</span>(lunarDate, <span class="string">"d"</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">"2026/02/16 00:00:00"</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">${<span class="keyword">new</span> <span class="built_in">Date</span>().getFullYear()}</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> >= <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">"#calendar-week"</span>).<span class="property">innerHTML</span> = <span class="string">`第<span class="subst">${weekNum}</span>周 <span class="subst">${weekStr}</span>`</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">"#calendar-date"</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">"0"</span>);</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">"#calendar-solar"</span>).<span class="property">innerHTML</span> = <span class="string">`<span class="subst">${year}</span>年<span class="subst">${monthStr}</span> 第<span class="subst">${asideDay.toFixed(<span class="number">0</span>)}</span>天`</span>;</span><br><span class="line"> e.<span class="title function_">querySelector</span>(<span class="string">"#calendar-lunar"</span>).<span class="property">innerHTML</span> = <span class="string">`<span class="subst">${ganzhiYear}</span><span class="subst">${animalYear}</span>年 <span class="subst">${lunarMon}</span><span class="subst">${lunarDay}</span>`</span>;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"schedule-days"</span>).<span class="property">innerHTML</span> = daysUntilNewYear;</span><br><span class="line"> }</span><br><span class="line">}</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> {</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">}</span><br><span class="line"><span class="selector-class">.card-widget</span> {</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">}</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> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--efu-fontcolor);</span><br><span class="line">}</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> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-area-left</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">45%</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-area-right</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">55%</span>;</span><br><span class="line">}</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> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-main</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-week</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-date</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-lunar</span>, <span class="selector-id">#calendar-solar</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-solar</span> {</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">2.1rem</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-lunar</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#calendar-main</span> <span class="selector-tag">a</span> {</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">}</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> {</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">}</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> {</span><br><span class="line"> <span class="attribute">color</span>: <span class="built_in">var</span>(--efu-secondtext);</span><br><span class="line">}</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> {</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">}</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> {</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">}</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> {</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line">}</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> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-area-left</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">30%</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-area-right</span> {</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">}</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> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.schedule-d0</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.schedule-d1</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">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">}</span><br><span class="line"></span><br><span class="line">progress::-webkit-progress-bar {</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">}</span><br><span class="line"></span><br><span class="line">progress::-webkit-progress-value {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aside-span1</span>, <span class="selector-class">.aside-span2</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aside-span1</span> {</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">5px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aside-span2</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.aside-span2</span> <span class="selector-tag">a</span> {</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">}</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> {</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">}</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> {</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><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-title</span> {</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">25px</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-days</span> {</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">}</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#schedule-date</span> {</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">}</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"><link</span> <span class="string">rel="stylesheet"</span> <span class="string">href="/css/calendar.css"></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"><script</span> <span class="string">src="/js/calendar.js"></script></span></span><br><span class="line"><span class="string">+</span> <span class="bullet">-</span> <span class="string"><script</span> <span class="string">src="https://unpkg.com/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script></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"> <div id="calendar-area-left"></span></span><br><span class="line"><span class="string"> <div id="calendar-week"></div></span></span><br><span class="line"><span class="string"> <div id="calendar-date" style="font-size: 48px;"></div></span></span><br><span class="line"><span class="string"> <div id="calendar-solar"></div></span></span><br><span class="line"><span class="string"> <div id="calendar-lunar"></div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <div id="calendar-area-right"></span></span><br><span class="line"><span class="string"> <div id="calendar-main"></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </div></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"> <div id="schedule-area-left"></span></span><br><span class="line"><span class="string"> <div id="schedule-title">距离除夕</div></span></span><br><span class="line"><span class="string"> <div id="schedule-days"></div></span></span><br><span class="line"><span class="string"> <div id="schedule-date">2025-01-28</div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <div id="schedule-area-right"></span></span><br><span class="line"><span class="string"> <div class="schedule-r0"></span></span><br><span class="line"><span class="string"> <div class="schedule-d0">本年</div></span></span><br><span class="line"><span class="string"> <div class="schedule-d1"></span></span><br><span class="line"><span class="string"> <span id="p_span_year" class="aside-span1"></span></span></span><br><span class="line"><span class="string"> <span class="aside-span2">还剩<a></a>天</span></span></span><br><span class="line"><span class="string"> <progress max="365" id="pBar_year"></progress></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <div class="schedule-r1"></span></span><br><span class="line"><span class="string"> <div class="schedule-d0">本月</div></span></span><br><span class="line"><span class="string"> <div class="schedule-d1"></span></span><br><span class="line"><span class="string"> <span id="p_span_month" class="aside-span1"></span></span></span><br><span class="line"><span class="string"> <span class="aside-span2">还剩<a></a>天</span></span></span><br><span class="line"><span class="string"> <progress max="30" id="pBar_month"></progress></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> <div class="schedule-r2"></span></span><br><span class="line"><span class="string"> <div class="schedule-d0">本周</div></span></span><br><span class="line"><span class="string"> <div class="schedule-d1"></span></span><br><span class="line"><span class="string"> <span id="p_span_week" class="aside-span1"></span></span></span><br><span class="line"><span class="string"> <span class="aside-span2">还剩<a></a>天</span></span></span><br><span class="line"><span class="string"> <progress max="7" id="pBar_week"></progress></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </div></span></span><br><span class="line"><span class="string"> </div></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>
|
||
<id>https://blog.biss.click/posts/5ed2f1e6/</id>
|
||
<link href="https://blog.biss.click/posts/5ed2f1e6/"/>
|
||
<published>2026-01-15T23:47:07.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）<br>效果图：</p>
|
||
<center><img src="https://pic.biss.click/image/b9819d72-3496-4204-9b7d-07d82e2e2f1b.webp"]]>
|
||
</summary>
|
||
<title>在侧边栏添加日历和倒计时</title>
|
||
<updated>2026-04-11T11:56:17.339Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="杂谈" scheme="https://blog.biss.click/categories/miscellaneous/"/>
|
||
<category term="生活" scheme="https://blog.biss.click/tags/life/"/>
|
||
<content>
|
||
<![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>
|
||
<id>https://blog.biss.click/posts/a31d95d9/</id>
|
||
<link href="https://blog.biss.click/posts/a31d95d9/"/>
|
||
<published>2026-01-05T05:14:16.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>最近一直忙于学习（<del>虽然也没怎么好好学</del>），所以一直忘了网站的更新；现在闲下来了，又不知道该写点什么；就写写我和朋友们的故事吧。<br>因为一次偶然的突发奇想，解锁了挂号信这种奇奇怪怪的通信方式，虽然现在网络发达，但感觉这种方式有一种独特的魅力。所以从去年]]>
|
||
</summary>
|
||
<title>和朋友们的故事</title>
|
||
<updated>2026-04-11T11:56:17.355Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="AdguardHome" scheme="https://blog.biss.click/tags/AdguardHome/"/>
|
||
<category term="Openclash" scheme="https://blog.biss.click/tags/Openclash/"/>
|
||
<category term="Openwrt" scheme="https://blog.biss.click/tags/Openwrt/"/>
|
||
<content>
|
||
<![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>
|
||
<id>https://blog.biss.click/posts/66e66374/</id>
|
||
<link href="https://blog.biss.click/posts/66e66374/"/>
|
||
<published>2025-10-05T07:18:00.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>在之前已经安装了<code>Openwrt</code>系统，并且也配置了<code>OpenClash</code>和<code>AdguardHome</code>，两者的原理简单看都是劫持<code>DNS</code>，所以两者要同时运行，必须经过一定的配置。<br]]>
|
||
</summary>
|
||
<title>Adguard和Openclash共存</title>
|
||
<updated>2026-04-11T11:56:17.355Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="AdguardHome" scheme="https://blog.biss.click/tags/AdguardHome/"/>
|
||
<category term="Openwrt" scheme="https://blog.biss.click/tags/Openwrt/"/>
|
||
<content>
|
||
<![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>
|
||
<id>https://blog.biss.click/posts/69b16001/</id>
|
||
<link href="https://blog.biss.click/posts/69b16001/"/>
|
||
<published>2025-10-05T04:18:00.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>众所周知，<code>Adguardhome</code>是用于拦截广告的工具，搭配好的规则，拦截效果才会更好，下面来分享一些规则：</p>
|
||
<ol>
|
||
<li>一个综合的过滤规则 <div class='liushen-tag-link'><a]]>
|
||
</summary>
|
||
<title>Adguard规则分享</title>
|
||
<updated>2026-04-11T11:56:17.355Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="AdguardHome" scheme="https://blog.biss.click/tags/AdguardHome/"/>
|
||
<category term="Openwrt" scheme="https://blog.biss.click/tags/Openwrt/"/>
|
||
<content>
|
||
<![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/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>
|
||
<id>https://blog.biss.click/posts/b57500e9/</id>
|
||
<link href="https://blog.biss.click/posts/b57500e9/"/>
|
||
<published>2025-09-28T09:10:18.000Z</published>
|
||
<summary>
|
||
<![CDATA[<p>接续前言，<code>AdguardHome</code>是一款广告拦截软件，有了一台小软路由后就开始折腾了。</p>
|
||
<h1 id="安装"><a href="#安装" class="headerlink"]]>
|
||
</summary>
|
||
<title>在Openwrt上安装AdguardHome</title>
|
||
<updated>2026-04-11T11:56:17.355Z</updated>
|
||
</entry>
|
||
<entry>
|
||
<author>
|
||
<name>biss</name>
|
||
</author>
|
||
<category term="技术" scheme="https://blog.biss.click/categories/technology/"/>
|
||
<category term="Openclash" scheme="https://blog.biss.click/tags/Openclash/"/>
|
||
<category term="Openwrt" scheme="https://blog.biss.click/tags/Openwrt/"/>
|
||
<content>
|
||
<![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>
|
||
<id>https://blog.biss.click/posts/2b2fb1a7/</id>
|
||
<link href="https://blog.biss.click/posts/2b2fb1a7/"/>
|
||
<published>2025-09-02T13:00:00.000Z</published>
|
||
<summary>
|
||
<![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>因为一直想要实现从软路由上进行代理，所以买到了一个Cudy Tr3000刷系统折腾。用这篇文章记录一下安装的过程。</p>
|
||
<h1]]>
|
||
</summary>
|
||
<title>在Openwrt中安装OpenClash</title>
|
||
<updated>2026-04-11T11:56:17.355Z</updated>
|
||
</entry>
|
||
</feed>
|