Joplin 2021 官网改版：下载优先的首页设计与背后网站构建管线的实现细节-平芜编程栈

Joplin 2021 官网改版：下载优先的首页设计与背后网站构建管线的实现细节

【免费下载链接】joplinJoplin - the privacy-focused note taking app with sync capabilities for Windows, macOS, Linux, Android and iOS.项目地址: https://gitcode.com/GitHub_Trending/jo/joplin

本文以 Joplin 仓库中的一篇官方新闻稿 20210711-095626.md（"New website is ready!"）为核心，完整还原 Joplin 2021 年 7 月官方网站首页改版的设计目标——下载入口前置、核心功能分区展示、截图更新与 Press 媒体区。同时结合仓库中实际实现该官网的构建脚本（packages/tools/website）与 Mustache 模板，展示这些设计目标是如何被具体落地的，读完你能理解一个"以转化为核心"的产品落地页是如何规划，以及其下载按钮、RSS、新闻同步等周边工程细节的实现方式。

公告背景：旧网站为什么需要改版

这篇新闻稿记录的是 Joplin 官方网站（joplinapp.org）于 2021 年 7 月 11 日正式启用的改版首页。原稿首先解释了改版的动因，这一点值得完整保留：

旧网站是在过去几年里**有机生长（built organically）**出来的，虽然积累了大量有用内容，但导航困难，新用户很难从中弄清"Joplin 到底是什么"；
安装路径不清晰：下载按钮淹没在大量信息中，新用户不知道从哪里开始。

也就是说，改版的核心命题不是"内容更多"，而是信息架构的降维：把"这是什么应用"和"怎么下载"两件事放到用户视线的第一层级。

新首页的四个设计目标

原稿用四个要点描述了新首页的结构，下面逐一展开，并对照仓库中实际渲染首页的模板 front.mustache 验证其落地情况。

1. 让用户能轻易下载应用

原稿说明：首页顶部和底部各有一个大 Download 按钮，点击后跳转到下载页，下载页会根据用户的操作系统自动挑选对应版本。

从源码结构看，这个能力由两段代码共同支撑：

首页模板中，顶部区块与页面中多个位置都渲染了指向{{baseUrl}}/download/的Download the app按钮（见 front.mustache），底部同步区域再次出现Download it now按钮，对应"页面顶部和底部各有一个"的描述；
下载页的按钮并非手写死链，而是由 updateDownloadPage.ts 自动生成：createDownloadButtonsHtml()用正则从 install.md 中提取 Windows、Windows ARM64、macOS（含 M1/arm64）、Linux AppImage、Android、iOS 六类下载链接的<a>标签，为每个标签注入download-link-<平台>的 class，再由 updateDownloadPage.ts 的insertContentIntoFile注入到 download.md 中的与占位符之间。

这意味着每次发版更新 install.md 中的版本号后，下载页按钮会随之自动刷新，而前端 JS 再依据download-link-windows等 class 结合用户操作系统高亮/隐藏对应按钮——这正是原稿所说"自动根据操作系统挑选版本"的工程实现。

2. 核心功能分区展示

原稿指出：改版前曾在论坛发起"key features"讨论来收敛 Joplin 的核心卖点，首页因此划分为若干功能区：网页剪藏（web clipper）、开源、加密、同步、定制化、多媒体笔记。

对照 front.mustache 的区块划分，可以一一对应：

首页区块（模板中的 div id）	对应卖点	模板行号参考
`#multimedia-notes-section`	多媒体笔记：图片、视频、PDF、音频、公式与绘图、手机拍照入笔记	front.mustache
`#save-web-section`	Web clipper（Chrome/Firefox 扩展，存网页/截图为笔记）	front.mustache
`#customise-it-section`	定制：插件、主题、富文本/Markdown 双编辑器、扩展 API	front.mustache
`#your-note-section`	同步与多端：Windows/macOS/Linux/Android/iOS 及终端版，支持 Joplin Cloud、Dropbox、OneDrive	front.mustache
`#your-data-section`	开源 + 开放格式存储 + E2EE 端到端加密	front.mustache

此外模板还有条件区块#work-together-section（Joplin Cloud 共享协作）与#made-in-france-section（Joplin Cloud 位于法国、受欧盟隐私法保护），这些是改版后迭代加入的区块，同样延续了"一个卖点一个分区"的结构。

3. 更新顶部截图

原稿提到：旧首页顶部的截图是 2016 年应用发布前的开发版，过于陈旧；新截图展示了一个"虚构的复古钢琴店开业计划"——包含任务、表格、文档和图片，用来同时展示 Joplin 的多项功能。这一创意也呼应了项目名致敬的作曲家 Scott Joplin。从模板看，顶部图片通过<picture>元素提供 webp/png、1x/2x/4x 多分辨率源集（home-top-img*.webp/home-top-img*.png，见 front.mustache），并针对英文版/中文版准备了不同的顶部图（home-top-img与home-top-img-cn两套源集），体现了响应式图片与本地化截图的精细化处理。

4. Press 媒体区

原稿最后一点：新网站包含 Press 区，收录媒体对 Joplin 的报道摘录。其实现位于 pressCarousel.ts，该函数返回一组媒体摘录数据（媒体来源、作者、引述正文、媒体 logo 图与文章链接），模板中#in-the-press-section将桌面端（pressCarouselRegular）与移动端（pressCarouselMobile）分别渲染为 Bootstrap carousel（见 front.mustache），由 pressCarouselItem.mustache 渲染每条摘录。

标语（tagline）的由来与首页描述

原稿感谢了参与标语讨论投票的社区成员，标语与下方的应用描述共同"收敛"出了首页的第一屏文案。模板中第一屏即为：

Free your notesJoplin is an open source note-taking app. Capture your thoughts and securely access them from any device.

（见 front.mustache）这段带translateclass 的文案说明标语与描述文本已纳入官网的翻译体系（配合 site.css 与前端脚本做多语言处理）。

仓库侧：官网是如何构建的

这篇新闻稿本身也是官网 News 页的一部分，其生成流程恰好完整展示了仓库的"文档即网站"管线，值得作为实现细节展开。

构建入口

packages/tools/website/README.md 说明了整体架构：

大部分页面是把/readme目录下的 Markdown 渲染成 HTML；
首页、Plans 页等复杂页面用 Mustache 模板生成（即上文分析的 front.mustache）；
Help 与 News 页由 Docusaurus 构建。

对应仓库根 package.json 中的脚本：

"buildWebsite": "node ./packages/tools/website/processDocs.js --env prod && node ./packages/tools/website/build.js && yarn buildPluginDoc && yarn buildSettingJsonSchema", "watchWebsite": "nodemon --delay 1 --watch Assets/WebsiteAssets --watch packages/tools/website ... --exec \"node packages/tools/website/build.js && http-server --port 8077 ../joplin-website/docs\""

即：yarn buildWebsite按序执行 Markdown 处理（processDocs.ts）与模板构建（build.ts），产物输出到joplin-website/docs；yarn watchWebsite则在本地 8077 端口提供热更新预览。Help/News 页的修改则需从packages/doc-builder运行yarn start。

新闻稿的 Front Matter 与日期推导

本新闻稿头部包含一段 YAML front matter：

created: 2021-07-11T09:56:26.000+00:00 source_url: https://www.patreon/posts/new-website-is-53554295

解析规则定义在 frontMatter.ts 的FrontMatter接口中，字段包括created、updated、source_url、forum_url、tweet，以及 Docusaurus 使用的sidebar_label、date、title等。新闻日期获取逻辑在 news.ts：优先取 front matter 中的created，否则从文件名解析（如20220224-release-2-7.md的前 8 位即YYYYMMDD日期）。

新闻稿同步论坛与 RSS 生成

updateNews.ts 的头部注释说明了它的职责：遍历readme/news下的 Markdown，逐条发布/更新到 Discourse 论坛，并回写 forum 链接。关键实现：

标题提取：updateNews.ts 的getPostContent()要求每个新闻稿的第一行必须以#开头，否则抛错（"Cannot extract title from post"）——这解释了为什么readme/news下每篇文章都有统一的 H1 格式；
幂等同步：脚本用external_id（即文件名去掉扩展名）查询论坛是否已存在该帖；存在则比对标题与正文，无变化跳过、有变化则更新并标注edit_reason: 'Auto-updated by script'；不存在则创建新主题并把生成的 forum 链接写回 front matter（updateNews.ts）；
历史豁免名单：文件中的ignoredPostIds（updateNews.ts）列出了早期新闻稿 id——注意本新闻稿20210711-095626正在此名单中，说明它属于"仅保留在网站/RSS、不再回写论坛"的历史归档；
RSS 生成：generateRssFeed()取最新 20 条新闻稿，将正文 Markdown 转为 HTML，生成 rss.xml，其中还有一处工程细节——手动替换<lastBuildDate>为最新一条新闻的日期（updateNews.ts），避免"内容没变但构建时间变了"导致 RSS 缓存失效。

小结与延伸阅读

这篇 2021 年的新闻稿虽然短，但它完整记录了 Joplin 官网从"内容堆叠型"转向"转化优先型"落地页的决策过程：顶部/底部双 Download 按钮、按功能拆分的卖点区块、以钢琴店计划为主题的新截图、Press 媒体轮播，以及由社区投票收敛出的标语。而仓库中的 packages/tools/website 目录与 Assets/WebsiteAssets 资产目录，则提供了上述每个设计点的可验证实现：Mustache 首页模板、正则提取 + 占位符注入的下载按钮管线、Docusaurus 新闻页、论坛同步脚本与 RSS 生成逻辑。

延伸阅读路径（均为仓库相对路径）：