功能概述
本文介绍如何在个人博客中实现文章阅读限制功能。博主可将文章内容部分展示（如前 1/3），用户需关注公众号并通过验证后方可阅读全文。这是一种常见的内容营销方式，既能展示文章价值，也能引导用户关注公众号。
功能特点
- 智能内容截断：自动计算文章高度，仅展示前 1/3 内容
- 优雅视觉提示：底部虚化遮罩，暗示更多内容待解锁
- 一键解锁交互：简洁的“查看全文”按钮，点击触发验证流程
- 公众号验证：扫码关注公众号，发送关键词获取验证码
- 全局解锁机制：一次验证，全站文章自动解锁
- 平滑展开动画：解锁后文章以动画形式完整展开
- 响应式设计：适配桌面端与移动端
技术实现
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%，便于点击
后续优化建议
- 后端 API 验证：当前验证码为前端硬编码，建议改为后端接口验证，支持动态生成与过期校验
- 微信公众号对接：接入微信 API，实现自动回复验证码，提升自动化程度
- 验证码有效期：增加有效期与单次使用限制，增强安全性
- 统计功能：记录解锁次数、转化率等数据，便于分析效果
- A/B 测试：针对按钮文案、样式、弹窗位置等进行对比实验，优化转化率
总结
文章阅读限制功能是内容营销中轻量且有效的工具。通过前端截断、视觉引导与验证解锁的组合，既保留文章核心吸引力，又能引导用户完成关注转化。本文实现的方案涵盖了布局控制、动态高度计算、状态持久化与交互动画等多个前端常见技术点，适合作为博客系统的功能扩展参考。
关注公众号"召田最帅boy"获取验证码后即解锁全站文章