技术博客的内容形式发展趋势

· 阅读需 11 分钟

编程范儿

专注前端开发，常用 Vue、React、Nodejs、Nextjs 等技术，喜欢研究网页 UI、UX

你平时都在什么平台写博客？你写博客时的编辑器是什么？

依我观察，现在的博客形式无外乎以下几种：

本地编辑器书写，Hexo、Hugo、Vitepress 等部署
Notion、语雀和飞书等工具记录和发布
WordPress 等开源网站程序搭建，在线书写和发布
Github 仓库或 Page
掘金、知乎、CSDN等在线平台记录

不管平台或工具是什么？它们或是因为有良好的撰写体验，或是易于在线发布和传播，抑或对搜索引擎友好且社区氛围好易于扩大影响力等原因。

今天我们不讨论用哪个平台，何种工具来生产和呈现你的博客。着重关注下博客的内容形式随着 Web 技术的发展带来了哪些变化？

我们最初的印象中一篇文章的形成素材，无非文字搭配图片，这也是从纸媒时代延续过来最常见的方式。之后过度到互联网时代，随着多媒体素材逐渐丰富起来，于是文章中也有了视频、GIF、SVG 等元素，文章给人的体验也从单纯的视觉扩大到听觉。我们接受的信息维度发生了变化。

这种变化的感受对于经历完整互联网发展的我们来说，或者并不算深刻。但是，接下来的要讨论的这种趋势，你不得不去关注。🕵️‍♂️

你可以打开下面两篇文章观察下：

CSS :has() Interactive Guide: https://ishadeed.com/article/css-has-guide
An Interactive Guide to Flexbox: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox

发现两个作者在讲解知识的时候，都配有大量的生动案例，通过一系列的鼠标或键盘操作来和读者的教程进行互动。来达到读者在观察网页上一些元素的样式和行为发生的变化过程中思考背后的原理的目的。

很重要的一点：我们已经从单纯被动接受信息，到一种参与互动，仿佛在跟着文章思维和作者进行交流。这种学习的过程更加立体和深刻。

另外通过这种方式写作，更能锻炼写作者对某个知识点背后的原理和在实际场景中的应用的深入理解。因为每个案例都是该知识点在实际应用中的一种折射。

我理解这种创作的深度比单纯的码文字和贴图要高的多。

而之所以有这种变化的趋势，我觉得背后得益于 Web 技术的发展的助推，静态网站生成技术对 mdx 格式的文件的支持：同一个文件中不仅支持 md 语法，还能直接写 jsx 代码在文件中执行。

https://mdxjs.com

让 Markdown 步入组件时代
MDX 将 markdown 和 JSX 语法完美地融合在一起，完美地适配基于 JSX 的项目，亦可将现有的组件使用到 MDX 中，并且可以将其它 MDX 文件作为组件导入。保留了 markdown 的简洁和优雅，你只需在需要时使用 JSX。

我们知道有这种变化之后，不妨继续探索下，可以从哪些方面去实践？

首先我们从交互形式的角度分析：

鼠标点击操作触发
通过键盘按键
鼠标滚轮滚动
眼球互动（VR 场景）
手指操作（VR 场景）

下面我们来通过几个真实的案例，具体看看都有哪些可能性？

通过键盘按键互动

这是一种常见的应用场景，通过监听键盘大小键的关闭和开启来给与用户输入密码时友好提示，避免大小写切换时用户感知上的迷惑。

核心代码如下 👇：

window.addEventListener('keydown', detectCapsLock)
window.addEventListener('keyup', detectCapsLock)

function detectCapsLock(e) {
  if (e.getModifierState('CapsLock')) {
    // caps lock is on
  } else {
    // caps lock is off
  }
}

我们可以通过这种真实场景的模拟，来感受下隐藏在背后的技术的实现过程，比单纯的代码和文字讲解要更生动，更能激发人的探索欲。

及时编码，实时展示效果

这是一段代码块的 live 模式，依赖于开源库 https://github.com/FormidableLabs/react-live 实现。使得可以同时通过可编辑的源代码和实时预览两种模式来渲染 React 组件。

修改代码块中防抖函数中的数值来观察结果区文字变化的响应速度

实时编辑器

function App() {
  const [mouseX, setMouseX] = React.useState(null);
  const [mouseY, setMouseY] = React.useState(null);

  const handleMouseMove = React.useMemo(
    () => debounce((ev) => {
      setMouseX(ev.clientX);
      setMouseY(ev.clientY);
    }, 250), // 修改防抖数值观察变化
    []
  );
  
  return (
    <div
      style={{ padding: '40px 20px', border: '2px dashed #ebedf0' }}
      onMouseMove={handleMouseMove}>
      鼠标位置：{ mouseX ? `X: ${mouseX}` : '' } { mouseY ? `Y: ${mouseY}` : '' }
    </div>
  );
}

结果

一边写代码，一边展示效果，有点类似本地的网页开发体验。

这种及时显示代码效果的的互动形式，大大提高了读者对代码的兴趣。

相比在文章中附上 CODEPEN（https://codepen.io）这种代码演示平台的链接。避免了阅读时文章和代码试验区的切换的割裂感，完美与正文集成在一起，既保证了顺畅的阅读体验，还能让我们体验在线调试代码的过程。

通过改变配置，刷新页面效果

在学习 Flex 布局时，相比单纯介绍各个属性的含义和用法。如果通过这样一个真实的案例：更改下面盒子的宽度，观察表单的布局和样式的变化：

盒子宽度：

600px

姓名：

邮箱：

思考后可以查看代码 👀

form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.name {
  flex-grow: 1;
  flex-basis: 160px;
}
.email {
  flex-grow: 3;
  flex-basis: 200px;
}
button {
  flex-grow: 1;
  flex-basis: 80px;
}

先通过案例让你产生兴趣，顺便思考背后的技术的实现。然后再点开查看代码，这样的教程是不是更有意思？

这种强交互的文章有哪些产品方面的应用，做的最好的应该是公众号，我们通常无法拒绝那种通过点击展开图片，或点击变换场景的公众号推文。它深刻抓住了互动在营销上传播力。

把握趋势，追逐趋势。这也是我今后在这个博客上持续发力进行创作的方向。

不知道看完文章的分析，是不是让你对博客的呈现形态有了新的认识，你会认同我的想法吗？欢迎评论区给与您的意见。