-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
127 lines (60 loc) · 64.8 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>2024 Target! ✧(≖ ◡ ≖✿)</title>
<link href="/posts/2024-Target-%E2%9C%A7-%E2%89%96-%E2%97%A1-%E2%89%96%E2%9C%BF-94fb2beaa1d8/"/>
<url>/posts/2024-Target-%E2%9C%A7-%E2%89%96-%E2%97%A1-%E2%89%96%E2%9C%BF-94fb2beaa1d8/</url>
<content type="html"><![CDATA[<h1>2024 Target full-year edition</h1><blockquote><p>这是2024年生日许下的愿望🎂，同样是全年的目标<br>写在每一个可能摸鱼会浏览的地方！</p></blockquote><p><img src="https://cdn.jsdelivr.net/gh/Sherrinford16/blog_img@master/blogs/26.jpg" alt="26"></p><ol><li>我的专业技能要特别强！</li><li>工作也换成了其他的地方。</li><li>要去两个国内的城市。</li><li>达到可以与人正常交流的英语水平。</li><li>多养只猫猫。</li><li>吉他学完自己在b站上买的课。</li><li>体重回到70kg之内。</li><li>保重身体少熬夜。</li><li>少打游戏。</li><li>多读些工具书之外的内容。</li></ol><p><img src="https://cdn.jsdelivr.net/gh/Sherrinford16/blog_img@master/blogs/2024-target.jpg" alt="2024-target"></p>]]></content>
</entry>
<entry>
<title>warranty</title>
<link href="/posts/warranty-c289c5cf3ad8/"/>
<url>/posts/warranty-c289c5cf3ad8/</url>
<content type="html"><![CDATA[<p>一个自定义的卡片滑动及展示前端代码记录</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><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></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"></span><br><span class="language-css"><span class="hljs-selector-class">.warranty</span> {<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<span class="hljs-attribute">height</span>: <span class="hljs-number">1000px</span>;<span class="hljs-attribute">text-align</span>: center;<span class="hljs-attribute">vertical-align</span>: middle;<span class="hljs-attribute">overflow</span>: hidden;<span class="hljs-attribute">position</span>: relative;}</span><br><span class="language-css"><span class="hljs-selector-class">.img-shadow</span> {<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">5px</span> <span class="hljs-number">5px</span> <span class="hljs-number">5px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.2</span>)}</span><br><span class="language-css"><span class="hljs-selector-class">.warranty-cover</span> <span class="hljs-selector-tag">img</span> {<span class="hljs-attribute">filter</span>: <span class="hljs-built_in">drop-shadow</span>(<span class="hljs-number">5px</span> <span class="hljs-number">5px</span> <span class="hljs-number">5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.2</span>));}</span><br><span class="language-css"><span class="hljs-selector-class">.warranty-cover</span> {<span class="hljs-attribute">display</span>: block;<span class="hljs-attribute">max-width</span>: <span class="hljs-number">600px</span>;<span class="hljs-attribute">max-height</span>: <span class="hljs-number">600px</span>;<span class="hljs-attribute">position</span>: absolute;<span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">right</span>: <span class="hljs-number">500px</span>;<span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">margin</span>: auto;<span class="hljs-attribute">z-index</span>: <span class="hljs-number">99</span>;}</span><br><span class="language-css"><span class="hljs-selector-class">.warranty-page1</span> {<span class="hljs-attribute">display</span>: block;<span class="hljs-attribute">max-width</span>: <span class="hljs-number">550px</span>;<span class="hljs-attribute">max-height</span>: <span class="hljs-number">550px</span>;<span class="hljs-attribute">position</span>: absolute;<span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">right</span>: <span class="hljs-number">350px</span>;<span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">margin</span>: auto;<span class="hljs-attribute">z-index</span>: <span class="hljs-number">98</span>; <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">150px</span>);}</span><br><span class="language-css"><span class="hljs-selector-class">.warranty-page2</span> {<span class="hljs-attribute">display</span>: block;<span class="hljs-attribute">max-width</span>: <span class="hljs-number">550px</span>;<span class="hljs-attribute">max-height</span>: <span class="hljs-number">550px</span>;<span class="hljs-attribute">position</span>: absolute;<span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">right</span>: <span class="hljs-number">200px</span>;<span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">margin</span>: auto;<span class="hljs-attribute">z-index</span>: <span class="hljs-number">97</span>; <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">300px</span>);}</span><br><span class="language-css"><span class="hljs-selector-class">.warranty-page1</span>, <span class="hljs-selector-class">.warranty-page2</span> {<span class="hljs-attribute">transition</span>: transform <span class="hljs-number">0.3s</span> ease-in-out;}</span><br><span class="language-css"><span class="hljs-selector-class">.warranty-page1</span><span class="hljs-selector-pseudo">:hover</span> {<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">300px</span>); }</span><br><span class="language-css"><span class="hljs-selector-class">.warranty-page2</span><span class="hljs-selector-pseudo">:hover</span> {<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">450px</span>);}</span><br><span class="language-css"></span><br><span class="language-css"><span class="hljs-selector-class">.modal</span> {<span class="hljs-attribute">display</span>: none;<span class="hljs-attribute">position</span>: fixed;<span class="hljs-attribute">z-index</span>: <span class="hljs-number">1000</span>;<span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;<span class="hljs-attribute">overflow</span>: auto;<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.2</span>);}</span><br><span class="language-css"><span class="hljs-selector-class">.modal-content</span> {<span class="hljs-attribute">position</span>: fixed;<span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;<span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(-<span class="hljs-number">50%</span>, -<span class="hljs-number">50%</span>);<span class="hljs-attribute">width</span>: <span class="hljs-number">80%</span>;<span class="hljs-attribute">background</span>: <span class="hljs-number">#fff</span>;<span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">4px</span> <span class="hljs-number">8px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.1</span>);<span class="hljs-attribute">z-index</span>: <span class="hljs-number">1001</span>;}</span><br><span class="language-css"><span class="hljs-selector-class">.close</span> {<span class="hljs-attribute">position</span>: absolute;<span class="hljs-attribute">top</span>: <span class="hljs-number">5px</span>; <span class="hljs-attribute">right</span>: <span class="hljs-number">10px</span>;<span class="hljs-attribute">font-size</span>: <span class="hljs-number">30px</span>;<span class="hljs-attribute">font-weight</span>: bold;<span class="hljs-attribute">color</span>: <span class="hljs-number">#000</span>; <span class="hljs-attribute">cursor</span>: pointer;<span class="hljs-attribute">z-index</span>: <span class="hljs-number">1001</span>;}</span><br><span class="language-css"><span class="hljs-selector-class">.slideshow-container</span> {<span class="hljs-attribute">position</span>: relative;<span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span>;<span class="hljs-attribute">margin</span>: auto;}</span><br><span class="language-css"><span class="hljs-selector-class">.mySlides</span> {<span class="hljs-attribute">display</span>: none;}</span><br><span class="language-css"><span class="hljs-selector-class">.prev</span>, <span class="hljs-selector-class">.next</span> {<span class="hljs-attribute">cursor</span>: pointer;<span class="hljs-attribute">position</span>: absolute;<span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;<span class="hljs-attribute">width</span>: auto;<span class="hljs-attribute">padding</span>: <span class="hljs-number">16px</span>;<span class="hljs-attribute">margin-top</span>: -<span class="hljs-number">22px</span>;<span class="hljs-attribute">color</span>: <span class="hljs-number">#2E3D30</span>;<span class="hljs-attribute">font-weight</span>: bold;<span class="hljs-attribute">font-size</span>: <span class="hljs-number">18px</span>;<span class="hljs-attribute">transition</span>: <span class="hljs-number">0.6s</span> ease;<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0</span> <span class="hljs-number">3px</span> <span class="hljs-number">3px</span> <span class="hljs-number">0</span>;user-select: none;}</span><br><span class="language-css"><span class="hljs-selector-class">.next</span> {<span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">3px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">3px</span>;}</span><br><span class="language-css"><span class="hljs-selector-class">.prev</span><span class="hljs-selector-pseudo">:hover</span>, <span class="hljs-selector-class">.next</span><span class="hljs-selector-pseudo">:hover</span> {<span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>);<span class="hljs-attribute">color</span>: <span class="hljs-number">#2E3D30</span>;}</span><br><span class="language-css"></span><br><span class="language-css"></span><span class="hljs-tag"></<span class="hljs-name">style</span>></span><br><br><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"uk-container uk-container-expand"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 0;"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"uk-margin-small-top warranty"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #fff"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warranty-cover"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"...cover.png"</span> /></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warranty-page1"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"...page1.png"</span> /></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warranty-page2"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"...page2.png"</span> /></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br><br><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-content"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span>></span><span class="hljs-symbol">&times;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slideshow-container"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slides"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mySlides"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">""</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%"</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"plusSlides(-1)"</span>></span><span class="hljs-symbol">&#10094;</span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"plusSlides(1)"</span>></span><span class="hljs-symbol">&#10095;</span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br><br><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">var</span> page1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.warranty-page1 img'</span>);</span><br><span class="language-javascript"><span class="hljs-keyword">var</span> page2 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.warranty-page2 img'</span>);</span><br><span class="language-javascript"><span class="hljs-keyword">var</span> modal = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'modal'</span>);</span><br><span class="language-javascript"><span class="hljs-keyword">var</span> closeBtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.modal .close'</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">var</span> page1Images = [</span><br><span class="language-javascript"> <span class="hljs-string">"...warranty-02.png"</span>,</span><br><span class="language-javascript"> <span class="hljs-string">"...warranty-03.png"</span></span><br><span class="language-javascript">];</span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">var</span> page2Images = [</span><br><span class="language-javascript"> <span class="hljs-string">"...warranty-04.png"</span>,</span><br><span class="language-javascript"> <span class="hljs-string">"...warranty-05.png"</span></span><br><span class="language-javascript">];</span><br><span class="language-javascript"></span><br><span class="language-javascript">page1.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {</span><br><span class="language-javascript"> <span class="hljs-title function_">populateSlides</span>(page1Images);</span><br><span class="language-javascript"> modal.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'block'</span>;</span><br><span class="language-javascript">};</span><br><span class="language-javascript"></span><br><span class="language-javascript">page2.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {</span><br><span class="language-javascript"> <span class="hljs-title function_">populateSlides</span>(page2Images);</span><br><span class="language-javascript"> modal.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'block'</span>;</span><br><span class="language-javascript">};</span><br><span class="language-javascript"></span><br><span class="language-javascript">closeBtn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {</span><br><span class="language-javascript"> modal.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'none'</span>;</span><br><span class="language-javascript">};</span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-variable language_">window</span>.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) {</span><br><span class="language-javascript"> <span class="hljs-keyword">if</span> (event.<span class="hljs-property">target</span> == modal) {</span><br><span class="language-javascript"> modal.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'none'</span>;</span><br><span class="language-javascript"> }</span><br><span class="language-javascript">};</span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">var</span> slideIndex = <span class="hljs-number">1</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">plusSlides</span>(<span class="hljs-params">n</span>) {</span><br><span class="language-javascript"> <span class="hljs-title function_">showSlides</span>(slideIndex += n);</span><br><span class="language-javascript">}</span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">showSlides</span>(<span class="hljs-params">n</span>) {</span><br><span class="language-javascript"> <span class="hljs-keyword">var</span> i;</span><br><span class="language-javascript"> <span class="hljs-keyword">var</span> slides = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByClassName</span>(<span class="hljs-string">"mySlides"</span>);</span><br><span class="language-javascript"> <span class="hljs-keyword">if</span> (n > slides.<span class="hljs-property">length</span>) { slideIndex = <span class="hljs-number">1</span>; }</span><br><span class="language-javascript"> <span class="hljs-keyword">if</span> (n < <span class="hljs-number">1</span>) { slideIndex = slides.<span class="hljs-property">length</span>; }</span><br><span class="language-javascript"> <span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < slides.<span class="hljs-property">length</span>; i++) {</span><br><span class="language-javascript"> slides[i].<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">"none"</span>; </span><br><span class="language-javascript"> }</span><br><span class="language-javascript"> slides[slideIndex-<span class="hljs-number">1</span>].<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">"block"</span>; </span><br><span class="language-javascript">}</span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">populateSlides</span>(<span class="hljs-params">imageArray</span>) {</span><br><span class="language-javascript"> <span class="hljs-keyword">var</span> slidesContainer = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.slideshow-container .slides'</span>);</span><br><span class="language-javascript"> slidesContainer.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">''</span>;</span><br><span class="language-javascript"> imageArray.<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">src</span>) {</span><br><span class="language-javascript"> <span class="hljs-keyword">var</span> slide = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'div'</span>);</span><br><span class="language-javascript"> slide.<span class="hljs-property">className</span> = <span class="hljs-string">'mySlides'</span>;</span><br><span class="language-javascript"> <span class="hljs-keyword">var</span> img = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'img'</span>);</span><br><span class="language-javascript"> img.<span class="hljs-property">src</span> = src;</span><br><span class="language-javascript"> img.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">"100%"</span>;</span><br><span class="language-javascript"> slide.<span class="hljs-title function_">appendChild</span>(img);</span><br><span class="language-javascript"> slidesContainer.<span class="hljs-title function_">appendChild</span>(slide);</span><br><span class="language-javascript"> });</span><br><span class="language-javascript"> <span class="hljs-title function_">showSlides</span>(slideIndex = <span class="hljs-number">1</span>);</span><br><span class="language-javascript">}</span><br><span class="language-javascript"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br></code></pre></td></tr></table></figure><p>用到了UIkit框架，项目里还有fontawesome的内容，直接cdn引用了。效果还不错。</p><blockquote><p>保密就不贴图了QvQ</p></blockquote>]]></content>
</entry>
<entry>
<title>仿银河系漫游指南</title>
<link href="/posts/%E4%BB%BF%E9%93%B6%E6%B2%B3%E7%B3%BB%E6%BC%AB%E6%B8%B8%E6%8C%87%E5%8D%97-11cfefc14cde/"/>
<url>/posts/%E4%BB%BF%E9%93%B6%E6%B2%B3%E7%B3%BB%E6%BC%AB%E6%B8%B8%E6%8C%87%E5%8D%97-11cfefc14cde/</url>
<content type="html"><![CDATA[<blockquote><p>The answer to life, the universe, and everything = 42</p></blockquote><p>亚瑟被推倒的房子，总让我不自觉地联想到Top Gear里面，克拉克森被炸飞的房子hhh。</p><p>我实在无法推导出“42”这个答案，手边也没有《银河系漫游指南》来作为生存参考。但值得庆幸的是，我的背包里有一条毛巾、一支笔和一本蓝黑色笔记，足够写出一本《仿银河系漫游指南》。</p><h1>仿银河系漫游指南</h1><p>参考其他内容，这里应该是前言部分，大致地介绍一下书的内容，写作目的之类的东西。但就我近乎为零的想象力和创造力，可以引用一段形象的比喻：</p><blockquote><p>他词汇量的匮乏，就像那什么一样。</p></blockquote><p>借用过来：</p><blockquote><p>这里的无聊程度，就像那什么一样。</p></blockquote><p>所以，赶快退出然后清除浏览记录，免得被人发现然后蹦出一句：你的品味就像那什么一样。</p><h2 id="前言">前言</h2><p><img src="https://cdn.jsdelivr.net/gh/Sherrinford16/blog_img@master/blogs/image-20231030154118090.png" alt="gaming..."></p>]]></content>
<categories>
<category> 自定义 </category>
</categories>
<tags>
<tag> 未定义 </tag>
</tags>
</entry>
<entry>
<title>murmured</title>
<link href="/posts/murmured-68944a7f60f3/"/>
<url>/posts/murmured-68944a7f60f3/</url>
<content type="html"><![CDATA[<h1><strong>The Road Not Taken</strong></h1><p>Two roads diverged in a yellow wood,</p><p>And sorry I could not travel both,</p><p>And be one traveler, long I stood,</p><p>And looked down one as far as I could,</p><p>To where it bent in the undergrowth.</p><p>Then took the other, as just as fair,</p><p>And having perhaps the better claim,</p><p>Because it was grassy and wanted wear,</p><p>Though as for that the passing there,</p><p>Had worn them really about the same.</p><p>And both that morning equally lay,</p><p>In leaves no step had trodden black,</p><p>Oh, I kept the first for another day!</p><p>Yet knowing how way leads on to way,</p><p>I doubted if I should even come back.</p><p>I shall be telling this with a sigh,</p><p>Somewhere ages and ages hence.</p><p>Two roads diverged in a wood,</p><p>and I took the one less traveled by,</p><p>And that has made all the difference.</p><p>—</p><p>高中时代的预言精准命中了现在的我，瘫在椅子里想要放空自己，但躲不过在过去的文字里找寻着成长的足迹。</p><p>踏上哪条道路了吗？也许并没有，只不过是在一个井底原地打转。有点干劲了就在井壁上爬一小段，然后沾沾自喜，再掉回井底。</p><p>或是在爬的过程中冷不丁地沾到了一块干燥陌生的砖块，赶忙缩手回去。</p><hr><p>所以一切都毫无变化，笔记的内容也全都应验。</p><p>我就借着一切能抓得到的痛苦为由，讨厌自己、讨厌世界。</p><p>陷入虚无主义，抱怨着不公和无意义。</p><hr><p>我又每时每刻都挣扎着突破这种状态，这就是我好长一段时间以来的生活。</p><p>尝试用欠债的负罪感鞭策自己前进，但收效甚微。</p><p>我并不爱自己，对待自己的生活甚至有些冷眼旁观。</p><hr><p>但是，但是，我不能被过去的自己瞧不起。</p><p>他不会忘记在六楼挨着电梯口的病房里，最靠外面的那张病床上，因为嫌输液太慢，擅自调快点滴速率，让自己血管冰凉，手臂麻木的经历。</p><p>凡此种种，他都挨过来了，为什么能轮到你在这里自欺自哀呢？</p><hr><p>的确，没有像游戏攻略一样的内容让我借鉴给自己的真实人生。</p><p>可是这样不是能更好地探索未知区域呵。</p><p>谢谢你有认真记录自己走来的路，就让我摆脱冷气，将其延伸至云深不知处。</p><p>—</p>]]></content>
<tags>
<tag> 未定义 </tag>
</tags>
</entry>
<entry>
<title>test-markdown</title>
<link href="/posts/test-markdown-436b3241c60f/"/>
<url>/posts/test-markdown-436b3241c60f/</url>
<content type="html"><![CDATA[<h1>Markdown文档预览</h1><h2 id="页面配置进度">页面配置进度</h2><blockquote><p>logo添加 ✅</p><p>菜单/目录 ✅</p><p>代码块 ✅ 样式部分有些不满意，后续可能会找其他css(结果设置了文章页的banner之后还意外的搭配，不改了hh)</p><p>想有一张自己拍的星空照片做banner ❎</p><p>文章banner存在一个优先级的问题。我想将配置文件的 default_top_img作为所有文章的默认banner，但如果文章在front-matter设置了cover，由于cover的最高优先级，文章banner会变成cover值 ✅ 解决方法：添加top_img在front-matter中，让所有的页面banner地址都一样。</p><p>自定义footer ✅ 可能存在的问题，在main.js直接调用了一次refreshBlogRunningTime()这个自定义的blog运行时间函数，能改写到footer?也不对哦，footer在所有页面都有，这么写应该也没问题！</p><p>⬆️(newest) 还是觉得在main里面直接改太不优雅了。参考文档里引入自定义css的方式，在source/self/custom-footer.js引入自定义refreshBlogRunningTime()，然后去_config.butterfly.yml中inject自定义js，搞定！✅</p><p>修改首页的title和subtitle，在themes/butterfly/layout/includes/header/index.pug里面</p><p>❎ 优化seo bing/google/baidu/cloudflare</p><p>❎ 配置robots.txt反扒</p></blockquote><h2 id="配置详情">配置详情</h2><p>不同的quote是否匹配相同样式？</p><blockquote><p>引用2，康康css</p></blockquote><p><img src="https://canele-blog.oss-cn-shenzhen.aliyuncs.com/pexels-%E4%B8%80-%E5%BE%90-980859.jpg" alt="pexels-一-徐-980859"></p><h3 id="css样式，估计超出div的问题就在这里">css样式，估计超出div的问题就在这里</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><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></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* Highlight.js */</span><br><span class="hljs-selector-tag">code</span><span class="hljs-selector-attr">[hljs-codeblock-inner]</span> {<br> <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.5</span>;<br> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;<br> <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">100px</span>;<br> <span class="hljs-attribute">padding</span>: <span class="hljs-number">22px</span> <span class="hljs-number">20px</span>;<br> <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">8px</span>;<br> <span class="hljs-attribute">box-shadow</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.2</span>) <span class="hljs-number">0px</span> <span class="hljs-number">5px</span> <span class="hljs-number">20px</span>;<br> <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">15px</span> <span class="hljs-meta">!important</span>;<br> <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">15px</span> <span class="hljs-meta">!important</span>;<br> <span class="hljs-attribute">padding-top</span>: <span class="hljs-number">55px</span>;<br> <span class="hljs-attribute">background</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTcwODgxMzc1MTA3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik05NTQuMzA0IDE5MC4zMzZhMTUuNTUyIDE1LjU1MiAwIDAgMSAwIDIxLjk1MmwtMzAwLjAzMiAzMDAuMDMyIDI5OC41NiAyOTguNTZhMTUuNjE2IDE1LjYxNiAwIDAgMSAwIDIyLjAxNmwtMTIwLjk2IDEyMC44OTZhMTUuNTUyIDE1LjU1MiAwIDAgMS0yMS45NTIgMEw1MTEuMzYgNjU1LjIzMiAyMTQuMjcyIDk1Mi4zMmExNS41NTIgMTUuNTUyIDAgMCAxLTIxLjk1MiAwbC0xMjAuODk2LTEyMC44OTZhMTUuNDg4IDE1LjQ4OCAwIDAgMSAwLTIxLjk1MmwyOTcuMTUyLTI5Ny4xNTJMNjkuODg4IDIxMy43NmExNS41NTIgMTUuNTUyIDAgMCAxIDAtMjEuOTUybDEyMC44OTYtMTIwLjg5NmExNS41NTIgMTUuNTUyIDAgMCAxIDIxLjk1MiAwTDUxMS4zNiAzNjkuNDcybDMwMC4wOTYtMzAwLjAzMmExNS4zNiAxNS4zNiAwIDAgMSAyMS45NTIgMGwxMjAuODk2IDEyMC44OTZ6IiBwLWlkPSIzNDExIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+</span>) no-repeat <span class="hljs-number">50%</span> <span class="hljs-number">50%</span> <span class="hljs-meta">!important</span>;<br><br>}<br><span class="hljs-selector-class">.hljs-ln-numbers</span> {<br> -webkit-touch-callout: none;<br> -webkit-user-select: none;<br> -khtml-user-select: none;<br> -moz-user-select: none;<br> -ms-user-select: none;<br> user-select: none;<br> <span class="hljs-attribute">text-align</span>: center;<br> <span class="hljs-attribute">vertical-align</span>: top;<br> <span class="hljs-attribute">padding-right</span>: <span class="hljs-number">12px</span> <span class="hljs-meta">!important</span>;<br> <span class="hljs-attribute">position</span>: absolute;<br> <span class="hljs-attribute">left</span>: <span class="hljs-number">20px</span>;<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">30px</span>;<br> <span class="hljs-attribute">overflow-x</span>: visible <span class="hljs-meta">!important</span>;<br> <span class="hljs-attribute">transition</span>: all .<span class="hljs-number">3s</span> ease;<br>}<br><span class="hljs-selector-class">.hljs-ln-numbers</span><span class="hljs-selector-pseudo">:before</span> {<br> <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;<br> <span class="hljs-attribute">position</span>: absolute;<br> <span class="hljs-attribute">left</span>: -<span class="hljs-number">20px</span>;<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">20px</span>;<br> <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;<br> <span class="hljs-attribute">background</span>: inherit;<br>}<br><span class="hljs-selector-class">.hljs-ln-code</span> {<br> <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">30px</span> <span class="hljs-meta">!important</span>;<br> <span class="hljs-attribute">transition</span>: all .<span class="hljs-number">3s</span> ease;<br>}<br>pre<span class="hljs-selector-class">.hljs-codeblock</span><span class="hljs-selector-class">.hljs-break-line</span> <span class="hljs-selector-class">.hljs-ln-code</span> {<br> <span class="hljs-attribute">line-break</span>: anywhere;<br> <span class="hljs-attribute">white-space</span>: break-spaces;<br>}<br><span class="hljs-selector-tag">code</span><span class="hljs-selector-attr">[hljs-codeblock-inner]</span>::-webkit-scrollbar-track{<br> <span class="hljs-attribute">border</span>: none;<br> <span class="hljs-attribute">background</span>: transparent <span class="hljs-meta">!important</span>;<br>}<br><span class="hljs-selector-tag">code</span><span class="hljs-selector-attr">[hljs-codeblock-inner]</span>::-webkit-scrollbar-thumb{<br> <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">255</span>, <span class="hljs-number">255</span>, .<span class="hljs-number">3</span>) <span class="hljs-meta">!important</span>;<br> <span class="hljs-attribute">box-shadow</span>: none <span class="hljs-meta">!important</span>;<br> <span class="hljs-attribute">border</span>: none <span class="hljs-meta">!important</span>;<br> <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;<br> <span class="hljs-attribute">transition</span>: background .<span class="hljs-number">3s</span> ease;<br>}<br><span class="hljs-selector-tag">code</span><span class="hljs-selector-attr">[hljs-codeblock-inner]</span>::-webkit-scrollbar-thumb:hover{<br> <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">255</span>, <span class="hljs-number">255</span>, .<span class="hljs-number">5</span>) <span class="hljs-meta">!important</span>;<br>}<br><span class="hljs-selector-tag">code</span><span class="hljs-selector-attr">[hljs-codeblock-inner]</span>::-webkit-scrollbar{<br> <span class="hljs-attribute">background</span>: transparent;<br> <span class="hljs-attribute">height</span>: <span class="hljs-number">6px</span>;<br>}<br><span class="hljs-selector-tag">code</span><span class="hljs-selector-attr">[hljs-codeblock-inner]</span> *<span class="hljs-selector-pseudo">::selection</span> {<br> <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">204</span>, <span class="hljs-number">226</span>, <span class="hljs-number">255</span>, <span class="hljs-number">0.2</span>) <span class="hljs-meta">!important</span>;<br>}<br>pre<span class="hljs-selector-class">.hljs-codeblock</span><span class="hljs-selector-class">.hljs-codeblock-fullscreen</span> {<br> <span class="hljs-attribute">position</span>: fixed;<br> <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;<br> <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;<br> <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;<br> <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;<br> <span class="hljs-attribute">z-index</span>: <span class="hljs-number">10000</span>;<br> <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-meta">!important</span>;<br> <span class="hljs-attribute">animation</span>: codeblock-fullscreen <span class="hljs-number">0.5s</span> <span class="hljs-built_in">cubic-bezier</span>(<span class="hljs-number">0.18</span>, <span class="hljs-number">0.89</span>, <span class="hljs-number">0.37</span>, <span class="hljs-number">1.12</span>);<br>}<br>pre<span class="hljs-selector-class">.hljs-codeblock</span><span class="hljs-selector-class">.hljs-codeblock-fullscreen</span> > <span class="hljs-selector-tag">code</span><span class="hljs-selector-attr">[hljs-codeblock-inner]</span>{<br> <span class="hljs-attribute">position</span>: absolute;<br> <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;<br> <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;<br> <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;<br> <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;<br> <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0</span>;<br> <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-meta">!important</span>;<br>}<br>pre<span class="hljs-selector-class">.hljs-codeblock</span><span class="hljs-selector-class">.hljs-codeblock-fullscreen</span><span class="hljs-selector-pseudo">:before</span>{<br> <span class="hljs-attribute">z-index</span>: <span class="hljs-number">10001</span>;<br>}<br><span class="hljs-keyword">@keyframes</span> codeblock-fullscreen{<br> <span class="hljs-number">0%</span>{<br> <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">scale</span>(.<span class="hljs-number">5</span>);<br> <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;<br> }<br> <span class="hljs-number">100%</span>{<br> <span class="hljs-attribute">transform</span>: none;<br> <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;<br> }<br>}<br>pre<span class="hljs-selector-class">.hljs-codeblock</span><span class="hljs-selector-class">.hljs-hide-linenumber</span> <span class="hljs-selector-class">.hljs-ln-numbers</span><span class="hljs-selector-class">.hljs</span>{<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">0px</span>;<br> <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;<br>}<br>pre<span class="hljs-selector-class">.hljs-codeblock</span><span class="hljs-selector-class">.hljs-hide-linenumber</span> <span class="hljs-selector-class">.hljs-ln-code</span> {<br> <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">4px</span> <span class="hljs-meta">!important</span>;<br>}<br><br><br></code></pre></td></tr></table></figure><h3 id="为了自定义footer，html转pug">为了自定义footer，html转pug</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><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><code class="hljs pug">#footer-wrap<br> .github-badge<br> span.badge-subject<br> i.fa.fa-copyright<br> | Copyright <br> span.badge-value.bg-red<br> a(href='https://github.com/Sherrinford16/Sherrinford16.github.io', target='_blank', one-link-mark='yes')<br> | 2023 夏福<br> .github-badge<br> span.badge-subject<br> i.fa.fa-clock<br> | Running Time<br> span.badge-value.bg-apricots<br> span#blog_running_days.odometer.odometer-auto-theme<br> | days <br> span#blog_running_hours.odometer.odometer-auto-theme<br> | H <br> span#blog_running_mins.odometer.odometer-auto-theme<br> | M <br> span#blog_running_secs.odometer.odometer-auto-theme<br> | S<br><br> if theme.footer.owner.enable<br> - var now = new Date()<br> - var nowYear = now.getFullYear()<br> if theme.footer.owner.since && theme.footer.owner.since != nowYear<br> .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`<br> else<br> .copyright!= `&copy;${nowYear} By ${config.author}`<br> if theme.footer.copyright<br> .framework-info<br> span= _p('footer.framework') + ' '<br> a(href='https://hexo.io')= 'Hexo'<br> span.footer-separator |<br> span= _p('footer.theme') + ' '<br> a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'<br> if theme.footer.custom_text<br> .footer_custom_text!=`${theme.footer.custom_text}`<br> <br></code></pre></td></tr></table></figure><h3 id="js部分">js部分</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">// custom-footer.js</span><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">refreshBlogRunningTime</span> = (<span class="hljs-params"></span>) => {<br> <span class="hljs-keyword">const</span> blog_running_days = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"blog_running_days"</span>);<br> <span class="hljs-keyword">const</span> blog_running_hours = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"blog_running_hours"</span>);<br> <span class="hljs-keyword">const</span> blog_running_mins = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"blog_running_mins"</span>);<br> <span class="hljs-keyword">const</span> blog_running_secs = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"blog_running_secs"</span>);<br><br> <span class="hljs-keyword">const</span> time = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>() - <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2023</span>, <span class="hljs-number">8</span>, <span class="hljs-number">15</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);<br> <span class="hljs-keyword">const</span> d = <span class="hljs-built_in">parseInt</span>(time / <span class="hljs-number">24</span> / <span class="hljs-number">60</span> / <span class="hljs-number">60</span> / <span class="hljs-number">1000</span>);<br> <span class="hljs-keyword">const</span> h = <span class="hljs-built_in">parseInt</span>((time % (<span class="hljs-number">24</span> * <span class="hljs-number">60</span> * <span class="hljs-number">60</span> * <span class="hljs-number">1000</span>)) / <span class="hljs-number">60</span> / <span class="hljs-number">60</span> / <span class="hljs-number">1000</span>);<br> <span class="hljs-keyword">const</span> m = <span class="hljs-built_in">parseInt</span>((time % (<span class="hljs-number">60</span> * <span class="hljs-number">60</span> * <span class="hljs-number">1000</span>)) / <span class="hljs-number">60</span> / <span class="hljs-number">1000</span>);<br> <span class="hljs-keyword">const</span> s = <span class="hljs-built_in">parseInt</span>((time % (<span class="hljs-number">60</span> * <span class="hljs-number">1000</span>)) / <span class="hljs-number">1000</span>);<br><br> blog_running_days.<span class="hljs-property">innerHTML</span> = d;<br> blog_running_hours.<span class="hljs-property">innerHTML</span> = h;<br> blog_running_mins.<span class="hljs-property">innerHTML</span> = m;<br> blog_running_secs.<span class="hljs-property">innerHTML</span> = s;<br>}<br><br><span class="hljs-title function_">refreshBlogRunningTime</span>();<br><br><span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> bottomTimeIntervalHasSet === <span class="hljs-string">"undefined"</span>) {<br> <span class="hljs-variable language_">window</span>.<span class="hljs-property">bottomTimeIntervalHasSet</span> = <span class="hljs-literal">true</span>;<br> <span class="hljs-built_in">setInterval</span>(refreshBlogRunningTime, <span class="hljs-number">500</span>);<br>}<br></code></pre></td></tr></table></figure><h3 id="标签外挂">标签外挂</h3><p>在 Hexo 中，标签外挂（Tag Plugins）是一种允许用户在 Markdown 文档中插入自定义内容的方法。它们为用户提供了一种非常简单的方式，通过简短的标签，插入 HTML、JS 或其他类型的代码到文章或页面中。</p><div class="note purple icon-padding flat"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石頭布</p></div><blockquote><p>Butterfly样式库.</p><footer><strong>jerryc 🦋 A Hexo Theme: Butterfly</strong><cite><a href="https://github.com/jerryc127/hexo-theme-butterfly">github.com/jerryc127/hexo-theme-butterfly</a></cite></footer></blockquote><p>inline有什么作用？ <span class="hide-inline"><button type="button" class="hide-button" style="background-color: #FF7242;color: #fff">显示 </button><span class="hide-content"><br>在文本里面添加按鈕隱藏內容，只限文字( content不能包含英文逗號，可用&sbquo)</span></span></p><blockquote><p>Mermaid文档</p><footer><strong>Mermaid</strong><cite><a href="https://mermaid.js.org/intro/">mermaid.js.org/intro</a></cite></footer></blockquote><p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mover accent="true"><mi>i</mi><mo>^</mo></mover></mrow><annotation encoding="application/x-tex">\hat{i}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.923em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.923em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal">i</span></span><span style="top:-3.2285em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.25em;"><span class="mord">^</span></span></span></span></span></span></span></span></span></span></span></p><p>then➡️ <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mover accent="true"><mi>i</mi><mo>^</mo></mover></mrow><annotation encoding="application/x-tex">\hat{i}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.923em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.923em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord mathnormal">i</span></span><span style="top:-3.2285em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.25em;"><span class="mord">^</span></span></span></span></span></span></span></span></span></span></p><h3 id="配置主页title">配置主页title</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs pug">header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)<br> !=partial('includes/header/nav', {}, {cache: true})<br> if top_img !== false<br> if is_post()<br> include ./post-info.pug<br> else if is_home() <br> #site-info<br> h1#site-title='' // h1#site-title=site_title，首页的title固定为blog的名字，隐藏了<br> if theme.subtitle.enable<br> - var loadSubJs = true<br> #site-subtitle<br> span#subtitle<br> if(theme.social)<br> #site_social_icons<br> !=partial('includes/header/social', {}, {cache: true})<br> #scroll-down<br> i.fas.fa-angle-down.scroll-down-effects<br> else<br> #page-site-info<br> h1#site-title=site_title<br></code></pre></td></tr></table></figure><blockquote><p>一个不错的设置文档：<a href="https://blog.aqcoder.cn/posts/447d/">Butterfly 博客主题搭建系列：基础教程 | 枫叶 (aqcoder.cn)</a></p></blockquote>]]></content>
<categories>
<category> blog搭建设置 </category>
</categories>
<tags>
<tag> 建站 </tag>
</tags>
</entry>
<entry>
<title>Hello World</title>
<link href="/posts/hello-world-c90cce8a1827/"/>
<url>/posts/hello-world-c90cce8a1827/</url>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><h2 id="Quick-Start">Quick Start</h2><h3 id="Create-a-new-post">Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo new <span class="hljs-string">"My New Post"</span><br></code></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server">Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo server<br></code></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files">Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo generate<br></code></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites">Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo deploy<br></code></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
<categories>
<category> blog搭建设置 </category>
</categories>
<tags>
<tag> 建站 </tag>
</tags>
</entry>
</search>