MarkDownload 剪裁网页文章

✨ 前言：写在前面 ✨

大家好！😊 有什么问题和需要，随时欢迎和我交流！📬

白嫖别人文章快速效率出餐

🤔 需求：为什么选择 MarkDownload？

  • 之前一直用 Joplin 的网页剪裁功能，但剪下来后总免不了要用 Joplin 处理内容，用起来不太顺手。😮‍💨
  • 我在想，能不能用更顺手的 Obsidian 来实现网页剪裁和处理？🤔
  • 经过探索，最终选择了 MarkDownload 作为我的剪裁利器！🔪 ✂️

📥 下载 & 安装 MarkDownload

有两种方式，任选其一：

  1. 🌟 最简单方式 (推荐)：

    • 直接打开 谷歌浏览器扩展商店 🔍
    • 搜索 MarkDownload，找到插件点击安装即可！✅

  2. 🛠️ 手动安装 (适合无法访问商店时)：

    • 下载：
      • 访问 MarkDownload 的 Github 仓库：👉 https://github.com/deathau/markdownload
      • 依次点击 Code -> Download ZIP (如下图所示)。你会得到一个名为 markdownload-main.zip 的压缩包。
    • 安装：
      • 解压下载的 markdownload-main.zip 文件。
      • 打开你的浏览器扩展管理页面：
        • Firefox: 地址栏输入 about:addons -> 点击“扩展” 🦊
        • Google Chrome: 地址栏输入 chrome://extensions/ -> 点击“扩展程序” 🟡
        • Microsoft Edge: 地址栏输入 edge://extensions/ -> 点击“扩展” 🟦
        • Safari: 打开 Safari 设置 -> 点击“扩展” 🍎
      • 在扩展管理页面：
        • 打开 开发者模式 👨‍💻 (通常在右上角)。
        • 点击 加载已解压的扩展程序 (或类似选项)。
        • 选择你刚刚解压出来的 markdownload-main 文件夹。

⚙️ 配置 MarkDownload (适配 Obsidian 的关键！)

安装好插件只是第一步，还需要配置才能和 Obsidian 无缝衔接！🔧

  1. 打开设置：

    • 在浏览器工具栏，左键点击 MarkDownload 图标。
    • 在弹出的窗口中，点击 设置按钮 (齿轮图标 ⚙️)。

  2. 🔑 关键配置 (必做！)：

    • 📍 设置剪裁文件存放路径:

      • 找到类似 Folder to save clips to 或 Markdown Clips Folder 的选项。
      • 默认是浏览器的下载文件夹。要直接放进 Obsidian 库，需要填写相对于浏览器下载目录的 Obsidian 库子路径。
      • 例如： 我的剪裁文件下载到 Downloads/resource/00 Inbox/，我的 Obsidian 库就在 Downloads 下（或通过软链接等方式关联）。这里就填写 resource/00 Inbox/ (具体路径根据你的实际结构填写)。

    • 🖼️ 下载图片到本地 (强烈推荐！):

      • 找到 Download images 或类似选项，务必勾选 ✅。
      • 否则，Markdown 里的图片还是在线链接，不方便离线使用且容易失效。Obsidian 图片本地化才是王道！🛡️
      • （可选） 设置 Image Style 为 obsidian-nofolder 或其他符合你 Obsidian 附件管理习惯的选项。

    • 💻 设置代码块样式 (避免一坨！):

      • 找到 Code block style 或类似选项。
      • 必须选择 Indented！✅
      • 否则剪裁网页中的代码块会变成没有格式的一团乱麻，完全没法看！😵

  3. ⚙️ 其他配置 (按需调整)：

    • Title template: 设置下载文件的默认文件名格式（例如 {pageTitle} - {date}）。
    • Disallowed Characters...: 定义文件名中需要自动过滤掉的非法字符（如 []#^）。
    • Front-matter template: 设置在 Markdown 文件开头添加的模板内容（如 YAML Frontmatter）。
    • Back-matter template: 设置在 Markdown 文件结尾添加的模板内容。
    • Append front/back template...: 是否启用前后模板。
    • Markdown conversion options: 调整各种 Markdown 转换细节（列表标记 - vs *, 标题风格 # vs ====, 链接/图片引用方式等）。

  4. 📥 导入配置 (懒人福利):

    • MarkDownload 支持导入/导出配置！
    • 你可以使用下面提供的 JSON 配置模板：
    • 导入流程:
      • 将下面的 JSON 代码复制，保存为一个新文件，例如 markdownload-config.json。
      • 在 MarkDownload 的设置界面，滚动到底部的 Import / Export 区域。
      • 点击 Choose file 或 Import 按钮。
      • 选择你保存的 markdownload-config.json 文件即可导入配置。🔄

🔍 附录：MarkDownload - Markdown Web Clipper 速览

  1. 📚 项目基础介绍

    • 一个用于 Firefox 和 Chrome（及兼容内核如 Edge）的浏览器扩展。
    • 核心功能： 将网页内容智能剪辑并下载为干净、可读的 Markdown 文件。📝
    • 目标： 方便用户保存网页精华，便于离线阅读、编辑和整合到笔记系统（如 Obsidian）。

  2. 💻 主要编程语言

    • JavaScript: 驱动扩展的核心逻辑和功能。🚀
    • CSS: 负责用户界面和预览样式的美化。🎨
    • HTML: 构建扩展的界面骨架和交互元素。🖼️

  3. ⚙️ 关键技术 & 框架

    • Readability.js (Mozilla): 🧠 智能提取网页核心内容，移除噪音（广告、导航等），就像浏览器的“阅读模式”。这是获得干净内容的关键！
    • Turndown (Dom Christie): 🪄 魔法发生地！将清理后的 HTML 精准地转换为结构良好的 Markdown 文本。
    • Moment.js (可选/可能内嵌): ⏳ 用于在模板中格式化日期和时间戳（如 Frontmatter 中的 created 字段）。

🎉 开始高效剪裁吧！

配置好后，浏览网页时，点击 MarkDownload 图标，预览编辑剪裁内容，一键即可将干净、格式良好、图片本地化的 Markdown 保存到你的 Obsidian Inbox！📥 ➡️ 🗂️ 从此收集资料、做笔记、甚至“白嫖”好文章（请遵守版权哦 😉）都变得无比顺畅！🚀

前言

写在前面，大家有什么问题和需要可以跟我交流

需求

之前一直使用 Joplin 的剪裁网页功能，但是剪裁下来后不可避免的需要使用 Joplin 对剪裁下来的内容做处理，Joplin 用起来不是很习惯，所以在想可不可以用 Obsidian 来实现网页剪裁和处理，最终选择的 MarkDownload 作为剪裁的工具

下载安装

有两种方式，第一种最简单直接打开谷歌插件商城搜索 MarkDownload 就可以下载，第二种方式是从 github 下载压缩文件然后解压到扩展中，如果不方便下载可以关注微信公众号 <文件夹的知识圈> 回复 <插件下载> 获得，压缩包对应的名字为 markdownload-main.zip，解压到扩展中的流程如下

  1. 打开 MarkDownload 的 Github 仓库： https://github.com/deathau/markdownload
  2. 依次点击 Code 和 Download ZIP 如下图，会获得一个名为 markdownload-main 的压缩文件

image.png|500

3. 打开浏览器的扩展管理页面，可以按照下面步骤打开

  1. Firefox：在地址栏输入 about:addons，然后点击“扩展”。
  2. Google Chrome：在地址栏输入 chrome://extensions/，然后点击“扩展程序”。
  3. Microsoft Edge: 在地址栏输入 edge://extensions/，然后点击“扩展”。
  4. Safari: 打开 Safari 设置，点击“扩展”。

4. 在扩展管理页面打开开发者模式并点击加载已解压扩展程序，然后选择对应的压缩包程序

image.png

配置

安装完成后还需要对插件进行配置才可以正常的在 Obsidian 中使用

  1. 左键点击 MarkDownload 图标然后点击设置按钮，如下图

image.png

2. 进行设置

必要的设置

如果想下载的 markdown 文件直接放到 obsidian 文件夹需要设置这里

image.png

填写内容的地方是指文件路径，默认的下载位置是浏览器的下载位置，如果想直接下载到对应文件夹需要在 Downloads 文件夹下创建一个 Obsidian 仓库，我这里的剪切好的文件就下载到了 Downloads/resource/00 Inbox/ 文件夹下

其次是下载的 markdown 中的图片，如果不进行设置默认是在线的图片链接，Obsidian 的图片我习惯本地化保存，这里需要勾选

image.png|500

最后一个必须设置的是这里，需要选择 Indented，否则在剪切的网页中有代码的地方会变成一坨

image.png|500

其它设置

其它设置如下，有需求的可以自己自定义：

  • Title template：设置下载的文件的文件名
  • Disallowed Characters to strip out of title/filename：系统中创建文件名需要避开的符号
  • Front-matter template：下载文件的前面添加的模板
  • Back-matter template：下载文件的后面添加的模板
  • Append front/back template to clipped text：是否启用前后模板
  • Markdown conversion options：一些样式的设置

MarkDownload 支持直接导入对应的配置模板，如有需要可自取，后缀名为 json 的配置文件，导入的流程为

  1. 新建一个后缀名为 .json 的文件
  2. 打开 MarkDownload 的配置界面，拉到最下面 Import / Export
  3. 点击 Choose file 选中对应的 json 文件即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{ "backmatter": "", 
"bulletListMarker": "-", 
"codeBlockStyle": "indented", 
"contextMenus": true, 
"disallowedChars": "[]#^", 
"downloadImages": true, 
"downloadMode": "downloadsApi", 
"emDelimiter": "_", 
"fence": "```", 
"frontmatter": "---\ncreated: {date:YYYY-MM-DDTHH:mm:ss} (UTC {date:Z})\ntags: [{keywords}]\nsource: {baseURI}\nauthor: {byline}\n---\n\n# {pageTitle}\n\n> ## Excerpt\n> {excerpt}\n\n---", 
"headingStyle": "atx", 
"hr": "___", 
"imagePrefix": "", 
"imageRefStyle": "inlined", 
"imageStyle": "obsidian-nofolder", 
"includeTemplate": true, 
"linkReferenceStyle": "full", 
"linkStyle": "inlined", 
"mdClipsFolder": "resource/00 Inbox/", 
"obsidianFolder": "00 ING", 
"obsidianIntegration": false, 
"obsidianVault": "notes", 
"saveAs": false, "strongDelimiter": "**", 
"title": "{pageTitle}", 
"turndownEscape": true }

MarkDownload - Markdown Web Clipper 安装和配置指南

1. 项目基础介绍和主要的编程语言

项目基础介绍

MarkDownload 是一个用于 Firefox 和 Google Chrome 的浏览器扩展，旨在将网页内容剪辑并下载为可读的 Markdown 文件。该项目的目标是帮助用户轻松地将网页内容保存为 Markdown 格式，以便于离线阅读和编辑。

主要的编程语言

MarkDownload 主要使用以下编程语言和工具：

  • JavaScript: 用于扩展的核心功能实现。
  • CSS: 用于样式设计和用户界面。
  • HTML: 用于构建扩展的用户界面和交互元素。

2. 项目使用的关键技术和框架

关键技术和框架

MarkDownload 使用了以下关键技术和框架：

  • Readability.js: 由 Mozilla 开发，用于简化网页内容，只保留重要部分。该库也被用于 Firefox 的阅读器视图。
  • Turndown: 由 Dom Christie 开发，用于将简化后的 HTML 转换为 Markdown 格式。
  • Moment.js: 用于格式化日期和时间。

3. 项目安装和配置的准备工作和详细的安装步骤

准备工作

在安装 MarkDownload 之前，请确保您已经安装了以下浏览器之一：

  • Firefox
  • Google Chrome
  • Microsoft Edge
  • Safari

安装步骤

步骤 1: 下载扩展
  1. 打开您选择的浏览器（Firefox、Google Chrome、Microsoft Edge 或 Safari）。
  2. 访问 MarkDownload 的 GitHub 页面：https://github.com/deathau/markdownload。
  3. 在页面上找到并点击“Code”按钮，然后选择“Download ZIP”以下载项目的 ZIP 文件。
步骤 2: 安装扩展
  1. 解压下载的 ZIP 文件到您选择的目录。
  2. 打开浏览器的扩展管理页面：
    • Firefox: 在地址栏输入 about:addons，然后点击“扩展”。
    • Google Chrome: 在地址栏输入 chrome://extensions/，然后点击“扩展程序”。
    • Microsoft Edge: 在地址栏输入 edge://extensions/，然后点击“扩展”。
    • Safari: 打开 Safari 设置，点击“扩展”。
  3. 在扩展管理页面，启用“开发者模式”（如果需要）。
  4. 点击“加载已解压的扩展程序”或类似选项，然后选择您解压的 MarkDownload 文件夹。
步骤 3: 配置扩展
  1. 安装完成后，您会在浏览器的工具栏中看到 MarkDownload 的图标。
  2. 点击图标，您将看到一个弹出窗口，显示当前页面的 Markdown 预览。
  3. 您可以在此窗口中进行编辑，或点击“下载”按钮将内容保存为 Markdown 文件。

高级配置（可选）

如果您希望将 MarkDownload 与 Obsidian 集成，请按照以下步骤操作：

  1. 在 Obsidian 中安装并启用“Advanced Obsidian URI”社区插件。
  2. 在 MarkDownload 的配置菜单中，启用“Obsidian 集成”选项，并填写您的 Obsidian 库名称和文件夹名称。
  3. 右键点击 MarkDownload 图标，选择“Send Tab to Obsidian”以将当前页面内容发送到 Obsidian。

通过以上步骤，您应该能够成功安装和配置 MarkDownload 扩展，并开始使用它来剪辑和下载网页内容为 Markdown 格式。