Typecho入门
前言
此文章教你如何用宝塔或者普通vps再或者虚拟主机搭建typecho程序
我为什么选择Typecho，而不是wordpress，halo，hugo，solo，hexo等博客程序，请看对比.
wordpress
优点： 非常强大的内容管理程序，国际商业化程序，拥有完整的生态，插件和主题数不胜数，更新也是非常勤快，网络上83%的网站都由它搭建。
缺点： 正因他什么都能干，使得它的体系非常庞大（安装包24mb），用来做简单的博客完全过剩。这也导致它在没有使用缓插件的情况下，使用没有专项优化的主题，网站的首次加载速度能慢到三秒甚至十几秒，这就是Wordpress的最大缺点。
Typecho
优点： 成立的初衷就是写文章，非常轻便（安装包500kb），用来搭博客再适合不过了。完全开源，程序文件就几个文件，想怎么改就怎么改。主题也是较多的。因为已经成型了，不需要过度的维护，几年才更新一次，最新版是一年前的版本。默认主题加载速度比wordpress快十倍，0.2秒就能加载出来，配合别的主题也不会超过一秒。主题也是完全透明，想怎么改就怎么改。
缺点： 插件较少，但是远古版本也能用。没体验到别的缺点。
所需准备
域名
云服务器（VPS）or 虚拟主机
一个没有生锈的脑子和没有得帕金森的双手
安装步骤
下载Typecho安装包
从 typecho官网 下载安装包
准备环境
购买一台至少1H1G的vps，并且安装宝塔，再安装所需运行环境： Nginx>=1.20,PHP>=7.2,MySQL>=5.5
域名解析
打开你的域名商，点击域名解析，把域名解析到服务器上。
如果你想直接访问你的域名（如shuai.plus），添加一个@的A记录到你vps的ip。
如果你想访问二级域名（如www.shuai.plus和vps.shuai.plus等），添加一个*的A记录。
一般情况下两个都要写上去，其他信息默认即可。
新建网站
在宝塔的网站栏目里创建心得网站。创建时可以更改数据库信息，也可以使用默认账号密码，请记下住这三个信息。
添加ssl证书
直接访问 http://域名.com 是一个不太安全的行为，我们需要申请并添加 ssl证书 ，通过 https://域名.com 安全访问。
首先打开宝塔的网站设置：
打开ssl模块，按图选择：
得到以下信息，我们只需解析这两个即可:
回到我们的域名解析平台，添加这两个TXT记录：
！主机名只需填写 _acme-challenge 不填写 _acme-challenge.域名.com
在宝塔点击验证后会跳转到此页面，可以看到ssl证书申请成功了，打开 强制HTTLS 后保存即可
接下我们只需要在浏览器填写我们的域名，他会自动添加https:// ,这保证了我们数据的安全。
上传安装包
打开网站根目录，删除所有文件，上传 Typecho.zip 并解压。
初始化
在浏览器输入你的域名并访问，点击下一步：
选择 Pdo驱动的MySQL适配器 ，并输入再第四步记下来的三个信息，！注意顺序
输入管理员账号密码，添加qq邮箱（用来获取头像和找回密码）点击下一步
安装完成
这是你的后端，是你（管理员）管理网站的地方
这是你的前端，是给别人看的地方
食用教程
更改默认信息
打开系统设置填写基本信息
设置永久链接（伪静态）
Typecho本身是php动态项目，网址不带 .html 后缀，可能会影响收录，所以我们要给网站设置静态地址。
首先打开网站设置
添加Typecho的伪静态规则并保存
在Typecho后端打开永久链接设置
打开伪静态并且设置自定义路径，建议跟我的一样填写，意思是生成
域名.com/分类/文章ID.html的网址，其余的都加上.html
保存后如果显示红色警告，勾选后再次保存
更改主题
typecho的主题相对来说还是挺多的，主要的主题网站有这些：
下载好的主题文件上传到网站目录的 /usr/theme 并解压，解压后必须是作者设置的文件名，不然会读取失败
解压完成后可以在typecho后台的主题设置里看的到新上传的主题
点击 启用 后，可以到 外观设置 里修改主题的基本选项
！本博客使用的主题为 Facile 主题，可以点击博客最下方红色字体，通过github下载。
更改头像源
你会发现你的网站无法获取你的头像，因为此头像服务器在国外，我们需要换头像源，具体教程看 更改 Typecho 的头像源
添加评论审核
如果不添加评论审核，别人可能会发表不正当的言论，或者使用木马代码入侵你的网站从而删掉更改你的内容，所以我们需要 给Typecho添加评论审核插件
添加SMEditor编辑器
typecho自带的编辑器特别简陋，对新手不太友好，建议使用 SMEditor 插件来丰富你的文章。
效果图：
下载好的插件文件上传到网站目录的 /usr/plugins 并解压后可在后台插件页面看到，启用即可。
评论无限嵌套
typecho评论回复默认最大值是7，及时在后台修改成10也会自动变成7，如果想回复更多，那就得在主题的function.php加上这段代码：
function themeInit($archive)
{
Helper::options()->commentsMaxNestingLevels = 999;
}
添加动态运行时间和真实加载时间
可以看出加载时间与浏览器开发工具输出的时间一致
添加运行时间
只需在主题文件的 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和子资源。在这个阶段，页面已经完全渲染完成，用户可以开始与页面进行交互。
