NESNILNEHC 的个人网站

每周见闻（2025 年第 4 期）

Mon, 27 Jan 2025 06:26:00 +0000

本期要点

本周推荐一个在线工具，可以查询您的本地公网 IP：https://cip.cc/

工具

查询本地公网 IP 的工具：https://cip.cc/。除了通过浏览器直接访问使用，还可以通过终端查询：

命令行查询:
- UNIX/Linux: # curl cip.cc
- Windows: > telnet cip.cc
- Windows: > ftp cip.cc
命令行查询 (纯 ip):
- UNIX/Linux: # curl ip.cip.cc

使用 PlantUML、Mermaid、Flowchart 和 Graphviz 绘制技术图表

Sun, 26 Jan 2025 06:00:00 +0000

使用 PlantUML、Mermaid、Flowchart 和 Graphviz 绘制技术图表

在现代软件开发和项目管理中，“图”并不只有流程图。需求分析阶段会用用户旅程图、状态图和决策树；架构设计阶段会用组件图、部署图、C4 图和依赖图；研发协作阶段会用时序图、甘特图、看板、Git 分支图和因果分析图。

这篇文章的主旨是：先判断要表达哪类关系，再选择合适的图，最后才选择绘图工具。 工具只是落地方式，图的类型才决定表达是否准确。

本文结构如下：

先给出快速结论，方便直接选图和选工具。
再说明如何根据表达目标选择图类型。
然后比较 PlantUML、Mermaid、flowchart.js 和 Graphviz 的能力边界。
最后给出落地使用建议和一个 PlantUML 活动图示例。

本文聚焦四类常见的文本绘图工具：

PlantUML：偏软件工程建模，尤其适合 UML、架构、业务流程、数据结构和工程交付物。
Mermaid：偏 Markdown 文档内嵌，适合快速表达流程、时序、状态、ER、甘特、看板、图表和轻量架构。
flowchart.js：只做简单流程图，语法直观，适合浏览器里快速渲染标准流程。
Graphviz：偏通用图布局引擎，适合依赖关系、网络拓扑、调用图、状态空间、知识图谱等节点和边很多的图。

结论摘要

如果只想快速决策，可以先记住两句话：

不确定用什么图时，先问：我要表达的是顺序、交互、状态、结构、部署、时间、层级、复杂关系，还是数据。
不确定用什么工具时，默认 Mermaid；需要严谨工程模型用 PlantUML；节点关系太复杂用 Graphviz；只做简单网页流程图再考虑 flowchart.js。

精简速查：

场景	图类型	工具
讲顺序	流程图、活动图	Mermaid、PlantUML
讲交互	时序图	PlantUML、Mermaid
讲状态	状态图	PlantUML、Mermaid
讲结构	C4 图、组件图、类图、ER 图	PlantUML、Mermaid
讲部署和网络	部署图、拓扑图、依赖图	PlantUML、Graphviz
讲计划	甘特图、时间线	Mermaid、PlantUML
讲拆解	WBS、Mindmap、TreeView	PlantUML、Mermaid
讲复杂关系	有向图、无向图、知识图谱	Graphviz
讲数值	Sankey、XY Chart、Radar、Treemap	Mermaid

第一步：选图

选图的核心是判断“关系类型”。一张好图只回答一个主要问题：顺序、交互、状态、结构、部署、时间、层级、关系或数据。不要让一张图同时承担所有解释任务。

想表达的问题	推荐图类型	适合场景
事情怎么一步步发生	流程图、活动图、用户旅程图	业务流程、审批流、研发流程、用户操作路径
谁和谁按什么顺序交互	时序图	接口调用、登录认证、支付链路、消息队列、异步回调
对象有哪些状态，如何迁移	状态图	订单、工单、任务、设备、账号、连接会话生命周期
系统由哪些部分组成	C4 图、组件图、架构图	系统上下文、服务边界、模块职责、平台架构
代码或领域对象如何关联	类图、对象图、ER 图	领域模型、数据库表关系、对象结构
服务部署在哪里，网络如何连接	部署图、网络拓扑图、依赖图	生产部署、服务拓扑、上下游影响分析
时间计划和里程碑如何安排	甘特图、时间线、Chronology	项目计划、版本路线、事件复盘
任务或知识如何拆解	WBS、Mindmap、TreeView、文件树	需求拆解、任务拆解、知识整理、目录展示
很多节点之间有什么关系	有向图、无向图、知识图谱	包依赖、调用关系、资源关系、状态空间
数量、流量或比例如何变化	Sankey、Pie、XY Chart、Radar、Treemap	流量流向、指标趋势、能力对比、结构占比

选图时还要考虑读者和抽象层级：

面向业务方：少节点、少术语，优先流程图、用户旅程图、时间线。
面向研发团队：保留服务名、接口名、状态名和异常分支，优先 C4 图、组件图、时序图、状态图。
面向运维和排障：强调部署位置、网络连接、依赖关系和调用链，优先拓扑图、部署图、依赖图。
面向长期维护：节点命名要稳定，避免跟随临时代码变量频繁变化。

如果只是字段清单、接口参数、简单对比，表格通常比图更清楚。只有当“关系、顺序、层级、依赖、状态迁移或数量流向”是重点时，图才真正有价值。

第二步：选工具

选工具时，不要只看“能不能画”，还要看文档平台是否支持、团队是否熟悉、图是否会长期维护、是否需要 CI 渲染或校验。

工具	能力范围	最适合的图	优点	局限
PlantUML	UML、架构、流程、计划、数据结构	UML、C4、活动图、组件图、部署图	工程语义强，适合正式设计文档	语法体系较大，环境依赖 Java/渲染器
Mermaid	Markdown 内嵌的多类型图表	流程图、时序图、ER、甘特、看板、轻量架构	文档平台支持广，上手快	复杂图控制力有限，不同平台支持版本可能不同
flowchart.js	标准流程图	简单业务流程、判断流程	DSL 简单，浏览器集成容易	只适合流程图
Graphviz	通用图布局	依赖图、网络图、拓扑图、大规模关系图	布局引擎强，适合复杂节点关系	语义不如 UML 工具明确，样式调优需要经验

工具选择建议：

README、博客、知识库、轻量方案，优先 Mermaid。
正式设计文档、UML、C4、部署、状态、活动图，优先 PlantUML。
依赖图、拓扑图、调用图、大规模节点关系，优先 Graphviz。
网页里只展示简单标准流程图，并且不需要其他图类型，可以用 flowchart.js。
团队已有统一文档平台时，先看平台支持的渲染版本。Mermaid 尤其要注意版本差异。
图会长期维护时，优先选择文本 DSL 清晰、团队熟悉、CI 能渲染或校验的工具。
一张图超过一个屏幕还看不清时，不要继续调样式，应该拆图。常见拆法是“业务流程图 + C4/组件图 + 时序图 + 部署图”。

工具能力

PlantUML

PlantUML 早期以 UML 出名，但现在已经是比较完整的工程图 DSL。它适合写进设计文档、架构决策记录、需求说明和接口文档。

PlantUML 适合绘制：

UML 图：时序图、用例图、类图、对象图、活动图、组件图、部署图、状态图、时序约束图。
架构和建模图：C4 图、Archimate、实体关系图、信息工程 IE 图、Chen ER 图。
流程和计划图：活动图、甘特图、Chronology、WBS、MindMap。
工程辅助图：网络图、文件树、JSON/YAML 数据结构、EBNF、正则表达式、Wireframe/UI Mockup、Ditaa、SDL、数学公式。

Mermaid

Mermaid 的优势是贴近 Markdown。GitHub、GitLab、Obsidian、语雀、很多文档平台和静态站点都能直接或通过插件渲染 Mermaid。Mermaid 当前支持的类型已经很多，不再只是流程图和时序图。

Mermaid 适合绘制：

软件设计图：Flowchart、Sequence Diagram、Class Diagram、State Diagram、Entity Relationship Diagram、Requirement Diagram、C4 Diagram、Architecture Diagram、Packet、Block Diagram。
项目和协作图：User Journey、Gantt、Timeline、Kanban、GitGraph、Mindmaps。
分析和数据图：Pie Chart、Quadrant Chart、Sankey、XY Chart、Radar、Treemap、Venn、Ishikawa、Wardley Map。
建模补充：ZenUML、Event Modeling、TreeView。

实践注意：

Mermaid 很适合“够用即可”的图，不适合把复杂架构画到像专业制图软件一样精细。
新版本 Mermaid 支持为部分图选择布局和外观，例如 flowchart 和 state diagram 可使用 Dagre 或 ELK 布局；复杂流程图可尝试 ELK 减少线条交叉。
写 Mermaid 时避免节点文字裸写特殊词和复杂符号。比如流程图里的 end 容易被解析器误解，稳妥做法是给文本加引号。

flowchart.js

这里的 flowchart.js 不是通用绘图语言，而是一个专门画简单流程图的浏览器/终端 SVG 渲染器。

flowchart.js 适合绘制：

开始/结束节点。
普通操作节点。
输入、输出、输入输出节点。
子流程节点。
条件判断节点。
并行节点。
带方向的连线。

Graphviz

Graphviz 的重点不是某一种业务图，而是把节点和边自动布局。它用 DOT 语言描述有向图、无向图、子图和集群，再通过不同布局引擎生成图。

Graphviz 适合绘制：

有向依赖图：模块依赖、包依赖、构建依赖、任务 DAG、调用链。
无向关系图：社交网络、知识图谱、资源关联、实体关系探索。
层级图：组织结构、决策树、有限状态空间、编译器 AST。
网络拓扑图：服务节点、路由关系、集群连接。
复杂集群图：按子系统、团队、服务边界分组的大图。

Graphviz 的布局引擎决定了图的气质：

dot：层级/分层有向图，适合依赖图、流程 DAG、调用链。
neato：弹簧模型布局，适合一般网络关系。
fdp：力导向布局，适合无向图。
sfdp：可扩展力导向布局，适合大规模图。
circo：环形布局，适合循环关系。
twopi：径向布局，适合中心向外扩散的关系。
osage：集群图布局，适合分组明显的图。
patchwork：矩形树图，适合按权重展示分组面积。

落地使用

编辑和预览

在实践中，可以通过下面几种方式使用这些绘图工具：

Visual Studio Code：PlantUML 插件可以实时预览 UML 图；Markdown Preview Mermaid Support 支持在 Markdown 中预览 Mermaid 图。
语雀、Obsidian、GitHub、GitLab 等文档平台：适合直接在文档里嵌入 Mermaid；使用前要确认平台支持的 Mermaid 版本。
命令行和 CI：适合将 PlantUML、Mermaid CLI 或 Graphviz 加入构建流程，保证图能随文档一起生成和检查。

写作建议

一张图只回答一个核心问题。
图名要描述结论，而不只是描述类型，例如“订单状态流转图”比“状态图”更清楚。
节点名要稳定，尽量使用业务概念或系统边界，不要使用临时变量名。
大图要拆分：业务流程、系统结构、接口交互、部署拓扑分别画。
复杂图要配合文字解释，不要让读者自己猜重点。

示例

下面是一个 PlantUML 活动图示例，用于表达软件研发流程。这个例子适合展示“流程推进 + 并行活动 + 关键交付物”，因此用活动图比单纯的节点关系图更合适。

@startuml
skinparam defaultTextAlignment left
skinparam noteBackgroundColor #F9F9F9
skinparam noteBorderColor #CCCCCC

title 软件研发流程

:需求收集;
note right
    **关键活动:**
    1. 收集产品需求
    2. 进行市场分析
    3. 进行用户反馈
end note
note left
    **交付物:**
    1. 用户故事
    2. 需求池
end note

:迭代规划;
note right
    **关键活动:**
    1. 讨论需求
    2. 组织需求讨论会
    3. 分析市场数据
    4. 制定迭代计划
end note
note left
    **交付物:**
    1. 迭代路线图
    2. 下个迭代计划
end note

:设计;
note right
    **关键活动:**
    1. 制定系统架构
    2. 设计 *
    3. 小规模评审（产品内部）*
    4. 大规模评审 *
    5. 迭代启动会 *
end note
note left
    **交付物:**
    1. 设计文档
      - 业务流程图
      - 实体设计
      - 原型和平面设计
      - 开放接口设计
      - 作业设计
      - 系统参数设计
    2. 产品原型
end note

split
    :开发;
    note right
        **关键活动:**
        1. 开发任务拆解会 *
        2. 编写代码
        3. 进行单元测试
        4. 进行代码审查
    end note
    note left
        **交付物:**
        1. 可运行的软件代码
    end note
split again
    :测试;
    note right
        **关键活动:**
        1. 测试任务拆解会 *
        2. 制定测试计划 *
        3. 撰写测试用例 *
        4. 测试用例评审 *
        5. 执行功能测试 *
        6. 执行接口测试 *
        7. 执行性能测试
        8. 执行安全测试 *
        9. 执行 UI 测试 *
        10. 执行兼容性测试
        11. 执行回归测试 *
    end note
    note left
        **交付物:**
        1. 测试报告
        2. 缺陷跟踪列表
    end note
end split

:验收发布;
note right
    **关键活动:**
    1. 对软件进行最终的验收
    2. 准备发布所需的文档和材料
    3. 将经过测试的产品发布给用户
    4. 进行后续的用户支持和反馈收集
    5. 迭代评审会 *
end note
note left
    **交付物:**
    1. 发布的软件产品
    2. 相关文档
end note

:部署;
note right
    **关键活动:**
    1. 部署软件产品到生产环境中
end note

@enduml

效果图：

参考资料

每周见闻（2025 年第 2 期）

Mon, 20 Jan 2025 06:26:00 +0000

本期要点

MasterGo AI：快速生成网页设计图 AI 工具

Trae AI v1.0.0：引入 Builder 模式的智能开发助手

工具

MasterGo AI：快速生成网页设计图 AI 工具

MasterGo AI 是一款网页在线设计工具，融合了 AI+ 设计系统，能够根据网页产品描述快速生成网页设计图。它为产品经理、设计师和开发团队提供了从概念到产品的完整解决方案，显著提升设计效率、激发创意灵感、优化设计流程并促进团队协作。

消息来源：稀土掘金

Trae AI v1.0.0：引入 Builder 模式的智能开发助手

2025 年 1 月 20 日 - Trae AI 发布了 v1.0.0 版本，引入全新的 Builder 模式，支持自动化分析、规划、执行开发需求，并提供实时预览。该版本通过 Builder 模式实现了智能化的开发流程，为开发者带来更高效的编程体验。

消息来源：Trae AI 更新日志

Mac 卸载应用后打开方式菜单残留问题的解决方法

Fri, 17 Jan 2025 03:00:57 +0000

在 Mac 上卸载应用程序后，有时会发现在右键菜单的”打开方式”中仍然存在已卸载的应用。这是因为 Launch Services 数据库中保留了这些应用的记录。本文介绍如何通过重置 Launch Services 数据库来解决这个问题。

什么是 Launch Services？

Launch Services 是 macOS 的一个系统服务，负责管理应用程序和文件类型之间的关联关系。它维护着”打开方式”菜单中的应用程序列表，当这个数据库出现问题时，可能会导致已卸载的应用仍然显示在打开方式列表中。

解决方法

打开终端（Terminal）应用
- 使用 Spotlight（⌘ + 空格键）
- 输入”终端”或”Terminal”并回车

输入以下命令：

/System/Library/Frameworks/CoreServices.framework/Frameworks/LaunchServices.framework/Support/lsregister -kill -r -domain local -domain system -domain user

按回车执行命令
- 命令执行过程中可能需要等待一会儿
- 命令会重建 Launch Services 数据库
重启电脑
- 重启后，系统会使用新的 Launch Services 数据库
- 已卸载的应用应该不会再出现在打开方式列表中

命令说明

这个命令的各个参数的含义：

-kill：终止 Launch Services 数据库
-r：递归扫描指定的域
-domain local：扫描本地域
-domain system：扫描系统域
-domain user：扫描用户域

注意事项

这个操作是安全的，不会删除任何应用程序或文件
重建数据库后，系统可能需要重新扫描应用程序来建立文件关联
如果问题仍然存在，可以尝试重复这个过程

每周见闻（2025 年第 1 期）

Tue, 14 Jan 2025 06:26:00 +0000

本期要点

好大夫在线正式加入蚂蚁集团

京东健康发布医疗大模型产品体系”AI京医”

NVIDIA 发布基于 Grace Blackwell 架构的 Project DIGITS 个人 AI 超级计算机

清华智能产业研究院”Agent Hospital”首批 AI 医生上线内测

新闻

好大夫在线正式加入蚂蚁集团

2025-01-13，北京 - 在 2025 中国好大夫峰会上，互联网医疗公司好大夫在线正式宣布加入蚂蚁集团。这是两家公司在 2024 年下半年被爆出收购消息之后的首次合体，意味着好大夫在线在成立 19 年之后正式归属于蚂蚁集团。

主要亮点包括：

加入原因
- 双方价值观一致
- 蚂蚁集团支付宝具备运营互联网医疗业务的能力和资源
- 支付宝已打开医保和商保的支付场景
未来发展
- 将加大技术领域研发投入和产品创新
- 全方位服务好医生群体和患者
- 活动现场发布了能帮助医生工作的AI助理产品
平台数据
- 目前已有 28 万名医生在平台注册
- 累计服务患者数量达 9100 万名
- 四大核心功能：患者管理、规范化管理、团队培养、科学研究

蚂蚁集团支付宝副总裁张俊杰表示，好大夫在线将作为支付宝数字医疗健康事业部的一个部门存在，未来将结合支付宝的技术和资源优势继续升级产品。

消息来源：界面新闻

京东健康发布医疗大模型产品体系”AI京医”

2025-01-11，北京 - 京东健康正式发布医疗大模型产品体系”AI京医”。该产品体系包含两大核心产品：面向医生的 AI 诊疗助手 2.0 和面向科研人员的 AI 科研助手。

AI 诊疗助手 2.0 具备以下特点：

支持全科室疾病诊疗知识问答
提供智能病历质控
辅助医生撰写病历、处方等医疗文书
为患者生成个性化健康教育方案

AI 科研助手则专注于以下功能：

智能文献检索与解读
临床研究方案设计
医学论文写作辅助
临床试验数据分析

京东健康表示，”AI京医”的发布将进一步提升医生线上执业效率，让患者获得更便捷、专业的医疗健康服务体验。

消息来源：中国财经网

NVIDIA Project DIGITS：首款基于 Grace Blackwell 架构的个人 AI 超级计算机

2025-01-06，美国拉斯维加斯 - NVIDIA 在 CES 2025 大会上发布了 Project DIGITS，这是首款面向个人用户的 AI 超级计算机，采用最新的 Grace Blackwell 架构。主要亮点包括：

性能突破：单机算力突破 1000 TFLOPS，支持 200B 以上大模型本地部署
能效优化：采用全新散热系统，整机功耗控制在 800W 以内
开发者友好：预装 NVIDIA AI Enterprise 软件套件，支持主流深度学习框架
普惠定价：起售价 9999 美元，面向个人开发者与中小企业用户

NVIDIA 表示，Project DIGITS 的发布将极大降低 AI 开发门槛，推动个人 AI 开发的普及。该产品计划于 2025 年第二季度正式发售。

消息来源：NVIDIA 中国博客

近闻

Agent Hospital 首批 AI 医生上线内测

2024-11-18，北京 - 清华大学智能产业研究院（AIR）智慧医疗团队开发的”紫荆 AI 医生”系统（Agent Hospital）已开启内部测试。系统目前已构建了超过 50 万个来自不同国家地区、覆盖各个年龄段、患有不同疾病的 AI 患者，以及 42 位 AI 医生。每个科室设置了 2 位 AI 医生，分别来自国内和国际，以适应不同国家和地区的诊断标准和治疗方案。

系统设置了游客、患者和医生三种模式。目前游客模式对公众开放，患者模式仅对定向邀请的专业人士开放，医生模式正在开发中。系统对 AI 医生的核心能力进行了分类评估，包括诊断、治疗和对话三个方面，目前仅开放对 AI 医生诊断能力的测试。

“紫荆 AI 医生”系统预计在 2025 年第一季度启动公开测试，并在 2025 年上半年对公众开放使用。目前系统已在紫荆智康官网上线。

消息来源：清华大学智能产业研究院

Jekyll 博客优化指南：功能增强与用户体验改进

Tue, 14 Jan 2025 03:11:28 +0000

前言

在使用 Jekyll 搭建博客的过程中，经常需要添加一些基础功能和改进用户体验。本文记录了几个常用的优化配置，包括：

功能增强：搜索和订阅功能
布局优化：移动端适配
文档规范：统一的排版标准
性能优化：加载速度优化

功能增强

1. 添加搜索功能

目的：

在文章数量较多时，快速定位特定文章
按关键词查找相关内容
减少用户翻页次数

方案选择：

Algolia Search：第三方搜索服务，每月有 10000 次免费搜索额度
Simple Jekyll Search：生成 JSON 索引文件，前端 JavaScript 实现搜索
Lunr.js：纯前端搜索，支持中文分词，适合小型博客

这里选择 Algolia Search 的原因：

搜索速度快，支持实时搜索
自带分词功能，支持中文搜索
有开箱即用的 UI 组件
配置简单，维护成本低

实现步骤：

安装依赖：

# 在 Gemfile 中添加
gem 'jekyll-algolia'

# 安装依赖
bundle install

配置 _config.yml：

# 添加 Algolia 搜索配置
algolia:
  application_id: YOUR_APP_ID
  index_name: YOUR_INDEX_NAME
  search_only_api_key: YOUR_SEARCH_KEY

创建搜索页面 search.html：

---
layout: page
title: 搜索
---
<div id="search-searchbar"></div>
<div id="search-hits"></div>

2. 配置 RSS 订阅

目的：

让用户通过 RSS 阅读器订阅博客更新
支持文章聚合到其他平台
提供标准的文章输出格式

方案选择：

Jekyll Feed：Jekyll 官方插件，输出标准 RSS 2.0 格式
自定义 RSS 模板：可以自定义输出格式，但需要自己维护

选择 Jekyll Feed 的原因：

配置简单，只需添加插件即可
自动处理文章更新
输出格式符合 RSS 标准

实现步骤：

安装插件：

# 在 Gemfile 中添加
gem 'jekyll-feed'

# 安装依赖
bundle install

更新 _config.yml：

plugins:
  - jekyll-feed

# RSS 配置
feed:
  path: feed.xml
  posts_limit: 20

布局优化

1. 响应式设计

目的：

适配手机和平板等移动设备
确保文章在小屏幕上也能正常阅读
减少横向滚动

方案说明：

设置 viewport 确保正确缩放
使用相对单位适配不同屏幕
在小屏幕上调整导航栏和侧边栏位置

实现步骤：

在 _sass 目录下创建响应式样式文件：

// _sass/_responsive.scss
@media screen and (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  
  .sidebar {
    width: 100%;
    margin-top: 20px;
  }
}

引入样式文件：

// assets/css/style.scss
@import "responsive";

2. 侧边栏实现

目的：

展示文章归档，方便按时间浏览
显示文章分类，便于主题浏览
在合适位置展示其他导航信息

方案说明：

使用 Liquid 模板语言处理数据
文章按年份分组归档
移动端时调整位置到主内容下方

实现步骤：

创建 _includes/sidebar.html：

<div class="sidebar">
  <h2>归档</h2>
  {% assign postsByYear = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
  
  <ul class="archive-list">
    {% for year in postsByYear %}
      <li>
        <span class="year"></span>
        <span class="count">()</span>
      </li>
    {% endfor %}
  </ul>
</div>

在布局文件中引入侧边栏：

<!-- _layouts/default.html -->
<div class="container">
  <div class="content">
    {{ content }}
  </div>
  {% include sidebar.html %}
</div>

文档规范

1. 中文排版规范

目的：

统一全站的排版风格
提高中英文混排的可读性
便于后期维护和修改

规范要点：

在 Markdown 文件中遵循以下规则：

中英文之间添加空格：在 GitHub 上开发程序
使用全角中文标点：下载源码，开始编码。
使用半角数字：共发布了 10 篇文章

统一日期格式：

{{ post.date | date: "%Y年%-m月%-d日" }}

2. 文件命名规范

目的：

统一文件命名方式
避免文件名冲突
方便文件管理和查找

规范说明：

文章文件：YYYY-MM-DD-title-with-hyphen.md
页面文件：lowercase-with-hyphen.md
样式文件：_component-name.scss

性能优化

1. Jekyll 配置优化

目的：

减少站点构建时间
减少不必要的文件生成
优化资源文件大小

优化方案：

使用增量构建减少构建时间
排除不需要处理的文件
压缩图片等静态资源

实现步骤：

更新 _config.yml：

# 提升构建性能
incremental: true
profile: true

# 排除不需要的文件
exclude:
  - Gemfile
  - Gemfile.lock
  - node_modules
  - vendor

优化图片资源：

# 安装图片优化工具
npm install -g imagemin-cli

# 优化图片
imagemin images/* --out-dir=images/optimized

总结

完成以上配置后，博客将具备：

文章搜索和 RSS 订阅功能
移动端适配和侧边栏导航
统一的文档规范
更快的加载速度

根据实际需求，可以选择性地实施这些优化方案。

参考资源

优化 Jekyll 站点的导航菜单和分类系统

Mon, 13 Jan 2025 13:33:45 +0000

在建设个人博客网站时，良好的导航系统和清晰的内容分类对于提升用户体验至关重要。本文将介绍如何优化 Jekyll 站点的导航菜单和分类系统，让网站结构更加清晰、易用。

目录结构优化

首先，我们需要合理组织网站的目录结构：

your-site/
├── _config.yml          # 配置文件
├── _pages/             # 存放页面文件
│   ├── about.markdown
│   ├── news.md
│   ├── tech.md
│   └── tutorials.md
├── _posts/             # 按分类存放文章
│   ├── news/
│   ├── tech/
│   └── tutorials/
└── assets/             # 存放样式和资源文件
    └── css/
        └── style.scss

统一导航菜单

1. 配置页面属性

在每个页面的 front matter 中设置以下属性：

---
layout: page
title: "页面标题"      # 显示在页面顶部的标题
nav_title: "导航标题"  # 显示在导航菜单中的标题
nav_order: 1          # 导航菜单中的显示顺序
permalink: /url路径/   # 页面的永久链接
---

2. 配置导航顺序

在 _config.yml 中设置导航菜单的顺序：

header_pages:
  - _pages/news.md
  - index.md
  - _pages/tech.md
  - _pages/tutorials.md
  - _pages/about.markdown

优化分类系统

1. 统一分类名称

在文章的 front matter 中使用统一的分类名称：

---
categories: tech  # 使用 tech, tutorials, News
tags: [标签1, 标签2]    # 使用标签提供更细致的分类
---

2. 创建分类页面

为每个分类创建独立的页面，例如 _pages/tech.md：

---
layout: page
title: tech
nav_title: tech
nav_order: 3
permalink: /tech/
---

{% for post in site.categories.tech %}
  <article class="post-entry">
    <h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
    <div class="post-meta">{{ post.date | date: "%B %-d, %Y" }}</div>
    {% if post.excerpt %}
      <div class="post-excerpt">{{ post.excerpt }}</div>
    {% endif %}
  </article>
{% endfor %}

最佳实践

保持命名一致性
- 分类名称统一使用小写：news、tutorials、tech
使用标签系统
- 通过标签提供更细致的分类
- 标签可以反映文章的具体主题、技术栈等
目录组织
- 页面文件统一放在 _pages 目录
- 文章按分类存放在 _posts 的子目录中
导航顺序
- 使用 nav_order 控制显示顺序
- 在 _config.yml 中统一管理导航菜单

效果展示

优化后的网站具有以下特点：

导航菜单
- 所有页面显示统一的导航菜单
- 菜单项按照设定的顺序排列
- 导航标题简洁明了
分类系统
- 每个分类有独立的展示页面
- 文章按类别整齐归档
- 标签系统提供更细致的分类
目录结构
- 文件组织清晰
- 便于维护和管理
- 符合 Jekyll 最佳实践

总结

通过以上优化，我们的 Jekyll 站点实现了：

导航菜单的一致性和可控性
分类系统的清晰和规范
目录结构的优化和标准化

这些改进不仅提升了网站的可维护性，也大大改善了访问者的使用体验。如果你也在使用 Jekyll 建站，不妨参考这些优化方案，相信会对你有所帮助。

每周见闻（2023 年第 2 期）

Sat, 11 Mar 2023 16:00:00 +0000

工具

Drop

使用 Drop 在手机和桌面设备之间共享文件和消息。只需拖放文件即可立即共享或在 Microsoft Edge 中浏览时向自己发送笔记并保持顺畅。

每周见闻（2023 年第 1 期）

Sat, 04 Feb 2023 16:00:00 +0000

工具

immersive-translate

沉浸式双语网页翻译扩展

主要特征：
- 智能识别网页主内容区，区别于同类插件翻译网页所有的区域，这可以极大增强译文的阅读体验，类似于浏览器的沉浸式阅读模式，所以该扩展被命名为“沉浸式翻译”
- 双语显示，中文/英文对照（按照段落分割，或自定义段落长度，按照每句话对照翻译）
- 为常见主流网站做了定制优化，比如 Twitter，Reddit，Discord, Gmail, Telegram, Youtube, Hacker News 等，我相信经过这些优化后，你会爱上阅读外语信息。
- 支持 10+ 种常见的翻译服务，包括 Deepl, 谷歌, 腾讯翻译君,火山翻译，彩云小译等.
- PDF 文件双语翻译支持
- 配合 ePub 在线阅读网站https://epub-reader.online/ 或 https://readwise.io/read 即可实现双语阅读国外电子书
- 多种译文样式可选择，个性化你的翻译体验。

新知

英文破折号的分类及作用 ^[1]

参考

英文破折号都有哪些作用？

如何下载 Kindle 电子书

Tue, 31 Jan 2023 09:38:00 +0000

由于 Kindle 宣布 2023 年 06 月 30 日停止在中国电子书店的运营^[1]，我想将购买的一些电子书下载存档。

步骤

下载电子书
1. 方法一
  1. 下载 Kindle Download Helper ^[2]
  2. 安装或解压缩 Kindle Download Helper
  3. 登录 Amazon 官网
  4. 获取 Cookie
  5. 获取 CSRF Token
  6. 运行 Kindle Download Helper（这里遇到了一个坑）
2. 方法二
  1. 下载 Kindle for PC v1.17 ^[3]
  2. 安装 Kindle for PC v1.17，并取消自动升级功能
去除 Kindle 电子书的 DRM 版权保护
1. 下载安装 Calibre
2. 下载 DeDRM Tools
3. 安装 DeDRM Tools 插件到 Calibre
4. 重启 Calibre
5. 批量转换成 ePub 格式保存