如何使用docsify和GitHub页面创建文档网站?

如何使用docsify和GitHub页面创建文档网站?,第1张

如何使用docsify和GitHub页面创建文档网站?

如何自己创建一个网站?文档是帮助用户使用开源项目的重要部分,但它并不总是开发人员的首要任务,因为他们可能更关心如何让自己的应用程序更好地使用它。这就是为什么开发人员可以更容易地发布文档。在本教程中,我将向你展示一种方法:如何创建自己的网站

如何用docsify和GitHub页面创建文档网站?

默认情况下,githubpages会提示用户使用Jekyll,这是一个支持HTML、CSS和其他web技术的静态网站生成器。Jekyll可以从以降价格式编码的文档文件中生成一个静态网站,GitHub会自动识别它们。MD或者。降价和扩张。这是一个很好的设置,但我想尝试其他东西。

幸运的是,githubpages支持HTML文件,这意味着您可以使用docsify等其他站点生成工具在该平台上创建网站。Docsify是一个拥有MIT许可的开源项目,可以在githubpages上轻松创建一个吸引人的***文档网站。

文件

安装docsify有两种方法:

Docsify推荐NPM,但我会用第二个选项。如果您想使用NPM,请按照快速入门指南中的说明进行 *** 作。

我已经在项目的GitHub页面上发布了这个例子的源代码。您可以单独下载这些文件,或者通过以下方式克隆存储库。

然后光盘进入docsifydemo目录。

如果您克隆我的GitHub存储库并切换到docsifydemo目录,您应该会看到以下文件结构:

该文件包含在ClonedWithub中。

这基本上只是一个普通的HTML文件,但是看看这两行:

这些行使用内容交付网络(CDN)的URL来提供CSS和JavaScript脚本,以将站点转换为docsify站点。只要包含这些行,普通的GitHub页面就可以转换成文档页面。

body标签后的***行指定了要呈现的内容:

Docsify使用单页面应用程序(SPA)来呈现所请求的页面,而不是刷新新页面。

***,检查脚本块中的行:

在这个块中:

您可以在docsify文档的配置部分找到所有选项。

它使用markdown的链接格式来创建导航。请注意,tomcat、cloud、Java等链接是缩进的;这意味着它们被呈现为父链接下的子链接。

Imagereadmefile.md文件像和images都是和知识库的结构有关,但是其他所有降价文件都是和docsify网页有关。

请根据您的需要随意修改您下载的文件。接下来,将这些文件添加到GitHub存储库中,启用githubpages,并完成项目。

创建一个示例GitHub存储库,并使用下面的GitHub命令检查、提交和推送代码:

设置githubpages页面。在新的GitHub存储库中,点击“设置”:

将链接设置为Sub

向下滚动,直到看到githubpages:

GithubPages设置

“查找”部分:

GithubPages设置

单击“源”下的下拉菜单。通常,您会将其设置为“主分支”,但如果您愿意,也可以使用其他分支:

设置SourceToMasterBranch

就是这样!现在应该有一个链接到githubpages的页面。单击此链接将带您到那里,然后使用docsify展示它:

链接到SubpagesDocssite

应该是这样的:

示例Docsifysiteongitubpage

如何创建自己的网站?通过编辑HTML文件和一些降价的文本,你可以使用docsify创建一个看起来很漂亮的文档网站。你是怎么想的?请留下评论,分享其他可以和githubpages一起使用的开源工具。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/907925.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-15
下一篇 2022-05-15

发表评论

登录后才能评论

评论列表(0条)

保存