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.mdNew 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 中的!-- DESKTOP-DOWNLOAD-LINKS --与!-- MOBILE-DOWNLOAD-LINKS --占位符之间。这意味着每次发版更新 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-sectionWeb clipperChrome/Firefox 扩展存网页/截图为笔记front.mustache#customise-it-section定制插件、主题、富文本/Markdown 双编辑器、扩展 APIfront.mustache#your-note-section同步与多端Windows/macOS/Linux/Android/iOS 及终端版支持 Joplin Cloud、Dropbox、OneDrivefront.mustache#your-data-section开源 开放格式存储 E2EE 端到端加密front.mustache此外模板还有条件区块#work-together-sectionJoplin Cloud 共享协作与#made-in-france-sectionJoplin 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.mustacheHelp 与 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/docsyarn watchWebsite则在本地 8077 端口提供热更新预览。Help/News 页的修改则需从packages/doc-builder运行yarn start。新闻稿的 Front Matter 与日期推导本新闻稿头部包含一段 YAML front mattercreated: 2021-07-11T09:56:26.00000: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 matterupdateNews.ts历史豁免名单文件中的ignoredPostIdsupdateNews.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 生成逻辑。延伸阅读路径均为仓库相对路径首页模板全文Assets/WebsiteAssets/templates/front.mustache网站构建工具说明packages/tools/website/README.md下载按钮自动生成packages/tools/website/updateDownloadPage.ts新闻稿处理与 RSSpackages/tools/website/updateNews.ts下载页源文档readme/download.md安装详情readme/install.md【免费下载链接】joplinJoplin - the privacy-focused note taking app with sync capabilities for Windows, macOS, Linux, Android and iOS.项目地址: https://gitcode.com/GitHub_Trending/jo/joplin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考