站点日志：为了SEO，markdown语法由前端vue渲染升级为服务端渲染

今天是 2025年08月01日，上线51天，历经三天加班加点，终于将内容页面的 vue 渲染方式，改成了传统的服务端渲染。没办法，为了保证搜索引擎能够顺利抓取到页面内容，必须这么干。如果再发现早点，可能收录情况要比现在更好一些。后续会继续关注一段时间，看看目前的收录效果这么差，是不是就是这个问题导致的。大家后续可以持续关注我的站点日志系列文章。陪我一起看看原因是啥。

功能升级

内容渲染方式由前端vue渲染改为服务端 markdown 内容渲染

上次说到，服务端 markdown 内容渲染的开源库 Parsedown，测试效果不错。后续经过实际的业务上的应用，发现一个比较严重的问题，就是库的扩展性比较差，也就是说想自定义渲染的效果，难度比较大。至于原因，主要是由于 Parseddown 的源代码写的"太简单"了，所谓的简单，是以失去代码的扩展性为代价的，其代码结构上并没有考虑太多扩展的问题。当然有人会说扩展性强了，免不了会拉低性能，确实也会有这样的问题。我在这里就不再花太多篇幅，去讨论Parsedown好用不好用的问题。

直接说结果，最终我使用了的是 league/commonmark 这个项目。commonmark 官方站，里面有项目文档，虽然也不是太详细。但是 PHP 库的好处就是可以看源代码，看完你就知道这玩意该怎么用了。测试了下，速度方面并不比 Parsedown 差，这里没有给测试结果截图。可以看下我的文章详情页的加载效果，页面渲染仍然在100ms以下。

具体详细的技术贴，我会在写一个关于 commonmark 的技术文章，详细说明这个库改如何用，如何扩展以达到自己的自定义的需求。

踩过的坑

用 commonmark 进行渲染，需要渲染的内容其实是不包括图表的。涉及图表显示主要有三个，代码高亮（这个其实可以在服务端渲染，也不会消耗太多时间），mermaid图表、katex 公式。这三个部分还是需要通过 js 插件来实现的，严格来说是后两个。

服务端渲染优先级最高，渲染过程中，可能会出现公式、代码编辑器、和 mermaid 冲突的情况。主要是一些关键字互相影响导致的。比如 php 代码变量会有$，如果一行内有两个 $，就会导致内容作为公式解析。这个问题，出现在编辑器高亮我也在服务端渲染时候发现的。再有比如我上边用字符引用，一行也出现两个美元符，也会当成公式。这些坑全都跳了一遍，最终才让界面跟升级之前保持一致。

高亮插件，对html 的要求也挺多，几个html标签，有的是要求不能有换行的，否则样式就会有问题，行号可能也有问题。

katex 公式也有以上类似的问题。公式只对非编辑器部分的markdown起作用，所以需要配合服务端，生成给公式用的专门的 html 标签，这样才能保证，katex 可以通过渲染器找到对应公式。如果不指定范围，他可能链编辑器内的代码当成公式也给处理了，然后各种报错。。。

mermaid 也是，服务端配合，生成 mermaid 专用的 html 标签和类，让mermaid js 根据选择器选择后再渲染，即可正常显示。

以上三个插件如何在非vue条件下使用，后续也会专门写成技术文章发布出来。请大家继续关注相关文章。

最终上线

2025年08月01日，晚上，终于把所有大大小小问题解决差不多了，然后推代码上线。上线后又仔细看了看各种图表比较多的页面，再次优化了下 js 加载过程，和语言的识别问题。最终，各个页面基本没有 js 提示信息了，算是成功完成了这次升级。