博客文章“部分展示+验证解锁”实现

功能概述

本文介绍如何在个人博客中实现文章阅读限制功能。博主可将文章内容部分展示（如前 1/3），用户需关注公众号并通过验证后方可阅读全文。这是一种常见的内容营销方式，既能展示文章价值，也能引导用户关注公众号。

功能特点

1. 智能内容截断：自动计算文章高度，仅展示前 1/3 内容
2. 优雅视觉提示：底部虚化遮罩，暗示更多内容待解锁
3. 一键解锁交互：简洁的“查看全文”按钮，点击触发验证流程
4. 公众号验证：扫码关注公众号，发送关键词获取验证码
5. 全局解锁机制：一次验证，全站文章自动解锁
6. 平滑展开动画：解锁后文章以动画形式完整展开
7. 响应式设计：适配桌面端与移动端

技术实现

1. HTML 结构

HTML 部分主要包含三块：文章内容容器、解锁区域（含虚化遮罩和按钮）、验证弹窗。

<div id="article-content-wrapper">
    <div id="article-content" class="article-content-full">
        <!-- 完整文章内容 -->
    </div>

    <div id="article-unlock-section" class="article-unlock-section">
        <div id="article-blur-overlay" class="article-blur-overlay"></div>
        <div class="unlock-expand-bar" onclick="showVerifyModal()">
            <span class="unlock-text">查看全文</span>
            <span class="unlock-arrow">▼</span>
        </div>
    </div>
</div>

<div id="verify-modal" class="verify-modal">
    <div class="verify-modal-content">
        <div class="verify-header">
            <h3>验证解锁</h3>
        </div>
        <div class="verify-body">
            <div class="qrcode-section">
                <img src="公众号二维码" alt="公众号二维码">
                <p>1. 扫码关注公众号</p>
                <p>2. 发送"博客"获取验证码</p>
            </div>
            <div class="verify-input-section">
                <input type="text" id="verify-code" placeholder="请输入验证码">
                <button onclick="verifyCode()">验证</button>
            </div>
        </div>
    </div>
</div>

2. CSS 样式核心

文章内容截断与过渡

通过 max-height 与 CSS 变量控制锁定状态的高度，并添加平滑过渡效果。

#article-content {
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

#article-content.article-locked {
    max-height: var(--content-one-third, 600px);
}

#article-content.article-unlocked {
    max-height: none !important;
}

虚化遮罩

位于文章底部与按钮之间，营造“渐隐渐现”的视觉效果。

.article-blur-overlay {
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.5) 30%,
        rgba(255,255,255,0.85) 70%,
        rgba(255,255,255,1) 100%);
    pointer-events: none;
    z-index: 1;
}

解锁按钮

采用柔和渐变背景与悬停动效，提升交互感知。

.unlock-expand-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
    border: 1px dashed #ff6b6b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.unlock-expand-bar:hover {
    background: linear-gradient(135deg, #ffe0e0 0%, #ffd5d5 100%);
    border-color: #ff5252;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
}

3. JavaScript 核心逻辑

配置项

const CONFIG = {
    STORAGE_KEY: 'blog_global_unlocked',  // 全局解锁标识
    VERIFY_CODES: ['xxxxxx'],              // 预设验证码
    LOCK_ENABLED: true                     // 功能总开关
};

检查全局解锁状态

function isGlobalUnlocked() {
    try {
        return localStorage.getItem(CONFIG.STORAGE_KEY) === 'true';
    } catch (e) {
        return false;
    }
}

锁定文章（展示前 1/3）

获取文章真实高度后，计算 1/3 高度并通过 CSS 变量应用到样式中。

function lockArticle() {
    const content = document.getElementById('article-content');
    const unlockSection = document.getElementById('article-unlock-section');
    const blurOverlay = document.getElementById('article-blur-overlay');

    // 临时移除 max-height 以获取完整高度
    const originalMaxHeight = content.style.maxHeight;
    content.style.maxHeight = 'none';
    const fullHeight = content.scrollHeight;
    content.style.maxHeight = originalMaxHeight;

    const oneThirdHeight = Math.floor(fullHeight / 3);
    content.style.setProperty('--content-one-third', oneThirdHeight + 'px');

    content.classList.add('article-locked');
    content.classList.remove('article-unlocked');

    unlockSection.style.display = 'block';
    blurOverlay.style.display = 'block';
}

解锁文章

移除锁定样式，隐藏解锁区域，并触发高度过渡动画。

function unlockArticle() {
    const content = document.getElementById('article-content');
    const unlockSection = document.getElementById('article-unlock-section');
    const blurOverlay = document.getElementById('article-blur-overlay');

    content.classList.remove('article-locked');
    content.classList.add('article-unlocked');

    unlockSection.classList.add('hidden');
    blurOverlay.classList.add('hidden');

    setTimeout(() => {
        content.style.maxHeight = '';
    }, 800);

    showSuccessToast();
}

验证验证码

支持预设验证码校验，成功时写入全局解锁状态并触发解锁。

function verifyCode() {
    const input = document.getElementById('verify-code');
    const code = input.value.trim().toUpperCase();

    if (!code) {
        showError('请输入验证码');
        return;
    }

    if (CONFIG.VERIFY_CODES.includes(code)) {
        localStorage.setItem(CONFIG.STORAGE_KEY, 'true');
        unlockArticle();
        closeVerifyModal();
        input.value = '';
    } else {
        showError('验证码错误，请重新输入');
        input.style.animation = 'shake 0.5s';
        setTimeout(() => input.style.animation = '', 500);
    }
}

4. 解锁成功提示动画

使用 SVG 描边动画实现勾选效果，增强成功反馈。

.success-circle {
    stroke: #00b894;
    stroke-width: 3;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-check {
    stroke: #00b894;
    stroke-width: 3;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.3s forwards;
}

@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}

实现要点

1. 高度计算技巧

由于 max-height 会限制元素高度，需先临时移除才能获取真实高度。上述 lockArticle 中的处理方式可避免直接操作原始样式，兼容性较好。

2. CSS 变量动态设置

将计算得到的 1/3 高度存入 CSS 变量 --content-one-third，便于在样式表中统一控制，同时也为后续调整留出扩展空间。

3. 平滑过渡动画

使用 cubic-bezier(0.4, 0, 0.2, 1) 缓动函数，让文章展开过程更加自然，避免生硬变化。

4. 全局解锁机制

利用 localStorage 存储 blog_global_unlocked 标识，用户验证一次后，访问任何页面都会自动处于解锁状态，提升体验。

5. 响应式设计

• 桌面端：解锁按钮水平布局，与文字并排
• 移动端：按钮宽度 100%，便于点击

后续优化建议

1. 后端 API 验证：当前验证码为前端硬编码，建议改为后端接口验证，支持动态生成与过期校验
2. 微信公众号对接：接入微信 API，实现自动回复验证码，提升自动化程度
3. 验证码有效期：增加有效期与单次使用限制，增强安全性
4. 统计功能：记录解锁次数、转化率等数据，便于分析效果
5. A/B 测试：针对按钮文案、样式、弹窗位置等进行对比实验，优化转化率

总结

文章阅读限制功能是内容营销中轻量且有效的工具。通过前端截断、视觉引导与验证解锁的组合，既保留文章核心吸引力，又能引导用户完成关注转化。本文实现的方案涵盖了布局控制、动态高度计算、状态持久化与交互动画等多个前端常见技术点，适合作为博客系统的功能扩展参考。