零基础搭建typecho（小白向）

前言

此文章教你如何用宝塔或者普通vps再或者虚拟主机搭建typecho程序

我为什么选择Typecho，而不是wordpress，halo，hugo，solo，hexo等博客程序，请看对比.

wordpress

• 优点： 非常强大的内容管理程序，国际商业化程序，拥有完整的生态，插件和主题数不胜数，更新也是非常勤快，网络上83%的网站都由它搭建。

• 缺点： 正因他什么都能干，使得它的体系非常庞大（安装包24mb），用来做简单的博客完全过剩。这也导致它在没有使用缓插件的情况下，使用没有专项优化的主题，网站的首次加载速度能慢到三秒甚至十几秒，这就是Wordpress的最大缺点。

Typecho

• 优点： 成立的初衷就是写文章，非常轻便（安装包500kb），用来搭博客再适合不过了。完全开源，程序文件就几个文件，想怎么改就怎么改。主题也是较多的。因为已经成型了，不需要过度的维护，几年才更新一次，最新版是一年前的版本。默认主题加载速度比wordpress快十倍，0.2秒就能加载出来，配合别的主题也不会超过一秒。主题也是完全透明，想怎么改就怎么改。

• 缺点： 插件较少，但是远古版本也能用。没体验到别的缺点。

所需准备

1. 域名

2. 云服务器（VPS）or 虚拟主机

3. 一个没有生锈的脑子和没有得帕金森的双手

安装步骤

1. 下载Typecho安装包

从 typecho官网 下载安装包

2. 准备环境

购买一台至少1H1G的vps，并且安装宝塔，再安装所需运行环境： Nginx>=1.20,PHP>=7.2,MySQL>=5.5

具体教程看此文章： 从零开始在vps上安装宝塔并搭建自己的博客

3. 域名解析

打开你的域名商，点击域名解析，把域名解析到服务器上。

如果你想直接访问你的域名（如shuai.plus），添加一个@的A记录到你vps的ip。

如果你想访问二级域名（如www.shuai.plus和vps.shuai.plus等），添加一个*的A记录。

一般情况下两个都要写上去，其他信息默认即可。

4. 新建网站

在宝塔的网站栏目里创建心得网站。创建时可以更改数据库信息，也可以使用默认账号密码，请记下住这三个信息。

5. 添加ssl证书

直接访问 http://域名.com 是一个不太安全的行为，我们需要申请并添加 ssl证书 ，通过 https://域名.com 安全访问。

首先打开宝塔的网站设置：

打开ssl模块，按图选择：

得到以下信息，我们只需解析这两个即可:

回到我们的域名解析平台，添加这两个TXT记录：

！主机名只需填写 _acme-challenge 不填写 _acme-challenge.域名.com

在宝塔点击验证后会跳转到此页面，可以看到ssl证书申请成功了，打开 强制HTTLS 后保存即可

接下我们只需要在浏览器填写我们的域名，他会自动添加https:// ,这保证了我们数据的安全。

6. 上传安装包

打开网站根目录，删除所有文件，上传 Typecho.zip 并解压。

7. 初始化

在浏览器输入你的域名并访问，点击下一步：

选择 Pdo驱动的MySQL适配器 ，并输入再第四步记下来的三个信息，！注意顺序

输入管理员账号密码，添加qq邮箱（用来获取头像和找回密码）点击下一步

8. 安装完成

这是你的后端，是你（管理员）管理网站的地方

这是你的前端，是给别人看的地方

食用教程

1. 更改默认信息

打开系统设置填写基本信息

2. 设置永久链接（伪静态）

Typecho本身是php动态项目，网址不带 .html 后缀，可能会影响收录，所以我们要给网站设置静态地址。

• 首先打开网站设置

• 添加Typecho的伪静态规则并保存

• 在Typecho后端打开永久链接设置

• 打开伪静态并且设置自定义路径，建议跟我的一样填写，意思是生成 域名.com/分类/文章ID.html 的网址，其余的都加上.html

• 保存后如果显示红色警告，勾选后再次保存

3. 更改主题

typecho的主题相对来说还是挺多的，主要的主题网站有这些：

• typecho.me

• typecho.wiki

• npc.ink/typecho

• typecho论坛

下载好的主题文件上传到网站目录的 /usr/theme 并解压，解压后必须是作者设置的文件名，不然会读取失败

解压完成后可以在typecho后台的主题设置里看的到新上传的主题

点击 启用 后，可以到 外观设置 里修改主题的基本选项

！本博客使用的主题为 Facile 主题，可以点击博客最下方红色字体，通过github下载。

4. 更改头像源

你会发现你的网站无法获取你的头像，因为此头像服务器在国外，我们需要换头像源，具体教程看 更改 Typecho 的头像源

5. 添加评论审核

如果不添加评论审核，别人可能会发表不正当的言论，或者使用木马代码入侵你的网站从而删掉更改你的内容，所以我们需要 给Typecho添加评论审核插件

6. 添加SMEditor编辑器

typecho自带的编辑器特别简陋，对新手不太友好，建议使用 SMEditor 插件来丰富你的文章。

效果图：

下载地址： github or 直接下载

下载好的插件文件上传到网站目录的 /usr/plugins 并解压后可在后台插件页面看到，启用即可。

7. 评论无限嵌套

typecho评论回复默认最大值是7，及时在后台修改成10也会自动变成7，如果想回复更多，那就得在主题的function.php加上这段代码：

function themeInit($archive)

{

    Helper::options()->commentsMaxNestingLevels = 999;

}

8. 添加动态运行时间和真实加载时间

可以看出加载时间与浏览器开发工具输出的时间一致

添加运行时间

只需在主题文件的  footer.php 添加此代码：

footer.php 通常在主题的根目录里或者在文件夹里

<script>
function updateTime() {
    var now = Math.floor(Date.now() / 1000);
    var buildTime = Math.floor(new Date("2023-05-07T00:00:00").getTime() / 1000);
    var diff = now - buildTime;
    var years = Math.floor(diff / (365 * 24 * 60 * 60));
    var days = Math.floor((diff % (365 * 24 * 60 * 60)) / (24 * 60 * 60));
    var hours = Math.floor((diff % (24 * 60 * 60)) / (60 * 60));
    var minutes = Math.floor((diff % (60 * 60)) / 60);
    var seconds = diff % 60;
    var output = years + ' <span class="time-unit">年</span> ' + days + ' <span class="time-unit">天</span> ' + hours + ' <span class="time-unit">小时</span> ' + minutes + ' <span class="time-unit">分</span> ' + seconds + ' <span class="time-unit">秒</span>';
    document.getElementById("build-time").innerHTML = '<span class="time-unit">本站艰难存活了</span>' + output;
}
setInterval(updateTime, 1000);
</script>

如果嫌长，可以使用精简版：

<script>function updateTime(){var e=Math.floor(Date.now()/1e3),n=Math.floor(new Date("2023-05-07T00:00:00").getTime()/1e3),o=e-n,a=Math.floor(o/(365*24*60*60)),r=Math.floor(o%(365*24*60*60)/(24*60*60)),i=Math.floor(o%(24*60*60)/(60*60)),t=Math.floor(o%(60*60)/60),s=o%60,c=a+' <span class="time-unit">年</span> '+r+' <span class="time-unit">天</span> '+i+' <span class="time-unit">小时</span> '+t+' <span class="time-unit">分</span> '+s+' <span class="time-unit">秒</span>';document.getElementById("build-time").innerHTML='<span class="time-unit">本站艰难存活了</span>'+c}setInterval(updateTime,1e3);</script>

添加加载时间

同理，还是在 footer.php 添加以下代码：

 <div id="pageloadtime" style="color:#d9230f;"></div><!-- 显示加载时间的DIV元素 -->
 <script>
     window.onload = function() {
        var pageloadtime = document.getElementById('pageloadtime');
        var domContentLoadedTime = ((window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart)/1000).toFixed(2);
        var loadTime = (performance.now() / 1000).toFixed(2);
        pageloadtime.innerHTML =  '<span style="color:black">解析消耗: </span>' + domContentLoadedTime + '<span style="color:black"> 秒，加载消耗: </span>' + loadTime + '<span style="color:black"> 秒</span>'; 
      }
</script>

当然它也有精简版：

<div id=pageloadtime style=color:#d9230f></div><script>window.onload=function(){var n=document.getElementById("pageloadtime"),o=((window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart)/1e3).toFixed(2),e=(performance.now()/1e3).toFixed(2);n.innerHTML='<span style="color:black">解析完成消耗: </span>'+o+'<span style="color:black"> 秒，加载完成消耗: </span>'+e+'<span style="color:black"> 秒</span>'};</script>

PS:

DOMContentLoaded (解析)事件表示HTML文档已经被解析并且DOM树已经构建完成，但是这时候可能还有一些外部资源（如CSS文件、JavaScript文件、图片等）尚未被下载完成，也就是说页面的渲染可能还没有完成。在这个阶段，网页上的文本、图片和其他资源都已经可以访问和操作，所以它是处理JavaScript代码的好时机。

load (加载)事件表示所有的资源都已经被加载完毕，包括外部资源（如CSS文件、JavaScript文件、图片等）和所有的iframe和子资源。在这个阶段，页面已经完全渲染完成，用户可以开始与页面进行交互。

搭建结束，请愉快的使用typecho吧