diff --git a/package.json b/package.json index a281de3..55aba0c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "code-box", "displayName": "__MSG_extensionName__", - "version": "0.6.1", + "version": "0.6.2", "description": "__MSG_extensionDescription__", "author": "027xiguapi. <458813868@qq.com>", "scripts": { @@ -27,6 +27,8 @@ "@dnd-kit/core": "^6.1.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", + "@joplin/turndown": "^4.0.74", + "@joplin/turndown-plugin-gfm": "^1.0.56", "@mozilla/readability": "^0.5.0", "@plasmohq/messaging": "^0.6.2", "@plasmohq/storage": "^1.11.0", @@ -37,7 +39,6 @@ "plasmo": "0.89.1", "react": "18.2.0", "react-dom": "18.2.0", - "turndown": "^7.2.0", "uuid": "^10.0.0" }, "devDependencies": { diff --git a/public/app.md b/public/app.md index a2a3ceb..a2630e3 100644 --- a/public/app.md +++ b/public/app.md @@ -54,3 +54,62 @@ https://github.com/027xiguapi/code-box + +## 教你怎么一键下载掘金文章 + +## 注意事项 +在开始之前,请确保您遵守掘金平台的使用条款和版权声明。如果您将文章用于个人学习和备份,一般是可以的,但请勿非法传播或用于商业用途。 + +## 背景 + +在信息爆炸的时代,互联网已经成为获取知识和分享经验的主要渠道,特别是对于开发者和技术爱好者而言,像掘金这样的技术社区平台提供了丰富的优质内容。掘金聚集了大量关于编程、开发实践、项目管理等领域的高质量文章,这使得开发者们可以快速学习新技术、解决实际问题。然而,由于网络连接不稳定或者出于备份、离线阅读等需求,很多用户希望能够方便地将这些文章下载保存。然而,掘金平台本身并不直接提供一键下载文章的功能,因此用户需要寻找其他方法来实现这一需求。 + +在此背景下,本文旨在为用户提供几种便捷的工具和方法,帮助他们一键下载掘金文章,以便离线访问和个人存档。 + +## 方法 +### 方法一:使用浏览器插件 + +很多浏览器插件可以轻松实现网页内容的下载和保存,适用于掘金文章。 + +#### 步骤: + +1. **安装插件**:我们可以使用诸如「codebox」或「Save Page WE」这样的插件,它们支持一键保存网页为HTML或Markdown文件。 + + * 在谷歌浏览器中,打开浏览器的扩展程序商店。 + * 搜索“codebox”。 + * 点击“添加到浏览器”并安装。 + +![1723513894421.jpg](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/1723513894421.jpg) +![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/img.png) +![1724640161752](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/1724640161752.jpg) + +2. **保存文章**: + * 安装完成后,打开掘金平台,并导航到您想要下载的文章页面。 + * 点击浏览器右上角插件的图标,选择保存页面。 + * 保存为HTML或Markdown格式即可。 + + + +#### 优点: + +* 操作简单,适合批量保存网页。 +* 可以保存页面的原始格式,包括文字、图片和样式。 + +#### 缺点: + +* 无法去除多余的广告或页面布局。 + + +## 总结 + +以上介绍了一键下载掘金文章的方法:使用浏览器插件以及手动下载。每种方法各有优缺点,您可以根据自己的需求选择最合适的方式。 + +### 额外提示: + +确保您下载的内容仅用于个人学习和备份,避免侵犯原作者的权益。 + + + + + + diff --git a/tools.ts b/tools.ts index 963aa1c..d33134e 100644 --- a/tools.ts +++ b/tools.ts @@ -1,3 +1,4 @@ +import dayjs from "dayjs" import { saveAs } from "file-saver" import { sendToBackground } from "@plasmohq/messaging" @@ -30,7 +31,7 @@ export function saveTxt(txt: string, filename?: string) { if (txt) { const blob = new Blob([txt], { type: "text/plain;charset=utf-8" }) filename = filename || "CodeBox-page" - saveAs(blob, `${filename}.txt`) + saveAs(blob, `${filename}-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.txt`) } } @@ -39,7 +40,7 @@ export function saveHtml(dom: Element, filename?: string) { const htmlContent = dom.outerHTML const blob = new Blob([htmlContent], { type: "text/html;charset=utf-8" }) filename = filename || "CodeBox-page" - saveAs(blob, `${filename}.html`) + saveAs(blob, `${filename}-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.html`) } } @@ -47,7 +48,7 @@ export function saveMarkdown(markdown: string, filename?: string) { if (markdown) { const blob = new Blob([markdown], { type: "text/markdown;charset=utf-8" }) filename = filename || "CodeBox-page" - saveAs(blob, `${filename}.md`) + saveAs(blob, `${filename}-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.md`) } } diff --git a/utils/turndown.ts b/utils/turndown.ts index 8d920f5..21920cf 100644 --- a/utils/turndown.ts +++ b/utils/turndown.ts @@ -1,11 +1,19 @@ -import TurndownService from "turndown" +import TurndownService from "@joplin/turndown" + +var turndownPluginGfm = require("@joplin/turndown-plugin-gfm") export default function Turndown() { + const gfm = turndownPluginGfm.gfm + const tables = turndownPluginGfm.tables + const strikethrough = turndownPluginGfm.strikethrough const turndownService = new TurndownService({ headingStyle: "atx", codeBlockStyle: "fenced" }) + turndownService.use(gfm) + turndownService.use(tables, strikethrough) + // turndownService.keep(["h1", "h2"]) turndownService.remove(["script", "style"])