From d952ebde5671ec615ad16c5a19d60c4f74241c8a Mon Sep 17 00:00:00 2001 From: chai001125 <94744119+chai001125@users.noreply.github.com> Date: Wed, 31 May 2023 20:45:05 +0800 Subject: [PATCH] translated --- ...erate web pages from Markdown with Docsify-This.md | 169 ------------------ ...erate web pages from Markdown with Docsify-This.md | 163 +++++++++++++++++ 2 files changed, 163 insertions(+), 169 deletions(-) delete mode 100644 sources/tech/20230502.2 ⭐️⭐️ Generate web pages from Markdown with Docsify-This.md create mode 100644 translated/tech/20230502.2 ⭐️⭐️ Generate web pages from Markdown with Docsify-This.md diff --git a/sources/tech/20230502.2 ⭐️⭐️ Generate web pages from Markdown with Docsify-This.md b/sources/tech/20230502.2 ⭐️⭐️ Generate web pages from Markdown with Docsify-This.md deleted file mode 100644 index b149b28f26..0000000000 --- a/sources/tech/20230502.2 ⭐️⭐️ Generate web pages from Markdown with Docsify-This.md +++ /dev/null @@ -1,169 +0,0 @@ -[#]: subject: "Generate web pages from Markdown with Docsify-This" -[#]: via: "https://opensource.com/article/23/5/docsify-markdown-html" -[#]: author: "Paul Hibbitts https://opensource.com/users/paulhibbitts" -[#]: collector: "lkxed" -[#]: translator: "chai001125" -[#]: reviewer: " " -[#]: publisher: " " -[#]: url: " " - -Generate web pages from Markdown with Docsify-This -====== - -Are you interested in leveraging Markdown for online content without any website setup or build process? How about seamlessly embedding constraint-free Markdown or HTML into multiple platforms (such as a content management system or learning management system)? The open source project [Docsify-This][1], built with [Docsify.js][2], provides an easy way to publish, share, and reuse Markdown content. - -**[ Get the [Markdown cheat sheet][3] ]** - -### What is Docsify-This? - -With Docsify-This, you can instantly turn any publicly available Markdown file into a responsive standalone web page. You can also link multiple Markdown files to create a simple website. Designers can alter the visual appearance of displayed pages with the point-and-click Web Page Builder interface or URL parameters. You can also use a set of provided Markdown CSS classes when creating your own Markdown content. In addition, if you use Codeberg or GitHub to store your Markdown files, an **Edit this Page** link can be automatically provided for each page to support collaborative authoring. - -It's open source, so you can host a Docsify-This instance using your own custom domain without the risk of platform lock-in. - -### Use the Docsify-This Web Page Builder - -To use the Web Page Builder, open a browser and navigate to the [Docsify-This website][1] or your local instance. In the **Web Page Builder** section, enter the URL of a Markdown file in a public repo of Codeberg or GitHub (other Git hosts can also be used via Docsify-This URL parameters but not in the Web Page Builder), and then click the **Publish as Standalone Web Page** button. - -![The Docsify-This web page builder interface][4] - -The Markdown file is rendered as a standalone web page with a URL you can copy and share. Here's an example URL: - -``` -https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md -``` - -Docsify-This rendered web pages are perfect for embedding, with the ability to visually style Docsify-This pages to the destination platform. - -![Docsify-This rendered Markdown file][5] - -### Render other files in the same repository - -You can render other Markdown files in the same repository by directly editing the Docsify-This URL parameter **homepage**. For example: - -``` -https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=anotherfile.md -``` - -### Modify the web page's appearance - -You can change the appearance of any Markdown file displayed in Docsify-This by using [URL parameters][6]. For example, `font-family`, `font-size`, `link-color`, and `line-height` are all common CSS attributes and are valid parameters for Docsify-This: - -``` -https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&font-family=Open%20Sans,sans-serif -``` - -You can also alter the visual appearance using a set of special [Markdown CSS classes][7]. For example, you can add the `button` class to a link: - -``` -[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button') -``` - -This produces a button image instead of just a text link: - -![A button rendered by Docsify-This][8] - -In addition to the Markdown CSS classes supported by Docsify-This, you can define your own custom classes within your displayed Markdown files. For example: - -``` - - -[Custom CSS Class Button](# ':class=mybutton') -``` - -Produces this: - -![A custom button image rendered with Docsify-This][9] - -### Include HTML snippets - -As supported by standard Markdown, you can include HTML snippets. This allows you to add layout elements to your HTML render. For example: - -``` -
-
- -Lorem ipsum dolor sit amet, consectetur adipiscing elit. - -
-
- -Lorem ipsum dolor sit amet, consectetur adipiscing elit. - -
-
-``` - -### Embed Docsify-This as an iFrame - -You can embed Docsify-This web pages using an iFrame in almost any platform. You can also use URL parameters to ensure your embedded content matches your destination platform: - -``` -

-``` - -![A Docsify-This page embedded in an LMS][10] - -### Embed Docsify-This with an external URL - -In certain learning management systems (LMS), including the open source [Moodle][11] and even the proprietary [Canvas][12], you can link external web pages to a course navigation menu and sometimes more. For example, you can use the Redirect Tool in Canvas to display Docsify-This web pages. - -``` -url=https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=resources.md&edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue, Helvetica,Arial,sans-serif&font-size=1&hide-credits=true -``` - -### Integrate Docsify-This and Git - -To fully leverage the benefits of version control and potentially collaboration using an optional **Edit this Page** link, store your Docsify-This Markdown pages in a Git repository on either Codeberg or GitHub. Several open source tools provide a graphical interface for Git, including [GitHub Desktop][13] (recently released as open source), [Git-Cola][14], and [SparkleShare][15]. The text editors VSCode and Pulsar Edit (formerly [Atom.io][16]) both feature Git integration, too. - -**[ Get the [Git tips and tricks][17] eBook ]** - -### Markdown publishing made easy - -The benefits of Markdown-based publishing are available to everyone, thanks to Docsify. And thanks to Docsify-This, it's easier than ever. Try it out at the [Docsify-This website][1]. - --------------------------------------------------------------------------------- - -via: https://opensource.com/article/23/5/docsify-markdown-html - -作者：[Paul Hibbitts][a] -选题：[lkxed][b] -译者：[译者ID](https://github.com/译者ID) -校对：[校对者ID](https://github.com/校对者ID) - -本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出 - -[a]: https://opensource.com/users/paulhibbitts -[b]: https://github.com/lkxed/ -[1]: https://docsify-this.net -[2]: https://docsify.js.org -[3]: https://opensource.com/downloads/cheat-sheet-markdown -[4]: https://opensource.com/sites/default/files/2023-04/docsify-this-web-page-builder.webp -[5]: https://opensource.com/sites/default/files/2023-04/docsify-this-rendered-markdown-file.webp -[6]: https://docsify-this.net/#/?id=page-appearance-url-parameters -[7]: https://docsify-this.net/#/?id=supported-markdown-css-classes -[8]: https://opensource.com/sites/default/files/2023-04/button.webp -[9]: https://opensource.com/sites/default/files/2023-04/custom-css-button.webp -[10]: https://opensource.com/sites/default/files/2023-04/docsify-this-iframe.webp -[11]: https://opensource.com/article/21/3/moodle-plugins -[12]: https://github.com/instructure/canvas-lms -[13]: https://github.com/desktop/desktop -[14]: https://opensource.com/article/20/3/git-cola -[15]: https://opensource.com/article/19/4/file-sharing-git -[16]: https://opensource.com/article/20/12/atom -[17]: https://opensource.com/downloads/git-tricks-tips diff --git a/translated/tech/20230502.2 ⭐️⭐️ Generate web pages from Markdown with Docsify-This.md b/translated/tech/20230502.2 ⭐️⭐️ Generate web pages from Markdown with Docsify-This.md new file mode 100644 index 0000000000..71f9a5d0d1 --- /dev/null +++ b/translated/tech/20230502.2 ⭐️⭐️ Generate web pages from Markdown with Docsify-This.md @@ -0,0 +1,163 @@ +[#]: subject: "Generate web pages from Markdown with Docsify-This" +[#]: via: "https://opensource.com/article/23/5/docsify-markdown-html" +[#]: author: "Paul Hibbitts https://opensource.com/users/paulhibbitts" +[#]: collector: "lkxed" +[#]: translator: "chai001125" +[#]: reviewer: " " +[#]: publisher: " " +[#]: url: " " + +使用 Docsify-This 从 Markdown 文件生成网页 +====== + +将 Markdown 文件直接变成网页，还无需任何的网站构建，写完文档即可直接发布，你对这个内容感兴趣吗？你是否希望将 Markdown 或 HTML 自由地嵌入到多个平台（如内容管理系统或学习管理系统）中？由 [Docsify.js][2] 构建的开源项目 [Docsify-This][1] 提供了一种简单的方法来发布、分享和复用 Markdown 文件内容。 + +**你可以点击这个链接，来看看 [Markdown 语法速查表][3]** + +### Docsify-This 是什么？ + +使用 Docsify-This，你可以立即将任何 Markdown 文件转换为响应式的独立网页。你还可以将多个 Markdown 文件链接起来，以创建一个简单的网站。网页设计师可以简单地通过点击 Web 页面构建器界面或改变网页的地址参数（即 URL），来更改所显示页面的视觉外观。在创建自己的 Markdown 文件内容时，你还可以使用 Markdown CSS 类。此外，如果你使用 Codeberg 或 GitHub 仓库存储 Markdown 文件的话，每个页面都会自动提供一个 **编辑此页面** Edit this Page 的链接，以支持协同创作。 + +并且 Docsify-This 是开源的，因此你可以使用自定义域名托管 Docsify-This 实例，而不会有平台锁定域名的风险。 + +### 使用 Docsify-This 网页构建器 + +要使用网页构建器，请先打开浏览器，导航到 [Docsify-This网站][1] 或你在本地的实例。在 **网页构建器** Web Page Builder 部分，输入 Codeberg 或 GitHub 上公共存储仓库中的一个 Markdown 文件的 URL（其他 Git 主机可以通过 Docsify-This URL 参数进行使用，但不能在网页构建器中使用），然后点击 **发布为独立网页** Publish as Standalone Web Page 的按钮，如下图所示。 + +![The Docsify-This web page builder interface][4] + +Markdown 文件将呈现为一个独立的网页，并生成一个可复制和共享的 URL。以下是一个示例 URL： + +``` +https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md +``` + +Docsify-This 生成的网页非常适合嵌入，可以将 Docsify-This 页面的视觉样式调整到目标平台上去。 + +![Docsify-This rendered Markdown file][5] + +### 渲染同一存储库中的其他文件 + +你也可以通过直接编辑 Docsify-This URL 参数 **homepage** 来渲染同一存储库中的其他 Markdown 文件。例如： + +``` +https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=anotherfile.md +``` + +### 修改网页的外观 + +你可以使用 [URL 参数][6] 更改 Docsify-This 中显示的任何 Markdown 文件的外观。例如，`font-family`（文本字体系列）、`font-size`（字体大小）、`link-color`（超链接颜色）和 `line-height`（行高）都是常见的 CSS 属性，同时也是 Docsify-This 中的有效参数： + +``` +https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&font-family=Open%20Sans,sans-serif +``` + +你也可以使用一组特殊的 [Markdown CSS 类][7] 来改变网页的外观。例如，你可以为一个链接添加 `按钮类`： + +``` +[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button') +``` + +这将产生一个按钮，而不是一个文本链接： + +![A button rendered by Docsify-This][8] + +除了 Docsify-This 支持的 Markdown CSS 类，你也可以在Markdown 文件中使用自定义类。例如： + +``` + + +[Custom CSS Class Button](# ':class=mybutton') +``` + +使用这个自定义类将生成这样的按钮： + +![A custom button image rendered with Docsify-This][9] + +### 在 Markdown 文件中包含 HTML 片段 + +正如标准 Markdown 所支持的那样，你可以在 Markdown 文件中包括 HTML 片段。这允许你在你的 HTML 渲染中添加布局元素。例如： + +``` +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
+
+``` + +### 使用 iFrame 嵌入 Docsify-This 网页 +你可以在几乎所有的平台上使用 iFrame 嵌入 Docsify-This 网页。你还可以使用 URL 参数来确保你的嵌入内容与你的目标平台相匹配： + +``` +

+``` + +![A Docsify-This page embedded in an LMS][10] + +### 使用外部 URL 嵌入 Docsify-This + +在某些学习管理系统中，包括开源的 [Moodle][11]，或者专有的 [Canvas][12]，你可以将外部网页链接到课程导航菜单。例如，你可以使用 Canvas 中的重定向工具来显示 Docsify-This 网页。 + +``` +url=https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=resources.md&edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue, Helvetica,Arial,sans-serif&font-size=1&hide-credits=true +``` + +### 整合 Docsify-This 和 Git +为了充分利用版本控制的好处，并使用 **编辑此页面** Edit this Page 的链接进行协同工作，请将你的 Docsify-This Markdown 文件存储在 Codeberg 或 GitHub 的 Git 存储库中。一些开源工具为 Git 提供了一个图形界面，包括 [GitHub Desktop][13]（最近已开源）、[Git-Cola][14] 和 [SparkleShare][15]。文本编辑器 VSCode 和 Pulsar Edit（以前的 [Atom.io][16]）也都有整合 Git 的功能。 + +**你可以点击这个链接，来看看 [Git 小技巧][17]电子书** + +### 轻松实现 Markdown 文件在网页发布 + +由于 Docsify 的存在，每个人都能享受到Markdown 文件的在网上发布的好处。而且由于 Docsify-This 的出现，这个工作变得很容易。不妨在 [Docsify-This 网站][1] 上试试吧。 + +-------------------------------------------------------------------------------- + +via: https://opensource.com/article/23/5/docsify-markdown-html + +作者：[Paul Hibbitts][a] +选题：[lkxed][b] +译者：[chai001125](https://github.com/chai001125) +校对：[校对者ID](https://github.com/校对者ID) + +本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出 + +[a]: https://opensource.com/users/paulhibbitts +[b]: https://github.com/lkxed/ +[1]: https://docsify-this.net +[2]: https://docsify.js.org +[3]: https://opensource.com/downloads/cheat-sheet-markdown +[4]: https://opensource.com/sites/default/files/2023-04/docsify-this-web-page-builder.webp +[5]: https://opensource.com/sites/default/files/2023-04/docsify-this-rendered-markdown-file.webp +[6]: https://docsify-this.net/#/?id=page-appearance-url-parameters +[7]: https://docsify-this.net/#/?id=supported-markdown-css-classes +[8]: https://opensource.com/sites/default/files/2023-04/button.webp +[9]: https://opensource.com/sites/default/files/2023-04/custom-css-button.webp +[10]: https://opensource.com/sites/default/files/2023-04/docsify-this-iframe.webp +[11]: https://opensource.com/article/21/3/moodle-plugins +[12]: https://github.com/instructure/canvas-lms +[13]: https://github.com/desktop/desktop +[14]: https://opensource.com/article/20/3/git-cola +[15]: https://opensource.com/article/19/4/file-sharing-git +[16]: https://opensource.com/article/20/12/atom +[17]: https://opensource.com/downloads/git-tricks-tips