blog/public/categories/教程/rss.xml

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>优世界</title>
    <link>https://usj.cc/categories/%E6%95%99%E7%A8%8B/rss.xml</link>
    <description></description>
    <generator>Hugo -- gohugo.io</generator>
    <language>zh-cn</language>
    <lastBuildDate>Fri, 01 Mar 2024 22:12:00 +0000</lastBuildDate><atom:link href="https://usj.cc/categories/%E6%95%99%E7%A8%8B/rss.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>访客体验优化</title>
      <link>https://usj.cc/post/1279/</link>
      <pubDate>Fri, 01 Mar 2024 22:12:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/1279/</guid>
      <description>今天下午逛GitHub的时候，GitHub的首页推了一个这样的项目 https://github.com/instantpage/instant.page 项目的介绍这样写到 PC端 在用户单击链接之前，他们会将鼠标悬停在该链接上。</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="访客体验优化" /><p>今天下午逛GitHub的时候，GitHub的首页推了一个这样的项目</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9naXRodWIuY29tL2luc3RhbnRwYWdlL2luc3RhbnQucGFnZQ%3d%3d"
    
     target="_blank"
>
https://github.com/instantpage/instant.page</a></p>
<p>项目的介绍这样写到</p>
<h2 id="pc端">PC端</h2>
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-markdown" data-lang="markdown"><span style="display:flex;"><span>在用户单击链接之前，他们会将鼠标悬停在该链接上。当用户悬停 65 毫秒时，他们有二分之一的机会点击该链接，因此 instant.page此时开始预加载，平均为页面预加载留下超过 300 毫秒的时间。
</span></span><span style="display:flex;"><span>另一种选择是在用户开始按下鼠标时加载页面而不进行预加载。这使得未使用的请求为零，同时仍然将页面加载平均提高了 80 毫秒。
</span></span><span style="display:flex;"><span>您还可以在悬停时或链接可见时进行预加载，并在用户开始按下鼠标时触发点击，从而使您的页面成为世界上最快的页面。
</span></span></code></pre></div><h2 id="移动端">移动端</h2>
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-markdown" data-lang="markdown"><span style="display:flex;"><span>用户在释放之前开始触摸显示屏，平均留出90 毫秒的时间来预加载页面。
</span></span></code></pre></div><p>
<img data-lazy-src="/pics/2024/03/4028544490.png" alt="" class="lazyload"></p>
<p>汉译过来大概意思就是，当鼠标即将悬停到a标签的之前，对该链接进行预加载，提高访问速度</p>
<p>因为之前有同学反馈我的博客点击文章加载有些慢，于是乎说干就干，项目很简单，如需上手，直接在body标签之前加入一行js代码即可</p>
<p>代码如下</p>
<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">&lt;</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">&#34;//instant.page/5.2.0&#34;</span> <span style="color:#000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;module&#34;</span> <span style="color:#000">integrity</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z&#34;</span><span style="color:#ce5c00;font-weight:bold">&gt;&lt;</span><span style="color:#a40000">/script&gt;</span>
</span></span></code></pre></div><p>
<img data-lazy-src="/pics/2024/03/1392231476.png" alt="" class="lazyload"></p>
<p>如上截图所示，当鼠标即将点击到文章链接，instant.page会对文章链接执行预加载，从而提高页面渲染速度</p>
<p>各位来访的朋友，有没有觉得速度比之前更快呢</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>评论置顶</title>
      <link>https://usj.cc/post/1091/</link>
      <pubDate>Fri, 10 Feb 2023 13:20:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/1091/</guid>
      <description>前言 昨天在休息的时候，看到Jdeal大佬写的一篇文章 走心评论上线（https://www.jdeal.cn/385.html） 走心评论其实就</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="评论置顶" /><h2 id="前言">前言</h2>
<p>昨天在休息的时候，看到Jdeal大佬写的一篇文章</p>
<p>走心评论上线（https://www.jdeal.cn/385.html）</p>
<p>走心评论其实就是把博客站点历史中出现的评论</p>
<p>通过查找该评论的coid值，而把评论展示在指定的位置，可以是单页模版，也可以是任意位置</p>
<p>比较好奇，问Jdeal大佬要了一份代码，最终花了一点时间把一直想做但没做的留言墙实现了</p>
<p>效果请看：https://usj.cc/about</p>
<h2 id="继续摸索">继续摸索</h2>
<p>其实一直蛮想给主题做评论置顶这个功能的</p>
<p>曾在去年九月份的时候问过油油大佬，只有通过魔改typecho才能实现这个功能</p>
<p>
<img data-lazy-src="/pics/2023/02/952995278.png" alt="" class="lazyload"></p>
<p>昨晚睡觉前，突然灵光一现，可否通过走心评论的思路，再把评论置顶整出来呢</p>
<p>通过测试是可以的，但是代码太烂，不放出来了，主要讲一下思路</p>
<h2 id="思路剖析">思路剖析</h2>
<p>1.在评论区前面留出评论置顶的区域，用于写样式</p>
<p><strong>注意：其实此思路本不是本质意义上的评论置顶，只是将需要置顶的评论展示在最前面</strong></p>
<p>2.使用typecho的程序的内置方法 <code>$this-&gt;fields-&gt;你的自定义字段</code>;</p>
<p>在文章嵌入自定义短代码</p>
<p>
<img data-lazy-src="/pics/2023/02/2046574950.png" alt="" class="lazyload"></p>
<p>对应的值填写你需要评论置顶的评论的coid</p>
<p>
<img data-lazy-src="/pics/2023/02/3504246702.png" alt="" class="lazyload"></p>
<p>然后在 post.php 将 <code>$this-&gt;fields-&gt;top_comment</code> 赋值给变量</p>
<p>上述步骤请参考jdeal大佬的走心评论写法</p>
<p>这样就可以实现评论置顶了，代码很简单</p>
<p>因为时间紧迫的问题，暂时没有写出样式，只是实现了基本功能</p>
<p>后面还需要花时间修样式，暂时就不放截图了</p>
<p>需要此功能的朋友可以通过这个方法实现评论置顶</p>
<h2 id="停更通知">停更通知</h2>
<p>因为学业备考，博客将不再更新，咱们6月见！</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>typecho实现QQ头像用户评论加密，注意：pigeon，twitter用户有彩蛋哦！</title>
      <link>https://usj.cc/post/86/</link>
      <pubDate>Wed, 10 Aug 2022 18:23:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/86/</guid>
      <description>前言 这篇文章诞生之前，特别感谢博友 小李同学的提醒 收到建议，我便开始搜寻加密评论区用户头像的方法 摸爬滚打总算是解决了，同时也把方法分享给其他有</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="typecho实现QQ头像用户评论加密，注意：pigeon，twitter用户有彩蛋哦！" /><h2 id="前言">前言</h2>
<p>这篇文章诞生之前，特别感谢博友
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9ibG9nLmxpeGluYmsuY24v"
    
     target="_blank"
>
小李同学</a>的提醒</p>
<p>
<img data-lazy-src="/pics/2022/08/1497702686.png" alt="" class="lazyload"></p>
<p>收到建议，我便开始搜寻加密评论区用户头像的方法</p>
<p>摸爬滚打总算是解决了，同时也把方法分享给其他有需要的朋友</p>
<h2 id="寻找方法">寻找方法</h2>
<p>谷歌了一下其他大佬的解决方法，规则之树大佬提供了两个方法</p>
<p>参考资料：https://www.ruletree.club/archives/1566/</p>
<p>1.第一种则是获取json数据进行分割得出k值再进行重组</p>
<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">&#39;cdn.v2ex.com/gravatar&#39;</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">&#39;@qq.com&#39;</span><span style="color:#000;font-weight:bold">,</span><span style="color:#4e9a06">&#39;&#39;</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">&#39;@qq.com&#39;</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">&amp;&amp;</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">&amp;&amp;</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">&lt;</span><span style="color:#0000cf;font-weight:bold">11</span><span style="color:#ce5c00;font-weight:bold">&amp;&amp;</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">&gt;</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">&#39;http://ptlogin2.qq.com/getface?&amp;imgtype=1&amp;uin=&#39;</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">&#34;&amp;k=&#34;</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">&#39;https://q.qlogo.cn/g?b=qq&amp;k=&#39;</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">&#39;&amp;s=100&#39;</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">&#39;https://&#39;</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">&#39;/&#39;</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">&#39;?&#39;</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="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">&#39;cdn.v2ex.com/gravatar&#39;</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">&#39;@qq.com&#39;</span><span style="color:#000;font-weight:bold">,</span><span style="color:#4e9a06">&#39;&#39;</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">&#39;@qq.com&#39;</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">&amp;&amp;</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">&amp;&amp;</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">&lt;</span><span style="color:#0000cf;font-weight:bold">11</span><span style="color:#ce5c00;font-weight:bold">&amp;&amp;</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">&gt;</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">&#39;https://s.p.qq.com/pub/get_face?img_type=3&amp;uin=&#39;</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">&#39;Location&#39;</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">&#34;&amp;k=&#34;</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">&#39;https://q.qlogo.cn/g?b=qq&amp;k=&#39;</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">&#39;&amp;s=100&#39;</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">&#39;https://&#39;</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">&#39;/&#39;</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">&#39;?&#39;</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>
<p>可能加载一个首页就需要长达一分钟两分钟的时间将评论头像全部加载出来，对于博友的访问体验是大打折扣的</p>
<h2 id="再寻他法">再寻他法</h2>
<p>因为自己的Gravatar头像源一直使用的是，cravatar的源，于是去cravatar官网去碰碰运气</p>
<p>在官网的开发文档看到了这句话，于是灵感油然而生</p>
<blockquote>
<p>Cravatar 完美兼容所有 Gravatar 头像 API 接口，同时如果你未在 Cravatar 设置头像,则会先尝试调用 Gravatar 上的头像数据，其后是 QQ 头像，最后会返回我们为你准备的一组默认头像</p>
</blockquote>
<p>这句话简单讲述的是cravatar会首先查询你的邮箱，是否有注册Gravatar头像</p>
<p>如果没有就返回其QQ头像，如果也不是QQ邮箱则返回cravatar的默认头像</p>
<p>那么，反过来想，我们是否可以将QQ邮箱通过cravatar来处理，从而达到加密QQ用户头像呢？</p>
<p>经过亲自检验，是可以的，cravatar的头像链接显示格式是这样的</p>
<blockquote>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9jcmF2YXRhci5jbi9hdmF0YXIvSEFTSA%3d%3d"
    
     target="_blank"
>
https://cravatar.cn/avatar/HASH</a></p>
</blockquote>
<p>其中 HASH 部分是你的电子邮箱的哈希值，此电子邮箱必须在 Cravatar.cn 上注册并绑定头像</p>
<p>否则会尝试返回 Gravatar 头像和 QQ 头像，如果都不存在，则返回默认头像</p>
<p>那么我们只需要将取到的邮箱值，通过php加密一下，可恶，没有系统学习过php</p>
<p>不过还好，自己有过js基础，编程语言总是万变不离其宗，所以一番折腾还是写出来了</p>
<p>这里主要用到PHP strtolower() 函数和 md5()函数</p>
<h2 id="大致思路">大致思路</h2>
<p>将获取的email的值，判断是否为QQ邮箱还是域名邮箱，如果是域名邮箱则直接加密然后返回值</p>
<p>如果是QQ邮箱，则通过strtolower() 函数进行转换为小写，再md5加密，然后返回头像</p>
<h2 id="代码展示">代码展示</h2>
<p>因为是小白，可能写的有些问题</p>
<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">&#39;cravatar.cn/avatar&#39;</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">&#39;@qq.com&#39;</span><span style="color:#000;font-weight:bold">,</span><span style="color:#4e9a06">&#39;&#39;</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">&#39;@qq.com&#39;</span><span style="color:#000;font-weight:bold">)</span><span style="color:#ce5c00;font-weight:bold">&amp;&amp;</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">&amp;&amp;</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">&lt;</span><span style="color:#0000cf;font-weight:bold">11</span><span style="color:#ce5c00;font-weight:bold">&amp;&amp;</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">&gt;</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">&#39;https://cravatar.cn/avatar/&#39;</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">&#39;https://&#39;</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">&#39;/&#39;</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">&#39;?&#39;</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="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">&lt;?</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">-&gt;</span><span style="color:#c4a000">mail</span><span style="color:#000;font-weight:bold">);</span> <span style="color:#8f5902;font-style:italic">?&gt;</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>
<h2 id="pigeon主题用户">pigeon主题用户</h2>
<p>如果你是pigeon主题用户，可以直接下载下面链接的feature.php文件</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9jbG91ZC51c2ouY2MvZC9PbmVkcml2ZS8lRTQlQkIlQTMlRTclQTAlODEvZmVhdHVyZS5waHA%3d"
    
     target="_blank"
>
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="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">&#39;mm&#39;</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">&#39;g&#39;</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">&#39;|^[1-9]\d{4,11}@qq\.com$|i&#39;</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">&#39;https://cravatar.cn/avatar/&#39;</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">&#39;Widget_Options&#39;</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">-&gt;</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">-&gt;</span><span style="color:#c4a000">gravatarURL</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#4e9a06">&#34;/</span><span style="color:#4e9a06">$hash</span><span style="color:#4e9a06">?s=&amp;d=</span><span style="color:#4e9a06">$d</span><span style="color:#4e9a06">&amp;r=</span><span style="color:#4e9a06">$g</span><span style="color:#4e9a06">&#34;</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">&#34;//gravatar.com/avatar/</span><span style="color:#4e9a06">$hash</span><span style="color:#4e9a06">?s=&amp;d=</span><span style="color:#4e9a06">$d</span><span style="color:#4e9a06">&amp;r=</span><span style="color:#4e9a06">$g</span><span style="color:#4e9a06">&#34;</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>
]]></content:encoded>
    </item>
    
    <item>
      <title>去除typecho1.2.0正式版的后台提示更新bug</title>
      <link>https://usj.cc/post/88/</link>
      <pubDate>Wed, 15 Jun 2022 10:51:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/88/</guid>
      <description>前言 更新typecho1.2.0版本的朋友可能都知道 在后台会有一个红框框提示，但是怎么也无法去除 逛官方论坛的时候，官方也承认这是一个小bug</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="去除typecho1.2.0正式版的后台提示更新bug" /><h2 id="前言">前言</h2>
<p>更新typecho1.2.0版本的朋友可能都知道</p>
<p>在后台会有一个红框框提示，但是怎么也无法去除</p>
<p>
<img data-lazy-src="/pics/2022/06/3089452376.png" alt="" class="lazyload"></p>
<p>逛官方论坛的时候，官方也承认这是一个小bug</p>
<p>需要的朋友简单修改一下，就不提示了，还是很简单的</p>
<h2 id="具体方法">具体方法</h2>
<p>找到typecho的程序根目录 /var//Widget/Ajax.php</p>
<p>找到62行的位置，也就是下图箭头的地方</p>
<p>
<img data-lazy-src="/pics/2022/06/2979731649.png" alt="" class="lazyload"></p>
<p>将&gt;=改为&gt;即可</p>
<p>
<img data-lazy-src="/pics/2022/06/2756643413.png" alt="" class="lazyload"></p>
<p>然后返回自己的typecho后台，f12打开浏览器的控制台</p>
<p>
<img data-lazy-src="/pics/2022/06/1554702043.png" alt="" class="lazyload"></p>
<p>F12打开开发者工具 -&gt; 应用 -&gt; 会话存储空间，右击清除即可</p>
<p>然后返回typecho后台管理，刷新页面，就发现该版本更新提示已经消失了</p>
<p>
<img data-lazy-src="/pics/2022/06/2534812072.png" alt="" class="lazyload"></p>
]]></content:encoded>
    </item>
    
    <item>
      <title>利用fontspider压缩博客字体大小，达到加快访问速度</title>
      <link>https://usj.cc/post/83/</link>
      <pubDate>Sat, 11 Jun 2022 21:15:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/83/</guid>
      <description>前言 作为一个博客的发烧友，最喜欢给自己主题diy各种花里花哨的字体 因为默认的字体微软雅黑总差点意思，但是一般的字体大都很大 有的甚至大到7mb</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="利用fontspider压缩博客字体大小，达到加快访问速度" /><h2 id="前言">前言</h2>
<p>作为一个博客的发烧友，最喜欢给自己主题diy各种花里花哨的字体</p>
<p>因为默认的字体微软雅黑总差点意思，但是一般的字体大都很大</p>
<p>有的甚至大到7mb，10mb的，都有，这对于小水管服务器十分的不友好</p>
<p>特别是一些国外的小鸡且带宽不理想的小鸡，可能访客文章都看完，博客字体还没加载完</p>
<p>前段时间有博友私聊我，博客的字体怎么压缩，那时候在准备四级，简单的回复了一下</p>
<p>今天考完，写一下方法给有需要的朋友，很简单</p>
<h2 id="感谢fontspider作者">感谢fontspider作者</h2>
<p>项目地址：https://github.com/aui/font-spider</p>
<h2 id="准备node和npm环境">准备node和npm环境</h2>
<p>这个可以在nodejs官网下载</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9ub2RlanMub3JnL2VuL2Rvd25sb2Fk"
    
     target="_blank"
>
https://nodejs.org/en/download</a></p>
<p>安装的时候选择add to path 这样就可以直接安装node和npm环境</p>
<p>因为程序化，基本上一直默认勾选就可以安装了，很简单</p>
<p>但是如何自己校验自己的win系统是否安装了这两个环境了，只需要win+R输入cmd</p>
<p>召唤出自己的pc端的cmd控制台，输入node-v和npm-v，就如下图我这样，就表示安装完毕</p>
<p>
<img data-lazy-src="/pics/2022/06/4046170908.png" alt="" class="lazyload"></p>
<h2 id="全局安装-font-spider">全局安装 font-spider</h2>
<p>这里我们还是老样子 win + R 输入cmd，输入</p>
<pre><code>npm install font-spider -g
</code></pre>
<p>如果提示这个，就代表搞定了</p>
<p>
<img data-lazy-src="/pics/2022/06/3204045101.png" alt="" class="lazyload"></p>
<h2 id="开始压缩字体">开始压缩字体</h2>
<p>我们首先在桌面创建文件夹，注意尽量是英文，例如ziti</p>
<p>然后在文件夹里面把自己需要压缩的字体放在该ziti文件夹</p>
<p>因为考虑到一些朋友不会css，所以这里我已经给各位朋友压缩好了，直接下载解压就可以了</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly93d2kubGFuem91cC5jb20vaU02dXIwNjk1YmNq"
    
     target="_blank"
>
https://wwi.lanzoup.com/iM6ur0695bcj</a></p>
<p>我们将自己需要压缩的字体ttf文件拖入该文件夹即可，然后将该字体ttf文件的文件名改为font.ttf</p>
<p>注意：这里需要解压成文件夹放在桌面上哦，否则无法执行字体压缩</p>
<p>
<img data-lazy-src="/pics/2022/06/1554922097.png" alt="" class="lazyload"></p>
<p>这里我原字体的大小是15mb，这里我把它拖到ziti文件夹里面，将该字体命名为font.ttf</p>
<p>
<img data-lazy-src="/pics/2022/06/2949738509.png" alt="" class="lazyload"></p>
<p>然后打开cmd 控制台输入以下代码</p>
<pre><code>cd ziti
</code></pre>
<p>然后再输入以下代码，这样就可以了</p>
<pre><code>font-spider index.html
</code></pre>
<p>然后你会发现自己ziti文件夹会多出一个font-spider文件夹，此文件夹里面的font.ttf就是压缩前的字体</p>
<p>根目录则是已经压缩后的字体，还有其他格式字体，该工具全部帮你压缩，直接应用到网页即可，非常方便</p>
<p>
<img data-lazy-src="/pics/2022/06/1342016947.png" alt="" class="lazyload"></p>
<p>再看看被压缩的ttf字体大小，居然不到几kb</p>
<p>
<img data-lazy-src="/pics/2022/06/3372263093.png" alt="" class="lazyload"></p>
<p>是不是很方便！</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>访问博客自动填写评论信息，安卓，ios，windows，mac方法总结</title>
      <link>https://usj.cc/post/81/</link>
      <pubDate>Tue, 03 May 2022 17:33:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/81/</guid>
      <description>前言 作为一个独立博客的博主，我经常会访问一些友链朋友的博客，看到一些跟自己产生心灵共识的文章 总想着要说两句再走，但是遇到需要填写自己的昵称，</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="访问博客自动填写评论信息，安卓，ios，windows，mac方法总结" /><h2 id="前言">前言</h2>
<p>作为一个独立博客的博主，我经常会访问一些友链朋友的博客，看到一些跟自己产生心灵共识的文章</p>
<p>总想着要说两句再走，但是遇到需要填写自己的昵称，邮箱，域名，一下子评论的欲望就没有了</p>
<p>因为把这些每到一个博客，我就需要手动补全一次，十分的麻烦，有没有一种方法可以自动补全这些信息呢</p>
<p>事实上是可以的，这里我们需要依靠油猴脚本，利用网页加载js，实现自己自动填信息</p>
<p>这里分享给有需要的朋友们</p>
<h2 id="安卓版">安卓版</h2>
<p>因为安卓系统比较开放，所以支持油猴脚本的浏览器，会比较多</p>
<p>这里小赵给大家推荐一个app叫做x浏览器，因为此浏览器内置了油猴脚本</p>
<p>x浏览器官网地址：https://www.xbext.com</p>
<p>安装此浏览器，打开设置，在设置页面，点击“浏览器脚本”</p>
<p>紧接着接着点击右上角“添加脚本”，在菜单中选择一种添加方法即可</p>
<p>
<img data-lazy-src="/pics/2022/05/2421277530.png" alt="" class="lazyload"></p>
<p>这里我们直接选择，从url导入脚本，即可，然后点击下面的链接导入即可</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9ncmVhc3lmb3JrLm9yZy9zY3JpcHRzLzQzNDg2Mi0%3d"
    
     target="_blank"
>
https://greasyfork.org/scripts/434862-</a>博客网站留言评论信息自动填充/code/博客网站留言评论信息自动填充.user.js</p>
<p>注意：我们需要手动修改该js文本的博客信息改为你的</p>
<h2 id="ios">ios</h2>
<p>ios因为系统封闭，所以会相对于安卓麻烦一点，这里有些朋友不会弄，我会写详细一点</p>
<p>首先打开app store 商店，找到下面第一个软件，安装即可</p>
<p>
<img data-lazy-src="/pics/2022/05/703071244.jpg" alt="" class="lazyload"></p>
<p>安装完成之后，我们进入设置，找到Safari浏览器，按照下图所示把该配置的配置好</p>
<p>
<img data-lazy-src="/pics/2022/05/2894682370.jpg" alt="" class="lazyload"></p>
<p>然后我们在桌面找到此软件，点进去软件，我们会看到这个界面</p>
<p>
<img data-lazy-src="/pics/2022/05/3866835628.jpg" alt="" class="lazyload"></p>
<p>点击那个蓝色按钮，我们在iphone本地创建一个存放脚本文件的文件夹，这样方便此软件每次读取js脚本</p>
<p>
<img data-lazy-src="/pics/2022/05/2166809754.jpg" alt="" class="lazyload"></p>
<p>然后点击下方的自动填写脚本js，然后在Safari浏览器打开</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9ncmVhc3lmb3JrLm9yZy9zY3JpcHRzLzQzNDg2Mi0%3d"
    
     target="_blank"
>
https://greasyfork.org/scripts/434862-</a>博客网站留言评论信息自动填充/code/博客网站留言评论信息自动填充.user.js</p>
<p>
<img data-lazy-src="/pics/2022/05/4191686293.jpg" alt="" class="lazyload"></p>
<p>这里我们点击，userscript，然后会出现以下界面</p>
<p>
<img data-lazy-src="/pics/2022/05/2316780058.jpg" alt="" class="lazyload"></p>
<p>这里我们直接点击 tap to install即可，然后会有此提示</p>
<p>
<img data-lazy-src="/pics/2022/05/3863461813.jpg" alt="" class="lazyload"></p>
<p>这里我们直接install一下就好了，然后我们直接在iphone本地进行配置即可</p>
<h2 id="windos">windos</h2>
<p>我们需要在电脑安装，Chrome浏览器，然后点击下方链接</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9jaHJvbWUuZ29vZ2xlLmNvbS93ZWJzdG9yZS9kZXRhaWwvdGFtcGVybW9ua2V5L2RoZGdmZmtrZWJobWtmam9qZWptcGJsZG1wb2Jma2Zv"
    
     target="_blank"
>
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo</a></p>
<p>直接安装油猴扩展即可，注意这里安装需要科学上网</p>
<p>然后点击下方链接进行，安装配置博客信息自动填写脚本</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9ncmVhc3lmb3JrLm9yZy9zY3JpcHRzLzQzNDg2Mi0%3d"
    
     target="_blank"
>
https://greasyfork.org/scripts/434862-</a>博客网站留言评论信息自动填充/code/博客网站留言评论信息自动填充.user.js</p>
<p>修改配置信息，请在脚本管理里面修改</p>
<h2 id="mac">mac</h2>
<p>这里由于自己用不起mac，印象中只记得去商店下载油猴脚本即可</p>
<p>然后如上所述，把脚本下载下来，然后信息改一下就好了</p>
<h2 id="效果展示">效果展示</h2>
<p>这里我随机访问我友链的博客，进行查看效果</p>
<p>[video src=&ldquo;https://usj.cc/sp/16.mp4&rdquo;]</p>
<p>这样就完成了，是不是很方便，所有信息，脚本已经替你完成填写，只用填写信息就好了</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>iphone快捷指令发布动态说说，支持大部分typecho主题</title>
      <link>https://usj.cc/post/80/</link>
      <pubDate>Sat, 30 Apr 2022 21:26:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/80/</guid>
      <description>前言 首先祝各位朋友五一快乐 新主题爆肝几天也成功的赶出来了，这次也是自己也是第一次半开发主题 本主题原型是由潘先生定制的主题，原包只有基础的文章</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="iphone快捷指令发布动态说说，支持大部分typecho主题" /><h2 id="前言">前言</h2>
<p>首先祝各位朋友五一快乐</p>
<p>新主题爆肝几天也成功的赶出来了，这次也是自己也是第一次半开发主题</p>
<p>本主题原型是由潘先生定制的主题，原包只有基础的文章页功能，征得潘先生同意了，进行了二次开发</p>
<p>加了一些博客必备的页面 友链页面 文章归档页面 说说动态页面 owo表情包 等等一些功能</p>
<p>实际着手进行写主题，并没有自己想象那么简单，很多功能，typecho官方文档几乎没有对应的api</p>
<p>基本上都是靠自己摸索其他优秀的主题开发者写的主题，进行学习</p>
<p>功能的执行逻辑，这是一个从0到1的过程，过程也有无助感，因为很多地方涉及到php知识</p>
<p>这个主题它目前并不完美，或许也会有一些我未发现的小bug，我会在后面的时间慢慢打磨</p>
<p>我还是一个在不断学习的菜鸟，也希望日后可以用更少的代码写出更漂亮的ui模版</p>
<h2 id="主题截图">主题截图</h2>
<p>
<img data-lazy-src="/pics/2022/04/3499441250.jpg" alt="" class="lazyload"></p>
<p>
<img data-lazy-src="/pics/2022/04/1912617425.jpg" alt="" class="lazyload"></p>
<p>
<img data-lazy-src="/pics/2022/04/4066316700.jpg" alt="" class="lazyload"></p>
<h2 id="正文开始">正文开始</h2>
<p>在给主题写动态说说页面的时候，听其他博友说快捷指令也可以发布说说</p>
<p>在Google搜了一下，果然有大佬写出了成品，但是可惜的是只支持handsome主题的</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9qYXkudGcvaGFuZHNvbWUtc2h1b3NodW8taW9z"
    
     target="_blank"
>
https://jay.tg/handsome-shuoshuo-ios</a></p>
<p>但是想了想，typecho的原理应该差不多，参考一下大佬的实现方法，换个思路或许可以实现</p>
<p>像我这么懒的人，为何不折腾个玩玩，而且现在快捷指令这么方便</p>
<p>于是把该大佬的快捷指令下载下来，仔细看了一下执行逻辑，是利用post请求</p>
<p>也就是我只要获取到cid，博客的url，和主题的动态页面的time_code即可实现快捷指令发说说功能</p>
<p>折腾了一会儿，最终实现了此功能，下面分享思路给各位有需要的朋友</p>
<h2 id="实现思路">实现思路</h2>
<p>通过快捷指令声明三个变量即cid，url，code</p>
<p>通过将对应值写入txt文件，让iphone读取这几个文件的值</p>
<p>然后请求，实现发布动态的功能</p>
<h2 id="具体操作">具体操作</h2>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly93d2kubGFuem91cC5jb20vaTZaeVAwNDI4bGti"
    
     target="_blank"
>
https://wwi.lanzoup.com/i6ZyP0428lkb</a></p>
<p>在windos系统下载该zip文件，解压到桌面，该文件名为 dongtai 里面会有三个txt文件</p>
<p>
<img data-lazy-src="/pics/2022/04/577451467.png" alt="" class="lazyload"></p>
<p>在cid.txt文件填写你的主题的时光机独立页面的cid，例如我是2，我只需要把该文件的0改为2即可</p>
<p>其他文件同理，这里需要注意的是url.txt文件里的博客域名请加对应的协议头，即https://或者http://</p>
<p>然后将该文件夹，压缩为zip发到自己的iphone，将此zip包保存为iphone本地，然后解压一下</p>
<p>
<img data-lazy-src="/pics/2022/04/1831112510.jpg" alt="" class="lazyload"></p>
<p>这样就可以了，注意一定要解压，否则快捷指令无法读取的，然后保存我已经做好的快捷指令</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly93d3cuaWNsb3VkLmNvbS9zaG9ydGN1dHMvYjM2NTEyMDdjYTNlNGFiMGIzMjE1YzVhNDE2YzJmOTQ%3d"
    
     target="_blank"
>
https://www.icloud.com/shortcuts/b3651207ca3e4ab0b3215c5a416c2f94</a></p>
<p>复制该iCloud的网址去iphone的Safari浏览器打开，然后保存快捷指令在本地</p>
<p>ok,这样就完成了</p>
<h2 id="视频展示">视频展示</h2>
<p>[video src=&ldquo;https://www.usj.cc/sp/15.mp4&rdquo;]</p>
<h2 id="siri玩法">siri玩法</h2>
<p>直接 嘿 siri 动态</p>
<p>然后对siri说你想发的内容，就可以直接发布了，是不是很有意思</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>ios去掉更新小红点的方法</title>
      <link>https://usj.cc/post/79/</link>
      <pubDate>Sun, 10 Apr 2022 21:55:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/79/</guid>
      <description>前言 早上起床发现，自己收到了ios 15.4.1 的系统更新推送，网上说15.4.1这个版本的系统太拉跨，比如相机闪屏，还有一些一眼难尽的bug 但是作为i</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="ios去掉更新小红点的方法" /><h2 id="前言">前言</h2>
<p>早上起床发现，自己收到了ios 15.4.1 的系统更新推送，网上说15.4.1这个版本的系统太拉跨，比如相机闪屏，还有一些一眼难尽的bug</p>
<p>但是作为ios的小白用户，一直去不掉这个更新提示的小红点，说实话还是强迫症又犯了，朋友介绍给我了一个方法，感觉挺好用的，分享出来给有需要的朋友</p>
<h2 id="前面准备">前面准备</h2>
<p>需要ios系统为12-15版本，这些版本之间的小伙伴都可</p>
<h2 id="教程开始">教程开始</h2>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly93d2kubGFuem91cC5jb20vaXdQb2MwMnl4bHBn"
    
     target="_blank"
>
https://wwi.lanzoup.com/iwPoc02yxlpg</a></p>
<p>复制上面的链接，去手机的Safari浏览器打开下载</p>
<p>然后去手机的设置，找到 设置-通用-VPN与设备管理 那边安装</p>
<p>
<img data-lazy-src="/pics/2022/04/1817830628.jpg" alt="" class="lazyload"></p>
<p>这里安装我们刚刚下载好的描述文件，这里会提示重启手机</p>
<p>我们按照提示重启一下手机就好了</p>
<p>等重启完毕，再次打开设置里面的系统更新界面</p>
<p>
<img data-lazy-src="/pics/2022/04/2227739395.jpg" alt="" class="lazyload"></p>
<p>这里会提示15.3.1是最新版本，实际上15.4.1才是最新版本，这样就可以拒收更新推送了</p>
<h2 id="日后我还想更新怎么办">日后我还想更新怎么办</h2>
<p>如果日后想更新新版本的ios系统，只需要再去 设置-通用-VPN与设备管理</p>
<p>把那个描述文件移除掉，重启一下iphone即可，这样就能正常接收到更新推送了</p>
<p>好了，是不是很简单，晚安，朋友们</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>秒看青年大学习，最新方法，安卓版</title>
      <link>https://usj.cc/post/78/</link>
      <pubDate>Mon, 28 Mar 2022 13:44:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/78/</guid>
      <description>前言 前段时间用了很久的秒看青年大学习方法失效了 随着微信版本的迭代，新版本微信内核禁止了一些调试功能 于是自己想，要不然自己退回微信版本，但是一</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="秒看青年大学习，最新方法，安卓版" /><h2 id="前言">前言</h2>
<p>前段时间用了很久的秒看青年大学习方法失效了</p>
<p>随着微信版本的迭代，新版本微信内核禁止了一些调试功能</p>
<p>于是自己想，要不然自己退回微信版本，但是一直提示微信更新就很烦</p>
<p>于是就有个想法把旧版本的内核替换到新版本微信的内核</p>
<h2 id="准备工作">准备工作</h2>
<p>1.最新版的微信版本，这里我使用的是8.0.20版本</p>
<p>2.一个手机浏览器，也可以是手机里自带的浏览器</p>
<p>3.mt管理器，这里直接点击下方按钮，跳转下载即可</p>
<p>mt管理器就不用多介绍了，是一个文件管理器，相信有很多玩机的朋友知道</p>
<p>!!!
<!-- raw HTML omitted -->点我下载<!-- raw HTML omitted -->
!!!</p>
<p>4.一个聪明的大脑</p>
<h2 id="进入正题">进入正题</h2>
<p>首先进入自己的手机浏览器，将旧版内核下载下来</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly93d2kubGFuem91cC5jb20vaTAyUE0wMjZnNTVh"
    
     target="_blank"
>
https://wwi.lanzoup.com/i02PM026g55a</a></p>
<p>进入手机浏览器，找到下载内容，然后找到tbs.apk的属性，找到此文件的下载位置</p>
<p>注意：</p>
<p>这里请不要直接安装tbs的apk文件，这里我们只获取文件的地址</p>
<p>打开mt管理器，我们在文件夹列表的右半部分找到tbs.apk的所在地方，这里我也是成功找到了</p>
<p>
<img data-lazy-src="/pics/2022/03/1811776335.jpg" alt="" class="lazyload"></p>
<p>在左边半部分，我们需要找到</p>
<p>/storage/emulated/0/Android/data/com.tencent.mm/files/tbs，这里我已经找到</p>
<p>
<img data-lazy-src="/pics/2022/03/2827189089.jpg" alt="" class="lazyload"></p>
<p>因为不存在本地内核，所以该文件夹为空，我们再将右半边的tbs.apk文件复制到左边的地方</p>
<p>
<img data-lazy-src="/pics/2022/03/2614423784.jpg" alt="" class="lazyload"></p>
<p>长按右边的apk，软件会提示是否复制，直接复制就好了</p>
<p>
<img data-lazy-src="/pics/2022/03/3465784045.jpg" alt="" class="lazyload"></p>
<p>这样就成功了，是不是很简单</p>
<p>接下来，我们只需要，关闭mt管理器，去微信，随便一个聊天窗口即可</p>
<p>第一步点击下方链接，然后就退出</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cDovLzEuZGVidWdtbS5xcS5jb20vP2ZvcmNleDU9dHJ1ZQ%3d%3d"
    
     target="_blank"
>
http://1.debugmm.qq.com/?forcex5=true</a></p>
<p>第二步，点击下方链接即可</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cDovL2RlYnVndGJzLnFxLmNvbQ%3d%3d"
    
     target="_blank"
>
http://debugtbs.qq.com</a></p>
<p>点进去后安装本地内核，这里我们直接安装我们刚刚放置本地的内核即可，安装完成后会提示重启内核</p>
<p>这样就大功告成了</p>
<p>这样我们进入青年大学习页面，然后会发现右下方有个绿色的调试按钮</p>
<p>等视频开始，直接输入代码即可</p>
<p>为了防止遗忘，我已经放置在我的微信公众号</p>
<p>直接回复 青年大学习 五个字即可</p>
<p>服务号即可自动对你发送，秒看青年大学习的代码，是不是很简单</p>
<p>
<img data-lazy-src="/pics/2022/03/2530330733.jpg" alt="" class="lazyload"></p>
<h2 id="简单方法">简单方法</h2>
<p>当然有小伙伴说这么麻烦，有没有更简单方法，其实可以新购一台苹果手机</p>
<p>进入播放青年大学习视频，然后去状态栏拉进度条就好了，基本上几秒搞定</p>
<h2 id="免责声明">免责声明</h2>
<p>大家还是要认真相应国家好好学习青年大学习</p>
<p>本文只是提供一个思路，给一些没有时间看大学习的小伙伴</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>祝大家元旦快乐，给自己的博客加一个对联和灯笼</title>
      <link>https://usj.cc/post/71/</link>
      <pubDate>Sat, 01 Jan 2022 19:18:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/71/</guid>
      <description>首先祝各位朋友元旦快乐，距离上次更新差不多十天前了，有小伙伴问我这段时间在干嘛 简单给大家聊一下，差不多25号我就放寒假了，放假回家一直在老家</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="祝大家元旦快乐，给自己的博客加一个对联和灯笼" /><p>首先祝各位朋友元旦快乐，距离上次更新差不多十天前了，有小伙伴问我这段时间在干嘛</p>
<p>简单给大家聊一下，差不多25号我就放寒假了，放假回家一直在老家，大部分时间帮父母干农活</p>
<p>虽然很累，但也有它的趣味，不得不说，抛开手机电脑，静下心来享受田园生活，不由让人沉浸</p>
<p>昨天也在逛博友的博客，大部分博主都码出了自己的2021年的年度总结，总结一年的得与失</p>
<p>离春节还有差不多一个月的时间，对于我来说，现在把年度总结码出来还是为时过早</p>
<p>逛了大多数博友，博客都挂起了象征新年的灯笼，给博客加了点年味，心想自己也整一个</p>
<p>打开搜索引擎，搜索了一下相关代码，基本上都是来自于各大资源网，有的居然还是收费</p>
<p>大概谷歌浏览器搜了一下，还是如愿以偿找到了代码，但是代码不太精简，我删除了一些不必要的代码</p>
<p>终究还是实现了，这里简单讲一下方法以及实现原理，首先就是怼几个div标签，进行骨架构成</p>
<p>这边建议找到自己的主题模版的footer.php，在适当位置加入下面这些代码</p>
<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">div</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;usj&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-box2&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xian&#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">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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-a&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-b&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-t&#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">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">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">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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui shui-a&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui-c&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui-b&#34;</span><span style="color:#000;font-weight:bold">&gt;&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">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">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">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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-box3&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xian&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-a&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-b&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-t&#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">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">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">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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui shui-a&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui-c&#34;</span><span style="color:#000;font-weight:bold">&gt;&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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui-b&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><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">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">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">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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-box1&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xian&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-a&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-b&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-t&#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">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">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">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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui shui-a&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui-c&#34;</span><span style="color:#000;font-weight:bold">&gt;&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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui-b&#34;</span><span style="color:#000;font-weight:bold">&gt;&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">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">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">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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-box&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xian&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-a&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-b&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;deng-t&#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">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">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">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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui shui-a&#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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui-c&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><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">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;shui-b&#34;</span><span style="color:#000;font-weight:bold">&gt;&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">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">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">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">div</span><span style="color:#000;font-weight:bold">&gt;</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="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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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">&#34; &#34;</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:#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">&#34; &#34;</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:#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:#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:#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:#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:#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:#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:#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:#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 -->
<p>作为一个爱整活的博主，不会满足就加几个灯笼就完了，打开网址输入自己的博客域名</p>
<p>发现自己的博客pc端布局两边十分的空旷，突然脑子里联想到我为什么不整个对联在两边</p>
<p>
<img data-lazy-src="/pics/2022/01/3858558307.png" alt="" class="lazyload"></p>
<p>于是说干就干，去千图网找了素材，就开整，因为自己找合适且适用于对联的字体找了很久</p>
<p>
<img data-lazy-src="/pics/2022/01/1727183617.png" alt="" class="lazyload"></p>
<p>肝了一个小时，不停的删删改改，终究还是把对联的样子整了出来</p>
<p>接下来就是肝代码，最近也在初步的对JavaScript学习，想着如果我全部用js写，还能检验一下自己最近学的怎么样</p>
<p>于是就开整，以下对联全都是用js写的，还是问了大三学长部分问题，不然自己还写不出来，在此特别谢谢学长</p>
<p>考虑到有的博客有很多侧栏，特别的考虑了对联遮挡问题，我还给对联加了关闭按钮，具体自己可以看看本站的效果</p>
<p>[reply]</p>
<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">&lt;</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">&gt;</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">&amp;&amp;</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">&gt;</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">&#34;left&#34;</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">&#34;left&#34;</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">&#34;px&#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;right&#34;</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">&#34;right&#34;</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">&#34;px&#34;</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">&#39;hidden&#39;</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">&#39;hidden&#39;</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">&#34;&lt;style type=\&#34;text\/css\&#34;&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;#left,#right{position:absolute;}&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;.imzql{width:100px;height:auto;line-height:5px}&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;#left2 img{max-width: 100%;width: 70px;}&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;#right2 img{max-width: 100%;width: 70px;}&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;\/style&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;div id=\&#34;left\&#34; style=\&#34;top:112px;left:50px\&#34;&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;div id=\&#34;left2\&#34; class=\&#34;imzql\&#34;&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;img border=0 src=https://cdn.usj.cc/left.jpg&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;br&gt;&lt;a href=\&#34;javascript:close_left2();\&#34; title=\&#34;关闭左边的对联\&#34;&gt;×&lt;\/a&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;\/div&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;\/div&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;div id=\&#34;right\&#34; style=\&#34;top:112px;right:50px\&#34;&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;div id=\&#34;right2\&#34; class=\&#34;imzql\&#34;&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;img border=0 src=https://cdn.usj.cc/right.jpg&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;br&gt;&lt;a href=\&#34;javascript:close_right2();\&#34; title=\&#34;关闭右边的对联\&#34;&gt;×&lt;\/a&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;\/div&gt;&#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">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#34;&lt;\/div&gt;&#34;</span><span style="color:#000;font-weight:bold">);</span>
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold">&lt;</span><span style="color:#a40000">/script&gt;</span>
</span></span></code></pre></div><p>[/reply]</p>
<p>这里需要注意需要把 
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9jZG4udXNqLmNjL3h4eC5qcGc%3d"
    
     target="_blank"
>
https://cdn.usj.cc/xxx.jpg</a> 下载下来，接着上传为自己的本地图片，因为这里图片使用的是自己的腾讯云文件托管，需要添加为referer白名单，否则直接引用会裂图</p>
<p>曾经被油老师嘲讽自己的思考问题不全面，每次整活都没考虑到移动端，所以这次对移动端也做了特别考虑，为了更好的去适应访客效果，我计划在低于1500分辨率的电子设备上不显示对联，否则在小屏幕的手机端，对联会显示出来遮挡对文章的正常浏览</p>
<p>当然控制方法也很简单，直接用css进行控制就好了，有一些设备的分辨率大概在1440，显示了就会影响侧栏的内容显示，当然我已经写了两个关闭按钮去控制，毕竟每次要去关闭两张图片会麻烦</p>
<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="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>
<p><code>document.writeln(&quot;&lt;\/div&gt;&quot;);</code></p>
<p>的下方加入</p>
<p><code>window.setInterval(&quot;heartBeat()&quot;,1);</code></p>
<p>即可，是不是非常简单，咱们看看具体的效果</p>
<p>
<img data-lazy-src="/pics/2022/01/1933999639.png" alt="" class="lazyload"></p>
<p>晚安，我的朋友们</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>更换掉jsdelivr，改用腾讯云静态网站托管，网站速度比之前提升了不少</title>
      <link>https://usj.cc/post/41/</link>
      <pubDate>Wed, 22 Dec 2021 19:19:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/41/</guid>
      <description>20号中午打包外卖到寝室，打开浏览器访问一下自己的博客，突然发现自己网站静态文件都丢失了 f12一下才知道原来是jsdelivr那边出问题，打</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="更换掉jsdelivr，改用腾讯云静态网站托管，网站速度比之前提升了不少" /><p>20号中午打包外卖到寝室，打开浏览器访问一下自己的博客，突然发现自己网站静态文件都丢失了</p>
<p>f12一下才知道原来是jsdelivr那边出问题，打开一个新标签页，发现jsdelivr的ssl证书已经过期</p>
<p>去他官网仔细看了一下，官网给了个这个公告</p>
<p>
<img data-lazy-src="/pics/2021/12/2349800759.png" alt="" class="lazyload"></p>
<p>简单理解就是jsdelivr速度会比之前慢一点，现在已经恢复正常使用了，但是速度没有以前的理想</p>
<p>特意查了一下，jsdelivr的备案也被下了，可能是有什么涉及违规的东西，估计距离墙也不远了</p>
<p>
<img data-lazy-src="/pics/2021/12/289198289.png" alt="53027-yqy9w46iit.png" class="lazyload"></p>
<p>不得不说 jsdelivr 真的是一个很好的东西，从2020.3月初，一直使用他们的加速，突然间没了，还是挺可惜的</p>
<p>个人来看，我觉得跟 jsdelivr 支持 Github 有主要关系，毕竟 Github 在今年的年初在国内访问已经有各种限制了</p>
<p>这两天考完试，同时也在寻找 jsdelivr 的替代方案时，朋友建议我批量把 cdn.jsdelivr.net 换为 cdn.statically.io</p>
<p>这里解释一下 cdn.statically.io 也是一个同样支持 github 的加速，但是经过自己查了一下 cdn.statically.io 已经dns污染了</p>
<p>细思微恐，jsdelivr既然已经被下掉备案了，估计距离dns污染也不远了，因为dns污染之前把备案卸掉和国内cdn取消掉，这点合情合理</p>
<p>总感觉jsdelivr的提供商网宿CDN，行动实在是太快了</p>
<p>最近也有小伙伴问我关于jsdelivr替代方案，我找了两个方案，简单分享一下</p>
<h2 id="使用lolitop大佬的替代方案">使用loli.top大佬的替代方案</h2>
<p>loli.top大佬使用的是国内CDN分发，服务器及CDN均流量无限，G口起步，速度还是很理想的</p>
<p>如果自己不想花钱可以直接使用这个用爱发电的方案，之前使用gh图床也可以直接使用了</p>
<p>使用方法：</p>
<blockquote>
<p>替换 
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0"
    
     target="_blank"
>
https://cdn.jsdelivr.net</a>
成为 
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly94Y2RuLmxvbGkudG9w"
    
     target="_blank"
>
https://xcdn.loli.top</a></p>
</blockquote>
<p>但是为了避免滥用，大佬已经开启了白名单机制，可以在大佬的博客留言把自己的域名加入白名单即可</p>
<blockquote>
<p>博客地址：https://blog.loli.top</p>
</blockquote>
<h2 id="腾讯云的静态网站托管服务">腾讯云的静态网站托管服务</h2>
<p>这个服务好像还是腾讯云最近出的新东西，就是可以把网站的静态资源丢进去，享受加速</p>
<p>听强仔说，这个不怎么贵，每个月几块钱，一瓶水钱，还不错</p>
<p>直接登陆腾讯云打开控制台，搜索 静态网站托管 即可，地区随便选</p>
<p>
<img data-lazy-src="/pics/2021/12/3676607079.png" alt="" class="lazyload"></p>
<p>这里选择空模板即可，然后名称随便写，这里界面就跟宝塔文件夹一样</p>
<p>
<img data-lazy-src="/pics/2021/12/3930361198.png" alt="" class="lazyload"></p>
<p>创建自己的文件夹，把自己的静态文件丢里面即可，文件夹自定义即可，不用跟我一样</p>
<p>接下来就是解析一个二级域名，在这个界面解析好，然后上对应的ssl证书即可</p>
<p>
<img data-lazy-src="/pics/2021/12/3395398520.png" alt="49426-fxuqyl4hl1.png" class="lazyload"></p>
<p>然后找到访问配置，按照下图设置即可，referer白名单是指你的静态文件那些域名可以引用你的静态资源</p>
<p>
<img data-lazy-src="/pics/2021/12/2551796593.png" alt="" class="lazyload"></p>
<p>这样可以避免被其他人恶意调用，只有加入referer白名单的域名才可以调用</p>
<p>IP访问限频配置，是防止cc攻击，我这里博客访问量较小，设置的20次，你可以按照自己的情况设置</p>
<p>可以看一下效果</p>
<p>[dplay src=&ldquo;https://usj.cc/sp/7.mp4&rdquo;]</p>
<p>晚安，朋友们</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>我的公益rss阅读器正式公益上线，点进来教你正确的打开方式</title>
      <link>https://usj.cc/post/33/</link>
      <pubDate>Wed, 24 Nov 2021 21:09:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/33/</guid>
      <description>rss想必很多小伙伴都听说过，如果拿在2021年讲的话，这个是一个很老的东西 初次认识这个东西的时候，rss就是一堆乱七八糟的 XML代码，一点</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="我的公益rss阅读器正式公益上线，点进来教你正确的打开方式" /><p>rss想必很多小伙伴都听说过，如果拿在2021年讲的话，这个是一个很老的东西</p>
<p>初次认识这个东西的时候，rss就是一堆乱七八糟的 XML代码，一点用都没有</p>
<p>如果你没见过rss，点开下面的链接就是我们老生常谈的rss链接</p>
<blockquote>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly91c2ouY2MvZmVlZA%3d%3d"
    
     target="_blank"
>
https://usj.cc/feed</a></p>
</blockquote>
<p>在大数据时代，我们总是被动的接收信息，这些源有时候不一定是自己想要的</p>
<p>大数据都会根据各种算法一五一十的推给你，导致浪费自己很多碎片化时间</p>
<p>总会给自己一种感觉，什么鬼，我什么都没干，两个小时的时间都没了</p>
<p>这里就体现了rss的作用了，我们可以收藏一些对我们有用的网站的信息源的rss链接</p>
<p>整合到可以一目了然阅读的rss阅读器上，我们接收信息从大数据推送转变成自己想看喜欢看的东西</p>
<p>而不是一味地被动的接收信息，可以极大化的节约自己的碎片化时间</p>
<h2 id="u阅读-一款公益的rss阅读器">U阅读-一款公益的rss阅读器</h2>
<p>想必现在市面上大部分阅读器都是需要付费的，比如一些很出名的rss阅读器</p>
<p>我如果想订阅一些我喜欢的网站的rss链接，我就得去充钱，自己用起来也是十分的不方便</p>
<p>前段时间看到gitee一个项目</p>
<blockquote>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9naXRlZS5jb20vYW55YW50L3Jzc2FudA%3d%3d"
    
     target="_blank"
>
https://gitee.com/anyant/rssant</a></p>
</blockquote>
<p>这个作者开源了一款名叫做蚁阅的阅读器程序，但是安装很复杂，需要一些Linux操作命令</p>
<p>docker命令，如果你是宝塔面板的忠实粉丝，可能不会习惯这种连接终端式的程序安装</p>
<p>为了安装这个程序，我花了将近好几天的学习空余时间学习docker的一些操作命令，screen命令</p>
<p>最后总算是安装好了，期间弄坏了好几次服务器导致博客数据丢失，网站崩掉，如果你只有一台服务器不建议折腾</p>
<p>建议在测试服务器测试完毕，再去自己常用服务器进行上线安装，如果你是一个不爱折腾的小伙伴，请继续看下面</p>
<p>考虑到自己的服务器还有四年之久，想着仅仅做个博客丢上面，真是显得有些资源浪费</p>
<p>小赵同学也是秉承着分享的原则，把这个搭建好的成品免费公益给大家使用，为了方便大家使用</p>
<p>我使用了开发工具封装了我的rss的安卓版app，这样免去了繁琐的每次去输入rss的网址去访问阅读</p>
<p>
<img data-lazy-src="/pics/2021/11/2197272810.png" alt="19990-v5ea24dltd.png" class="lazyload"></p>
<p>图标是不是非常熟悉，如果你是老朋友了，你可能一眼便知</p>
<p>APP总得有个名字吧，叫优世界，不行，我的博客名叫这个，不能重复了</p>
<p>冥思苦想，还是给他起了一个文雅一点的app名字：U阅读</p>
<h2 id="u阅读-预览">U阅读-预览</h2>
<p>这个rss阅读器分为app版和web端，桌面端</p>
<p>web端：https://rss.usj.cc</p>
<p>app版：</p>
<p>主要分别为白天模式和黑夜模式，主要是方便阅读不刺眼，阅读的舒适感</p>
<p>[xiangce]

<img data-lazy-src="/pics/2021/11/1953958978.png" alt="07998-19m30x40nk3i.png" class="lazyload">
<img data-lazy-src="/pics/2021/11/2254109657.png" alt="91609-lfmeqberkjb.png" class="lazyload">
[/xiangce]</p>
<p>桌面端：</p>
<p>我是电脑的深度使用者，当然也弄了桌面端</p>
<p>打开你的谷歌浏览器或者edg浏览器，然后点击这个地方</p>
<p>
<img data-lazy-src="/pics/2021/11/1562879867.png" alt="51508-cd5rald98w.png" class="lazyload"></p>
<p>就可以为自己的电脑桌面添加一个桌面端，方便电脑时阅读体验</p>
<h2 id="订阅自己的博友">订阅自己的博友</h2>
<p>作为一个喜欢写博客的博主，有时候闲暇的时间也喜欢去逛逛自己的友链的博主</p>
<p>但是不能保证我随便点的博友的博客，都有最新发布的文章</p>
<p>如果我一个一个去点击访问，则会浪费一些不必要的碎片时间</p>
<p>这里我们就可以使用U阅读的订阅功能，点击U阅读的上方的+号，将你喜欢的博主的网站链接键入对应位置</p>
<p>U阅读app便会每隔三十分中自动抓取博友的更新的最新文章，以便自己可以及时回访和互动</p>
<p>其次也极大的加大了博主与博主的之间的友情值，订阅你喜欢的博客就好比对该博主设置了特别关心</p>
<p>博友更新文章，U阅读可以及时的反馈给你，该博友更新文章了，要不去逛逛</p>
<h2 id="订阅我喜欢的up主">订阅我喜欢的Up主</h2>
<p>我也是一个热爱小破站的博主，几乎无聊的时间都在小破站上面学习和看番剧</p>
<p>我喜欢的up主，我能不能把他每期最新更新的投稿视频也加入U阅读呢，答案是可以的</p>
<p>比如我爱看跳舞区的小姐姐，去b站，将该up主的主页地址复制下来</p>
<blockquote>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9zcGFjZS5iaWxpYmlsaS5jb20vOTU5NDgwMTA%2fc3BtX2lkX2Zyb20%3d"
    
     target="_blank"
>
https://space.bilibili.com/95948010?spm_id_from</a></p>
</blockquote>
<p>可以知道该up主的id号是95948010，我们只需要复制主页的地址把/你喜欢的up主id？这段id截取下来</p>
<p><strong>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9yc3NodWIuYXBwL2JpbGliaWxpL3VzZXIvdmlkZW8vOTU5NDgwMTA%3d"
    
     target="_blank"
>
https://rsshub.app/bilibili/user/video/95948010</a></strong></p>
<p>想必你看到，上面例子便一目了然，只需要将你喜欢的up主id替换掉就行了</p>
<p><strong>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9yc3NodWIuYXBwL2JpbGliaWxpL3VzZXIvdmlkZW8v"
    
     target="_blank"
>
https://rsshub.app/bilibili/user/video/</a>这里填写up的id</strong></p>
<p>
<img data-lazy-src="/pics/2021/11/112412364.png" alt="92807-bvlu8nqhx5q.png" class="lazyload"></p>
<p>这样，阅读器可以自动抓取你喜欢的up主的最新投稿视频，哈哈哈，是不是非常好用</p>
<p>
<img data-lazy-src="/pics/2021/11/1263744468.png" alt="13693-4946mbjxgd2.png" class="lazyload"></p>
<p>视频也可以在线观看，极大化的精简了自己的碎片化时间</p>
<h2 id="订阅loc论坛">订阅loc论坛</h2>
<p>我平时比较喜欢看loc一些mjj大佬发的一些主机活动，我们也可以添加在阅读器中</p>
<blockquote>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9ob3N0bG9jLmNvbS9mb3J1bS5waHA%2fbW9kPXJzcw%3d%3d"
    
     target="_blank"
>
https://hostloc.com/forum.php?mod=rss</a></p>
</blockquote>
<p>这样我们就可以随时关注loc的最新动态</p>
<p>
<img data-lazy-src="/pics/2021/11/3834233708.png" alt="42211-8244e3h0kvg.png" class="lazyload"></p>
<h2 id="订阅其他内容">订阅其他内容</h2>
<p>如果你不满足这些，也可以仔细看下面文档加入你喜欢的内容</p>
<p><strong>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9kb2NzLnJzc2h1Yi5hcHAvYmJzLmh0bWwjYS1kYW8tbmktbWluZy1iYW4%3d"
    
     target="_blank"
>
https://docs.rsshub.app/bbs.html#a-dao-ni-ming-ban</a></strong></p>
<h2 id="u阅读下载">U阅读下载</h2>
<p>U阅读app下载地址：https://usj.cc/rss.apk</p>
<p>晚安，我的朋友们</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>给你的博客加一个情侣恋爱倒计时小工具，另外安利一个好用的typecho插件</title>
      <link>https://usj.cc/post/32/</link>
      <pubDate>Sun, 21 Nov 2021 22:48:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/32/</guid>
      <description>之前给大家说的那个博客后台美化，还有一点点问题，本来是承诺这个文章给他分享出来 因为第一次做美化，考虑到很多小伙伴还不会css，所以我自己测试</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="给你的博客加一个情侣恋爱倒计时小工具，另外安利一个好用的typecho插件" /><p>之前给大家说的那个博客后台美化，还有一点点问题，本来是承诺这个文章给他分享出来</p>
<p>因为第一次做美化，考虑到很多小伙伴还不会css，所以我自己测试好再放出来，哈哈哈，暂时鸽了</p>
<p>想必各位小伙伴，都是看我的文章标题进的，当然我不是标题党，本文章就是纯正经的整活</p>
<h2 id="paste-image插件">Paste Image插件</h2>
<p>作为一个生活类的写作博主，喜欢在文章掺杂一些自己的日常，意味着就需要上传图片</p>
<p>使用typecho的时候，上传图片要分为两步，十分的不方便，第一步上传附件，第二步插入图片</p>
<p>这样的步骤极大的拖慢了文章的写作效率，我前几天在github仓库发现一个插件可以完美解决这个痛点</p>
<p>这个插件可以为 Typecho 自带编辑器增加粘贴图片上传功能，Typecho 最新开发版已经直接支持粘贴上传功能</p>
<p>本插件仅供旧版本（我指的是现在使用的是官方最新<strong>正式版</strong>的小伙伴）</p>
<p>如果你是typecho的开发版本，请跳过这个地方，因为最新开发版已经完美支持这个功能了</p>
<p>想必很多小伙伴在typecho写博文的时候，喜欢插入图片，安装好了这个插件，写文章的时候</p>
<p>图片放在电脑桌面上，对图片选中之后，Ctrl+C 复制，然后去 typecho 编辑器去 ctrl+v，图片就直接上传好了</p>
<blockquote>
<p>插件地址：https://github.com/zgq354/PasteImage</p>
</blockquote>
<h2 id="为自己的博客添加一个恋爱小工具">为自己的博客添加一个恋爱小工具</h2>
<p>想必有很多博主，都是有着浪漫主义色彩，想必找过可以统计跟男朋友女朋友的相恋的时间</p>
<p>最近在学JavaScript，JavaScript一些课程也教我们做一些倒计时的小功能，我想这岂不是可以做个情侣恋爱计时</p>
<p>然后放在博客的侧栏，做成一个侧栏小卡片，说干就干，昨天下午就开始在网上找思路，效果基本上就是这样的</p>
<p>
<img data-lazy-src="/pics/2021/11/980812404.png" alt="23637-1p62hym2vgo.png" class="lazyload"></p>
<p>你如果想看样式，可以去我的测试站点</p>
<blockquote>
<p>北边博客：https://beibian.net</p>
</blockquote>
<p>这里我会提供两种方法，小赵推荐大家使用第二种，因为利于修改</p>
<p>找到博客的侧栏的php文件，在合适的位置加入以下代码</p>
<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>        <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>        <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>
<img data-lazy-src="/pics/2021/11/942065632.png" alt="53861-hatym7b1n84.png" class="lazyload"></p>
<p>这样直接离了大普，头部直接不听话</p>
<p>第二种方法就是利用iframe标签嵌套网页，这样新建一个网页再使用嵌套的方法将网站内容嵌套过来</p>
<p>不会影响自己的网站主题本身自带的主题样式，还利于修改，不至于自己不懂主题，一下把自己的主题删503了</p>
<p>第一步，把我的演示站，利用浏览器的审查元素功能，把整个代码存文本地的index.html</p>
<p>因为就是纯单页，JavaScript和css都放在这个页面。没有额外的文件，可以放心折腾</p>
<blockquote>
<p>演示页面：https://zql.im/love.html</p>
</blockquote>
<p>然后修改相应的东西改为你自己的就好了，然后找到主题的合适位置放入iframe标签</p>
<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>
<p>过段时间会给大家分享倒计时的小卡片，JavaScript我还在学习中，争取给大家带来更多好玩的小功能</p>
<p>晚安，我的朋友们</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>彻底对令人头疼的Gravatar头像说再见，正式换上国内的Cravatar头像源</title>
      <link>https://usj.cc/post/28/</link>
      <pubDate>Thu, 11 Nov 2021 14:52:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/28/</guid>
      <description>因为给自己的主题换新主题配色了，对应的主题的头像也要更换一下，不然显得非常不搭 这意味着我必须得爬qiang去访问Gravatar的官网，我自</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="彻底对令人头疼的Gravatar头像说再见，正式换上国内的Cravatar头像源" /><p>因为给自己的主题换新主题配色了，对应的主题的头像也要更换一下，不然显得非常不搭</p>
<p>这意味着我必须得爬qiang去访问Gravatar的官网，我自用的节点又死了，导致开个Gravatar官网都很卡</p>
<p>好不容易把Gravatar头像成功换好了，发现国内反代的Gravatar源刷新速度很慢</p>
<p>很早之前换的Gravatar头像，一直到第三天都没变，还是原来的头像，于是本文就来了</p>
<h2 id="介绍一下gravatar头像">介绍一下Gravatar头像</h2>
<p>可能还有很多新手站长朋友不知道什么叫做Gravatar头像，这里简单给大家科普一下</p>
<p>Gravatar是WordPress母公司Automattic推出的一个公共头像服务</p>
<p>你只需要去Gravatar.com注册账号绑定自己的域名邮箱，然后上传自己喜欢的头像</p>
<p>在逛博客评论的时候，邮箱填写您的域名邮箱，会默认输出你在Gravatar上传的头像</p>
<p>支持个性化，是一个非常不错的项目，现在各大博客系统基本上都是支持Gravatar头像的</p>
<p>但是因为长城防火墙的存在，Gravatar在中国境内时不时就会被墙一下，比如本次从2021年2月一直到8月都是不可访问状态</p>
<p>有时候去Gravatar上传自己的新头像，不得不借朋友的梯子爬qiang，非常的繁琐</p>
<p>因为被墙，国内很多大佬也想了很多方法，比如使用反代和cdn加速确保Gravatar在国内能正常访问</p>
<p>法律上讲这种方法虽然可行但是违法的，一不小心可能会很容易吃牢饭</p>
<p>其实可以仔细想一下为什么Gravatar头像在国内会被墙，一定是出现了某些涉政、涉黄之类的违法内容，然后被禁止国内访问</p>
<p>这些国家禁止的东西我们再将其反代到中国使其可以正常访问，不得不说真的是细思极恐</p>
<p>但是话说回来，反代和cdn加速真的解决了本质问题吗，其实并没有，这种方法只是解决头像访问的问题</p>
<p>但是没有解决头像上传问题，我们如果换头像的话，就得利用国内的头像源去获取Gravatar头像</p>
<p>而且缓存没十天半个月根本刷新不出来新的头像，可谓真的不方便</p>
<p>在这里小赵同学也在叶开的介绍下认识了一款咱们国内的头像库项目，真是我们的福音</p>
<h2 id="国内cravatar头像源项目">国内Cravatar头像源项目</h2>
<p>Cravatar是lifepress团队在国内做的一个公益项目，是一个Gravatar完美的替代品</p>
<p>看了官方的文档，Cravatar100%兼容Gravatar的头像API，这意味着你可以简单的通过替换域名的方式来使用Cravatar接替Gravatar</p>
<p>让我惊艳的功能官方文档是这样说的</p>
<p><strong>Cravatar支持在用户未设置Cravatar头像及Gravatar头像时匹配QQ头像（仅限于使用QQ数字邮箱的用户）</strong></p>
<p>其带来的效果是：</p>
<p><strong>经过三级匹配(Cravatar头像-&gt;Gravatar头像-&gt;QQ头像)后，大约70%的访客都会得到准确的头像</strong></p>
<p>也就是使用Cravatar，如果你没有Gravatar头像，Cravatar可以默认输出你的QQ头像</p>
<p>对于官方文档，小赵同学认为，总的来说，Cravatar在100%兼容Gravatar的同时，还有很多优点</p>
<p>具有更快的速度服务完全架设并运行在中国大陆境内，几乎是毫秒级的相应，真的可以提高博客的速度</p>
<p>更高的稳定性，因为项目架构在国内，我们属于国内，不可能出现被墙，简单来说不会出现时不时访问不了的情况</p>
<p>还有更高的头像展现率，在自有头像库的基础上囊括了Gravatar和QQ的头像库，更加的丰富</p>
<p>还支持较高效率的头像更新速率，五分钟刷新，自己心爱的头像马上展现在自己的心心念念的博客上</p>
<p>
<img data-lazy-src="/pics/2021/11/1302260735.jpg" alt="" class="lazyload"></p>
<h2 id="cravatar头像源我们该怎么接入呢">Cravatar头像源我们该怎么接入呢</h2>
<p>这里我主要讲WordPress和typecho的接入方法</p>
<p>其他博客系统自己摸索就好了</p>
<h2 id="wordpress的接入方法">WordPress的接入方法</h2>
<p>只需要将以下代码</p>
<p>加入你的插件或主题的 <code>functions.php</code> 里即可</p>
<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">&#39;get_cravatar_url&#39;</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:#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">&#39;www.gravatar.com&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span>            <span style="color:#4e9a06">&#39;0.gravatar.com&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span>            <span style="color:#4e9a06">&#39;1.gravatar.com&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span>            <span style="color:#4e9a06">&#39;2.gravatar.com&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span>            <span style="color:#4e9a06">&#39;secure.gravatar.com&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span>            <span style="color:#4e9a06">&#39;cn.gravatar.com&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span>            <span style="color:#4e9a06">&#39;gravatar.com&#39;</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:#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">&#39;cravatar.cn&#39;</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:#000">add_filter</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">&#39;um_user_avatar_url_filter&#39;</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">&#39;get_cravatar_url&#39;</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">&#39;bp_gravatar_url&#39;</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">&#39;get_cravatar_url&#39;</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">&#39;get_avatar_url&#39;</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">&#39;get_cravatar_url&#39;</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:#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">&#39;set_defaults_for_cravatar&#39;</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">&#39;gravatar_default&#39;</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">&#39;Cravatar 标志&#39;</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:#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:#000">add_filter</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">&#39;avatar_defaults&#39;</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">&#39;set_defaults_for_cravatar&#39;</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:#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">&#39;set_user_profile_picture_for_cravatar&#39;</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">&#39;&lt;a href=&#34;https://cravatar.cn&#34; target=&#34;_blank&#34;&gt;您可以在 Cravatar 修改您的资料图片&lt;/a&gt;&#39;</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:#000">add_filter</span><span style="color:#000;font-weight:bold">(</span> <span style="color:#4e9a06">&#39;user_profile_picture_description&#39;</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">&#39;set_user_profile_picture_for_cravatar&#39;</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="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">&#39;__TYPECHO_GRAVATAR_PREFIX__&#39;</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#4e9a06">&#39;https://cravatar.cn/avatar/&#39;</span><span style="color:#000;font-weight:bold">);</span>
</span></span></code></pre></div><h2 id="cravatar官网地址">Cravatar官网地址</h2>
<blockquote>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9jcmF2YXRhci5jbg%3d%3d"
    
     target="_blank"
>
https://cravatar.cn</a></p>
</blockquote>
<h2 id="cravatar的头像源">Cravatar的头像源</h2>
<p>找到你的主题目录，找到Gravatar头像加速功能</p>
<p>把这个填进去即可</p>
<blockquote>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9jcmF2YXRhci5jbi9hdmF0YXI%3d"
    
     target="_blank"
>
https://cravatar.cn/avatar</a></p>
</blockquote>
<h2 id="测试一下速度">测试一下速度</h2>
<p>
<img data-lazy-src="/pics/2021/11/4197518649.png" alt="" class="lazyload"></p>
<p>你会发现加载只花了98毫秒，不得不说非常的给力</p>
<p>有兴趣的小伙伴可以自己替换一下</p>
<p>就写这么多了，祝各位朋友生活愉快！</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>不用改变图片原地址，实现图片自动转webp格式，速看，一会删</title>
      <link>https://usj.cc/post/21/</link>
      <pubDate>Thu, 04 Nov 2021 21:11:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/21/</guid>
      <description>是不是有点标题党的感觉，哈哈，这个是最近看一些微信公众号营销号的标题仿写的 这篇文章我来说一下如何实现不改变博客图片地址，实现图片自动转web</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="不用改变图片原地址，实现图片自动转webp格式，速看，一会删" /><p>是不是有点标题党的感觉，哈哈，这个是最近看一些微信公众号营销号的标题仿写的</p>
<p>这篇文章我来说一下如何实现不改变博客图片地址，实现图片自动转webp格式输出</p>
<p>上篇文章我有介绍到webp格式图片，如果你还不知道webp图片是什么，可以花一两分钟看下我的上篇文章</p>
<p>在了解了webp格式，有个晚上睡觉前，我在想，有没有一种方法可以实现图片不需要每次手动压缩，自动转webp格式输出</p>
<p>第二天上午没课，我特地搜索了一下，确实有，还是一个github的开源项目，可以实现这种功能，但是使用方法有点复杂</p>
<p>周二晚上我将近折腾四个小时都没折腾好，晚上宿舍统一熄灯，不得不被迫关机休息，睡到床上上，真的是头晕目眩</p>
<p>以后不能这样长时间看电脑，真的是很伤眼睛和身体，文章我主要针对两个方案讲解一下思路</p>
<h2 id="不需要备案实现方法">不需要备案实现方法</h2>
<p>这个在文章前面说过，是github开源项目，需要自己折腾，使用方法比较复杂，喜欢折腾而且还懂Linux操作命令的</p>
<p>可以尝试一下这个方法，确实可以实现这个效果，我仔细看了作者的项目介绍，实现思路是这样的</p>
<p>自动支持图片webp格式压缩，图片服务器升级webserver</p>
<p>webp server 这个项目是开源免费的，图片服务器升级，自动支持webp</p>
<p>服务器得先升级openresty，程序作者是用go语言写的 webserver</p>
<p>原理是请求到jpg png gif这些，再缓存起来，外面请求还是jpeg这些，实际先到go返回的webp格式</p>
<p>当浏览器不支持webp的才返回源文件。可以提升加载时间，图片从434KB减少到340KB，1/4（25%）的压缩率</p>
<p>项目地址：</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9naXRodWIuY29tL3dlYnAtc2gvd2VicF9zZXJ2ZXJfZ28%3d"
    
     target="_blank"
>
https://github.com/webp-sh/webp_server_go</a></p>
<p>如果你是动手能力强的，或者是没有备案的小伙伴可以尝试一下这个方法，也有大佬提供教程</p>
<p>自己折腾的可以看下这个教程</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly93d3cueGlhb3oubWUvYXJjaGl2ZXMvMTQ2NjY%3d"
    
     target="_blank"
>
https://www.xiaoz.me/archives/14666</a></p>
<p>因为文章里面有很多专业术语，我一个行外小白还是不折腾了</p>
<h2 id="需要备案的实现方法">需要备案的实现方法</h2>
<p>前几天问叶开，有没有方法可以实现自动转webp格式图片，每次写文章还要压缩转换格式真的特别麻烦</p>
<p>叶开推荐我试试cdn，因为基本上现在的cdn都支持自动转换webp格式的图片，我对比了市面上的cdn</p>
<p>发现又拍云对图片处理是不另外计费的，腾讯云cdn对图片转webp格式是需要另外计费的，对于我这种学生</p>
<p>考虑成本，还是选择了又拍云，又拍云也是真的良心，有个又拍云联盟，可以免费嫖流量和储存，对于我这种白嫖怪，为之窃喜</p>
<p>
<img data-lazy-src="/pics/2021/11/4218786825.png" alt="" class="lazyload"></p>
<p>这个又拍云联盟确实不赖，加入又拍云联盟每个月免费获取每月 10GB 存储空间 + 15GB 流量，对于我们这种小访问的博客，只能说在合适不过了</p>
<p>但是要求的是，需要你的网站底部悬挂他家的logo为它做宣传，意思是他给你白嫖流量，你给他做宣传，有兴趣的小伙伴可以看看下面的活动链接</p>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly93d3cudXB5dW4uY29tL2xlYWd1ZQ%3d%3d"
    
     target="_blank"
>
https://www.upyun.com/league</a></p>
<p>又拍云联盟需要在网站下面加入又拍云的logo，你想用我弄好的样式，可以复制下面我做的样式，自己放在自己网站的合适地方即可</p>
<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">div</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;left&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;</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">&#34;https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral&#34;</span><span style="color:#000;font-weight:bold">&gt;&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://img.52ql.cn/img/169&#34;</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;249px&#34;</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;400px&#34;</span><span style="color:#000;font-weight:bold">/&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span></code></pre></div><p>然后提交申请加入又拍云联盟即可，审核小姐姐真的很给力，基本上两个小时就给你通过申请了</p>
<p>
<img data-lazy-src="/pics/2021/11/3873224529.png" alt="" class="lazyload"></p>
<p>那么我们现在开始给自己接入cdn，首先进入又拍云的cdn控制台添加域名，因为我们只需要他的图片处理功能</p>
<p>所以你直接按照我下面图片设置就好了，应用场景选择网页图片，填写好你的域名，如果你的主域名是usj.cc</p>
<p>那么www.usj.cc就没必要配置cdn，浪费钱且不划算，直接宝塔面板设置www.usj.cc 301跳转到usj.cc，这样我们就可以只用配置usj.cc的cdn设置就好了</p>
<p>
<img data-lazy-src="/pics/2021/11/768684432.png" alt="" class="lazyload"></p>
<p>创建成功之后，直接去自己的域名管理控制台把自己的解析改为CNAME解析并按照又拍云解析到相应地址</p>
<p>等待五到十分钟，然后打开cmd操作命令台，ping一下自己的网站，看看cdn是否生效</p>
<p>
<img data-lazy-src="/pics/2021/11/2441536733.png" alt="" class="lazyload"></p>
<p>如果你的跟我一样，就代表cdn设置成功了</p>
<h2 id="添加https访问协议">添加https访问协议</h2>
<p>这个直接去控制台添加，按照我下面的图片操作即可，至于证书在哪，直接去宝塔面板证书管理那里，复制过来即可</p>
<p>
<img data-lazy-src="/pics/2021/11/2158377009.png" alt="" class="lazyload"></p>
<h2 id="开启图片自动转webp格式功能">开启图片自动转webp格式功能</h2>
<p>在控制台的这个地方把这个打开</p>
<p>
<img data-lazy-src="/pics/2021/11/4125482855.png" alt="" class="lazyload"></p>
<p>然后在把这个打开，就能实现站点的webp格式处理了</p>
<p>
<img data-lazy-src="/pics/2021/11/3889867141.png" alt="" class="lazyload"></p>
<h2 id="为什么进不去typecho的后台">为什么进不去typecho的后台</h2>
<p>首先去控制台设置参数跟随，并设置全程跟随</p>
<p>
<img data-lazy-src="/pics/2021/11/1015724849.png" alt="" class="lazyload"></p>
<p>这里缓存配置里，这个地方不要设置全局缓存，下面不要勾选就好</p>
<p>
<img data-lazy-src="/pics/2021/11/4031660656.png" alt="" class="lazyload"></p>
<p>在不缓存设置里面，我们需要他设置不缓存后台就好</p>
<p>
<img data-lazy-src="/pics/2021/11/626355279.png" alt="" class="lazyload"></p>
<p>我们还需要设置一下边缘规则，因为Typecho需要携带referer参数才可以登陆后台</p>
<p>在未开启CDN的时候访问后台，地址栏会多出referer参数，需要在又拍云设置边缘规则，否则无限循环后台地址</p>
<p>这个我想潘先生已经体会到了，哈哈哈，这个设置其实很简单，安装下面我的配置设置即可</p>
<p>
<img data-lazy-src="/pics/2021/11/1401014779.png" alt="" class="lazyload"></p>
<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.中间是域名 后面是后台路径
</span></span></code></pre></div><p>设置好上面这些，基本上登陆后台就没问题了</p>
<h2 id="我用cdn万一被刷流量怎么办">我用cdn万一被刷流量怎么办</h2>
<p>这里提供几个方法，可以一定防止流量被刷，介绍给大家我的一些想法</p>
<p>但是还是建议各位做站的小伙伴不要随意招惹别人,防止造成一些不必要的攻击</p>
<p><strong>1.拦截比较烦人的ip</strong></p>
<p>做网站最在乎的就是用户体验，在我认为，理论上，一个网站，流量的百分之九十以上都来自于那些正常用户</p>
<p>如果用正态分布概念来分析自己的网站用户，我们的目标流量都集中在中间那部分</p>
<p>边缘那部分占很少IP，而这些少数IP主要集中在一些非目标国家/地区，基本上cc攻击ddos都是这些地区搞的幺蛾子</p>
<p>正是这些鸡肋国家/地区的IP整天出幺蛾子：扫描、攻击并恶意抓取我们的网站，导致很大流量损失</p>
<p>甚至损失的流量超过正常用户访问的流量，一夜之间cdn欠费几千块都有可能，所以我们应该拦截国外的一些无用ip</p>
<p>这里小赵同学建议大家应该把部分国家/地区列入禁止访问的黑名单之中</p>
<p>方法还是依赖于又拍云的cdn，直接在控制台配置就好了</p>
<p>可以在又拍云的「访问控制」→「地区访问限制」中进行设置，把中国包含港澳台加入白名单</p>
<p>白名单设置好了，只有白名单地区的用户才可以访问，其他国家的地区默认为黑名单，且无法访问</p>
<p>当然我们也可以把一些在日志中发现的经常有恶意行为的IP所在的国家/地区加入黑名单</p>
<p>例如俄罗斯等东欧国家、越南、南美洲等和地区</p>
<p><strong>2.单IP限频</strong></p>
<p>细心的站长可以发现，在网站日志中，经常会看到有些IP地址，反复抓取某一个文件</p>
<p>例如某一张图片或某个网页地址，甚至被它刷屏，造成了我们很多流量损失</p>
<p>针对这种单IP刷某一文件的行为，我们可以通过对某些特定文件限频的方式来解决</p>
<p>通过在又拍云CDN中「访问控制」→「IP 访问限制」设置来完成</p>
<p>这里，可以分量限频，例如，如果某IP访问频率阈值（次/分）在200-500之间</p>
<p>你可以设置限制该IP在多长时间内不能访问，如果在500-1000间，你可以设置另外的时间</p>
<p>这样可以根据严重程度分数个访问量的区间设置禁止访问的时间长度</p>
<p><strong>3.在「访问控制」一项中设置</strong></p>
<p>在网站日志可以发现，有时候一些爬虫访问我们网站还会造成一些不必要的流量</p>
<p>我们可禁止一些大量抓取网站或者恶意抓取/镜像我们网站的常见爬虫访问</p>
<p>这样可以节省一部分流量。可通过「访问控制」→「User-Agent 防盗链」设置，例如以下常见的 User Agent：</p>
<p>[reply]</p>
<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               内容采集
</span></span><span style="display:flex;"><span>Jullo               内容采集
</span></span><span style="display:flex;"><span>Feedly             内容采集
</span></span><span style="display:flex;"><span>UniversalFeedParser  内容采集
</span></span><span style="display:flex;"><span>ApacheBench       cc攻击器
</span></span><span style="display:flex;"><span>Swiftbot           无用爬虫
</span></span><span style="display:flex;"><span>YandexBot         无用爬虫
</span></span><span style="display:flex;"><span>AhrefsBot          无用爬虫
</span></span><span style="display:flex;"><span>MJ12bot           无用爬虫
</span></span><span style="display:flex;"><span>ZmEu phpmyadmin  漏洞扫描
</span></span><span style="display:flex;"><span>WinHttp           采集cc攻击
</span></span><span style="display:flex;"><span>EasouSpider        无用爬虫
</span></span><span style="display:flex;"><span>HttpClient         tcp攻击
</span></span><span style="display:flex;"><span>YYSpider          无用爬虫
</span></span><span style="display:flex;"><span>jaunty wordpress    爆破扫描器
</span></span><span style="display:flex;"><span>oBot              无用爬虫
</span></span><span style="display:flex;"><span>Python-urllib       内容采集
</span></span><span style="display:flex;"><span>Indy Library        扫描
</span></span><span style="display:flex;"><span>Linguee Bot        无用爬虫
</span></span></code></pre></div><p>[/reply]</p>
<p><strong>4.在控制台开启cc防护</strong></p>
<p>这个就不用我多说了，直接在cdn后台勾选这个选项即可</p>
<h2 id="网站图片转换webp效果">网站图片转换webp效果</h2>
<p>我们打开f12随便点击自己的一个博客图片，我们看下图</p>
<p>
<img data-lazy-src="/pics/2021/11/1358044252.png" alt="" class="lazyload"></p>
<p>博客图片的地址是png格式，但是文件类型已经被转换了webp格式，即image/webp</p>
<p>这样就达到了我们实现图片自动转换webp格式的效果，是不是很简单</p>
<p>希望可以帮助各位小伙伴，提高自己的博客体验优化</p>
<p>晚安，我的朋友们</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>让typecho支持webp格式的图片，告别阿里云oss和腾讯云cos被恶意刷流量的风险</title>
      <link>https://usj.cc/post/20/</link>
      <pubDate>Sun, 31 Oct 2021 21:57:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/20/</guid>
      <description>如题，今天没有生活分享，这篇文章我主要科普一下webp图片格式 首先让typecho支持webp格式图片这个标题说法是不准确的 因为typech</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="让typecho支持webp格式的图片，告别阿里云oss和腾讯云cos被恶意刷流量的风险" /><p>如题，今天没有生活分享，这篇文章我主要科普一下webp图片格式</p>
<p>首先让typecho支持webp格式图片这个标题说法是不准确的</p>
<p>因为typecho只是将图片上传显示，并没有对图片做各种的图片格式转换</p>
<p>还记得当初使用WordPress博客系统的时候，基本上写文章都喜欢用webp格式的图片</p>
<p>webp格式图片的优点就是体积小，图片清晰度高，在写文章的时候使用webp格式可以大大的提高用户体验</p>
<p>但是typecho的官方版本，是不支持webp格式的图片的，所以就要对官方程序包加一些小改动</p>
<p>我们打开typecho管理后台可以看到这个地方，是显示不支持webp图片的，但是没关系，我们可以自己加</p>
<p>
<img data-lazy-src="/pics/2021/10/562038999.png" alt="" class="lazyload"></p>
<p>对代码修改的地方也是不是很多，我来详细给大家说一下</p>
<p>找到typecho的程序包的这个位置</p>
<p>var/Widget/Themes/List.php，差不多是70多行</p>
<p>
<img data-lazy-src="/pics/2021/10/814315235.png" alt="" class="lazyload"></p>
<p>图片显示的代码是我修改之后的，你只需要将</p>
<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(&#34;/screenshot\.(jpg|png|gif|bmp|jpeg)/i&#34;,path);
</span></span></code></pre></div><p>改为</p>
<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(&#34;/screenshot\.(jpg|png|gif|bmp|jpeg|webp)/i&#34;,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="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[&#39;attachment&#39;]-&gt;isImage = in_array($content[&#39;type&#39;], array(&#39;jpg&#39;, &#39;jpeg&#39;, &#39;gif&#39;, &#39;png&#39;, &#39;tiff&#39;, &#39;bmp&#39;));
</span></span></code></pre></div><p>改为</p>
<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[&#39;attachment&#39;]-&gt;isImage = in_array($content[&#39;type&#39;], array(&#39;jpg&#39;, &#39;jpeg&#39;, &#39;gif&#39;, &#39;png&#39;, &#39;tiff&#39;, &#39;bmp&#39;, &#39;webp&#39;));
</span></span></code></pre></div><p>然后找到var/Typecho/Common.php，差不多是1399行，我们这里多加一行代码</p>
<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>&#39;webp&#39; =&gt; &#39;image/webp&#39;,
</span></span></code></pre></div><p>然后去typecho的后台，找到设置-基本，这个地方在其他文件加入webp，然后博客就可以完美支持webp格式图片了</p>
<p>
<img data-lazy-src="/pics/2021/10/46607755.png" alt="" class="lazyload"></p>
<h2 id="为什么推荐使用webp格式图片">为什么推荐使用webp格式图片</h2>
<p>作为一个生活博主，具有随拍的习惯，喜欢用相机记录生活，这就意味着我有时候在写文章要上传很多图片</p>
<p>对我来说写博客最大的痛点就是，我希望我能上传更大分辨率，更清晰的图片上来</p>
<p>如果发原图在博客，有时候图片真的是很大，对访客阅读体验十分差，因为自己的服务器带宽也不是很大</p>
<p>很尴尬的事就是可能有时候访客已经把你文章的文字都读完了，图片还没加载出来</p>
<p>然后最简单解决方法就是文章少传图片，或者压缩一下图片再传，我实在是不想少传图片，或者传不清晰的图片</p>
<p>在有篇文章，因为原图很大，所以不得不对图片进行压缩处理，否则图片半天都没加载出来</p>
<p>被吾柯大佬吐槽是不是用座机拍的，哈哈哈，我也是很无奈，当然也有博友建议我使用速度很快的图床</p>
<p>用图床确实是一个可以解决这个烦恼的方法，但是不建议使用</p>
<p>曾经用WordPress的时候，喜欢使用图床存图片，但是现实是往往不幸的，我曾经使用过的图床，图床站长因为个人原因不得不被迫关停，自己博客文章一夜间接近丢失了500多张图片</p>
<p>想对比webp格式图片的优势就显现出来了，具有体积小和清晰的优点，完美的解决了我的烦恼</p>
<h2 id="避免使用cos和oss储存图片">避免使用cos和oss储存图片</h2>
<p>相信觉得大多数博主喜欢使用oss和cos储存图片，即使图片很大，也可以很快的加载出来</p>
<p>作为一个记录生活的博主，使用oss和cos就意味着成本增加，自己的博客本来就不怎么盈利，还要为图片增加额外支出</p>
<p>是一个不太明智的选择，cos和oss还会被一些不法之徒恶意刷流量，可能导致几千块钱的支出，相信各位站长也不乏有所听闻</p>
<p>某某站长因为cos，oss，cdn被刷5000块钱的情况，也不足为奇</p>
<p>不要认为自己是小站没人打，现实中确实不乏很无聊的人，有时候时不时给你来点攻击</p>
<h2 id="怎样转换webp格式的图片">怎样转换webp格式的图片</h2>
<p>今天跟悟空博客的站长曾聊到这个问题，怎么把图片转为webp格式呢</p>
<p>这里我推荐几个在线转换的网站和工具</p>
<p>腾讯智图，提供离线转换webp图片</p>
<blockquote>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly96aGl0dS5pc3V4LnVz"
    
     target="_blank"
>
https://zhitu.isux.us</a></p>
</blockquote>
<p>squoosh，一个可以在线转换webp格式图片的网站</p>
<blockquote>
<p>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9zcXVvb3NoLmFwcA%3d%3d"
    
     target="_blank"
>
https://squoosh.app</a></p>
</blockquote>
<p>可以选择一个适合自己的工具，但是建议第一个智图，在线转换网站不可能一直公益给我们使用</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="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[&#39;webp&#39;] = &#39;image/webp&#39;; return $array; } add_filter( &#39;mime_types&#39;, &#39;bzg_filter_mime_types&#39;, 10, 1 ); 
</span></span><span style="display:flex;"><span>//下方为webp格式图片在媒体库预览图像支持代码 function bzg_file_is_displayable_image($result, $path) { $info = @getimagesize( $path ); if($info[&#39;mime&#39;] == &#39;image/webp&#39;) { $result = true; } return $result; } add_filter( &#39;file_is_displayable_image&#39;, &#39;bzg_file_is_displayable_image&#39;, 10, 2 );
</span></span></code></pre></div><p>基本上就分享这么多，晚安，我的朋友们</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>Twitter主题设置仿mac UI 语法高亮代码方法</title>
      <link>https://usj.cc/post/3/</link>
      <pubDate>Fri, 03 Sep 2021 12:52:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/3/</guid>
      <description>在自己做博客的时候，我们常常喜欢记录一些代码知识 这时候就需要使用到主题的代码高亮功能 这次我简单讲述一下仿mac UI 语法高亮代码方法 效果图我放下</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="Twitter主题设置仿mac UI 语法高亮代码方法" /><p>在自己做博客的时候，我们常常喜欢记录一些代码知识</p>
<p>这时候就需要使用到主题的代码高亮功能</p>
<p>这次我简单讲述一下仿mac UI 语法高亮代码方法</p>
<p>效果图我放下面了，喜欢的小伙伴可以仔细读完此篇文章</p>
<p>
<img data-lazy-src="/pics/2021/09/283540481.png" alt="" class="lazyload"></p>
<h2 id="教程开始">教程开始</h2>
<p>首先下载插件CodePrettify，下载地址我放在下面</p>
<p><strong>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly9naXRodWIuY29tL1hjbnRlL0NvZGUtUHJldHRpZnktZm9yLXR5cGVjaG8%3d"
    
     target="_blank"
>
https://github.com/Xcnte/Code-Prettify-for-typecho</a></strong></p>
<p>在后台启用插件，并且按照下图设置</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="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="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">&#39;undefined&#39;</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">&#39;pre&#39;</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">&lt;</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">&#39;code&#39;</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">length</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></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">&#39;line-numbers&#39;</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>
<p>教程结束，转载请注明出处</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>Twitter主题加入加载耗时，访问总量功能</title>
      <link>https://usj.cc/post/2/</link>
      <pubDate>Wed, 01 Sep 2021 13:20:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/2/</guid>
      <description>摸爬滚打，又从WordPress换回typecho了 不得不说typecho轻量，后台速度快 这篇文章就教大家如何给自己的Twitter的主题加</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="Twitter主题加入加载耗时，访问总量功能" /><p>摸爬滚打，又从WordPress换回typecho了</p>
<p>不得不说typecho轻量，后台速度快</p>
<p>这篇文章就教大家如何给自己的Twitter的主题加两个小功能</p>
<p>分别是加载耗时和访问总量的小功能，先上图</p>
<p>
<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="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">&#39; &#39;</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">&#39; &#39;</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">&lt;</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">&#34; ms&#34;</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">&#34; s&#34;</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="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">-&gt;</span><span style="color:#c4a000">fetchAll</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#39;SELECT SUM(VIEWS) FROM `typecho_contents`&#39;</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">&#39;SUM(VIEWS)&#39;</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="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">&lt;</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">&#34;widget-list&#34;</span><span style="color:#ce5c00;font-weight:bold">&gt;</span><span style="color:#000">加载耗时：</span><span style="color:#ce5c00;font-weight:bold">&lt;?</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">?&gt;</span><span style="color:#a40000">&lt;/div&gt;
</span></span></span></code></pre></div><p>添加访问总量功能，请加下面代码在相应位置</p>
<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">&lt;</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">&#34;widget-list&#34;</span><span style="color:#ce5c00;font-weight:bold">&gt;</span><span style="color:#000">访问总量：</span><span style="color:#ce5c00;font-weight:bold">&lt;?</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">?&gt;</span><span style="color:#a40000">次&lt;/div&gt;
</span></span></span></code></pre></div><p>感谢您的访问，转载请注明出处</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>盘点手机好用的html语言开发软件</title>
      <link>https://usj.cc/post/44/</link>
      <pubDate>Sat, 15 May 2021 09:42:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/44/</guid>
      <description>本期来聊聊前端开发那些好用的手机编程软件 这时候你可能会问了，这个软件有什么特别的吗 没什么特别的我就，点击左上角走了哈 额，最大的特别就是它不仅</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="盘点手机好用的html语言开发软件" /><p>本期来聊聊前端开发那些好用的手机编程软件</p>
<p>
<img data-lazy-src="/pics/2021/12/2456398190.jpg" alt="" class="lazyload"></p>
<p>这时候你可能会问了，这个软件有什么特别的吗</p>
<p>没什么特别的我就，点击左上角走了哈</p>
<p>额，最大的特别就是它不仅是一个编辑软件</p>
<p>而且能支持在线查看效果，支持服务器网站操作</p>
<p>多说无益，它有什么用呢？</p>
<p>他支持PHP运行</p>
<p>有些人到这里还不认识道这到底有什么用</p>
<p>市面上大多数的网站都是PHP代码运行的</p>
<p>也就是说，这个软件能运行大多数的源码</p>
<p>然后有些人就会吐槽了，这不是ksweb吗</p>
<p>其实它还真是</p>
<p>不过他作为一个面向前端的开发性编辑器</p>
<p>主要功能并不在此而已</p>
<p>当然你想要把它当成这样用也完全没有问题</p>
<p>有些人是有点不理解了，这个只能内网看有什么好</p>
<p>拜托，现在什么年代了，内网穿透基本操作!</p>
<p>当然，这边涉及到推广等各种方面，就不给大家那个内网穿透软件啥的了</p>
<p>唉，假如是以前或许能发</p>
<p>当然，假如你只是一个仅仅追求的HTML练习的，这边可以建议你使用这个软件</p>
<p>
<img data-lazy-src="/pics/2021/12/3362717517.jpg" alt="" class="lazyload"></p>
<p>嗯，它虽然支持外网访问，但是并不支持PHP</p>
<p>这是优点，也是缺点吧</p>
<p>最后再给大家推荐一款比较好用的编辑器</p>
<p>
<img data-lazy-src="/pics/2021/12/1215067252.jpg" alt="" class="lazyload"></p>
<p>作为同系列产品，它也可以运行PHP</p>
<p>但是功能性的方面没有那个在前面第一个的直观和强大</p>
<p>体验的话就是比较新人向，就算是萌新也基本可以用这个做出来一个非常简单的网站</p>
<h2 id="软件下载">软件下载</h2>
<p>只需要在手机安装葫芦侠APP搜索对应的软件名称</p>
<p>即可快乐的下载啦！</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>教你快速秒看青年大学习</title>
      <link>https://usj.cc/post/43/</link>
      <pubDate>Thu, 13 May 2021 11:37:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/43/</guid>
      <description>想必秒看青年大学习已经是老生常谈 之前在云仙小站写过很详细的教程 因为各种方面，不得不被迫下线整改 避免有些小伙伴找不到如何秒看青年大学习 我就写了</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="教你快速秒看青年大学习" /><p>
<img data-lazy-src="/pics/2021/12/1943746945.jpg" alt="" class="lazyload"></p>
<p>想必秒看青年大学习已经是老生常谈</p>
<p>之前在云仙小站写过很详细的教程</p>
<p>因为各种方面，不得不被迫下线整改</p>
<p>避免有些小伙伴找不到如何秒看青年大学习</p>
<p>我就写了这篇文章</p>
<p><strong>开启调试</strong></p>
<p>此处省略几千字，别问我什么是调试界面</p>
<p>就是腾讯为了方便测试为大家开放的调试界面</p>
<p>方便大家第三方依赖软件开发的，普通人也用不到</p>
<p>首先复制下面的链接在微信打开</p>
<pre><code>http://debugmm.qq.com/?forcex5=true
</code></pre>
<p>可以正常使用vcode调试功能了</p>
<p>下面就入下面链接页面</p>
<pre><code>http://debugx5.qq.com
</code></pre>
<p>在信息窗口，打开vConsole调试功能</p>
<p>默认(是没有开启的)</p>
<p>我们只需要点击x5调试页面</p>
<p>勾选打开vConsole调试功能</p>
<p>
<img data-lazy-src="/pics/2021/12/4119260007.jpg" alt="" class="lazyload"></p>
<p>怎么检查我们是否正确开始vConsole调试功能呢?</p>
<p>我们可以在微信里随便进入一个网页</p>
<p>会在右下角显示一个绿色的vConsole按钮</p>
<p>显示即成功开启</p>
<p>准备完成，现在正式开启我们快乐教程吧</p>
<p>点击开始学习后，点击右下角绿色的vConsole按钮</p>
<p>成功进入调试台后，粘贴下面代码，点击OK即可直接进去答题环节后</p>
<p>继续学习，重复一两次操作，总得来说就是可以跳过视频，跳不过答题</p>
<p>答题后台是有记录的，正好，我们只做题不看视频解释了99.98%的时间</p>
<p>原来的12分钟学习直接缩短为25秒，甚是乐哉</p>
<p><strong>1.快速跳过代码</strong></p>
<pre><code>document.getElementById('Bvideo').currentTime=9999
</code></pre>
<p><strong>2.隐藏vConsole按钮</strong></p>
<pre><code>__vconsole.style.display=&quot;none&quot;
</code></pre>
<p>感谢您的访问</p>
]]></content:encoded>
    </item>
    
    <item>
      <title>宝塔面板设置Typecho伪静态去掉index.php教程</title>
      <link>https://usj.cc/post/42/</link>
      <pubDate>Wed, 12 May 2021 10:35:00 +0000</pubDate>
      
      <guid>https://usj.cc/post/42/</guid>
      <description>Typecho博客初始安装完成后 博客的任何内页面 地址栏都会有index.php,非常的影响美观 使自己的网站的链接显得十分臃肿 例如本小站建设初</description>
      
     <content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="宝塔面板设置Typecho伪静态去掉index.php教程" /><p>
<img data-lazy-src="/pics/2021/12/526528939.jpg" alt="" class="lazyload"></p>
<p>Typecho博客初始安装完成后</p>
<p>博客的任何内页面</p>
<p>地址栏都会有index.php,非常的影响美观</p>
<p>使自己的网站的链接显得十分臃肿</p>
<p>例如本小站建设初期</p>
<p>文章链接为</p>
<p><strong>
<a 
    
        href="/tiaozhuan/index.html?target=aHR0cHM6Ly91c2ouY2MvaW5kZXgucGhwL2FyY2hpdmVzLzEuaHRtbA%3d%3d"
    
     target="_blank"
>
https://usj.cc/index.php/archives/1.html</a></strong></p>
<p>本期小编就教大家如何去掉index.php使自己的文章链接显得十分简洁!</p>
<p>
<img data-lazy-src="/pics/2021/12/153112288.png" alt="" class="lazyload"></p>
<p>然后就需要去自己的宝塔面板</p>
<p>将伪静态设置为typecho就可以实现了！</p>
]]></content:encoded>
    </item>
    
  </channel>
</rss>