Typecho加密文章HTML结构自定义完全指南

深度解析Typecho加密文章HTML结构自定义方案

🌐 我的个人网站：乐乐主题创作室

前言

Typecho作为一款轻量级的开源博客系统，以其简洁高效著称。其中文章加密功能是保护隐私内容的重要特性，但默认的加密文章HTML结构可能无法满足所有用户的个性化需求。本文将全面剖析Typecho加密文章的实现机制，并提供多种自定义HTML结构的解决方案。

一、Typecho加密文章机制解析

1.1 加密文章的基本原理

Typecho的加密功能通过在文章编辑界面设置密码实现。当用户访问加密文章时，系统会：

1. 检查cookie中是否保存了正确的密码
2. 如果没有或密码错误，显示密码输入表单
3. 验证通过后显示文章内容

1.2 默认HTML结构分析

Typecho默认的加密文章HTML结构如下：

<div class="protect">
    <form action="<?php echo $this->permalink; ?>" method="post">
        <h3>此内容被密码保护</h3>
        <p>请输入密码访问</p>
        <p>
            <input type="password" name="protectPassword" class="text" />
            <input type="submit" class="submit" value="提交" />
        </p>
    </form>
</div>

二、自定义HTML结构的核心方法

2.1 通过主题模板覆盖

最直接的方法是修改主题模板文件：

1. 定位到当前主题的post.php文件
2. 添加加密文章的特殊处理逻辑

<?php if ($this->hidden): ?>
    <div class="custom-protected-container">
        <div class="custom-protected-header">
            <i class="icon-lock"></i>
            <h2>受保护的内容</h2>
        </div>
        <form class="custom-protected-form" method="post" action="<?php $this->permalink(); ?>">
            <div class="form-group">
                <label for="password">访问密码</label>
                <input type="password" name="protectPassword" id="password" 
                       class="form-control" placeholder="请输入密码..." required>
            </div>
            <button type="submit" class="btn btn-primary">验证</button>
        </form>
    </div>
<?php else: ?>
    <!-- 正常文章内容