深入掌握Typecho加密内容的前端结构自定义技术

Typecho作为轻量级PHP博客平台，其内置的文章密码保护机制为用户提供了基础的内容访问控制功能。然而，默认的加密界面在视觉呈现和交互体验上较为简陋，难以满足现代网站设计的需求。本文将系统性地介绍如何重构和增强Typecho加密文章的HTML输出结构，实现高度个性化的前端展示。

理解加密状态判断机制

Typecho通过$this->hidden属性标识当前文章是否处于加密状态。该字段在数据库中对应password字段是否存在有效值。当用户未提交正确密码或会话失效时，此条件返回true，触发保护层渲染逻辑。

模板层级的结构重写

最直接的定制方式是在主题的主内容文件（如post.php）中插入条件分支：

<?php if ($this->hidden): ?>
    <section class="secured-content">
        <header class="lock-header">
            <i aria-hidden="true" class="fa fa-shield-alt"></i>
            <h1>需要权限才能查看</h1>
        </header>
        <form method="post" action="<?php $this->permalink(); ?>" class="auth-form">
            <div class="input-wrapper">
                <label for="access-key">安全密钥</label>
                <input type="password" 
                       name="protectPassword" 
                       id="access-key"
                       autocomplete="off"
                       placeholder="输入访问凭证"
                       required />
            </div>
            <button type="submit" class="unlock-btn">解锁</button>
        </form>
    </section>
<?php else: ?>
    <article class="standard-post">
        <?php $this->content(); ?>
    </article>
<?php endif; ?>

基于插件系统的动态注入

利用Typecho的钩子机制可在不修改主题的前提下统一处理输出。以下是一个通过contentEx接口拦截并替换默认表单的示例：

class SecureDisplay_Plugin implements Typecho_Plugin_Interface
{
    public static function activate()
    {
        Widget_Archive::on('contentEx=SecureDisplay_Plugin::enhanceForm');
    }

    public static function enhanceForm($content, $widget)
    {
        if (!$widget->is('single') || !$widget->hidden) {
            return $content;
        }

        $security = $widget->widget('Widget_Security');
        $token = $security->getToken($widget->request->getReferer());

        $customMarkup = '<div class="encrypted-pane">
            <div class="pane-title">🔒 加密区域</div>
            <form class="verification-form" method="post">
                <input type="hidden" name="_" value="' . $token . '" />
                <input type="password" name="protectPassword" placeholder="请输入解密密码" autofocus />
                <button type="submit">验证并显示</button>
            </form>
        </div>';

        return preg_replace(
            '/<div class="protect".*?<\/form>\s*<\/div>/is', 
            $customMarkup, 
            $content
        );
    }

    // 实现必要接口方法...
    public static function deactivate() {}
    public static function config(Typecho_Widget_Helper_Form $form) {}
    public static function personalConfig(Typecho_Widget_Helper_Form $form) {}
}

引入异步验证提升交互流畅度

结合AJAX可避免页面刷新带来的体验中断。前端监听表单提交事件，发送POST请求至原地址，并根据响应决定后续操作：

document.querySelector('.verification-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    const feedback = form.querySelector('.status');

    try {
        const res = await fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });

        if (res.ok) {
            location.reload(); // 验证成功则刷新获取内容
        } else {
            feedback.textContent = '凭证无效，请重试';
        }
    } catch (err) {
        feedback.textContent = '网络异常，请检查连接';
    }
});

CSS样式现代化改造

配合新的HTML结构，使用现代CSS特性打造美观且响应式的界面：

.encrypted-pane {
    max-width: 500px;
    margin: 3em auto;
    padding: 2em;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: linear-gradient(to bottom, #f9f9ff, #f0f4ff);
    text-align: center;
}

.pane-title {
    font-size: 1.4em;
    color: #4a5568;
    margin-bottom: 1.2em;
}

.verification-form input[type="password"] {
    width: 100%;
    padding: 0.75em;
    margin-bottom: 1em;
    border: 1px solid #a0aec0;
    border-radius: 6px;
    font-size: 1em;
}

.verification-form button {
    background-color: #4c51bf;
    color: white;
    border: none;
    padding: 0.75em 1.5em;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.verification-form button:hover {
    background-color: #434190;
}

安全性强化策略

在自定义过程中应同步加强安全防护：

• CSRF防御：始终保留由Widget_Security生成的隐藏令牌字段
• 尝试频率限制：可通过Cookie记录失败次数，连续错误超过阈值后暂时锁定访问
• 密码传输保护：确保站点启用HTTPS以防止明文窃听

多段落独立加密进阶方案

通过预处理器解析文章中的特殊标记语法，实现部分内容选择性隐藏：

function parseSegmentedProtection($content)
{
    return preg_replace_callback('/(.+?)/s', function($match) {
        $key = $match[1];
        $data = $match[2];
        $unlockedKeys = json_decode(Typecho_Cookie::get('unlocked_segments'), true) ?: [];

        return in_array($key, $unlockedKeys) ? 
            "<div class='revealed-section'>$data</div>" : 
            "<div class='locked-chunk' data-id='$key'>
                <p>本节需独立授权访问</p>
                <input type='password' placeholder='输入章节密钥'/>
                <button onclick='unlockSegment(\"$key\")'>提交</button>
             </div>";
    }, $content);
}

实施建议与注意事项

在进行深度定制时应注意：

• 优先采用插件方式而非直接修改主题，便于维护和迁移
• 确保移动端适配，特别是键盘弹出时的布局稳定性
• 保留必要的无障碍支持，如label关联、焦点管理等
• 对输出内容进行充分测试，避免因正则替换导致意外破坏原始结构