企业官网建设流程全解析

最近在 CSDN 发布文章时，我遇到一个比较奇怪的问题：

正文里一些原本只是普通文字的技术关键词，比如：

• 雷达
• Track
• 坐标转换
• 算法

在文章预览或者正式发布以后，会自动变成蓝色。

更麻烦的是，点击这些词以后，还可能跳转到和当前文章内容并不相关的页面。

一开始我以为是 Markdown、富文本编辑器或者复制格式导致的，后来实际检查页面 DOM 后发现，问题并不在文章源码本身。

一、先确认：不是 Markdown 导致的

我最开始使用 Markdown 编辑器写文章。

后来发现：

“雷达”“Track”“坐标转换”等词发布后会自动变蓝。

于是我又测试了富文本编辑器，结果仍然存在类似现象。

所以可以基本排除：

这是 Markdown 转换产生的普通超链接。

二、检查 DOM，发现关键词被重新包装了

在 Microsoft Edge 中，对蓝色关键词右键：

检查

例如“雷达”这个词，最终页面里的 DOM 类似：

<spanclass="words-blog hl-git-1"data-tit="雷达"data-pretit="雷达">雷达</span>

可以看到几个比较明显的属性：

words-blog hl-git-1>三、继续检查点击事件
在 Edge 开发者工具 Console 中输入：
$0
可以看到当前选中的元素。
再执行：
getEventListeners($0)
我的结果是：
{}
说明这个 span 本身并没有直接绑定 click 事件。
继续查看：
$0.className
得到：
words-blog hl-git-1
因此比较合理的判断是：
页面可能通过更上层的事件委托，对.words-blog这类元素统一处理点击行为。
所以单纯修改文章 Markdown，并不能真正解决这个问题。
四、最终处理思路：Tampermonkey 本地屏蔽
既然最终页面中的关键词会被加上：
.words-blog .hl-git-1
那么可以在本地浏览器里把这些样式和点击行为直接屏蔽掉。
我使用的是：
Microsoft Edge + Tampermonkey
需要注意：
这个方法只会影响自己浏览器看到的页面，不会修改 CSDN 服务器上的文章，也不会影响其他读者看到的页面。
五、Edge 里先开启“允许用户脚本”
这里是我实际遇到的一个坑。
安装 Tampermonkey 并创建脚本以后，我一开始看到提示：
此脚本尚未被执行
后来才发现，是 Edge 没有允许扩展运行用户脚本。
我的操作路径是：
Edge 右上角三个点 → 扩展 → 管理扩展 → 找到“篡改猴 / Tampermonkey” → 详情 → 打开“允许用户脚本”
页面里会出现类似提示：
允许用户脚本 此扩展能运行未经 Microsoft Edge 评审的代码， 可能会使你的设备或数据面临风险。 仅在你完全信任此扩展的情况下启用此扩展。
把“允许用户脚本”打开以后，再刷新 CSDN 页面。
六、Tampermonkey 脚本
打开 Tampermonkey，新建脚本。
删除默认内容，然后粘贴下面代码：
// ==UserScript==// @name CSDN 去除正文关键词自动链接// @namespace https://example.com/// @version 1.0// @description 去除 CSDN 博客正文中自动插入的关键词高亮和点击跳转// @match https://blog.csdn.net/*// @grant none// @run-at document-idle// ==/UserScript==(function(){'use strict';conststyle=document.createElement('style');style.textContent=`#content_views .words-blog, #content_views .new-words-blog, #content_views .hl-git-1, #content_views .hl-1, #content_views [class*="words-blog"], #content_views [class*="hl-git"] { color: inherit !important; background: none !important; background-image: none !important; text-decoration: none !important; border: none !important; box-shadow: none !important; cursor: text !important; pointer-events: none !important; padding: 0 !important; margin: 0 !important; }`;document.head.appendChild(style);})();
保存以后，刷新 CSDN 文章页面。
七、脚本核心作用
核心其实就是这些 CSS：
color:inherit!important;background:none!important;text-decoration:none!important;cursor:text!important;pointer-events:none!important;
作用分别是：
恢复正文原来的文字颜色
去掉关键词背景高亮
去掉链接样式
恢复普通文本鼠标样式
禁止点击
这样自己查看文章时，这些自动处理的关键词就会恢复成普通正文效果。
八、如果脚本仍然没有执行
如果 Tampermonkey 仍然提示：
此脚本尚未被执行
可以检查下面几个地方。
1. Tampermonkey 是否启用
在 Edge 地址栏输入：
edge://extensions/
确认篡改猴处于启用状态。
2. 用户脚本是否启用
进入 Tampermonkey 管理面板，确认对应脚本已经开启。
3. “允许用户脚本”是否打开
再次确认路径：
Edge 右上角三个点 → 扩展 → 管理扩展 → 篡改猴 → 详情 → 允许用户脚本
这是我这次实际遇到的关键问题。
4. 页面地址是否匹配
脚本中使用：
// @match https://blog.csdn.net/*
因此类似这种地址：
https://blog.csdn.net/用户名/article/details/文章ID
都可以匹配。
后面带?spm=...之类参数也不会影响。
九、这个方案的局限
这个方法并不能让所有读者都看不到这些关键词链接。
因为 Tampermonkey 运行在本地浏览器中。
实际效果是：
自己打开文章 → Tampermonkey 执行 → 蓝色关键词被屏蔽
而其他没有安装脚本的读者，仍然会看到 CSDN 原来的页面效果。
所以更准确地说，这个方法是：
本地屏蔽 CSDN 文章正文中的自动关键词高亮和点击行为。
不是修改 CSDN 服务器内容。
十、总结
这次排查过程可以概括成：
发现关键词自动变蓝 ↓ 怀疑 Markdown ↓ 测试富文本仍然存在 ↓ 检查页面 DOM ↓ 发现 words-blog / hl-git-1 ↓ 确认是最终页面二次处理 ↓ 安装 Tampermonkey ↓ 创建屏蔽脚本 ↓ Edge 开启“允许用户脚本” ↓ 刷新页面 ↓ 本地恢复普通正文显示
如果你也遇到类似问题，可以先在浏览器里：
右键关键词 → 检查
看看最终 DOM 是否包含：
words-blog hl-git-1
如果存在类似 class，就可以尝试使用本文的 Tampermonkey 脚本进行本地处理。
对我来说，这次真正容易忽略的地方反而不是脚本本身，而是 Edge 中的：
扩展 → 管理扩展 → 篡改猴 → 详情 → 允许用户脚本
这个开关。