Hexo博客进阶：如何巧妙实现AI文本的隐藏与展示

最近在折腾博客的时候，发现不少博主都在讨论一个问题：不想让AI爬虫直接“顺走”自己辛辛苦苦写的内容，或者想给忠实读者一点“专属福利”。虽然纯前端的隐藏手段挡不住技术高超的爬虫，但对于普通场景来说，这招足够增加一点门槛和趣味性了。

今天我们就来聊聊，怎么在Hexo博客里加一个简单的“AI文本隐藏”功能。别担心，不需要你会写复杂的JS库，跟着步骤走，小白也能搞定。

一、 这个功能是干嘛用的？

简单来说，就是把你文章里的某段文字默认隐藏起来。

• 默认状态：访客看到的是一个提示框（比如“点击查看隐藏内容”或“登录后可见”之类的）。
• 交互后：用户点击按钮，隐藏的内容才会展开。

隐藏文本功能的前端展示效果示意图

这样做的好处显而易见：

1. 增加互动性：读者多了一次点击动作，停留时间可能变长。
2. 防简单抓取：很多针对源码直接抓取的简单爬虫，可能不会执行点击展开的JS逻辑，从而抓不到核心内容。
3. 内容分层：可以把剧透、长代码、或者进阶提示放在这里面，保持页面整洁。

二、 实现原理大揭秘

Hexo是基于Node.js的静态站点生成器，但最终展示给用户的是HTML页面。所以，我们要利用JavaScript来控制页面元素的显示与隐藏。

大体思路是：在写Markdown文章时，用一种特殊的标签把要隐藏的内容包起来。Hexo在生成HTML时，保留这个标签的特殊结构。最后，通过一段JS脚本，监听用户的点击事件，切换CSS类名或直接修改样式，从而实现内容的展开与收起。

三、 手把手教你实现

这里提供两种思路，一种是轻量级的原生JS方案，另一种是利用现有插件的魔改方案。咱们先讲通用的原生方案，兼容性最好。

1. 编写核心脚本

首先，在你的Hexo主题目录下找到 scripts 文件夹（如果没有就新建一个）。在这个文件夹里新建一个JS文件，比如叫text-hide.js。这个脚本的作用是在文章渲染后注入我们的逻辑。

不过，更推荐直接把逻辑写在主题的JS文件里，或者在 layout 部分引入一个新的JS文件。咱们假设你是手动引入JS的方式。

新建一个文件 source/js/hide-content.js（放在你的主题source目录下），加入以下代码：

Hexo 主题目录结构，展示了 scripts 和 source 文件夹的位置

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带有特定类的隐藏容器
    const hideBlocks = document.querySelectorAll('.hide-text-block');

hideBlocks.forEach(block => {
        const trigger = block.querySelector('.hide-trigger');
        const content = block.querySelector('.hide-content');

if (trigger && content) {
            trigger.addEventListener('click', function() {
                // 切换显示状态
                const isHidden = content.style.display === 'none';
                if (isHidden) {
                    content.style.display = 'block';
                    trigger.textContent = '收起内容'; // 或者换个图标
                    trigger.classList.add('active');
                } else {
                    content.style.display = 'none';
                    trigger.textContent = '点击查看隐藏内容';
                    trigger.classList.remove('active');
                }
            });
        }
    });
});

记得要在你的模板文件（比如 after-footer.ejs 或类似的布局文件）里引入这个JS文件：

<script src="/js/hide-content.js"></script>

2. 添加样式美化

光有逻辑还不够，得好看点。在你的CSS文件里（通常是source/css/style.styl或类似的），加上这些样式：

.hide-text-block {
    margin: 15px 0;
    border: 1px dashed #ccc; /* 虚线边框暗示里面有东西 */
    border-radius: 4px;
    background: #f9f9f9;
    padding: 10px;
}

.hide-trigger {
    cursor: pointer;
    color: #007bff; /* 醒目的颜色 */
    font-weight: bold;
    user-select: none; /* 防止双击选中文字 */
    display: block;
    text-align: center;
    padding: 5px;
}

.hide-trigger:hover {
    color: #0056b3;
    text-decoration: underline;
}

.hide-content {
    display: none; /* 默认隐藏 */
    padding: 10px;
    border-top: 1px solid #eee;
    margin-top: 5px;
    color: #333;
}

3. 在文章里怎么用？

这是最关键的一步。因为Hexo渲染Markdown时，直接写<div>可能会被转义或者处理不当。最稳妥的方法是使用Hexo的标签插件（Tag Plugin）。

如果你的主题支持自定义标签插件，可以在 scripts 文件夹下新建一个 tags.js，注册一个 hide标签：

hexo.extend.tag.register('hide', function(args, content){
    const title = args[0] || '点击查看隐藏内容';
    return '<div class="hide-text-block">' +
           '<span class="hide-trigger">' + title + '</span>' +
           '<div class="hide-content">' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '</div>' +
           '</div>';
}, {ends: true});

安装好后，你在Markdown里就可以这样写了：

这是一段公开的文字。

{% hide 这里是自定义提示 %}
这里是给真爱粉或者不想被AI直接抓走的秘密内容！
比如说：今晚的密码是 123456。
{% endhide %}

文章继续...

Hexo编译后，这段文字就会自动变成我们上面定义的HTML结构，配合JS和CSS，完美实现隐藏。

四、 常见问题与解决方案

Q: 我不想折腾代码，有没有现成的插件？

A: Hexo社区其实有不少现成的插件，比如以前很火的 hexo-tag-hide或者类似的加密插件。你可以在NPM上搜索“hexo hide”或“hexo encrypt”。不过，很多插件年久失修，建议优先选择近期更新活跃的，或者就按上面的教程自己写几行代码，反而不容易翻车。

Q: 这样真的能防住AI吗？

A: 对于大厂级的AI爬虫，不能。 只要内容在HTML源码里（即使是隐藏的），高级爬虫只要解析DOM或者执行JS就能拿到。这招主要防的是廉价的爬虫脚本，以及为了增加用户交互和内容质量分级。如果真想完全防爬，那就得后端验证，或者把内容做成图片了（但这又不利于SEO了，也是把双刃剑）。

Q: 点击后内容闪了一下又没了？

A: 可能是样式冲突。检查一下你的主题CSS是不是对 div有全局的隐藏样式，或者是JS执行时机的问题。确保JS是在DOM加载完毕后执行的。

五、 总结一下

这个“AI文本隐藏”的功能，本质上是一个前端交互小技巧。它不需要改动Hexo的核心逻辑，只是通过HTML、CSS和JavaScript的配合，给内容加了一层“外衣”。

对于独立博客站长来说，这种小功能的添加正好体现了折腾的乐趣。既保护了一点点原创的心思，又让博客多了一份与众不同。赶紧去试试吧，把你的“独家秘籍”藏起来！