中文博客倡议

HowieHz

2024-06-03

☆ 精选 ☆ ☆ 持续维护 ☆ ☆ 开源 ☆

430

共建更好的博客环境需要每位博主的参与！

本文链接：在我的博客上阅读、在 GitHub 上阅读
推荐阅读：中文博客圈列表

最后更新时间 2024.6.9

本倡议精神

提升访客阅读体验。

不提倡的设计

CBGB001 自动播放多媒体资源。
CBGB002 动态页面标题。
CBGB003 页面加载时弹出提示框限制用户操作。
CBGB004 过多的特效。
CBGB005 检测到广告过滤程序后影响用户浏览内容。

提倡的设计

CBGG001 整个站点应采用固定的一套排版样式。
CBGG002 在填写邮箱，网站等信息时，为访客提供验证服务。

设计编辑的建议

延迟跳转等设计要进行测试，避免出现被浏览器拦截的情况。
在测试的时候给网站加入帧数显示，保证较差配置的设备也能稳定 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.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

解释

如果访客使用不禁用自动播放的浏览器浏览有自动播放多媒体资源的网页，可能使访客的设备发出意料之外的声音，从而导致意外的社会影响。

示例

Example

CBGB002

解释

当页面切到后台时切换标题会导致以下问题

访客打开此站点多个页面会导致无法分辨文章
访客将此页面关闭在历史记录中不会正常记录文章标题
访客打开此站点多个页面后，尝试将开启的页面收藏到收藏夹备用，但收藏夹中只会记录被修改后的标题

示例

Example

CBGB003

解释

堵塞的弹窗导致页面无法正常加载。
强制要求访客点击弹出框导致访问体验下滑，从而对访客的再访问意愿产生潜在影响。
可能导致网站样式上的割裂感。

示例

Example

CBGB004

解释

过多的特效导致设备性能较差的访客体验糟糕。
存在使得访客浏览器卡死的潜在风险。

示例

Example

CBGB005

解释

强制要求用户不使用广告过滤程序导致访问体验下滑，从而对访客的再访问意愿产生潜在影响。

示例

Example

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>