8.9 修改代码高亮样式
This commit is contained in:
小赵同学 committed
1 parent
feba68b37d
commit
f9ea40e40a
15 files changed
+2414
-2410
No files matched your search
@@ -6,5 +6,7 @@ theme = 'Ying'
|
||||
paginate = 5
|
||||
#计算文章总字数
|
||||
HasCJKLanguage = true
|
||||
|
||||
|
||||
#hugo代码高亮显示
|
||||
[markup]
|
||||
[markup.highlight]
|
||||
style = 'tango'
|
||||
+498
-498
File diff suppressed because it is too large.
Load diff
+104
-104
@@ -36,125 +36,125 @@ https://github.com/itorr/sakana</a> 「Sakana!」石蒜模拟器</p>
|
||||
<h4 id="快速食用">快速食用</h4>
|
||||
<p>考虑到很多小伙伴也需要，这里把代码梳理一下 发出来</p>
|
||||
<p>将以下css加入主题的<!-- raw HTML omitted --><!-- raw HTML omitted -->标签的<!-- raw HTML omitted --><!-- raw HTML omitted -->标签里</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box-l</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span> <span style="color:#75715e">!important</span>;
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">rem</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">555</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">555</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>@<span style="color:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span><span style="color:#f92672">:</span> <span style="color:#f92672">650px</span><span style="color:#f92672">)</span> {
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-l</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">none</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">650px</span><span style="color:#ce5c00;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>@<span style="color:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span><span style="color:#f92672">:</span> <span style="color:#f92672">1120px</span><span style="color:#f92672">)</span> {
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-l</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform</span>: translateY(<span style="color:#ae81ff">0</span><span style="color:#66d9ef">px</span>) scale(<span style="color:#ae81ff">0.25</span>) <span style="color:#75715e">!important</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">1120px</span><span style="color:#ce5c00;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">translateY</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#204a87">scale</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0.25</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-l</span> {
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-10</span><span style="color:#66d9ef">rem</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-10</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">500</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">800</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">500</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">800</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">100</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> <span style="color:#f92672">canvas</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-character</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">300</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">300</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">260</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">cursor</span>: <span style="color:#66d9ef">pointer</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">400</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">no-repeat</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-size</span>: <span style="color:#66d9ef">cover</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">300</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">300</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">260</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">cursor</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">pointer</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">400</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">no-repeat</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">cover</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-character</span><span style="color:#f92672">[</span><span style="color:#f92672">data-character</span><span style="color:#f92672">=</span><span style="color:#f92672">chisato</span><span style="color:#f92672">]</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">这里填写自定义摆件图片url</span>)<span style="color:#75715e">!important</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">chisato</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">这里填写自定义摆件图片url</span><span style="color:#000;font-weight:bold">)</span><span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-character</span><span style="color:#f92672">[</span><span style="color:#f92672">data-character</span><span style="color:#f92672">=</span><span style="color:#f92672">takina</span><span style="color:#f92672">]</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">这里填写自定义摆件图片url</span>)<span style="color:#75715e">!important</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">takina</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">这里填写自定义摆件图片url</span><span style="color:#000;font-weight:bold">)</span><span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-bed</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">160</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">.5</span>) <span style="color:#66d9ef">no-repeat</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">cursor</span>: <span style="color:#66d9ef">pointer</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-size</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> rgba(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">.05</span>);
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-bed</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">160</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.5</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#204a87;font-weight:bold">no-repeat</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">cursor</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">pointer</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.05</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span><span style="color:#f92672">[</span><span style="color:#f92672">data-can-switch-character</span><span style="color:#f92672">=</span><span style="color:#f92672">true</span><span style="color:#f92672">]</span> .<span style="color:#a6e22e">sakana-bed</span> {
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-can-switch-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">true</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-bed</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>在footer底部引入js</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://usj.cc/js/sakana.js"</span><span style="color:#f92672">><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span> <span style="color:#000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://usj.cc/js/sakana.js"</span><span style="color:#ce5c00;font-weight:bold">><</span><span style="color:#a40000">/script></span>
|
||||
</span></span></code></pre></div><p>在主题的自定义js进行插件初始化</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-l'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'takina'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span> <span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">setMute</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">init</span><span style="color:#000;font-weight:bold">({</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">el</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#4e9a06">'.sakana-box-l'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">scale</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#0000cf;font-weight:bold">9</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">character</span><span style="color:#ce5c00;font-weight:bold">:</span><span style="color:#4e9a06">'takina'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">canSwitchCharacter</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inertia</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0.001</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">decay</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">1</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">});</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#a40000">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">setMute</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">init</span><span style="color:#000;font-weight:bold">({</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">el</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#4e9a06">'.sakana-box-r'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">scale</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#0000cf;font-weight:bold">9</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">character</span><span style="color:#ce5c00;font-weight:bold">:</span><span style="color:#4e9a06">'chisato'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">canSwitchCharacter</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inertia</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0.001</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">decay</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">1</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">});</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#a40000">/script></span>
|
||||
</span></span></code></pre></div><p>在你想展示的位置添加div标签</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-l sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"takina"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-r sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"chisato"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-box-l sakana-box"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: translateY(0px) scale(0.5);"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"750"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"1200"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 500px; height: 800px;"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">canvas</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-character"</span> <span style="color:#c4a000">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"takina"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-bed"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-box-r sakana-box"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: translateY(0px) scale(0.5);"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"750"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"1200"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 500px; height: 800px;"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">canvas</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-character"</span> <span style="color:#c4a000">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"chisato"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-bed"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span></code></pre></div><p>大功告成！</p>
|
||||
]]></content:encoded>
|
||||
</item>
|
||||
|
||||
+30
-30
@@ -84,44 +84,44 @@
|
||||
<img data-lazy-src="/pics/2021/09/925164534.png" alt="" class="lazyload"></p>
|
||||
<h2 id="教程开始">教程开始</h2>
|
||||
<p>首先找到自己主题文件的 functions.php 中加入以下代码</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#75715e">/*
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">* 加载时间
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">* @return bool
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">*/</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">timer_start</span>() {
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">global</span> $timestart;
|
||||
</span></span><span style="display:flex;"><span>$mtime <span style="color:#f92672">=</span> <span style="color:#a6e22e">explode</span>( <span style="color:#e6db74">' '</span>, <span style="color:#a6e22e">microtime</span>() );
|
||||
</span></span><span style="display:flex;"><span>$timestart <span style="color:#f92672">=</span> $mtime[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">+</span> $mtime[<span style="color:#ae81ff">0</span>];
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">return</span> <span style="color:#66d9ef">true</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">timer_start</span>();
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">timer_stop</span>( $display <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>, $precision <span style="color:#f92672">=</span> <span style="color:#ae81ff">3</span> ) {
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">global</span> $timestart, $timeend;
|
||||
</span></span><span style="display:flex;"><span>$mtime <span style="color:#f92672">=</span> <span style="color:#a6e22e">explode</span>( <span style="color:#e6db74">' '</span>, <span style="color:#a6e22e">microtime</span>() );
|
||||
</span></span><span style="display:flex;"><span>$timeend <span style="color:#f92672">=</span> $mtime[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">+</span> $mtime[<span style="color:#ae81ff">0</span>];
|
||||
</span></span><span style="display:flex;"><span>$timetotal <span style="color:#f92672">=</span> <span style="color:#a6e22e">number_format</span>( $timeend <span style="color:#f92672">-</span> $timestart, $precision );
|
||||
</span></span><span style="display:flex;"><span>$r <span style="color:#f92672">=</span> $timetotal <span style="color:#f92672"><</span> <span style="color:#ae81ff">1</span> <span style="color:#f92672">?</span> $timetotal <span style="color:#f92672">*</span> <span style="color:#ae81ff">1000</span> <span style="color:#f92672">.</span> <span style="color:#e6db74">" ms"</span> <span style="color:#f92672">:</span> $timetotal <span style="color:#f92672">.</span> <span style="color:#e6db74">" s"</span>;
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">if</span> ( $display ) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">echo</span> $r;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">return</span> $r;}<span style="color:#960050;background-color:#1e0010">`</span>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">/*
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">* 加载时间
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">* @return bool
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">*/</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">timer_start</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">global</span> <span style="color:#000">$timestart</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000">$mtime</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">explode</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">' '</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">microtime</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000">$timestart</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">$mtime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">1</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">$mtime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">];</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">return</span> <span style="color:#204a87;font-weight:bold">true</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000">timer_start</span><span style="color:#000;font-weight:bold">();</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">timer_stop</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$display</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">$precision</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#0000cf;font-weight:bold">3</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">global</span> <span style="color:#000">$timestart</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">$timeend</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000">$mtime</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">explode</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">' '</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">microtime</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000">$timeend</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">$mtime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">1</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">$mtime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">];</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000">$timetotal</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">number_format</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$timeend</span> <span style="color:#ce5c00;font-weight:bold">-</span> <span style="color:#000">$timestart</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">$precision</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000">$r</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">$timetotal</span> <span style="color:#ce5c00;font-weight:bold"><</span> <span style="color:#0000cf;font-weight:bold">1</span> <span style="color:#ce5c00;font-weight:bold">?</span> <span style="color:#000">$timetotal</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">1000</span> <span style="color:#ce5c00;font-weight:bold">.</span> <span style="color:#4e9a06">" ms"</span> <span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#000">$timetotal</span> <span style="color:#ce5c00;font-weight:bold">.</span> <span style="color:#4e9a06">" s"</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$display</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">echo</span> <span style="color:#000">$r</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">return</span> <span style="color:#000">$r</span><span style="color:#000;font-weight:bold">;}</span><span style="color:#a40000">`</span>
|
||||
</span></span></code></pre></div><p>这个是加载耗时的代码，下面一并加上访问总量的代码</p>
|
||||
<p>同样也是加在functions.php 的文件里</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span> <span style="color:#75715e">//总访问量
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">theAllViews</span>()
|
||||
</span></span><span style="display:flex;"><span> {
|
||||
</span></span><span style="display:flex;"><span> $db <span style="color:#f92672">=</span> <span style="color:#a6e22e">Typecho_Db</span><span style="color:#f92672">::</span><span style="color:#a6e22e">get</span>();
|
||||
</span></span><span style="display:flex;"><span> $row <span style="color:#f92672">=</span> $db<span style="color:#f92672">-></span><span style="color:#a6e22e">fetchAll</span>(<span style="color:#e6db74">'SELECT SUM(VIEWS) FROM `typecho_contents`'</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">echo</span> <span style="color:#a6e22e">number_format</span>($row[<span style="color:#ae81ff">0</span>][<span style="color:#e6db74">'SUM(VIEWS)'</span>]);
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span> <span style="color:#8f5902;font-style:italic">//总访问量
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">theAllViews</span><span style="color:#000;font-weight:bold">()</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$db</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">Typecho_Db</span><span style="color:#ce5c00;font-weight:bold">::</span><span style="color:#c4a000">get</span><span style="color:#000;font-weight:bold">();</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$row</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">$db</span><span style="color:#ce5c00;font-weight:bold">-></span><span style="color:#c4a000">fetchAll</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">'SELECT SUM(VIEWS) FROM `typecho_contents`'</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">echo</span> <span style="color:#000">number_format</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$row</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">][</span><span style="color:#4e9a06">'SUM(VIEWS)'</span><span style="color:#000;font-weight:bold">]);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>由于我使用的是油油作者的Twitter主题，所以我给大家介绍</p>
|
||||
<p>Twitter主题应该修改那个位置，其他主题请自己调试</p>
|
||||
<p>首先找到主题目录的important/sidebar.php文件</p>
|
||||
<p>大概在118行左右你把相应代码加到自己想要加的位置</p>
|
||||
<p>添加加载耗时功能，请加下面代码在相应位置</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"widget-list"</span><span style="color:#f92672">></span><span style="color:#a6e22e">加载耗时：</span><span style="color:#f92672"><?</span><span style="color:#a6e22e">php</span> <span style="color:#66d9ef">echo</span> <span style="color:#a6e22e">timer_stop</span>();<span style="color:#75715e">?></span><span style="color:#960050;background-color:#1e0010"></div>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">div</span> <span style="color:#000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"widget-list"</span><span style="color:#ce5c00;font-weight:bold">></span><span style="color:#000">加载耗时：</span><span style="color:#ce5c00;font-weight:bold"><?</span><span style="color:#000">php</span> <span style="color:#204a87;font-weight:bold">echo</span> <span style="color:#000">timer_stop</span><span style="color:#000;font-weight:bold">();</span><span style="color:#8f5902;font-style:italic">?></span><span style="color:#a40000"></div>
|
||||
</span></span></span></code></pre></div><p>添加访问总量功能，请加下面代码在相应位置</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"widget-list"</span><span style="color:#f92672">></span><span style="color:#a6e22e">访问总量：</span><span style="color:#f92672"><?</span><span style="color:#a6e22e">php</span> <span style="color:#66d9ef">echo</span> <span style="color:#a6e22e">theAllViews</span>();<span style="color:#75715e">?></span><span style="color:#960050;background-color:#1e0010">次</div>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">div</span> <span style="color:#000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"widget-list"</span><span style="color:#ce5c00;font-weight:bold">></span><span style="color:#000">访问总量：</span><span style="color:#ce5c00;font-weight:bold"><?</span><span style="color:#000">php</span> <span style="color:#204a87;font-weight:bold">echo</span> <span style="color:#000">theAllViews</span><span style="color:#000;font-weight:bold">();</span><span style="color:#8f5902;font-style:italic">?></span><span style="color:#a40000">次</div>
|
||||
</span></span></span></code></pre></div><p>感谢您的访问，转载请注明出处</p>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -91,20 +91,20 @@
|
||||
<p>
|
||||
<img data-lazy-src="/pics/2021/10/814315235.png" alt="" class="lazyload"></p>
|
||||
<p>图片显示的代码是我修改之后的，你只需要将</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg)/i",path);
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg)/i",path);
|
||||
</span></span></code></pre></div><p>改为</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg|webp)/i",path);
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg|webp)/i",path);
|
||||
</span></span></code></pre></div><p>然后找到</p>
|
||||
<p>typecho的var/Widget/Abstract/Contents.php</p>
|
||||
<p>差不多是686行</p>
|
||||
<p>
|
||||
<img data-lazy-src="/pics/2021/10/402523352.png" alt="" class="lazyload"></p>
|
||||
<p>然后将</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp'));
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp'));
|
||||
</span></span></code></pre></div><p>改为</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp', 'webp'));
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp', 'webp'));
|
||||
</span></span></code></pre></div><p>然后找到var/Typecho/Common.php，差不多是1399行，我们这里多加一行代码</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>'webp' => 'image/webp',
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>'webp' => 'image/webp',
|
||||
</span></span></code></pre></div><p>然后去typecho的后台，找到设置-基本，这个地方在其他文件加入webp，然后博客就可以完美支持webp格式图片了</p>
|
||||
<p>
|
||||
<img data-lazy-src="/pics/2021/10/46607755.png" alt="" class="lazyload"></p>
|
||||
@@ -154,7 +154,7 @@ https://squoosh.app</a></p>
|
||||
<h2 id="让wordpress支持webp格式图片">让WordPress支持webp格式图片</h2>
|
||||
<p>因为我之前使用的博客系统是WordPress，当然也有让WordPress支持webp格式图片的方法</p>
|
||||
<p>直接在自己的主题文件的function.php里面加入下面代码即可完美支持webp格式图片</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>//下方一段为webp格式图片支持代码 function bzg_filter_mime_types( $array ) { $array['webp'] = 'image/webp'; return $array; } add_filter( 'mime_types', 'bzg_filter_mime_types', 10, 1 );
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>//下方一段为webp格式图片支持代码 function bzg_filter_mime_types( $array ) { $array['webp'] = 'image/webp'; return $array; } add_filter( 'mime_types', 'bzg_filter_mime_types', 10, 1 );
|
||||
</span></span><span style="display:flex;"><span>//下方为webp格式图片在媒体库预览图像支持代码 function bzg_file_is_displayable_image($result, $path) { $info = @getimagesize( $path ); if($info['mime'] == 'image/webp') { $result = true; } return $result; } add_filter( 'file_is_displayable_image', 'bzg_file_is_displayable_image', 10, 2 );
|
||||
</span></span></code></pre></div><p>基本上就分享这么多，晚安，我的朋友们</p>
|
||||
|
||||
|
||||
@@ -129,7 +129,7 @@ https://www.xiaoz.me/archives/14666</a></p>
|
||||
>
|
||||
https://www.upyun.com/league</a></p>
|
||||
<p>又拍云联盟需要在网站下面加入又拍云的logo，你想用我弄好的样式，可以复制下面我做的样式，自己放在自己网站的合适地方即可</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">align</span><span style="color:#f92672">=</span><span style="color:#e6db74">"left"</span>><<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"</span>><<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://img.52ql.cn/img/169"</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"249px"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"400px"</span>/></<span style="color:#f92672">a</span>></<span style="color:#f92672">div</span>>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"left"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://img.52ql.cn/img/169"</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"249px"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"400px"</span><span style="color:#000;font-weight:bold">/></</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span></code></pre></div><p>然后提交申请加入又拍云联盟即可，审核小姐姐真的很给力，基本上两个小时就给你通过申请了</p>
|
||||
<p>
|
||||
<img data-lazy-src="/pics/2021/11/3873224529.png" alt="" class="lazyload"></p>
|
||||
@@ -169,7 +169,7 @@ https://www.upyun.com/league</a></p>
|
||||
<p>这个我想潘先生已经体会到了，哈哈哈，这个设置其实很简单，安装下面我的配置设置即可</p>
|
||||
<p>
|
||||
<img data-lazy-src="/pics/2021/11/1401014779.png" alt="" class="lazyload"></p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>1.https://usj.cc/admin/login.php?referer=https%3A%2F%2Fusj.cc%2Fadmin%2Fwelcome.php
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>1.https://usj.cc/admin/login.php?referer=https%3A%2F%2Fusj.cc%2Fadmin%2Fwelcome.php
|
||||
</span></span><span style="display:flex;"><span>2.域名后方会带有?referer=请求
|
||||
</span></span><span style="display:flex;"><span>3.referer=https%3A%2F%2Fusj.cc%2Fadmin%2Fwelcome.php
|
||||
</span></span><span style="display:flex;"><span>4.中间是域名 后面是后台路径
|
||||
@@ -202,7 +202,7 @@ https://www.upyun.com/league</a></p>
|
||||
<p>我们可禁止一些大量抓取网站或者恶意抓取/镜像我们网站的常见爬虫访问</p>
|
||||
<p>这样可以节省一部分流量。可通过「访问控制」→「User-Agent 防盗链」设置，例如以下常见的 User Agent：</p>
|
||||
<p>[reply]</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>FeedDemon 内容采集
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>FeedDemon 内容采集
|
||||
</span></span><span style="display:flex;"><span>BOT/0.1 (BOT for JCE) sql注入
|
||||
</span></span><span style="display:flex;"><span>CrawlDaddy sql注入
|
||||
</span></span><span style="display:flex;"><span>Java 内容采集
|
||||
|
||||
+37
-37
@@ -117,56 +117,56 @@
|
||||
<h2 id="wordpress的接入方法">WordPress的接入方法</h2>
|
||||
<p>只需要将以下代码</p>
|
||||
<p>加入你的插件或主题的 <code>functions.php</code> 里即可</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#66d9ef">if</span> ( <span style="color:#f92672">!</span> <span style="color:#a6e22e">function_exists</span>( <span style="color:#e6db74">'get_cravatar_url'</span> ) ) {
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span> <span style="color:#ce5c00;font-weight:bold">!</span> <span style="color:#000">function_exists</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">'get_cravatar_url'</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">get_cravatar_url</span>( $url ) {
|
||||
</span></span><span style="display:flex;"><span> $sources <span style="color:#f92672">=</span> <span style="color:#66d9ef">array</span>(
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">'www.gravatar.com'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">'0.gravatar.com'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">'1.gravatar.com'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">'2.gravatar.com'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">'secure.gravatar.com'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">'cn.gravatar.com'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">'gravatar.com'</span>,
|
||||
</span></span><span style="display:flex;"><span> );
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">get_cravatar_url</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$url</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$sources</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87;font-weight:bold">array</span><span style="color:#000;font-weight:bold">(</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">'www.gravatar.com'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">'0.gravatar.com'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">'1.gravatar.com'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">'2.gravatar.com'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">'secure.gravatar.com'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">'cn.gravatar.com'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">'gravatar.com'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">str_replace</span>( $sources, <span style="color:#e6db74">'cravatar.cn'</span>, $url );
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#000">str_replace</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$sources</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">'cravatar.cn'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">$url</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">add_filter</span>( <span style="color:#e6db74">'um_user_avatar_url_filter'</span>, <span style="color:#e6db74">'get_cravatar_url'</span>, <span style="color:#ae81ff">1</span> );
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">add_filter</span>( <span style="color:#e6db74">'bp_gravatar_url'</span>, <span style="color:#e6db74">'get_cravatar_url'</span>, <span style="color:#ae81ff">1</span> );
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">add_filter</span>( <span style="color:#e6db74">'get_avatar_url'</span>, <span style="color:#e6db74">'get_cravatar_url'</span>, <span style="color:#ae81ff">1</span> );
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">add_filter</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">'um_user_avatar_url_filter'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">'get_cravatar_url'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">1</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">add_filter</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">'bp_gravatar_url'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">'get_cravatar_url'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">1</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">add_filter</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">'get_avatar_url'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">'get_cravatar_url'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">1</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">if</span> ( <span style="color:#f92672">!</span> <span style="color:#a6e22e">function_exists</span>( <span style="color:#e6db74">'set_defaults_for_cravatar'</span> ) ) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">/**
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> * 替换 WordPress 讨论设置中的默认头像
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> */</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">set_defaults_for_cravatar</span>( $avatar_defaults ) {
|
||||
</span></span><span style="display:flex;"><span> $avatar_defaults[<span style="color:#e6db74">'gravatar_default'</span>] <span style="color:#f92672">=</span> <span style="color:#e6db74">'Cravatar 标志'</span>;
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span> <span style="color:#ce5c00;font-weight:bold">!</span> <span style="color:#000">function_exists</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">'set_defaults_for_cravatar'</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#8f5902;font-style:italic">/**
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"> * 替换 WordPress 讨论设置中的默认头像
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"> */</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">set_defaults_for_cravatar</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$avatar_defaults</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$avatar_defaults</span><span style="color:#000;font-weight:bold">[</span><span style="color:#4e9a06">'gravatar_default'</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'Cravatar 标志'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $avatar_defaults;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#000">$avatar_defaults</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">add_filter</span>( <span style="color:#e6db74">'avatar_defaults'</span>, <span style="color:#e6db74">'set_defaults_for_cravatar'</span>, <span style="color:#ae81ff">1</span> );
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">add_filter</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">'avatar_defaults'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">'set_defaults_for_cravatar'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">1</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">if</span> ( <span style="color:#f92672">!</span> <span style="color:#a6e22e">function_exists</span>( <span style="color:#e6db74">'set_user_profile_picture_for_cravatar'</span> ) ) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">/**
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> * 替换个人资料卡中的头像上传地址
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> */</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">set_user_profile_picture_for_cravatar</span>() {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#e6db74">'<a href="https://cravatar.cn" target="_blank">您可以在 Cravatar 修改您的资料图片</a>'</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span> <span style="color:#ce5c00;font-weight:bold">!</span> <span style="color:#000">function_exists</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">'set_user_profile_picture_for_cravatar'</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#8f5902;font-style:italic">/**
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"> * 替换个人资料卡中的头像上传地址
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"> */</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">set_user_profile_picture_for_cravatar</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#4e9a06">'<a href="https://cravatar.cn" target="_blank">您可以在 Cravatar 修改您的资料图片</a>'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">add_filter</span>( <span style="color:#e6db74">'user_profile_picture_description'</span>, <span style="color:#e6db74">'set_user_profile_picture_for_cravatar'</span>, <span style="color:#ae81ff">1</span> );
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">add_filter</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">'user_profile_picture_description'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">'set_user_profile_picture_for_cravatar'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">1</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>但是要注意的是7b2，日主题，子比主题主题作者已经摒弃了Gravatar头像</p>
|
||||
<p>使用的自己的头像方案，所以无法支持Cravatar头像</p>
|
||||
<h2 id="typecho的接入方法">typecho的接入方法</h2>
|
||||
<p>我们主要是对官方的Gravatar换源，这个很简单</p>
|
||||
<p>找到自己的博客程序的根目录，将以下代码加到站点根目录的 <code>config.inc.php</code> 中即可</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#a6e22e">define</span>(<span style="color:#e6db74">'__TYPECHO_GRAVATAR_PREFIX__'</span>, <span style="color:#e6db74">'https://cravatar.cn/avatar/'</span>);
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#000">define</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">'__TYPECHO_GRAVATAR_PREFIX__'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">'https://cravatar.cn/avatar/'</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span></code></pre></div><h2 id="cravatar官网地址">Cravatar官网地址</h2>
|
||||
<blockquote>
|
||||
<p>
|
||||
|
||||
+22
-22
@@ -96,32 +96,32 @@ https://github.com/Xcnte/Code-Prettify-for-typecho</a></strong></p>
|
||||
<p>
|
||||
<img data-lazy-src="/pics/2021/09/1393453259.png" alt="" class="lazyload"></p>
|
||||
<p>在主题的自定义css下面加入以下代码</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>#post-content <span style="color:#f92672">pre</span> <span style="color:#f92672">code</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>:<span style="color:#66d9ef">block</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">overflow-x</span>:<span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>:<span style="color:#66d9ef">relative</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>:<span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding-left</span>:<span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672">pre</span> <span style="color:#f92672">code</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>:<span style="color:#66d9ef">relative</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>:<span style="color:#66d9ef">block</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">overflow-x</span>:<span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>:<span style="color:#ae81ff">4.4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">0</span><span style="color:#f92672">.</span>px <span style="color:#ae81ff">.4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>:<span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">max-height</span>:<span style="color:#ae81ff">500</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding-left</span>:<span style="color:#ae81ff">3.5</span><span style="color:#66d9ef">em</span>
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">#</span><span style="color:#000">post-content</span> <span style="color:#204a87;font-weight:bold">pre</span> <span style="color:#204a87;font-weight:bold">code</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">overflow-x</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">padding-left</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">pre</span> <span style="color:#204a87;font-weight:bold">code</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">overflow-x</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">4.4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">px</span> <span style="color:#0000cf;font-weight:bold">.4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">1</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">padding</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">max-height</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">500</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">padding-left</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">3.5</span><span style="color:#204a87;font-weight:bold">em</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>在Twitter主题找到pjax开始执行的js代码</p>
|
||||
<p>
|
||||
<img data-lazy-src="/pics/2021/09/1861920591.png" alt="" class="lazyload"></p>
|
||||
<p>在主题的这个地方加入下面的代码在主题的相应位置</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">if</span> (<span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">Prism</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">'undefined'</span>) {
|
||||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pres</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementsByTagName</span>(<span style="color:#e6db74">'pre'</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672"><</span> <span style="color:#a6e22e">pres</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>){
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">pres</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">getElementsByTagName</span>(<span style="color:#e6db74">'code'</span>).<span style="color:#a6e22e">length</span> <span style="color:#f92672">></span> <span style="color:#ae81ff">0</span>)
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">pres</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">className</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'line-numbers'</span>;}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">Prism</span>.<span style="color:#a6e22e">highlightAll</span>(<span style="color:#66d9ef">true</span>,<span style="color:#66d9ef">null</span>);}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">typeof</span> <span style="color:#000">Prism</span> <span style="color:#ce5c00;font-weight:bold">!==</span> <span style="color:#4e9a06">'undefined'</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">pres</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementsByTagName</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">'pre'</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">for</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">i</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span> <span style="color:#000">i</span> <span style="color:#ce5c00;font-weight:bold"><</span> <span style="color:#000">pres</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">length</span><span style="color:#000;font-weight:bold">;</span> <span style="color:#000">i</span><span style="color:#ce5c00;font-weight:bold">++</span><span style="color:#000;font-weight:bold">){</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">pres</span><span style="color:#000;font-weight:bold">[</span><span style="color:#000">i</span><span style="color:#000;font-weight:bold">].</span><span style="color:#000">getElementsByTagName</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">'code'</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">length</span> <span style="color:#ce5c00;font-weight:bold">></span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pres</span><span style="color:#000;font-weight:bold">[</span><span style="color:#000">i</span><span style="color:#000;font-weight:bold">].</span><span style="color:#000">className</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'line-numbers'</span><span style="color:#000;font-weight:bold">;}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000">Prism</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">highlightAll</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">true</span><span style="color:#000;font-weight:bold">,</span><span style="color:#204a87;font-weight:bold">null</span><span style="color:#000;font-weight:bold">);}</span>
|
||||
</span></span></code></pre></div><p>每次我们要写文章的时候我们只用按照下面那种格式就可以啦</p>
|
||||
<p>
|
||||
<img data-lazy-src="/pics/2021/09/1981017062.png" alt="" class="lazyload"></p>
|
||||
|
||||
+58
-58
@@ -103,65 +103,65 @@
|
||||
</blockquote>
|
||||
<p>这里我会提供两种方法，小赵推荐大家使用第二种，因为利于修改</p>
|
||||
<p>找到博客的侧栏的php文件，在合适的位置加入以下代码</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">body</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"text-align: center;margin-top: 10px;"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">link</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"text/css"</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">"all"</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://a-oss.zmki.cn/20190606/love.css"</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">"stylesheet"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">svg</span> <span style="color:#a6e22e">viewBox</span><span style="color:#f92672">=</span><span style="color:#e6db74">"0 0 1024 1024"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"margin-left: 5px;margin-right: 5px;"</span> <span style="color:#a6e22e">version</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1.0"</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"15"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"15"</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"my-face"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">path</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">d</span><span style="color:#f92672">=</span><span style="color:#e6db74">"M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fill</span><span style="color:#f92672">=</span><span style="color:#e6db74">"#515151"</span>></<span style="color:#f92672">path</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">svg</span>>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"text-align: center;margin-top: 10px;"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"text/css"</span> <span style="color:#c4a000">media</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"all"</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://a-oss.zmki.cn/20190606/love.css"</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"stylesheet"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"0 0 1024 1024"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"margin-left: 5px;margin-right: 5px;"</span> <span style="color:#c4a000">version</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"1.0"</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"15"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"15"</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"my-face"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">path</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"#515151"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"</span>><<span style="color:#f92672">br</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">br</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">span</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"htmer_time"</span>> <<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"zmki_love_ah"</span>></<span style="color:#f92672">span</span>></<span style="color:#f92672">span</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"text/javascript"</span> <span style="color:#a6e22e">language</span><span style="color:#f92672">=</span><span style="color:#e6db74">"javascript"</span>><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">setTime</span>() {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">create_time</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">round</span>(<span style="color:#66d9ef">new</span> Date(Date.<span style="color:#a6e22e">UTC</span>(<span style="color:#ae81ff">2019</span>, <span style="color:#ae81ff">12</span>, <span style="color:#ae81ff">28</span>, <span style="color:#ae81ff">6</span>, <span style="color:#ae81ff">45</span>, <span style="color:#ae81ff">0</span>)).<span style="color:#a6e22e">getTime</span>() <span style="color:#f92672">/</span> <span style="color:#ae81ff">1000</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">timestamp</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">round</span>((<span style="color:#66d9ef">new</span> Date().<span style="color:#a6e22e">getTime</span>() <span style="color:#f92672">+</span> <span style="color:#ae81ff">8</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">1000</span>) <span style="color:#f92672">/</span> <span style="color:#ae81ff">1000</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">currentTime</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">secondToDate</span>((<span style="color:#a6e22e">timestamp</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">create_time</span>));
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">currentTimeHtml</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">' <span class="zmki_love_ah">已经在一起</span><br>'</span> <span style="color:#f92672">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">currentTime</span>[<span style="color:#ae81ff">0</span>] <span style="color:#f92672">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">"年 "</span> <span style="color:#f92672">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">currentTime</span>[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">" 天 "</span> <span style="color:#f92672">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">currentTime</span>[<span style="color:#ae81ff">2</span>] <span style="color:#f92672">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#e6db74">" 时 "</span>;
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"htmer_time"</span>).<span style="color:#a6e22e">innerHTML</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">currentTimeHtml</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">secondToDate</span>(<span style="color:#a6e22e">second</span>) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span><span style="color:#a6e22e">second</span>) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">time</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> Array(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">second</span> <span style="color:#f92672">>=</span> <span style="color:#ae81ff">365</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">24</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">3600</span>) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">time</span>[<span style="color:#ae81ff">0</span>] <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">second</span> <span style="color:#f92672">/</span> (<span style="color:#ae81ff">365</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">24</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">3600</span>));
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">second</span> <span style="color:#f92672">%=</span> <span style="color:#ae81ff">365</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">24</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">3600</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">second</span> <span style="color:#f92672">>=</span> <span style="color:#ae81ff">24</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">3600</span>) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">time</span>[<span style="color:#ae81ff">1</span>] <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">second</span> <span style="color:#f92672">/</span> (<span style="color:#ae81ff">24</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">3600</span>));
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">second</span> <span style="color:#f92672">%=</span> <span style="color:#ae81ff">24</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">3600</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">second</span> <span style="color:#f92672">>=</span> <span style="color:#ae81ff">3600</span>) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">time</span>[<span style="color:#ae81ff">2</span>] <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">second</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">3600</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">second</span> <span style="color:#f92672">%=</span> <span style="color:#ae81ff">3600</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">second</span> <span style="color:#f92672">>=</span> <span style="color:#ae81ff">60</span>) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">time</span>[<span style="color:#ae81ff">3</span>] <span style="color:#f92672">=</span> parseInt(<span style="color:#a6e22e">second</span> <span style="color:#f92672">/</span> <span style="color:#ae81ff">60</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">second</span> <span style="color:#f92672">%=</span> <span style="color:#ae81ff">60</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">second</span> <span style="color:#f92672">></span> <span style="color:#ae81ff">0</span>) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">time</span>[<span style="color:#ae81ff">4</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">second</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">time</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">setInterval</span>(<span style="color:#a6e22e">setTime</span>, <span style="color:#ae81ff">1000</span>);
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">script</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">body</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"htmer_time"</span><span style="color:#000;font-weight:bold">></span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"zmki_love_ah"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"text/javascript"</span> <span style="color:#c4a000">language</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"javascript"</span><span style="color:#000;font-weight:bold">></span><span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">setTime</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">create_time</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">round</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">new</span> <span style="color:#204a87">Date</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">Date</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">UTC</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">2019</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">28</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">6</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">45</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">)).</span><span style="color:#000">getTime</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#0000cf;font-weight:bold">1000</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">timestamp</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">round</span><span style="color:#000;font-weight:bold">((</span><span style="color:#204a87;font-weight:bold">new</span> <span style="color:#204a87">Date</span><span style="color:#000;font-weight:bold">().</span><span style="color:#000">getTime</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#0000cf;font-weight:bold">8</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">60</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">60</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">1000</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#0000cf;font-weight:bold">1000</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTime</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">secondToDate</span><span style="color:#000;font-weight:bold">((</span><span style="color:#000">timestamp</span> <span style="color:#ce5c00;font-weight:bold">-</span> <span style="color:#000">create_time</span><span style="color:#000;font-weight:bold">));</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTimeHtml</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">' <span class="zmki_love_ah">已经在一起</span><br>'</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">"年 "</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">1</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">" 天 "</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">2</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">" 时 "</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"htmer_time"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">innerHTML</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">currentTimeHtml</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">secondToDate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#ce5c00;font-weight:bold">!</span><span style="color:#000">second</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">time</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87;font-weight:bold">new</span> <span style="color:#204a87">Array</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">>=</span> <span style="color:#0000cf;font-weight:bold">365</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">365</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">));</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">%=</span> <span style="color:#0000cf;font-weight:bold">365</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">>=</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">1</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">));</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">%=</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">>=</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">2</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">%=</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">>=</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">3</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">%=</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">></span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">4</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">second</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">setInterval</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">setTime</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">1000</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span></code></pre></div><p>然后就可以了，效果就是我上面展示的第一个效果图，这个方法不建议</p>
|
||||
<p>主要是因为这个小工具的自带的css样式会，跟主题的css冲突，结果会像我这样的，哈哈哈</p>
|
||||
<p>
|
||||
@@ -175,7 +175,7 @@
|
||||
<p>演示页面：https://zql.im/love.html</p>
|
||||
</blockquote>
|
||||
<p>然后修改相应的东西改为你自己的就好了，然后找到主题的合适位置放入iframe标签</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span> <<span style="color:#f92672">iframe</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"这里放置你的网页"</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"204"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"120"</span> <span style="color:#a6e22e">frameborder</span><span style="color:#f92672">=</span><span style="color:#e6db74">"0"</span> <span style="color:#a6e22e">scrolling</span><span style="color:#f92672">=</span><span style="color:#e6db74">"No"</span> <span style="color:#a6e22e">align</span><span style="color:#f92672">=</span><span style="color:#e6db74">"center"</span>><<span style="color:#f92672">span</span> <span style="color:#a6e22e">data-mce-type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"bookmark"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"display: inline-block; width: 0px; overflow: hidden; line-height: 0;"</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"mce_SELRES_start"</span>></<span style="color:#f92672">span</span>></<span style="color:#f92672">iframe</span>>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">iframe</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"这里放置你的网页"</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"204"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"120"</span> <span style="color:#c4a000">frameborder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"0"</span> <span style="color:#c4a000">scrolling</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"No"</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"center"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">data-mce-type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"bookmark"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"display: inline-block; width: 0px; overflow: hidden; line-height: 0;"</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"mce_SELRES_start"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">iframe</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span></code></pre></div><p>这里可能需要一点css基础，如果你不会，可以在文章的评论区留言，我有空可以帮你看看</p>
|
||||
<h2 id="你为什么不在你的博客放这个小工具呢">你为什么不在你的博客放这个小工具呢</h2>
|
||||
<p>这个嘛，前提是我得有个女朋友先，折腾来折腾去，才恍然大悟自己还是个单身汪，没想到小丑居然是我自己</p>
|
||||
|
||||
+277
-277
@@ -86,269 +86,269 @@
|
||||
<p>大概谷歌浏览器搜了一下，还是如愿以偿找到了代码，但是代码不太精简，我删除了一些不必要的代码</p>
|
||||
<p>终究还是实现了，这里简单讲一下方法以及实现原理，首先就是怼几个div标签，进行骨架构成</p>
|
||||
<p>这边建议找到自己的主题模版的footer.php，在适当位置加入下面这些代码</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"usj"</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-box2"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"xian"</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-t"</span>>年</<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui shui-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-c"</span>>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"usj"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box2"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>年<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-b"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-box3"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"xian"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box3"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-t"</span>>新</<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui shui-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-c"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>新<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-box1"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"xian"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box1"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-t"</span>>乐</<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui shui-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-c"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-b"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-box"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"xian"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>乐<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-t"</span>>快</<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui shui-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-c"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>快<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-b"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span></code></pre></div><p>接着就是怼css，分别为四个灯笼，输出新年快乐四个字，分别给他们设为deng-box，deng-box2，deng-box3，deng-box4，当然每个博客模版都是需要自己对deng-box的top和left值进行适当调整，你也可以参考以下css代码</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">deng-box</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-30</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">35</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">9999</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">35</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box1</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-30</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">-41</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">9999</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box1</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-41</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box2</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-30</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">40</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">9999</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box2</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">40</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box3</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-30</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">-20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">9999</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box3</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box1</span> .<span style="color:#a6e22e">deng</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box3</span> .<span style="color:#a6e22e">deng</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">120</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">90</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#d8000f</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">216</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">15</span>, <span style="color:#ae81ff">.8</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">-100</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">animation</span>: swing <span style="color:#ae81ff">5</span><span style="color:#66d9ef">s</span> <span style="color:#66d9ef">infinite</span> <span style="color:#66d9ef">ease-in-out</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">30</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">#fc903d</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box1</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box3</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">120</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.8</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">-100</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">animation</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000">swing</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">s</span> <span style="color:#204a87;font-weight:bold">infinite</span> <span style="color:#204a87;font-weight:bold">ease-in-out</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">30</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#fc903d</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">120</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">90</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#d8000f</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">216</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">15</span>, <span style="color:#ae81ff">.8</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">-100</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">animation</span>: swing <span style="color:#ae81ff">3</span><span style="color:#66d9ef">s</span> <span style="color:#66d9ef">infinite</span> <span style="color:#66d9ef">ease-in-out</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">#fa6c00</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">120</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.8</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">-100</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">animation</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000">swing</span> <span style="color:#0000cf;font-weight:bold">3</span><span style="color:#204a87;font-weight:bold">s</span> <span style="color:#204a87;font-weight:bold">infinite</span> <span style="color:#204a87;font-weight:bold">ease-in-out</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#fa6c00</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-a</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">90</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#d8000f</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">216</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">15</span>, <span style="color:#ae81ff">.1</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">12</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">#dc8f03</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-a</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">100</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.1</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-b</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">45</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">90</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#d8000f</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">216</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">15</span>, <span style="color:#ae81ff">.1</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">-4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">26</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">#dc8f03</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-b</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">45</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.1</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">26</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">xian</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">60</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#dc8f03</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">xian</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">shui-a</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">59</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">animation</span>: swing <span style="color:#ae81ff">4</span><span style="color:#66d9ef">s</span> <span style="color:#66d9ef">infinite</span> <span style="color:#66d9ef">ease-in-out</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">-45</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">orange</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">shui-a</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">59</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">animation</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000">swing</span> <span style="color:#0000cf;font-weight:bold">4</span><span style="color:#204a87;font-weight:bold">s</span> <span style="color:#204a87;font-weight:bold">infinite</span> <span style="color:#204a87;font-weight:bold">ease-in-out</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">-45</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">shui-b</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">14</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">-2</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#dc8f03</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">shui-b</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">14</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">shui-c</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">18</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">-2</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">35</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">orange</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">shui-c</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">18</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">35</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng</span>:<span style="color:#a6e22e">before</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-7</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">29</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">12</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">60</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>: <span style="color:#e6db74">" "</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">block</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">999</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">#dc8f03</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">orange</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: linear-gradient(<span style="color:#66d9ef">to</span> <span style="color:#66d9ef">right</span>, <span style="color:#ae81ff">#dc8f03</span>, <span style="color:#66d9ef">orange</span>, <span style="color:#ae81ff">#dc8f03</span>, <span style="color:#66d9ef">orange</span>, <span style="color:#ae81ff">#dc8f03</span>)
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">before</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-7</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">29</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">content</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#4e9a06">" "</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">1</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">linear-gradient</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">to</span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng</span>:<span style="color:#a6e22e">after</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">-7</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">12</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">60</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>: <span style="color:#e6db74">" "</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">block</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin-left</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">#dc8f03</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">orange</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: linear-gradient(<span style="color:#66d9ef">to</span> <span style="color:#66d9ef">right</span>, <span style="color:#ae81ff">#dc8f03</span>, <span style="color:#66d9ef">orange</span>, <span style="color:#ae81ff">#dc8f03</span>, <span style="color:#66d9ef">orange</span>, <span style="color:#ae81ff">#dc8f03</span>)
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">after</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-7</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">content</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#4e9a06">" "</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin-left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">1</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">linear-gradient</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">to</span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-t</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#960050;background-color:#1e0010">黑体</span>, Arial, Lucida Grande, Tahoma, <span style="color:#66d9ef">sans-serif</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">3.2</span><span style="color:#66d9ef">rem</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#ae81ff">#dc8f03</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-weight</span>: <span style="color:#ae81ff">700</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">line-height</span>: <span style="color:#ae81ff">85</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">text-align</span>: <span style="color:#66d9ef">center</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-t</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">font-family</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#a40000">黑体</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">Arial</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">Lucida</span> <span style="color:#000">Grande</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">Tahoma</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">sans-serif</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">font-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">3.2</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">color</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">font-weight</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">700</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">line-height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">85</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">text-align</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">center</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">night</span> .<span style="color:#a6e22e">deng-box</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">night</span> .<span style="color:#a6e22e">deng-box1</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">night</span> .<span style="color:#a6e22e">deng-t</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#75715e">!important</span>
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">night</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">night</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box1</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">night</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-t</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#8f5902;font-style:italic">!important</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> @<span style="color:#66d9ef">-moz-keyframes</span> <span style="color:#f92672">swing</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672">0</span><span style="color:#f92672">%</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-moz-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">-10</span><span style="color:#66d9ef">deg</span>)
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">-moz-keyframes</span> <span style="color:#204a87;font-weight:bold">swing</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">0</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-moz-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672">50</span><span style="color:#f92672">%</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-moz-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">10</span><span style="color:#66d9ef">deg</span>)
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">50</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-moz-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672">100</span><span style="color:#f92672">%</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-moz-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">-10</span><span style="color:#66d9ef">deg</span>)
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">100</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-moz-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> @<span style="color:#66d9ef">-webkit-keyframes</span> <span style="color:#f92672">swing</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672">0</span><span style="color:#f92672">%</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">-10</span><span style="color:#66d9ef">deg</span>)
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">-webkit-keyframes</span> <span style="color:#204a87;font-weight:bold">swing</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">0</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672">50</span><span style="color:#f92672">%</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">10</span><span style="color:#66d9ef">deg</span>)
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">50</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672">100</span><span style="color:#f92672">%</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">-10</span><span style="color:#66d9ef">deg</span>)
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">100</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>然后适当调整就完成啦，好了，本文就到这里</p>
|
||||
<p>!!!</p>
|
||||
<!-- raw HTML omitted -->
|
||||
@@ -364,46 +364,46 @@
|
||||
<p>于是就开整，以下对联全都是用js写的，还是问了大三学长部分问题，不然自己还写不出来，在此特别谢谢学长</p>
|
||||
<p>考虑到有的博客有很多侧栏，特别的考虑了对联遮挡问题，我还给对联加了关闭按钮，具体自己可以看看本站的效果</p>
|
||||
<p>[reply]</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">lastScrollY</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">heartBeat</span>() {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">diffY</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (document.<span style="color:#a6e22e">documentElement</span> <span style="color:#f92672">&&</span> document.<span style="color:#a6e22e">documentElement</span>.<span style="color:#a6e22e">scrollTop</span>)
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">diffY</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">documentElement</span>.<span style="color:#a6e22e">scrollTop</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (document.<span style="color:#a6e22e">body</span>)
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">diffY</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">scrollTop</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">percent</span> <span style="color:#f92672">=</span> .<span style="color:#ae81ff">1</span> <span style="color:#f92672">*</span> (<span style="color:#a6e22e">diffY</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">lastScrollY</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">percent</span> <span style="color:#f92672">></span> <span style="color:#ae81ff">0</span>) <span style="color:#a6e22e">percent</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">ceil</span>(<span style="color:#a6e22e">percent</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span> <span style="color:#a6e22e">percent</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">floor</span>(<span style="color:#a6e22e">percent</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"left"</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">top</span> <span style="color:#f92672">=</span> parseInt(document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"left"</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">top</span>) <span style="color:#f92672">+</span> <span style="color:#a6e22e">percent</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">"px"</span>;
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"right"</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">top</span> <span style="color:#f92672">=</span> parseInt(document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"right"</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">top</span>) <span style="color:#f92672">+</span> <span style="color:#a6e22e">percent</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">"px"</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">lastScrollY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">lastScrollY</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">percent</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">close_left2</span>() {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">left2</span>.<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">visibility</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'hidden'</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">close_right2</span>() {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">right2</span>.<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">visibility</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">'hidden'</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<style type=\"text\/css\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"#left,#right{position:absolute;}"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">".imzql{width:100px;height:auto;line-height:5px}"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"#left2 img{max-width: 100%;width: 70px;}"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"#right2 img{max-width: 100%;width: 70px;}"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/style>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<div id=\"left\" style=\"top:112px;left:50px\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<div id=\"left2\" class=\"imzql\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<img border=0 src=https://cdn.usj.cc/left.jpg>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<br><a href=\"javascript:close_left2();\" title=\"关闭左边的对联\">×<\/a>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/div>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/div>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<div id=\"right\" style=\"top:112px;right:50px\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<div id=\"right2\" class=\"imzql\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<img border=0 src=https://cdn.usj.cc/right.jpg>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<br><a href=\"javascript:close_right2();\" title=\"关闭右边的对联\">×<\/a>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/div>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/div>"</span>);
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">lastScrollY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">heartBeat</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">diffY</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">documentElement</span> <span style="color:#ce5c00;font-weight:bold">&&</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">documentElement</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">scrollTop</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">diffY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">documentElement</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">scrollTop</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">else</span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">body</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">diffY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">body</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">scrollTop</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#0000cf;font-weight:bold">1</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">diffY</span> <span style="color:#ce5c00;font-weight:bold">-</span> <span style="color:#000">lastScrollY</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">></span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">ceil</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">percent</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">else</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">floor</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">percent</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"left"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"left"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#4e9a06">"px"</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"right"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"right"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#4e9a06">"px"</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">lastScrollY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">lastScrollY</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">percent</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">close_left2</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">left2</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">visibility</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'hidden'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">close_right2</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">right2</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">visibility</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'hidden'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<style type=\"text\/css\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"#left,#right{position:absolute;}"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">".imzql{width:100px;height:auto;line-height:5px}"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"#left2 img{max-width: 100%;width: 70px;}"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"#right2 img{max-width: 100%;width: 70px;}"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/style>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"left\" style=\"top:112px;left:50px\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"left2\" class=\"imzql\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<img border=0 src=https://cdn.usj.cc/left.jpg>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<br><a href=\"javascript:close_left2();\" title=\"关闭左边的对联\">×<\/a>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"right\" style=\"top:112px;right:50px\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"right2\" class=\"imzql\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<img border=0 src=https://cdn.usj.cc/right.jpg>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<br><a href=\"javascript:close_right2();\" title=\"关闭右边的对联\">×<\/a>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#a40000">/script></span>
|
||||
</span></span></code></pre></div><p>[/reply]</p>
|
||||
<p>这里需要注意需要把
|
||||
<a
|
||||
@@ -415,9 +415,9 @@
|
||||
https://cdn.usj.cc/xxx.jpg</a> 下载下来，接着上传为自己的本地图片，因为这里图片使用的是自己的腾讯云文件托管，需要添加为referer白名单，否则直接引用会裂图</p>
|
||||
<p>曾经被油老师嘲讽自己的思考问题不全面，每次整活都没考虑到移动端，所以这次对移动端也做了特别考虑，为了更好的去适应访客效果，我计划在低于1500分辨率的电子设备上不显示对联，否则在小屏幕的手机端，对联会显示出来遮挡对文章的正常浏览</p>
|
||||
<p>当然控制方法也很简单，直接用css进行控制就好了，有一些设备的分辨率大概在1440，显示了就会影响侧栏的内容显示，当然我已经写了两个关闭按钮去控制，毕竟每次要去关闭两张图片会麻烦</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>@<span style="color:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span>:<span style="color:#a6e22e">1500px</span><span style="color:#f92672">)</span>{#left<span style="color:#f92672">,</span>#right{<span style="color:#66d9ef">display</span>:<span style="color:#66d9ef">none</span> <span style="color:#75715e">!important</span>}}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">1500px</span><span style="color:#ce5c00;font-weight:bold">)</span><span style="color:#000;font-weight:bold">{#</span><span style="color:#000">left</span><span style="color:#ce5c00;font-weight:bold">,</span><span style="color:#000;font-weight:bold">#</span><span style="color:#000">right</span><span style="color:#000;font-weight:bold">{</span><span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">none</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">}}</span>
|
||||
</span></span></code></pre></div><p>在主题的自定义css加入这个代码即可解决问题，灯笼的问题同理，直接在自定义cssjiaru</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>@<span style="color:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span>:<span style="color:#a6e22e">1500px</span><span style="color:#f92672">)</span>{#usj{<span style="color:#66d9ef">display</span>:<span style="color:#66d9ef">none</span> <span style="color:#75715e">!important</span>}}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">1500px</span><span style="color:#ce5c00;font-weight:bold">)</span><span style="color:#000;font-weight:bold">{#</span><span style="color:#000">usj</span><span style="color:#000;font-weight:bold">{</span><span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">none</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">}}</span>
|
||||
</span></span></code></pre></div><p>这样效果基本上就弄好了，是不是很容易理解</p>
|
||||
<p>后来学长建议对联跟随侧栏的拉条移动而移动会更好</p>
|
||||
<p>这个比较简单直接在</p>
|
||||
|
||||
+65
-65
@@ -93,38 +93,38 @@
|
||||
<p>谷歌了一下其他大佬的解决方法，规则之树大佬提供了两个方法</p>
|
||||
<p>参考资料：https://www.ruletree.club/archives/1566/</p>
|
||||
<p>1.第一种则是获取json数据进行分割得出k值再进行重组</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Authorimg</span>($email)
|
||||
</span></span><span style="display:flex;"><span>{
|
||||
</span></span><span style="display:flex;"><span> $a<span style="color:#f92672">=</span><span style="color:#e6db74">'cdn.v2ex.com/gravatar'</span>;<span style="color:#75715e">//gravatar头像源
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> $b<span style="color:#f92672">=</span><span style="color:#a6e22e">str_replace</span>(<span style="color:#e6db74">'@qq.com'</span>,<span style="color:#e6db74">''</span>,$email);<span style="color:#75715e">//替换qq邮箱
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">stristr</span>($email,<span style="color:#e6db74">'@qq.com'</span>)<span style="color:#f92672">&&</span><span style="color:#a6e22e">is_numeric</span>($b)<span style="color:#f92672">&&</span><span style="color:#a6e22e">strlen</span>($b)<span style="color:#f92672"><</span><span style="color:#ae81ff">11</span><span style="color:#f92672">&&</span><span style="color:#a6e22e">strlen</span>($b)<span style="color:#f92672">></span><span style="color:#ae81ff">4</span>){
|
||||
</span></span><span style="display:flex;"><span> $nk <span style="color:#f92672">=</span> <span style="color:#e6db74">'http://ptlogin2.qq.com/getface?&imgtype=1&uin='</span><span style="color:#f92672">.</span>$b;<span style="color:#75715e">//qq头像api
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> $q <span style="color:#f92672">=</span> <span style="color:#a6e22e">file_get_contents</span>($nk);<span style="color:#75715e">//读入文件
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> $q <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_encode</span>($nk);<span style="color:#75715e">//编码json
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> $k <span style="color:#f92672">=</span> <span style="color:#a6e22e">explode</span>(<span style="color:#e6db74">"&k="</span>,$q)[<span style="color:#ae81ff">1</span>];<span style="color:#75715e">//分割出k值
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> <span style="color:#66d9ef">echo</span> <span style="color:#e6db74">'https://q.qlogo.cn/g?b=qq&k='</span><span style="color:#f92672">.</span>$k<span style="color:#f92672">.</span><span style="color:#e6db74">'&s=100'</span>;<span style="color:#75715e">//重组
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> }<span style="color:#66d9ef">else</span>{
|
||||
</span></span><span style="display:flex;"><span> $email<span style="color:#f92672">=</span> <span style="color:#a6e22e">md5</span>($email);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">echo</span> <span style="color:#e6db74">'https://'</span><span style="color:#f92672">.</span>$a<span style="color:#f92672">.</span><span style="color:#e6db74">'/'</span><span style="color:#f92672">.</span>$email<span style="color:#f92672">.</span><span style="color:#e6db74">'?'</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">Authorimg</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$a</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">'cdn.v2ex.com/gravatar'</span><span style="color:#000;font-weight:bold">;</span><span style="color:#8f5902;font-style:italic">//gravatar头像源
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#000">$b</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#000">str_replace</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">'@qq.com'</span><span style="color:#000;font-weight:bold">,</span><span style="color:#4e9a06">''</span><span style="color:#000;font-weight:bold">,</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">);</span><span style="color:#8f5902;font-style:italic">//替换qq邮箱
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#204a87;font-weight:bold">if</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">stristr</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">,</span><span style="color:#4e9a06">'@qq.com'</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">&&</span><span style="color:#000">is_numeric</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">&&</span><span style="color:#000">strlen</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#0000cf;font-weight:bold">11</span><span style="color:#ce5c00;font-weight:bold">&&</span><span style="color:#000">strlen</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">></span><span style="color:#0000cf;font-weight:bold">4</span><span style="color:#000;font-weight:bold">){</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$nk</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'http://ptlogin2.qq.com/getface?&imgtype=1&uin='</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">;</span><span style="color:#8f5902;font-style:italic">//qq头像api
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#000">$q</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">file_get_contents</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$nk</span><span style="color:#000;font-weight:bold">);</span><span style="color:#8f5902;font-style:italic">//读入文件
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#000">$q</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">json_encode</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$nk</span><span style="color:#000;font-weight:bold">);</span><span style="color:#8f5902;font-style:italic">//编码json
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#000">$k</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">explode</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"&k="</span><span style="color:#000;font-weight:bold">,</span><span style="color:#000">$q</span><span style="color:#000;font-weight:bold">)[</span><span style="color:#0000cf;font-weight:bold">1</span><span style="color:#000;font-weight:bold">];</span><span style="color:#8f5902;font-style:italic">//分割出k值
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#204a87;font-weight:bold">echo</span> <span style="color:#4e9a06">'https://q.qlogo.cn/g?b=qq&k='</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$k</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">'&s=100'</span><span style="color:#000;font-weight:bold">;</span><span style="color:#8f5902;font-style:italic">//重组
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#000;font-weight:bold">}</span><span style="color:#204a87;font-weight:bold">else</span><span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$email</span><span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">md5</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">echo</span> <span style="color:#4e9a06">'https://'</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$a</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">'/'</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$email</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">'?'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>2.第二种获取HTTP请求所发送的标头的数组，不用读入整个文件不会影响效率</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Authorimg</span>($email)
|
||||
</span></span><span style="display:flex;"><span> {
|
||||
</span></span><span style="display:flex;"><span> $a<span style="color:#f92672">=</span><span style="color:#e6db74">'cdn.v2ex.com/gravatar'</span>;<span style="color:#75715e">//gravatar头像源
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> $b<span style="color:#f92672">=</span><span style="color:#a6e22e">str_replace</span>(<span style="color:#e6db74">'@qq.com'</span>,<span style="color:#e6db74">''</span>,$email);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">stristr</span>($email,<span style="color:#e6db74">'@qq.com'</span>)<span style="color:#f92672">&&</span><span style="color:#a6e22e">is_numeric</span>($b)<span style="color:#f92672">&&</span><span style="color:#a6e22e">strlen</span>($b)<span style="color:#f92672"><</span><span style="color:#ae81ff">11</span><span style="color:#f92672">&&</span><span style="color:#a6e22e">strlen</span>($b)<span style="color:#f92672">></span><span style="color:#ae81ff">4</span>){
|
||||
</span></span><span style="display:flex;"><span> $nk <span style="color:#f92672">=</span> <span style="color:#e6db74">'https://s.p.qq.com/pub/get_face?img_type=3&uin='</span><span style="color:#f92672">.</span>$b;
|
||||
</span></span><span style="display:flex;"><span> $c <span style="color:#f92672">=</span> <span style="color:#a6e22e">get_headers</span>($nk, <span style="color:#66d9ef">true</span>);
|
||||
</span></span><span style="display:flex;"><span> $d <span style="color:#f92672">=</span> $c[<span style="color:#e6db74">'Location'</span>];
|
||||
</span></span><span style="display:flex;"><span> $q <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_encode</span>($d);
|
||||
</span></span><span style="display:flex;"><span> $k <span style="color:#f92672">=</span> <span style="color:#a6e22e">explode</span>(<span style="color:#e6db74">"&k="</span>,$q)[<span style="color:#ae81ff">1</span>];
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">echo</span> <span style="color:#e6db74">'https://q.qlogo.cn/g?b=qq&k='</span><span style="color:#f92672">.</span>$k<span style="color:#f92672">.</span><span style="color:#e6db74">'&s=100'</span>;
|
||||
</span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span>{
|
||||
</span></span><span style="display:flex;"><span> $email<span style="color:#f92672">=</span> <span style="color:#a6e22e">md5</span>($email);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">echo</span> <span style="color:#e6db74">'https://'</span><span style="color:#f92672">.</span>$a<span style="color:#f92672">.</span><span style="color:#e6db74">'/'</span><span style="color:#f92672">.</span>$email<span style="color:#f92672">.</span><span style="color:#e6db74">'?'</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">Authorimg</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$a</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">'cdn.v2ex.com/gravatar'</span><span style="color:#000;font-weight:bold">;</span><span style="color:#8f5902;font-style:italic">//gravatar头像源
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#000">$b</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#000">str_replace</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">'@qq.com'</span><span style="color:#000;font-weight:bold">,</span><span style="color:#4e9a06">''</span><span style="color:#000;font-weight:bold">,</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">stristr</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">,</span><span style="color:#4e9a06">'@qq.com'</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">&&</span><span style="color:#000">is_numeric</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">&&</span><span style="color:#000">strlen</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#0000cf;font-weight:bold">11</span><span style="color:#ce5c00;font-weight:bold">&&</span><span style="color:#000">strlen</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">></span><span style="color:#0000cf;font-weight:bold">4</span><span style="color:#000;font-weight:bold">){</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$nk</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'https://s.p.qq.com/pub/get_face?img_type=3&uin='</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$c</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">get_headers</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$nk</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">true</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$d</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">$c</span><span style="color:#000;font-weight:bold">[</span><span style="color:#4e9a06">'Location'</span><span style="color:#000;font-weight:bold">];</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$q</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">json_encode</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$d</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$k</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">explode</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"&k="</span><span style="color:#000;font-weight:bold">,</span><span style="color:#000">$q</span><span style="color:#000;font-weight:bold">)[</span><span style="color:#0000cf;font-weight:bold">1</span><span style="color:#000;font-weight:bold">];</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">echo</span> <span style="color:#4e9a06">'https://q.qlogo.cn/g?b=qq&k='</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$k</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">'&s=100'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span><span style="color:#204a87;font-weight:bold">else</span><span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$email</span><span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">md5</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">echo</span> <span style="color:#4e9a06">'https://'</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$a</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">'/'</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$email</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">'?'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>预装主题之后，确实可以实现，但是介于自己的Amigo朋友圈主题模版首页样式需要加载很多评论头像</p>
|
||||
<p>使用这两个方法，加载首页的时间就很长了</p>
|
||||
<p>一个头像需要花费一秒的时间，如果首页的头像较多，这个问题将会是致命的</p>
|
||||
@@ -159,23 +159,23 @@ https://cravatar.cn/avatar/HASH</a></p>
|
||||
<p>如果是QQ邮箱，则通过strtolower() 函数进行转换为小写，再md5加密，然后返回头像</p>
|
||||
<h2 id="代码展示">代码展示</h2>
|
||||
<p>因为是小白，可能写的有些问题</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Authorimg</span>($email)
|
||||
</span></span><span style="display:flex;"><span>{
|
||||
</span></span><span style="display:flex;"><span> $a<span style="color:#f92672">=</span><span style="color:#e6db74">'cravatar.cn/avatar'</span>;<span style="color:#75715e">//gravatar头像源
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span> $b<span style="color:#f92672">=</span><span style="color:#a6e22e">str_replace</span>(<span style="color:#e6db74">'@qq.com'</span>,<span style="color:#e6db74">''</span>,$email);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">stristr</span>($email,<span style="color:#e6db74">'@qq.com'</span>)<span style="color:#f92672">&&</span><span style="color:#a6e22e">is_numeric</span>($b)<span style="color:#f92672">&&</span><span style="color:#a6e22e">strlen</span>($b)<span style="color:#f92672"><</span><span style="color:#ae81ff">11</span><span style="color:#f92672">&&</span><span style="color:#a6e22e">strlen</span>($b)<span style="color:#f92672">></span><span style="color:#ae81ff">4</span>){
|
||||
</span></span><span style="display:flex;"><span> $address <span style="color:#f92672">=</span> <span style="color:#a6e22e">strtolower</span>( <span style="color:#a6e22e">trim</span>( $email ) );
|
||||
</span></span><span style="display:flex;"><span> $hash <span style="color:#f92672">=</span> <span style="color:#a6e22e">md5</span>( $address );
|
||||
</span></span><span style="display:flex;"><span> $qqimgurl <span style="color:#f92672">=</span> <span style="color:#e6db74">'https://cravatar.cn/avatar/'</span> <span style="color:#f92672">.</span> $hash;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $qqimgurl;
|
||||
</span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span>{
|
||||
</span></span><span style="display:flex;"><span> $email<span style="color:#f92672">=</span> <span style="color:#a6e22e">md5</span>($email);
|
||||
</span></span><span style="display:flex;"><span> $avatarimgurl <span style="color:#f92672">=</span> <span style="color:#e6db74">'https://'</span><span style="color:#f92672">.</span>$a<span style="color:#f92672">.</span><span style="color:#e6db74">'/'</span><span style="color:#f92672">.</span>$email<span style="color:#f92672">.</span><span style="color:#e6db74">'?'</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $avatarimgurl;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">Authorimg</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$a</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">'cravatar.cn/avatar'</span><span style="color:#000;font-weight:bold">;</span><span style="color:#8f5902;font-style:italic">//gravatar头像源
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span> <span style="color:#000">$b</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#000">str_replace</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">'@qq.com'</span><span style="color:#000;font-weight:bold">,</span><span style="color:#4e9a06">''</span><span style="color:#000;font-weight:bold">,</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">stristr</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">,</span><span style="color:#4e9a06">'@qq.com'</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">&&</span><span style="color:#000">is_numeric</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">&&</span><span style="color:#000">strlen</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#0000cf;font-weight:bold">11</span><span style="color:#ce5c00;font-weight:bold">&&</span><span style="color:#000">strlen</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$b</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">></span><span style="color:#0000cf;font-weight:bold">4</span><span style="color:#000;font-weight:bold">){</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$address</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">strtolower</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">trim</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$email</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$hash</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">md5</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$address</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$qqimgurl</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'https://cravatar.cn/avatar/'</span> <span style="color:#ce5c00;font-weight:bold">.</span> <span style="color:#000">$hash</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#000">$qqimgurl</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span><span style="color:#204a87;font-weight:bold">else</span><span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$email</span><span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">md5</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$avatarimgurl</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'https://'</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$a</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">'/'</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">$email</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">'?'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#000">$avatarimgurl</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>这样只需要在前端引用一下就好了</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672"><?</span><span style="color:#a6e22e">php</span> <span style="color:#a6e22e">Authorimg</span>($comments<span style="color:#f92672">-></span><span style="color:#a6e22e">mail</span>); <span style="color:#75715e">?></span><span style="color:#960050;background-color:#1e0010">
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><?</span><span style="color:#000">php</span> <span style="color:#000">Authorimg</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$comments</span><span style="color:#ce5c00;font-weight:bold">-></span><span style="color:#c4a000">mail</span><span style="color:#000;font-weight:bold">);</span> <span style="color:#8f5902;font-style:italic">?></span><span style="color:#a40000">
|
||||
</span></span></span></code></pre></div><p>这样QQ用户头像加密功能，就实现了</p>
|
||||
<p>
|
||||
<img data-lazy-src="/pics/2022/08/2139068168.png" alt="" class="lazyload"></p>
|
||||
@@ -192,24 +192,24 @@ https://cloud.usj.cc/d/Onedrive/%E4%BB%A3%E7%A0%81/feature.php</a></p>
|
||||
<p>然后进入你的主题文件，找到 /libs/feature.php文件直接覆盖替换即可</p>
|
||||
<h2 id="twitter主题用户">Twitter主题用户</h2>
|
||||
<p>如果你是Twitter用户，直接在主题目录的function.php的第47行的位置将 Yoniu：取Gravatar头像 部分的代码替换到如下代码</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#75715e">//Yoniu：取Gravatar头像
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">getGravatar</span>($email, $s <span style="color:#f92672">=</span> <span style="color:#ae81ff">40</span>, $d <span style="color:#f92672">=</span> <span style="color:#e6db74">'mm'</span>, $g <span style="color:#f92672">=</span> <span style="color:#e6db74">'g'</span>) {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">preg_match</span>(<span style="color:#e6db74">'|^[1-9]\d{4,11}@qq\.com$|i'</span>,$email)){
|
||||
</span></span><span style="display:flex;"><span> $address <span style="color:#f92672">=</span> <span style="color:#a6e22e">strtolower</span>( <span style="color:#a6e22e">trim</span>( $email ) );
|
||||
</span></span><span style="display:flex;"><span> $hash <span style="color:#f92672">=</span> <span style="color:#a6e22e">md5</span>( $address );
|
||||
</span></span><span style="display:flex;"><span> $qqimgurl <span style="color:#f92672">=</span> <span style="color:#e6db74">'https://cravatar.cn/avatar/'</span> <span style="color:#f92672">.</span> $hash;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $qqimgurl;
|
||||
</span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span>{
|
||||
</span></span><span style="display:flex;"><span> $hash <span style="color:#f92672">=</span> <span style="color:#a6e22e">md5</span>($email);
|
||||
</span></span><span style="display:flex;"><span> $option <span style="color:#f92672">=</span> <span style="color:#a6e22e">Typecho_Widget</span><span style="color:#f92672">::</span><span style="color:#a6e22e">widget</span>(<span style="color:#e6db74">'Widget_Options'</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span>($option<span style="color:#f92672">-></span><span style="color:#a6e22e">gravatarURL</span>){
|
||||
</span></span><span style="display:flex;"><span> $avatar <span style="color:#f92672">=</span> $option<span style="color:#f92672">-></span><span style="color:#a6e22e">gravatarURL</span><span style="color:#f92672">.</span><span style="color:#e6db74">"/</span><span style="color:#e6db74">$hash</span><span style="color:#e6db74">?s=&d=</span><span style="color:#e6db74">$d</span><span style="color:#e6db74">&r=</span><span style="color:#e6db74">$g</span><span style="color:#e6db74">"</span>;
|
||||
</span></span><span style="display:flex;"><span> }<span style="color:#66d9ef">else</span>{
|
||||
</span></span><span style="display:flex;"><span> $avatar <span style="color:#f92672">=</span> <span style="color:#e6db74">"//gravatar.com/avatar/</span><span style="color:#e6db74">$hash</span><span style="color:#e6db74">?s=&d=</span><span style="color:#e6db74">$d</span><span style="color:#e6db74">&r=</span><span style="color:#e6db74">$g</span><span style="color:#e6db74">"</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $avatar;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">//Yoniu：取Gravatar头像
|
||||
</span></span></span><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic"></span><span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">getGravatar</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">$s</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#0000cf;font-weight:bold">40</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">$d</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'mm'</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">$g</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'g'</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">preg_match</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">'|^[1-9]\d{4,11}@qq\.com$|i'</span><span style="color:#000;font-weight:bold">,</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">)){</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$address</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">strtolower</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">trim</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$email</span> <span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$hash</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">md5</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#000">$address</span> <span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$qqimgurl</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'https://cravatar.cn/avatar/'</span> <span style="color:#ce5c00;font-weight:bold">.</span> <span style="color:#000">$hash</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#000">$qqimgurl</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span><span style="color:#204a87;font-weight:bold">else</span><span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$hash</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">md5</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$email</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$option</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">Typecho_Widget</span><span style="color:#ce5c00;font-weight:bold">::</span><span style="color:#c4a000">widget</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">'Widget_Options'</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">$option</span><span style="color:#ce5c00;font-weight:bold">-></span><span style="color:#c4a000">gravatarURL</span><span style="color:#000;font-weight:bold">){</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$avatar</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">$option</span><span style="color:#ce5c00;font-weight:bold">-></span><span style="color:#c4a000">gravatarURL</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">"/</span><span style="color:#4e9a06">$hash</span><span style="color:#4e9a06">?s=&d=</span><span style="color:#4e9a06">$d</span><span style="color:#4e9a06">&r=</span><span style="color:#4e9a06">$g</span><span style="color:#4e9a06">"</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span><span style="color:#204a87;font-weight:bold">else</span><span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">$avatar</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">"//gravatar.com/avatar/</span><span style="color:#4e9a06">$hash</span><span style="color:#4e9a06">?s=&d=</span><span style="color:#4e9a06">$d</span><span style="color:#4e9a06">&r=</span><span style="color:#4e9a06">$g</span><span style="color:#4e9a06">"</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#000">$avatar</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>这样就可以了</p>
|
||||
|
||||
</div>
|
||||
|
||||
+104
-104
@@ -97,125 +97,125 @@ https://github.com/itorr/sakana</a> 「Sakana!」石蒜模拟器</p>
|
||||
<h4 id="快速食用">快速食用</h4>
|
||||
<p>考虑到很多小伙伴也需要，这里把代码梳理一下 发出来</p>
|
||||
<p>将以下css加入主题的<!-- raw HTML omitted --><!-- raw HTML omitted -->标签的<!-- raw HTML omitted --><!-- raw HTML omitted -->标签里</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box-l</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span> <span style="color:#75715e">!important</span>;
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">rem</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">555</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">555</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>@<span style="color:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span><span style="color:#f92672">:</span> <span style="color:#f92672">650px</span><span style="color:#f92672">)</span> {
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-l</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">none</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">650px</span><span style="color:#ce5c00;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>@<span style="color:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span><span style="color:#f92672">:</span> <span style="color:#f92672">1120px</span><span style="color:#f92672">)</span> {
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-l</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform</span>: translateY(<span style="color:#ae81ff">0</span><span style="color:#66d9ef">px</span>) scale(<span style="color:#ae81ff">0.25</span>) <span style="color:#75715e">!important</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">1120px</span><span style="color:#ce5c00;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">translateY</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#204a87">scale</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0.25</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-l</span> {
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-10</span><span style="color:#66d9ef">rem</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-10</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> }
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">500</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">800</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">500</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">800</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">100</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> <span style="color:#f92672">canvas</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-character</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">300</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">300</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">260</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">cursor</span>: <span style="color:#66d9ef">pointer</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">400</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">no-repeat</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-size</span>: <span style="color:#66d9ef">cover</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">300</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">300</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">260</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">cursor</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">pointer</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">400</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">no-repeat</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">cover</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-character</span><span style="color:#f92672">[</span><span style="color:#f92672">data-character</span><span style="color:#f92672">=</span><span style="color:#f92672">chisato</span><span style="color:#f92672">]</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">这里填写自定义摆件图片url</span>)<span style="color:#75715e">!important</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">chisato</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">这里填写自定义摆件图片url</span><span style="color:#000;font-weight:bold">)</span><span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-character</span><span style="color:#f92672">[</span><span style="color:#f92672">data-character</span><span style="color:#f92672">=</span><span style="color:#f92672">takina</span><span style="color:#f92672">]</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">这里填写自定义摆件图片url</span>)<span style="color:#75715e">!important</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">takina</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">这里填写自定义摆件图片url</span><span style="color:#000;font-weight:bold">)</span><span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-bed</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">160</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">.5</span>) <span style="color:#66d9ef">no-repeat</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">cursor</span>: <span style="color:#66d9ef">pointer</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-size</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> rgba(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">.05</span>);
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-bed</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">160</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.5</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#204a87;font-weight:bold">no-repeat</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">cursor</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">pointer</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.05</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box</span><span style="color:#f92672">[</span><span style="color:#f92672">data-can-switch-character</span><span style="color:#f92672">=</span><span style="color:#f92672">true</span><span style="color:#f92672">]</span> .<span style="color:#a6e22e">sakana-bed</span> {
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-can-switch-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">true</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-bed</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>在footer底部引入js</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://usj.cc/js/sakana.js"</span><span style="color:#f92672">><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span> <span style="color:#000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://usj.cc/js/sakana.js"</span><span style="color:#ce5c00;font-weight:bold">><</span><span style="color:#a40000">/script></span>
|
||||
</span></span></code></pre></div><p>在主题的自定义js进行插件初始化</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-l'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'takina'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span> <span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">setMute</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">init</span><span style="color:#000;font-weight:bold">({</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">el</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#4e9a06">'.sakana-box-l'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">scale</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#0000cf;font-weight:bold">9</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">character</span><span style="color:#ce5c00;font-weight:bold">:</span><span style="color:#4e9a06">'takina'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">canSwitchCharacter</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inertia</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0.001</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">decay</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">1</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">});</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#a40000">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">setMute</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">init</span><span style="color:#000;font-weight:bold">({</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">el</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#4e9a06">'.sakana-box-r'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">scale</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#0000cf;font-weight:bold">9</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">character</span><span style="color:#ce5c00;font-weight:bold">:</span><span style="color:#4e9a06">'chisato'</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">canSwitchCharacter</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">inertia</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0.001</span><span style="color:#000;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">decay</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">1</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">});</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#a40000">/script></span>
|
||||
</span></span></code></pre></div><p>在你想展示的位置添加div标签</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-l sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"takina"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-r sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"chisato"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-box-l sakana-box"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: translateY(0px) scale(0.5);"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"750"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"1200"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 500px; height: 800px;"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">canvas</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-character"</span> <span style="color:#c4a000">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"takina"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-bed"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-box-r sakana-box"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: translateY(0px) scale(0.5);"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"750"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"1200"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 500px; height: 800px;"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">canvas</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-character"</span> <span style="color:#c4a000">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"chisato"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-bed"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span></code></pre></div><p>大功告成！</p>
|
||||
|
||||
</div>
|
||||
|
||||
+602
-602
File diff suppressed because it is too large.
Load diff
+602
-602
File diff suppressed because it is too large.
Load diff
@@ -84,3 +84,5 @@ paginate = 5
|
||||
hasCJKLanguage = true
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in new issue
Block a user