更新下最近博客前端修改的动态，方便读者了解近期动态，所以整理这份文档，在往后有其它内容更新也会在此这里记录。
文章目录
根据 User-Agent 切换主题
最近给博客换了个新主题，但仅限桌面端的用户体验，手机端主题不变，依然是那个简洁主题。桌面端主题功能上比较齐全，有主流的暗色模式、搜索、侧栏、面包屑等功能，后续增加的海报生成、分享按钮、文件下载功能等，欢迎读者使用桌面设备访问。
编者按：为保障手机页面打开的速度，所以这些功能后续不会再手机端主题增加
底部黑色框，从左到右，按钮对应的功能分别为赞赏、海报、分享
增加 PDF 文件下载功能
编按：关于 PDF 文件下载功能，完整文章点击这里
似乎 PDF 下载成了互联网的一个新趋势（抑或是 PDF 文件广泛用于学术类网站），最近发现 Wikipedia 的词条页面加多了一个 PDF 文件下载按钮，无独有偶，在 WikiHow 的页面也发现 PDF 文件下载按钮，因为平常浏览这两个网站的次数并不频繁，所以不清楚具体是什么时候伊始有的。
PDF 文件下载，方便桌面端用户离线阅读及本地收藏
因为后续考虑到 PDF 排版问题，所以 PDF 下载功能并不是使用第三方接口的，是我在后台本地上传的，用户点击任意文章右上角的 PDF 按钮（限制桌面端用户，本篇文章可以测试下载），就可以下载到我已经排好版的 PDF 文件（无反应就是该文章没有 PDF 文件），后续我可能会添加 EPUB 及 Markdown 格式的文件下载（限制注册用户），方便手机端用户和编辑人员使用。
RewriteRule
本博客最初使用 /{slug}.html 做为固定链接形式，但是后期改动了这种形式，导致此前收录本博客文章的网站出现 404 页面，虽然在搜索引擎方面重新提交了新的 sitemap，但是部分返回链接依然是出现 404，由于本人并非程序语言出身，所以迟迟没有去修正。
直到 2021 年，终于在近期把这个坑填上，在服务器将 /{slug}.html 重定向到 /{slug}，若无匹配文章，则展示 404 页面。
^(.*)\.html$ $1 T该正则表达式意思为 https://tsb2blog.com/blog-update.html 将会被重定向到 https://tsb2blog.com/blog-update
如果你是动态变更为伪静态的，即类似/{slug}/ 变更为 /{slug}.html，则使用下面正则表达式：
^(.*)$ $1.html T如果你此前的固定链接是数字形式还可以使用下面的正则表达式：
^\/(\d+)\/?$ $1.html T上述正则表达式意思为 https://tsb2blog.com/blog-update 将会被重定向到 https://tsb2blog.com/blog-update.html
增加字数统计
一开始是使用代码来统计文章字数的，但是网上这段代码统计文章字数并不精准，由于平常写文章除了使用 MarkDown 语法外，也会使用 html 语法，特别是在需要 css 排版的，代码会把所有内容统计进去，导致前端显示的统计数字特别大，如下图：
v1 版文章字数统计会包含 html 语法等，导致文章统计数值严重偏大
后来改用 typecho 插件来统计字数，大大的修正了此前数值偏大的错误，譬如文章存在特殊字符或者类似代码的字符，该插件会将数值分类为中文、英文、字符。
修改版文章字数统计，文章统计数值仅包含中文，不包含数字、符号等，数值极为精准
图片格式更换为 webp
webp 是谷歌早年推出的一个图片，压缩率更高，国内大多数的软件基本都启用这个格式了（但网站似乎没怎么普及）。本波博客换成 webp 格式原因有两个，一是为了减轻服务器压力，二是加快读者打开网页的速度。
本篇文章所有图片采用了 webp 格式，你可以右键下载或长按保存查看格式
缺点：社交化分享无法抓取 webp 格式的图片
简繁转换
对于桌面版用户，用户可在任意页面的右上方（下图）点击按钮选择按阅读习惯变更页面显示简体或繁体。早在 2020 年年中的时候，就曾开启过简体⇋繁体功能，由于中文是存在「一简多繁」的情况，所以转换后，会出现类似「错别字」的效果。
目前在这方面，亦有看到博主提出解决「一简多繁」方案，但是由于本人没多少精力去研究，所以先简单化处理。
任意页面右上方的第一个按钮即使简繁转换
优化表格自适应
该思路由庭说博客提供，并参考 Wikipedia
当浏览者使用桌面设备时，表格正向显示，无需担心词组被打断；当浏览者使用移动设备时，表格正向显示，表格 y 轴固定不变，x 轴实现左右滑动。
文章增加目录
平常写文章篇幅并不大，一般控制在 3000 次数左右，超过 3000 字数的我会在开头处增加目录，默认折叠目录，读者可以点击展开查看。
目录桌面版，更新为右侧展示目录
增加目录是件很简单的事情，Markdown 支持[TOC]生成目录，设计的过程卡在锚点（即目录）的平滑效果（SmoothScroll），由于 html 本身锚点（目录）并没有平滑效果，好在 Firefox 和 Chrome 可以使用 CSS 属性 scroll-behavior: smooth;来实现平滑效果，且无需 js 监听锚点，但随即也发现缺点，Safari 和 Internet Explore 全版本不支持该属性，IE 可以放弃，但是 Safari 还是要抢救的。
注：使用
scroll-behavior: smooth;可能会导致部分功能失效，如文章生成海报或者二维码
最后在经过一阵搜索之后，找到 Safari 支持平滑（SmoothScroll）效果的教程，可以使用美国开发者 Chris Ferdinandi 在 GitHub 上开源的Smooth Scroll文件，安装和使用都非常简单，主题引入 js 文件（支持 CDN 方式），之后在页面 php 设置 js 监听即可。
目录手机版，更新为底部展示目录
读者可注册为成员
由于一些功能需要内部测试，所以开放了本站的注册，注册需要邀请码，在注册页面的下方点击「邀请码」即可获取，邀请码有限，先到先得，用户可自定义密码，进入后台也可以自行更改。
本博客注册页面
注：注册为成员并非区分群体，本博客所有内容/文章均免费提供，后期也不会开启收费模式，鉴于目前服务器及管理资源有限，故仅开放部分读者注册。
注册为成员可提前体验的功能：
- 部分文章或内容限制登陆者（即注册成员）可见
- 开放文章的发布、编辑等功能
- 开放除 PDF 外其它格式文件的下载（如上所述的 EPUB 及 Markdown 格式）
- 其它实验性功能体验
免登陆投稿功能
该功能并非个人独立开发，投稿功能由Contribute 插件提供，开发者是ShingChi。
免登陆投稿功能
1）如何投稿
电脑打开本博客任意页面（手机页面不支持），点击右上方「投稿」即可进入撰写文章页面。
2）功能修改
由于原投稿页面不支持草稿本地保存（原开发者未开发），所以我加入导出本地文件功能，目前仅支持导出为 txt 格式，后续再看看其它格式。
原插件不支持图片本地上传功能，考虑数据库安全问题，所以原作者没开发，本人暂时也不考虑开放本地上传，目前我能想到的方案是使用图床，暂时先用路过图床，Cloudflare 近日推出图床服务，后续购买看看能不能接入。
3）其它
该功能或后续增加白名单判断机制，具体可在投稿页面查看「投稿说明」文档。
修复灯箱图片导致的 alt 问题
由于大多数博客框架（泛指默认主题）并没有预设「点击放大图片」的效果，包含 Typecho 也不例外，所以大多数博主通过使用引入 fancybox 文件来实现灯箱效果（即用户点击可放大图片），引入 fancybox 文件同时需要在头部文件及页面文件配合 php 代码才能生效，其中页面文件代码如下：
<?php
$pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
$replacement = '< a href="$1" data-fancybox="gallery" /><img src="$1" alt="'.$this->title.'" title="点击放大图片"></ a>';
$content = preg_replace($pattern, $replacement, $this->content);
echo $content;
?>该代码 alt="'.$this->title.'" 表达意思为「使用文章标题作为图片的 alt 属性」，缺点是会导致整篇文章所有配图都是同一个 alt 属性。
不知道是中文互联网对 alt 属性不太重视还是 Typecho 本身的问题（SEO 方面太多需要优化），在谷歌搜索了好久才找到相关文章来解决，《同时匹配 img 标签中的 src 和 alt 的正则表达式》这篇文章列出了完整的 alt 属性正则表达式，才得出以下灯箱修复版代码：
注：修复版代码将使用「图片的 alt 属性」，当然，如果你平时是不填写 alt 属性，建议无需修改，第一版比较适合
<?php
$pattern = '/<\s*img[\s\S]+?(?:src=[\'"]([\S\s]*?)[\'"]\s*|alt=[\'"]([\S\s]*?)[\'"]\s*|[a-z]+=[\'"][\S\s]*?[\'"]\s*)+[\s\S]*?>/i';
$replacement = '<a href="$1" data-fancybox="gallery" data-caption="$2"/><img alt="$2" src="$1" title="点击放大图片"></a>';
$content = preg_replace($pattern, $replacement, $this->content);
echo $content;
?>其中data-caption=""为图片描述选项，可以不添加；title=""也可以匹配为 alt 属性。除此之外，根据王叨叨博主的介绍，还可以加入 loading="lazy"属性来实现非 JS 方式图片懒加载（需浏览器支持），看个人需求添加。
复制内容版权提示
在博客写作的这两年，发现简体中文圈的版权意识还是比较缺乏，即便是在内容共享（cc 协议）的情况下，部分站长依然选择了直接复制内容，并不加以署名或者无引述原文地址等不值得提倡的行为，对于这种行为，在 V2EX 上曾经讨论过，回答的基本是说没法设置最优解。虽然有个别回复建议关闭禁用网站的内容复制功能，但也有回复说这种方案最多阻止了「小白」，对于「职业惯犯」而言，只要通过禁用网站的 javascript 或关闭对应的 css 元素即可以强行开启「内容复制」功能。
就在今年年中，本博客的部分文章被一些站长「无署名，无引述原文地址」的将内容段落直接复制到名下的文章，对于这种行为，我本人更愿意相信这些站长是因为「某种疏忽」而忘记了，所以我在本博客设置了复制内容的版权提示。
<!-- 复制内容版权提示 -->
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
<script type="text/javascript"> document.body.oncopy = function() {layer.msg('复制成功，转载或使用内容请遵循<a href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC 4.0</a>', {icon: 1});};</script>设置复制提示，最简单的方式是使用 js 绑定复制事件即可，但这样的弹窗会是浏览器默认的提示，复制后可能还需要点击以下「确认按钮」才能完成这与行为，不是很友好，所以建议引用 web 弹层组件 layer.js 来修改弹窗提示的样式，引用代码如上，效果如下图。
layer.js 复制提示效果
除此之外，layer.js的样式支持自定义，但是由于官网因为内地备案问题暂时被关闭，需要自定义的只能通过谷歌搜索了。
增加 AMP 版页面
使用谷歌应用或者 Chrome 的移动端用户通过搜索关键词进入本博客，将会被谷歌重定向到AMP版页面，相较于普通页面，AMP 页面更加快速，如果你是位于境外用户几乎可以实现秒开网页（谷歌可能预加载了网页，理论上如果你点击了网页，该网页会缓存至本地，即离线状态下依然可以再次秒开），缺点是受限于 AMP 开发规范，部分功能会丢失，所以如果你想体验完整功能建议打开普通页面。
增加欢页面迎语和无动作提示
本来是想设置阅读时长提醒语的，忘记是哪个阅读软件，超过阅读时长就会弹出 tooltip 提示用户注册用眼休息，这个产品细节真的不错，于是也想给博客加个 tooltip，设计的过程中发现这个提示不适用于网页，因为很少有用户会在网页停留很多的时长，除非是连载小说，所以便撤销了这个设计，改为欢迎语和无鼠标动作提示，用户首页进入页面，会根据时间段弹出不同的欢迎语；而用户在某个页面超过 30 min 无鼠标动作，页面也会弹出提示。
页面欢迎语
除此之外，我还给手机页面埋了个用户停留超过 2 min 就弹出某个功能的彩蛋，感兴趣的可以去手机页面停留查看，如果是在手机查看该页面的，估计已经知道了。
快捷键开关夜间模式
夜间模式
无意间在 cloudflare 的介绍页面看到了他家的夜间模式居然是使用快捷键开启的，虽然功能使用上没啥新颖的，但是对于经常逛博客和网站的我来说，还是挺有「创意」的，于是便也想给自己的波博客加上，实现原理很简单，使用 JavaScript 监听键盘触发事件即可。
