提升Typecho首页ttfb加载速度以及若干升级

西柚dzh

发布于 2022-06-09 17:26:01

7050

发布于 2022-06-09 17:26:01

文章被收录于专栏：dcmickey小站dcmickey小站

1.给网站页签加icon图片，效果如下

查看主题的index.php找header，顺势找到header.php文件，你会在<header></header>看到如下代码：

因此我们在typecho包的根目录下放入favicon.ico图片

2.添加版权插件

在typecho包的usr/plugins文件夹里放入你要放的插件源文件，然后就可以在typecho后台配置启用了

3.修改后台路由提高安全性

Typecho 安装好后，默认的后台路径是/admin/，但有时默认路径可能存在安全隐患，譬如可能被黑客扫描你admin路径下的可执行脚本。

修改admin文件夹名称，同时修改系统根目录下的 config.inc.php 文件

/** 后台路径(相对路径) */ 
define('__TYPECHO_ADMIN_DIR__', '/admin/');

4.手动删除掉根目录的install.php文件

防止给黑客提供后门

更多安全防护请移驾我的另一篇文章 Linux服务器安全防护

5.优化首页加载过慢问题

使用chrome发现Network中的首页Waiting(TTFB)耗时过长。针对这个情况来进行一次优化

5.1找到首页代码 index.php，die掉所有代码，发现ttfb很快，调整定位，最终锁定是文章循环导致加载过慢的

5.2 继续调试。最终定位到问题是出在getPostView方法里。注释该方法再看，TTFB时间缩短很多。网页加载终于秒响应了。或者整个ul去掉。

修改为：

<ul class="card-meta-bottom">
                    <li class="card-meta-label card-meta-views card-meta-right"><i class="iconfont icon-aria-view"></i> 你猜</li>
                    <li class="card-meta-label card-meta-comments card-meta-right"><i class="iconfont icon-aria-comment"></i> <?php $this->commentsNum('%d'); ?></li>
                </ul>

5.3 有兴趣的可以继续往下找。此方法再lib下的contents.php文件夹下。我这里不关心浏览次数，所以直接注释掉了

5.4.同理发现分类页面也很卡，找到主题下面的archive.php文件，搜索下面代码即可,替换掉

<ul class="card-meta-bottom">
                    <li class="card-meta-label card-meta-more">
                        <a href="<?php $this->permalink(); ?>" target="_blank"><i class="iconfont icon-aria-more"></i><i class="iconfont icon-aria-more"></i></a>
                    </li>
                    <li class="card-meta-label card-meta-views card-meta-right">
                        <i class="iconfont icon-aria-view"></i> <?php Contents::getPostView($this); ?>
                    </li>
                    <li class="card-meta-label card-meta-comments card-meta-right">
                        <i class="iconfont icon-aria-comment"></i> <?php $this->commentsNum('%d'); ?>
                    </li>
                    <!--li class="card-meta-label card-meta-likes"></li-->
                </ul>

修改为：

<ul class="card-meta-bottom">
                    <li class="card-meta-label card-meta-views card-meta-right"><i class="iconfont icon-aria-view"></i> 你猜</li>
                    <li class="card-meta-label card-meta-comments card-meta-right"><i class="iconfont icon-aria-comment"></i> <?php $this->commentsNum('%d'); ?></li>
                </ul>

6.启用GZIP压缩

ob_start('ob_gzhandler');

找到安装包文件的index.php。注意不是主题下面的index文件。然后加上如上代码。位置随便

<?php
/** 开启gzip压缩, add by 西柚 */  
 ob_start('ob_gzhandler'); 

/**
 * Typecho Blog Platform
 *
 * @copyright  Copyright (c) 2008 Typecho team (http://www.typecho.org)
 * @license    GNU General Public License 2.0
 * @version    $Id: index.php 1153 2009-07-02 10:53:22Z magike.net $
 */

/** 载入配置支持 */
if (!defined('__TYPECHO_ROOT_DIR__') && !@include_once 'config.inc.php') {
    file_exists('./install.php') ? header('Location: install.php') : print('Missing Config File');
    exit;
}

7.网页底部增加运行时间

找到footer.php文件，在自己想要的位置添加代码：

<span style="font-size:15px;" id="runtimeSpan"></span>
    <script type="text/javascript">
        function ShowRuntime() {
            BirthDay = new Date("2019-10-31 00:00:00");
            Current = new Date();
            TimeDiff = (Current.getTime() - BirthDay.getTime());
            OneDay = 24 * 60 * 60 * 1000;
            days = TimeDiff / OneDay;
            Days = Math.floor(days);
            hours = (days - Days) * 24;
            Hours = Math.floor(hours);
            mins = (hours - Hours) * 60;
            Mins = Math.floor(mins);
            Secs = Math.floor((mins - Mins) * 60);
            //信息写入到DIV中
            runtimeSpan.innerHTML = "本站已勉强运行了: " + Days + "天" + Hours + "小时" + Mins + "分" + Secs + "秒"
        }
        setInterval(ShowRuntime, 1000);
    </script>

8.移除文章显示内容,将index和archive文件的如下代码删除掉，看过很多主题都没有，因此没必要显示。

                <div class="card-body"><?php 
                        if($this->fields->previewContent)
                            $this->fields->previewContent();
                        else
                            $this->excerpt(50, '...');
                    ?></div>
                <div class="card-line"></div>

9.文章置顶插件优化

效果图：

方法：管理Sticky插件，替换以下内容为

<span style='color:red;color: #e2e2b8;float: right;padding: 4px 13px 6px;background: #b88544;border-radius: 0 0 8px 8px;'>[置顶] </span>

<div class="wrap"><span class="wraps">置顶</span></div> 
<style type="text/css"> 
.wrap { 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0px;
left: 0px;
overflow: hidden; 
font-size: 17px; 
font-weight: 400; 
color: #fff; 
opacity: 0.5; 
-webkit-transition: .3s ease all; 
-moz-transition: .3s ease all; 
-ms-transition: .3s ease all; 
-o-transition: .3s ease all; 
transition: .3s ease all; 
} 
.wrap:hover { 
opacity: 0.9; 
} .wraps { 
display: inline-block; 
text-align: center; 
width: 200px; 
height: 30px; 
line-height: 27px; 
position: absolute; 
top: 30px; 
right: -50px; 
z-index: 2; 
overflow: hidden; 
transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
border: 1px dashed; 
box-shadow: 0 0 0 1px #000, 0px 21px 5px -18px rgba(0,0,0,0.6); 
background: #048e68; 
} 
</style>