尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Joplin 使用入门:三栏界面、Markdown 笔记与笔记本/标签组织体系

Joplin 使用入门:三栏界面、Markdown 笔记与笔记本/标签组织体系 Joplin 使用入门三栏界面、Markdown 笔记与笔记本/标签组织体系【免费下载链接】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 欢迎笔记本中的核心笔记 1_welcome_to_joplin.md 展开系统讲解 Joplin 桌面/移动/终端三端共享的操作模型三栏界面结构Sidebar、Note List、Note Editor、Markdown 笔记写法以及用笔记本notebook与标签tag组织笔记的完整操作方式。读完本文你不仅能按端desktop / mobile / terminal完成日常笔记操作还能理解这套欢迎内容是如何被构建进应用的——从 build-welcome.ts 的打包流程到 WelcomeUtils.ts 的首次安装逻辑。一、Joplin 的三栏主界面Joplin 的主界面固定分为三栏这一布局在三个端上大体一致端间差异会在下文分别说明Sidebar侧边栏展示笔记本与标签列表以及同步状态synchronisation status。Note List笔记列表显示当前上下文下的笔记集合——要么是当前选中笔记本内的笔记要么是当前选中标签下的笔记要么是搜索结果。Note Editor笔记编辑器编写笔记的地方。编辑器提供Rich Text editor富文本编辑器与Markdown editorMarkdown 编辑器两种模式点击右上角的Toggle editor按钮即可在两者之间切换此外也可以使用外部编辑器编辑笔记例如用 Typora 打开后会同时渲染笔记正文与内嵌图片。从源码可以印证“Toggle editor”的底层行为桌面端通过命令 toggleEditors.ts 实现它翻转editor.codeView设置项并派发EDITOR_CODE_VIEW_CHANGEaction让 UI 在富文本视图TinyMCE与代码视图CodeMirror之间切换。该命令还带有一条防御性限制——当有笔记正在保存时hasNotesBeingSaved不允许切换代码视图注释中说明这是为了避免 TinyMCE 在保存未完成时丢失内容。说明三个应用桌面、移动、终端共享大致相同的功能差异处均会明确标注。二、用 Markdown 写笔记Markdown 是一种轻量级标记语言使用纯文本的格式化语法。Joplin 支持 Github-flavoured MarkdownGFM语法带少量变体与扩展。Markdown 虽然是标记语言但设计目标是即使不渲染也保持人类可读。下面这个简单示例可以直接粘贴到笔记中查看渲染效果# 标题 ## 副标题 段落之间用空行分隔。文本属性支持 _斜体_、**粗体** 和 等宽字体。可以创建无序列表 * 苹果 * 橙子 * 梨 或者有序列表 1. 洗 2. 冲 3. 重复 这是一个链接最后是一条水平分割线 * * *在以上语法之外Joplin 还支持更多能力代码示例、数学公式、复选框列表checkbox lists等完整语法说明见 Markdown 文档。从仓库结构看笔记渲染由独立的 packages/renderer 包承担其中 MdToHtml.ts 负责把 Markdown 源文本转换为 HTMLHtmlToHtml.ts 负责富文本HTML笔记的规范化处理而源文本到渲染结果的转换链路也正是 Markdown 编辑器与富文本编辑器共用同一份笔记数据的基础。三、用笔记本组织笔记Joplin 的笔记组织在一棵笔记本与子笔记本构成的树中。各端创建笔记本的操作方式如下桌面端desktop点击New Notebook创建笔记本之后可以随意把笔记本拖拽到其他笔记本内形成子笔记本或者右键选择 “Move to notebook” 移动。还可以把子笔记本拖拽到 “Notebooks” 头部使其回到根层级。移动端mobile按 “☰” 图标选择 “New notebook”。终端terminal输入命令别名:mn。终端命令:mn在源码中有明确定义app-cli 的 app.ts 将mn注册为一个 prompt 类型的别名实际展开为mknote 光标定位到引号之间方便直接输入标题。四、用标签组织笔记标签是组织笔记的第二种方式与笔记本树形成正交的分类维度。各端操作方式桌面端在 Note List 中右键任意笔记选择 “Tags”随后输入标签多个标签之间用逗号分隔。移动端打开笔记按 “⋮” 按钮选择 “Tags”。终端输入:help tag查看可用的标签命令。Note List 一栏会把“选中标签下的笔记”与“选中笔记本下的笔记”作为两种不同的过滤视图即标签视图与笔记本视图互斥展示这一点也与原文档对 Note List 的定义一致。五、这套欢迎笔记本是如何构建并安装的上面三部分正是 Joplin 首次启动时自动创建的 “Welcome!” 笔记本内容。它并非运行时手写数据而是有一条完整的构建链路可以在仓库中完整追踪素材来源readme/welcome/目录下的 Markdown 文件0_web.md、1_welcome_to_joplin.md、2_importing_and_exporting_notes.md、3_synchronising_your_notes.md、4_tips.md、5_privacy.md与配套图片AllClients.png、SubNotebooks.png等即本文所依据的欢迎笔记源文件。构建打包build-welcome.ts 遍历各语言目录目前支持en_GB与fr_FR法语版位于 readme/_i18n/fr_FR/welcome为每个文件分配固定的 UUID保证各端、各次构建后资源 ID 稳定把英文版本中的图片用markdownUtils.extractImageUrls提取并以 base64 内嵌为 resource最终序列化生成 packages/lib/welcomeAssets.js。运行时安装WelcomeUtils.ts 的createWelcomeItems(locale, platform)从welcomeAssets.js读取数据先Folder.save创建标题为 “Welcome!”、带 emoji 图标的文件夹再按倒序逐条Note.save创建笔记并在保存前把笔记正文中的图片路径替换为(:/资源ID)形式的内部资源引用。platform参数Desktop / Cli / Mobile / Web用于按端过滤例如0_web.md在元数据中被标记为WelcomeAssetPlatform.Web只会出现在 Web 剪藏端。安装时机桌面端在 Root.tsx 的启动流程中、移动端在 buildStartupTasks.ts 中调用WelcomeUtils.install(locale, dispatch)。install由两个私有设置项控制见 builtInMetadata.tswelcome.enabled默认trueBaseApplication.ts 支持通过初始化参数welcomeDisabled关闭它且子 profile 会自动禁用欢迎内容避免污染主数据的对照环境welcome.wasBuilt默认false保证欢迎笔记本只创建一次创建完成后置为true并自动FOLDER_SELECT到该笔记本。这一机制也解释了原文档“三个应用共享大致相同功能、差异会明确标注”的说法同一份欢迎素材在构建期按平台打标签运行时按shim探测到的平台Electron 桌面 / 移动 / CLI过滤从而各端只看到适合自己的条目。六、小结与延伸本文覆盖的 1_welcome_to_joplin.md 是欢迎笔记本的第一篇后续同目录笔记可按序深入导入与导出笔记、同步笔记、实用技巧、隐私说明。若想核对终端命令别名全集可查 app-cli 的 app.ts若关心桌面端编辑器切换的完整实现可进一步阅读 NoteEditor.tsx 及其下的 TinyMCE 与 CodeMirror 两个视图组件。【免费下载链接】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),仅供参考
返回列表