照烧鳗鱼

交互发布助手使用指南

2026-09-12T11:25:00+08:00

交互发布助手的诞生

为了让日常写作更加流畅、无感，我们在桌面打造了一款轻量交互发布助手。

“极简的创作环境，是持续深度思考的最佳催化剂。”

核心体验亮点

桌面一键即开：双击桌面图标即可打开沉浸式双栏工作区。
100% 真实线上还原：右侧实时调用 Anatole 模板渲染，字号、边栏、图标与线上完全一致。
一键原子上传：点击“提交发布”后，全自动完成校验、编译、媒体同步与服务器软链秒切。

# 优雅发布体验
def publish_thought(article):
return article.preview().deploy_to_world()

Canvas 粒子引力与动态连线实验

2026-09-12T08:00:00+08:00

交互预览 (Interactive Demo)

全屏体验 ↗ 查看源码 →

这是一个完全使用现代原生 Web 技术（HTML5 Canvas + 纯 JavaScript）构建的轻量级物理仿真交互项目。

项目亮点与特性

零外部框架依赖：整个演示不引入任何庞大的三方库（无需 Three.js、Pixi.js 等），完全使用浏览器 2D Canvas Context 驱动，加载耗时不到 10 毫秒。
物理交互响应：
鼠标排斥/引力：当鼠标在画布上滑动时，周围半径内的粒子会受到速度冲量并发生偏移；
动态网状连线：实时计算每两个粒子之间的欧几里得距离，在设定的阈值范围内绘制半透明连线，随距离拉远自然淡出；
脉冲爆炸效果：点击顶部控制栏的“发散脉冲”按钮，所有粒子将从中心点向外围施加径向冲击波。
独立目录与沙箱隔离：该演示的源码保存在 content/demos/interactive-calc/ 下，Pelican 配置了 ARTICLE_EXCLUDES 确保其不被篡改为博客文章；通过 iframe 嵌入本页展示，完全不影响外部排版样式。

源码与离线运行包

全屏独立体验：点击此处全屏打开演示
离线源码下载：下载项目完整 Zip 源码包

你可以直接解压该 zip 包，在任意电脑上双击其中的 index.html 即可在本地离线运行。

原生音频播放与分段加载技术实践

2026-09-12T08:00:00+08:00

在个人博客中分享播客单集、音乐片段或语音随笔时，许多人习惯直接嵌入第三方商业播放器平台的小挂件。然而，第三方挂件往往包含冗余的脚本、广告、跟踪代码，且加载缓慢。

其实，现代浏览器的 HTML5 <audio> 标签已经非常强大，结合 HTTP Range 206 请求，即可实现体验极佳的原生音频播放。

原生音频播放体验

下面嵌入了一段通过 FFmpeg 生成的标准 44.1kHz / 320kbps MP3 样例音频：

您的浏览器不支持原生 HTML5 音频播放，请下载后播放。

音频来源：/media/sample-audio.mp3 | 支持快进、倒退、拖拽进度条

实现原理与服务器配置要点

为什么不需要第三方 JS 库：原生的 <audio controls> 体积为 0 KB，无需执行任何臃肿的 JS 逻辑，手机与电脑均能调用系统级解码芯片，省电且响应迅速。
HTTP Range 支持 (Status 206 Partial Content)：当你在播放器中拖动进度条时，浏览器会自动发送带 Range: bytes=start-end 请求头。Nginx 静态文件服务器原生支持 Range 响应，返回 206 Partial Content，无需下载整首音频即可从任意位置瞬间开始播放。
独立媒体存储策略：媒体文件存放在独立的 /media/ 目录下，与每次发布网站页面的 releases/ 隔离，避免每次部署博客时重复全量上传大型媒体。

下载备用链接：点击下载音频文件

编写可靠的自动化构建与原子发布脚本

2026-09-12T08:00:00+08:00

在部署静态网站时，最危险的操作莫过于直接在生产根目录执行带有 --delete 参数的 rsync。一旦构建损坏或网络在上传中间断开，访问者就会看到残缺不全甚至完全空白的网页。

本文演示一种简单、安全且广泛应用于专业工业界的原子软链接发布模型 (Atomic Symlink Deployment)。

1. 核心发布流程 (Shell)

以下是自动化发布脚本 publish.sh 的关键部分：

#!/usr/bin/env bash
set -euo pipefail
# 1. 严格预检查
./scripts/check.sh
# 2. 生产环境构建
pelican content -s publishconf.py
# 3. 创建带时间戳的版本目录并上传
RELEASE_TAG=$(date +"%Y%m%d%H%M%S")
REMOTE_DIR="/var/www/pelican-blog"
ssh dmit "mkdir -p ${REMOTE_DIR}/releases/${RELEASE_TAG}"
rsync -avz --delete output/ dmit:${REMOTE_DIR}/releases/${RELEASE_TAG}/
# 4. 原子符号链接切换 (Atomic Symlink Switch)
ssh dmit "ln -sfn ${REMOTE_DIR}/releases/${RELEASE_TAG} ${REMOTE_DIR}/current_tmp && \
 mv -Tf ${REMOTE_DIR}/current_tmp ${REMOTE_DIR}/current"
echo "==> 部署成功！当前版本: ${RELEASE_TAG}"

2. 静态死链与草稿校验器 (Python)

为了防止未完成的草稿（Status: draft）或者拼写错误的图片链接泄露到线上，我们在构建前使用检查器进行扫描：

import os
import re
import sys
def verify_markdown_posts(content_dir="content"):
has_error = False
for root, _, files in os.walk(content_dir):
for f in files:
if not f.endswith(('.md', '.markdown')):
continue
path = os.path.join(root, f)
with open(path, 'r', encoding='utf-8') as fp:
content = fp.read()
# 校验必需元数据
for key in ['Title:', 'Date:', 'Slug:']:
if not re.search(rf'^{key}', content, re.MULTILINE):
print(f"[Error] {path} 缺少必要元数据: {key}")
has_error = True
return not has_error
if __name__ == "__main__":
if not verify_markdown_posts():
sys.exit(1)
print("[OK] 内容元数据校验通过")

3. 前端交互与隔离样式 (CSS)

为了保证代码块在移动端屏幕上不会把整个页面撑爆产生横向滚动条，代码块内部必须显式声明横向自适应滚动：

pre {
 background: var(--nc-bg-2);
 border: 1px solid var(--nc-border);
 border-radius: 6px;
 padding: 1rem 1.2rem;
 overflow-x: auto;
 max-width: 100%;
 line-height: 1.45;
}
code {
 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

代码高亮由 Pelican 自带的 Pygments 预渲染生成，无需在客户端运行庞大的 JS 语法解析器，省电且速度极快。

响应式视频与浏览器原生硬件解码实践

2026-09-12T08:00:00+08:00

在移动设备与现代高分辨率屏幕上展示自制视频片段时，选择合适的编码容器与 HTML 标签属性至关重要。

原生视频演示

下方是一个标准的 H.264（Baseline/High profile）+ AAC 音频流 MP4 视频样本。它在 iOS Safari、Android Chrome、macOS 及 Windows 均能自动激活硬件加速：

您的浏览器不支持 HTML5 原生视频播放。

视频格式：MP4 (H.264 / AAC) | 包含 playsinline 属性，防止移动端强制全屏脱焦

移动端与编码关键注意点

playsinline 属性不可忽略：在 iPhone Safari 浏览器中，如果没有这个属性，点击播放往往会被操作系统强行拉起全屏独占播放器，打断页面阅读心流。加上 playsinline 可以实现内嵌原地流畅播放。
preload="metadata" 节约带宽：对于单篇文章包含多个视频的情况，默认设置为 metadata。浏览器只会提前拉取视频时长、尺寸和首帧关键信息，不会提前把几十兆的视频流全量缓冲进来，极大地节省了访客流量与服务器带宽。
HTTP Range 支持：拖动视频进度条同样依赖 Web 服务器的 Range 206 响应。经测试，无论是在 Chrome 还是 Safari 中拖到任意时间点，均可秒级响应解码。

如遇到网络限制，您亦可直接通过备用链接获取：下载原始视频

极简主义设计与静态网站的回归

2026-09-12T08:00:00+08:00

在这个动态应用框架、微前端和实时数据库盛行的时代，建立一个个人网站变得比以往任何时候都更加容易，但也变得异常臃肿。往往加载数十个庞大的 JavaScript 包、几十个跟踪脚本之后，访客才能看到几段纯文本内容。

“做减法往往比做加法更需要克制。当一个网站完全服务于文字本身，阅读才会重新成为一件纯粹而愉悦的事情。”

为什么选择静态生成器？

回归静态生成（如 Pelican、Hugo 等），核心收益在于三个维度：

极致的访问速度：编译出的文件是纯 HTML/CSS，首屏几乎在浏览器发出网络请求的瞬间即刻呈现（毫秒级）。
零维护与绝对安全：没有后端 MySQL、PHP 解释器或常驻进程，从物理层面上杜绝了 SQL 注入与远程代码执行漏洞。
内容即代码 (Content as Code)：所有文章都以纯 Markdown 格式保存在本地，通过 Git 做版本追踪与管理。

常用静态方案对比

我们可以通过下面的对比表格看清不同方案的取舍：

方案	语言生态	优势	适用场景
Pelican	Python / Jinja2	架构精炼，纯文本原生解析，插件信号完善	Pythonista、极客、独立博客
Hugo	Go	构建速度极快（千页秒级），二进制分发	超大规模文档站点
Astro	JavaScript / Node	组件化、部分激活 (Islands)	现代多组件交互前端

未来的计划

这个小站将作为我长期记录技术探索、交互设计与日常学习心得的根据地。欢迎通过 RSS / Atom 订阅更新，或在关于页面找到我的联系方式与我交流。