这一次遇见你

b（￣▽￣）d　好写一下这次用Typecho建的。

先给一个credit：这次用的是MoXi大佬的主题，好看！

所以为啥换呢？因为上一版感觉稍微有点卡，而且WP的文字编辑体验not great...

服务器

这次迁到华为云Flexus应用服务器L实例（什么奇怪的名字×2🤣），2C2G也是三十块。
然后我感觉华为云控制台的页面设计极其有问题（
你像在阿里云，在服务器的控制台页面能直接访问服务器的监控、DDOS、备份和镜像、安全组，基本上不用跳转。
但是华为云Flexus的页面整体利用率极低，图标巨大无比然后整个页面没几个字，监控要点进去实例概览，在云主机VM里再跳转；DDOS直接是个独立的控制台页面，没办法从Flexus的页面访问；备份和镜像在分开的云备份CBR里；安全组要点进去虚拟私有云VPC的产品页面，左边往下滑到访问控制里的安全组，点进服务器绑定的安全组配置出入站规则。
再有，我还没找到Flexus怎么设置密钥SSH，而且我在宝塔面板尝试改成仅密钥登录会失败，how strange.
But however，在华为云我配置进程监控成功了，阿里云那个一直失败不知道为什么。

安装Typecho

服务器和宝塔配置和之前的一样，之后详见https://blog.zeruns.tech/archives/749.html
然后因为我是双域名，所以要配置跨域补救，在网站根目录的config.inc.php的__TYPECHO_ADMIN_DIR__那行下面添加：

/** 开启动态域名(跨域补救) */
define('__TYPECHO_DYNAMIC_SITE_URL__', true);

之后当我们要在网站里面引用网站文件（比如图片啥的），不要用https://misaka-yu.com/usr/uploads/2024/10/836983279.webp，要用/usr/uploads/2024/10/836983279.webp，这样使得用vertin.me访问的时候不会出现跨域资源请求。

主题

最重要的就是主题×2

安装见https://github.com/MoXiaoXi233/PureSuck-theme/的说明

字体

然后这次仿照MoXi改成了霞鹜文楷。

首先在https://github.com/lxgw/LxgwWenkaiGB下载最新的字体release，然后上传到https://chinese-font.netlify.app/zh-cn/online-split/进行分包（我用Firefox访问好像总是会卡住，Edge会报错，用Chrome就行）

分包完的压缩包传到服务器解压待用。

然后我把PureSuck_Style.css里约1500行的位置改成了：

body,
.post--cover .post-body .post-wrapper>p:first-child,
.comment-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "LXGW WenKai GB", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
    font-weight: 400;
    color: var(--text-color);
}

总之就是调整了font-family，字体名字可以到分包生成的result.css中查看。

然后我在header.php的

    <!-- Style CSS -->
    <link rel="stylesheet" href="<?= $this->options->themeUrl('css/PureSuck_Style.css'); ?>">

前加入了：

    <!-- 导入字体 -->
    <link rel="stylesheet preconnect" href="/usr/themes/PureSuck/sfonts/result.css" type="text/css" media="all" onload="this.media='all'">

这里的href即为刚刚上传的分包文件中result.css的位置。（好，我完全不知道为什么加在这里，或者是不是错的，anyway it works for now🤣）

理论上有条件的亲应该尝试把分包文件挂载到CDN上再在这里调用CDN缓存。

但是改完还不行，Firefox调试报错downloadable font: download failed。这个疑似是Nginx伪静态的问题，在宝塔设置Nginx配置文件：

    location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$
    {
        add_header Access-Control-Allow-Origin *;
        add_header Cache-Control  max-age=315360000;
    }

其中add_header Cache-Control指示浏览器缓存字体文件，这样下一次访问就不需要重新从服务器下载了。

这个方法相较之前节极大缩减了网页大小，现在网页会根据result.css按需分块加载字体文件，不需要像之前一样一次性加载完。在Firefox打开调试可以看到（在写这篇文章的时候）网页大小从5MB降到了2MB。

网页通知

在Typecho后台主题设置的Script标签里添加：

<script>
    document.addEventListener('DOMContentLoaded', function() {
MoxNotification({
    title: "网站测试中",
    duration: 5000,
    message: "推荐桌面端访问~",});
    });
</script>

评论

评论开启Markdown见https://github.com/MoXiaoXi233/PureSuck-theme/的说明

然后关于头像，我先把comments.php里的

$avatarUrl = 'https://gravatar.loli.net/avatar/' . md5(strtolower($comments->mail)) . '?s=80&r=X&d=mm';

改成了https://cravatar.cn/avatar/，因为我发现我新传的头像在loli镜像没刷新，but这个无关紧要

首页

我把index.php的

<span class="avatar-item">
    <?php $this->author(); ?>
</span>

拿掉了，因为我好多文章头图都很暗，就和这里的文字不是很搭...

LaTeX

参考https://nwdan.com/tutorials/typecho-latex-support.html，
但是themeFields已经被定义了可以直接在里面加。

然后改了字节的CDN：

    <!-- LATEX -->
    <?php if ($this->is('post') && $this->fields->isLatex == 1): ?>
    <!--<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>-->
    <script defer type="text/javascript" src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.15.2/katex.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />-->
    <link rel="stylesheet" type="text/css" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.15.2/katex.min.css" />
    <!--<script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>-->
    <script defer type="text/javascript" src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.15.2/contrib/auto-render.min.js"></script>
    <?php endif; ?>

但是每次进文章还是要主动刷新一次才能加载LaTeX。
看LaTeX示例那篇！

安全控制

Typecho疑似没有Wordfence之类比较成熟的安全插件。但是我们总可以像之前的WP一样隐藏后台地址
看这里：https://docs.typecho.org/help/faq/admin-dir
但是我用这个方法会直接进不去后台（

解决方法是在网站根目录把文件夹admin改名字改成刚自定义的后台地址名。

性能控制

还是老样子，CDN和缓存。
vertin.me自带Cloudflare的CDN，跟上一版WP网站一样可以去Cache Rule启用CF缓存。
misaka-yu.com暂时没办法配置CDN，见前两篇（
哦对前两篇忘说了，记得图片格式全部改成webp，这样可以大幅缩减图片大小，然后在宝塔Nginx配置文件里：

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires      30d;
    error_log /dev/null;
    access_log /dev/null;
}

把gif|jpg|jpeg|png|bmp|swf改成gif|jpg|jpeg|png|bmp|swf|webp以启用webp的缓存。

杂项

伪静态

顺便再加一下伪静态：

if (-f $request_filename/index.php){
    rewrite (.*) $1/index.php;
    }
if (!-e $request_filename){
    rewrite (.*) /index.php;
    }

这个可以做什么呢？现在你访问网站会发现地址栏会有.php，这玩意看起来挺烦所以我们通过伪静态把这个后缀去掉使它看起来像一个静态页面。这里添加完之后，去Typecho后台设置-永久链接启用地址重写功能。

宝塔伪静态有Typecho的模板，但是我用那个再启用地址重写会报错。同时有教程的伪静态会加上：

if (-f $request_filename/index.html){
    rewrite (.*) $1/index.html break;
    }

但是我加这段会进不去首页（其它页面可以），所以我现在页面访问还会有.html...

应该没了？想起来再加

@font-face {
    font-family: 'LXGWWenKaiLite-Regular';
    src: url('../fonts/LXGWWenKaiLite-Regular.eot');
    src: url('../fonts/LXGWWenKaiLite-Regular.eot#iefix') format('embedded-opentype'),
         url('../fonts/LXGWWenKaiLite-Regular.woff2') format('woff2'),
         url('../fonts/LXGWWenKaiLite-Regular.woff') format('woff'),
         url('../fonts/LXGWWenKaiLite-Regular.ttf') format('truetype'),
         url('../fonts/LXGWWenKaiLite-Regular.svg#LXGWWenKaiLite-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

<script type="text/javascript">
    var elements = document.getElementsByClassName("bilibili");
    for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.style.height = element.scrollWidth * 0.5625 + "px"; }
</script>

<iframe class="bilibili" src="//player.bilibili.com/player.html?bvid=BV1yS4y187mt&autoplay=0;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>

.post-title::after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    border-radius: 0.45rem;
    background: linear-gradient(to right, var(--themecolor), rgb(255 255 255 / 0%));
    opacity: .55;
    transition: all .3s cubic-bezier(0.345, 0.045, 0.345, 1);
}

<script>
    document.addEventListener('DOMContentLoaded', function() {
MoxNotification({
    title: "网站测试中",
    duration: 5000,
    message: "推荐桌面端访问~",});
    });
</script>

.wrapper>:last-child {
    margin-bottom: 0;
    word-break: break-word;
}