中文博客倡议
中文博客倡议
共建更好的博客环境需要你的参与！
本文链接：在我的博客上阅读、在 GitHub 上阅读
推荐阅读：中文博客圈列表-唯有超链接，能将互联网上一座座孤岛联系起来
如想支持本项目，就为此项目点个⭐吧！
你指尖释放的善意，将指引我们继续前行。
本倡议精神
- 提升访客访问体验。
不提倡的设计
- CBGB001 自动播放多媒体资源。
- CBGB002 动态页面标题。
- CBGB003 页面加载时弹出原生 JavaScript 对话框。
- CBGB004 过多的特效。
- CBGB005 检测到广告过滤程序后影响用户浏览内容。
- CBGB006 内容与背景对比度过低。
提倡的设计
设计编辑的建议
- 延迟跳转等设计要进行测试，避免出现被浏览器拦截的情况。
- 在测试的时候给网站加入帧数显示，保证较差配置的设备也能稳定 60 fps 运行。
提倡的行为
- 积极评论，即使无话可说也可以发送一些用于赞美的语句来鼓励认真写文的博主。
鸣谢
感谢本项目的所有贡献者，以及在各个平台为对本项目提出指导意见的各位。正是因为你们，才有了现在的中文博客倡议！
将本文链接插入博客
Markdown 格式版
国内访问情况较通畅的地址
[中文博客倡议](https://howiehz.top/archives/chinese-blog-guidelines)
GitHub 地址
[中文博客倡议](https://github.com/HowieHz/chinese-blog-guidelines)
HTML 格式版
国内访问情况较通畅的地址
<a href="https://howiehz.top/archives/chinese-blog-guidelines" target="_blank" rel="noopener noreferrer" title="中文博客倡议书">中文博客倡议</a>
GitHub 地址
<a href="https://github.com/HowieHz/chinese-blog-guidelines" target="_blank" rel="noopener noreferrer" title="中文博客倡议书">中文博客倡议</a>
Star History
更新日志
点我展开
2024.6.10
- 添加鸣谢部分
- 修改 README.md 引入部分
- 为项目添加贡献指南
2024.6.9
- 去除文章开头的目录
- 添加构建程序：将 README.md，解释，示例合并到一个文件中。用于博客文章。
- 调整
CBGG002解释文档（感谢 Kegongteng(github@gtxykn0504) 在其中做出的贡献）
2024.6.8
- 简化标题层次，如
设计-不提倡的设计->不提倡的设计 - 为
不提倡的设计每项添加代号，起始为CBGB(chinese-blog-guidelines bad design)，后添加三位数字，大小为 000-999 - 为
提倡的设计每项添加代号，起始为CBGG(chinese-blog-guidelines good design)，后添加三位数字，大小为 000-999 - 调整
CBGB003简述 -
- 调整前：在网站加载的时候启用 alert/confirm/prompt 弹窗阻塞用户操作
-
- 调整后：页面加载时弹出提示框限制用户操作
- 调整
CBGG002简述（感谢 Imken(github@immccn123), 呓语梦轩(github@awaae001) 对这个提案做出的贡献，以及 Kegongteng(github@gtxykn0504) 提出最终的修改方案 -
- 调整前：在需要填写邮箱的地方（如评论区）进行邮箱强制验证
-
- 调整后：在填写邮箱，网站等信息时，为访客提供验证服务
- 为
CBGB001-CBGB005添加解释文档和示例文件 - 添加文档目录
2024.6.7
- 在 Allenyou(github@Allenyou1126) 的建议下在
设计-不提倡的设计中添加有关防广告过滤器的说明
2024.6.6
- 在 wildgun 的建议下修改
设计-提倡的设计中有关排版的倡议
2024.6.2
- 初版
CBGB001
解释
如果访客使用不禁用自动播放的浏览器浏览有自动播放多媒体资源的网页，可能使访客的设备发出意料之外的声音，从而导致意外的社会影响。
示例
CBGB002
解释
当页面切到后台时切换标题会导致以下问题
- 访客打开此站点多个页面会导致无法分辨文章
- 访客将此页面关闭在历史记录中不会正常记录文章标题
- 访客打开此站点多个页面后，尝试将开启的页面收藏到收藏夹备用，但收藏夹中只会记录被修改后的标题
示例
CBGB003
解释
- 阻断正常页面加载流程。
alert()、confirm()、prompt()等原生 JavaScript 对话框会暂停脚本执行和页面渲染。在加载过程中触发时，用户必须响应对话框才能继续，网络较慢时会导致页面长时间处于不可用状态。
- 强制中断用户操作，直接降低用户体验和再访问意愿。
- 造成视觉上的不匹配。
示例
CBGB004
解释
- 过多的特效导致设备性能较差的访客体验糟糕。
- 存在使得访客浏览器卡死的潜在风险。
示例
CBGB005
解释
强制要求用户不使用广告过滤程序导致访问体验下滑，从而对访客的再访问意愿产生潜在影响。
示例
CBGB006
解释
站点大部分内容与背景的对比度应至少达到 AA 级。这是因为视力下降会导致许多人无法看清对比度较低的文字。为了让文字能被更多人看见，站点内容的最低对比度应达到此标准。
包括文字内容、自定义鼠标指针、图案等，都应考虑与背景的对比度。
相关解释：理解最低对比度。
示例
CBGG001
解释
- 减少站点页面间的割裂感
- 提高访客阅读体验
示例
在中文文案排版指北的基础上发展出一套自己的排版样式
CBGG002
解释
为有相关需求（身份验证，内容防篡改等需求）的访客提供选择
示例
对邮箱信息的验证方式如：
- 向邮箱发送一封带有验证码的邮件来验证。
- 向邮箱发送一封带有验证链接的邮件，访客通过点击验证链接进行进一步的验证。
对网站信息的验证方式如：
- 在网站公布公钥，同时给消息附上签名。以便验证这条消息是否是这个网站所有者发送的。
访客身份信息验证的方式如：
- 使用 SSO, OAuth2.0 等操作门槛更低，更易用的验证方法，以提升访客访问体验。
CBGB001-EXAMPLE
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CBGB001</title>
</head>
<body>
<h1>CBGB001 - example</h1>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=2025918324&auto=1&height=66" title="music"></iframe>
</body>
</html>
CBGB002-EXAMPLE
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CBGB002</title>
</head>
<body>
<h1>CBGB002 - example</h1>
<p>
页面标题初始为：CBGB002<br /><br />
之后请尝试以下操作，并观察页面标题：<br />
1. 将此页面切到后台<br />
2. 将此页面重新切回前台<br />
3. 关闭此页面，查看历史记录<br />
4. 打开多个页面，使用收藏快捷键一键收藏全部页面后查看收藏夹内容<br />
</p>
<script type="text/javascript">
window.onblur = function () {
document.title = "页面进入后台";
};
window.onfocus = function () {
document.title = "页面回到前台";
};
</script>
</body>
</html>
CBGB003-EXAMPLE
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CBGB003</title>
</head>
<body>
<h1>CBGB003 - example</h1>
<script type="text/javascript">
alert("alert!")
confirm("confirm?")
prompt("prompt...")
</script>
</body>
</html>
CBGB004-EXAMPLE
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CBGB004</title>
</head>
<body>
<h1>CBGB004 - example</h1>
<p>这是一个空示例，因为 HowieHz 写不出让自己电脑卡住的示例。如果你有一个良好的示例，可向此项目提交 pr。</p>
</body>
</html>
CBGB005-EXAMPLE
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CBGB005</title>
</head>
<body>
<h1>CBGB005 - example</h1>
<p>本示例旨在提供被广告拦截检测器拦截的体验，并未加入到广告屏蔽器和反广告屏蔽器的对抗中</p>
<script type="text/javascript">
alert("检测到 AdBlock");
alert("由于你使用了广告拦截器，所以本站将不对您提供服务");
</script>
</body>
</html>
2