Files
blog/public/post/2/index.html
T
2024-08-10 13:57:18 +08:00

195 lines
17 KiB
HTML

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Twitter主题加入加载耗时,访问总量功能</title>
<link rel="alternate" type="application/rss+xml" title="优世界" href="/rss.xml">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel='stylesheet' href='/css/main.css'>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/remixicon.css">
<link rel="stylesheet" href="/css/uikit.min.css">
<link rel="stylesheet" href="/css/nprogress.min.css">
<link rel="stylesheet" href="/css/Artalk.css"/>
<script src="/js/jquery.min.js"></script>
<script src="/js/barrage.min.js"></script>
<script src="/js/jquery.scrollUp.min.js"></script>
<script src="/js/instantpage.min.js" type="module" defer></script>
<script src="/js/pjax.js"></script>
<link rel="stylesheet" href="/css/mywaline.css" />
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
<meta name="template" content="Amigo" />
</head>
</head>
<body>
<div class="main">
<div class="container">
<div class="header">
<div class="head_author_img load-memos-editor">
<img src="/image/avatar.jpg" class="blog-img" width="80" height="80" alt="优世界" />
</div>
<div class="site-description">
<h2><span class="uk-invisible">风吹云散,云卷云舒</span></h2>
<nav class="nav social uk-visible@m">
<ul class="flat">
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
</ul>
<div class="yiyandes">风吹云散,云卷云舒</div>
</nav>
</div>
<nav class="nav">
<ul class="flat">
<li class="active"><a href="/">首页</a></li>
<li class="active"><a href="/about/">关于</a></li>
<li class="active"><a href="/ly/">留言</a></li>
<li class="active"><a href="/archives/">归档</a></li>
<li class="active"><a href="/links/">友链</a></li>
<li class="active"><a href="/circles/">友圈</a></li>
</ul>
</nav>
</div>
<div id="pjax-container">
<article style="margin-bottom: 3.5em;">
<h1 class="post-title" itemprop="name headline">Twitter主题加入加载耗时,访问总量功能</h1>
<div class="meta">
作者: 小赵同学 浏览: <span id="busuanzi_value_page_uv"></span> 字数: 570 分类:
<a href="%e6%95%99%e7%a8%8b">教程</a>
</div>
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > hr,h2,p,pre; cls: uk-animation-slide-bottom-small; delay: 0">
<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>
</div>
<div class="post-tags" style="margin-top: -30px;">
<nav class="nav tags">
<ul class="flat">
</ul>
</nav>
</div>
</article>
<hr class="uk-divider-icon">
<div id="comments" class="comments-area">
<link href="/css/Artalk.css" rel="stylesheet" />
<div id="Comments" uk-scrollspy="target: div,span,img> ; cls: uk-animation-slide-bottom-small;"></div>
<script src="/js/Artalk.js"></script>
<script>
if (document.querySelector("#Comments")) {
Artalk.init({
el: '#Comments',
server: 'https://artalk.5b2.cn',
site: '优世界',
flatMode: true
})
}
</script>
</div>
<script async src="/js/bsz.js"></script>
</div>
<div class="footer">
<nav class="nav" style="clear: both;">
© 2019 - 2024
<br>
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
<br>
本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
<span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
</a>提供CDN加速服务
<br>
</nav>
</div>
</div>
</div>
<script src="/js/iconfont.js"></script>
<script src="/js/lightgallery.umd.min.js"></script>
<script src="/js/uikit.min.js"></script>
<script src="/js/EasyLazyload.min.js"></script>
<script src="/js/view-image.min.js"></script>
<script src="/js/Artalk.js"></script>
<script src="/js/main.js"></script>
<script src="/js/mypjax.js"></script>
<script src="/js/nprogress.js"></script>
<script src="/js/echarts.min.js"></script>
<script src="/js/tiaozhuan.js"></script>
<script async src="/js/bsz.js"></script>
</body>
</html>