zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8.9 修改代码高亮样式

Browse Source
This commit is contained in:
小赵同学 committed 2024-08-09 09:07:26 +08:00
1 parent 62cac6c7b0
commit 2e11da0d0b
15 files changed
+2414 -2410
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/post/32/index.html
+58 -58
View File
@@ -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>&lt;<span style="color:#f92672">body</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text-align: center;margin-top: 10px;&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/css&#34;</span> <span style="color:#a6e22e">media</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;all&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://a-oss.zmki.cn/20190606/love.css&#34;</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&amp;d=mm&amp;r=g&#34;</span>
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;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;&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">svg</span> <span style="color:#a6e22e">viewBox</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;0 0 1024 1024&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;margin-left: 5px;margin-right: 5px;&#34;</span> <span style="color:#a6e22e">version</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;1.0&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;15&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;15&#34;</span>
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;my-face&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<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">&#34;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&#34;</span>
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">fill</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;#515151&#34;</span>&gt;&lt;/<span style="color:#f92672">path</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">svg</span>&gt;
<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">&lt;</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</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">&#34;text-align: center;margin-top: 10px;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</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">&#34;text/css&#34;</span> <span style="color:#c4a000">media</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;all&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;https://a-oss.zmki.cn/20190606/love.css&#34;</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</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">&#34;https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&amp;d=mm&amp;r=g&#34;</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">&#34;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;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</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">&#34;0 0 1024 1024&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;margin-left: 5px;margin-right: 5px;&#34;</span> <span style="color:#c4a000">version</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1.0&#34;</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;15&#34;</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;15&#34;</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">&#34;my-face&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</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">&#34;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&#34;</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">&#34;#515151&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&amp;d=mm&amp;r=g&#34;</span>
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;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;&#34;</span>&gt;&lt;<span style="color:#f92672">br</span>&gt;
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</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">&#34;https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&amp;d=mm&amp;r=g&#34;</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">&#34;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;&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">br</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;htmer_time&#34;</span>&gt; &lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;zmki_love_ah&#34;</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;text/javascript&#34;</span> <span style="color:#a6e22e">language</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;javascript&#34;</span>&gt;<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">&#39; &lt;span class=&#34;zmki_love_ah&#34;&gt;已经在一起&lt;/span&gt;&lt;br&gt;&#39;</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">&#34;年 &#34;</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">&#34; 天 &#34;</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">&#34; 时 &#34;</span>;
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;htmer_time&#34;</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">&gt;=</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">&gt;=</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">&gt;=</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">&gt;=</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">&gt;</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> &lt;/<span style="color:#f92672">script</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">body</span>&gt;
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</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">&#34;htmer_time&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> <span style="color:#000;font-weight:bold">&lt;</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">&#34;zmki_love_ah&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</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">&#34;text/javascript&#34;</span> <span style="color:#c4a000">language</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;javascript&#34;</span><span style="color:#000;font-weight:bold">&gt;</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">&#39; &lt;span class=&#34;zmki_love_ah&#34;&gt;已经在一起&lt;/span&gt;&lt;br&gt;&#39;</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">&#34;年 &#34;</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">&#34; 天 &#34;</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">&#34; 时 &#34;</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">&#34;htmer_time&#34;</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">&gt;=</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">&gt;=</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">&gt;=</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">&gt;=</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">&gt;</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">&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</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> &lt;<span style="color:#f92672">iframe</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;这里放置你的网页&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;204&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;120&#34;</span> <span style="color:#a6e22e">frameborder</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;0&#34;</span> <span style="color:#a6e22e">scrolling</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;No&#34;</span> <span style="color:#a6e22e">align</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;center&#34;</span>&gt;&lt;<span style="color:#f92672">span</span> <span style="color:#a6e22e">data-mce-type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;bookmark&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display: inline-block; width: 0px; overflow: hidden; line-height: 0;&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;mce_SELRES_start&#34;</span>&gt;&lt;/<span style="color:#f92672">span</span>&gt;&lt;/<span style="color:#f92672">iframe</span>&gt;
<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">&lt;</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">&#34;这里放置你的网页&#34;</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;204&#34;</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;120&#34;</span> <span style="color:#c4a000">frameborder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> <span style="color:#c4a000">scrolling</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;No&#34;</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;center&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;</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">&#34;bookmark&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;display: inline-block; width: 0px; overflow: hidden; line-height: 0;&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;mce_SELRES_start&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">iframe</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span></code></pre></div><p>这里可能需要一点css基础，如果你不会，可以在文章的评论区留言，我有空可以帮你看看</p>
<h2 id="你为什么不在你的博客放这个小工具呢">你为什么不在你的博客放这个小工具呢</h2>
<p>这个嘛，前提是我得有个女朋友先，折腾来折腾去，才恍然大悟自己还是个单身汪，没想到小丑居然是我自己</p>