大家好，今天给各位分享装修单页网站源码分享的一些知识，其中也会对装修网站单子能不能做进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
使用Docsify创建文档网页并发布到GitHubPages上。
?来源：linux.cn?作者：BryantSon?译者：Xingyu.Wang?
（本文字数：5192，阅读时长大约：6分钟）
文档是帮助用户使用开源项目一个重要部分，但它并不总是开发人员的首要任务，因为他们可能更关注的是使他们的应用程序更好，而不是帮助人们使用它。对开发者来说，这就是为什么让发布文档变得更容易是如此有价值的原因。在本教程中，我将向你展示一个这样做的方式：将Docsify文档生成器与GitHubPages结合起来。
默认情况下，GitHubPages会提示用户使用Jekyll，这是一个支持HTML、CSS和其它网页技术的静态网站生成器。Jekyll可以从以Markdown格式编码的文档文件中生成一个静态网站，GitHub会自动识别它们的.md或.markdown扩展名。虽然这种设置很好，但我想尝试一下其他的东西。
幸运的是，GitHubPages支持HTML文件，这意味着你可以使用其他网站生成工具（比如Docsify）在这个平台上创建一个网站。Docsify是一个采用MIT许可证的开源项目，其具有可以让你在GitHubPages上轻松创建一个有吸引力的、先进的文档网站的功能。
Docsify
开始使用Docsify
安装Docsify有两种方法：
通过NPM安装Docsify的命令行界面（CLI）。手动编写自己的index.html。
Docsify推荐使用NPM方式，但我将使用第二种方案。如果你想使用NPM，请按照快速入门指南中的说明进行操作。
从GitHub下载示例内容
我已经在该项目的GitHub页面上发布了这个例子的源代码。你可以单独下载这些文件，也可以通过以下方式克隆这个存储库。
gitclonehttps://github.com/bryantson/OpensourceDotComDemos\n
然后cd进入DocsifyDemo目录。
我将在下面为你介绍这些代码，它们克隆自我的示例存储库中，这样你就可以理解如何修改Docsify。如果你愿意，你也可以从头开始创建一个新的index.html文件，就像Docsify文档中的的示例一样：
<!–index.html–>\n\n<!DOCTYPEhtml>\n<html>\n<head>\n<metahttp-equiv=&34;content=&34;>\n<metaname=&34;content=&34;>\n<metacharset=&34;>\n<linkrel=&34;href=&34;>\n</head>\n<body>\n<divid=&34;></div>\n<script>\nwindow.$docsify={\n//…\n}\n</script>\n<scriptsrc=&34;></script>\n</body>\n</html>\n
探索Docsify如何工作
如果你克隆了我的GitHub存储库，并切换到DocsifyDemo目录下，你应该看到这样的文件结构：
FilecontentsintheclonedGitHub
index.html是Docsify可以工作的唯一要求。打开该文件，你可以查看其内容：
<!–index.html–>\n\n<!DOCTYPEhtml>\n<html>\n<head>\n<metahttp-equiv=&34;content=&34;>\n<metaname=&34;content=&34;>\n<metacharset=&34;>\n<linkrel=&34;href=&34;>\n<title>DocsifyDemo</title>\n</head>\n<body>\n<divid=&34;></div>\n<script>\nwindow.$docsify={\nel:&app&39;https://github.com/bryantson/OpensourceDotComDemos/tree/master/DocsifyDemo&34;//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js&34;stylesheet&34;//cdn.jsdelivr.net/npm/docsify/themes/vue.css&34;//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js&34;app&34;34;,\nrepo:&39;,\nloadSidebar:true,\n}\n</script>\n
在这个块中：
el属性基本上是说：“嘿，这就是我要找的id，所以找到它并在那里呈现。”改变repo值，以确定当用户点击右上角的GitHub图标时，会被重定向到哪个页面。将loadSideBar设置为true将使Docsify查找包含导航链接的_sidebar.md文件。
你可以在Docsify文档的配置部分找到所有选项。
接下来，看看_sidebar.md文件。因为你在index.html中设置了loadSidebar属性值为true，所以Docsify会查找_sidebar.md文件，并根据其内容生成导航文件。示例存储库中的_sidebar.md内容是：
<!–docs/_sidebar.md–>\n\n\n*[HOME](./)\n\n*[Tutorials](./tutorials/index)\n*[Tomcat](./tutorials/tomcat/index)\n*[Cloud](./tutorials/cloud/index)\n*[Java](./tutorials/java/index)\n\n*[About](./about/index)\n\n*[Contact](./contact/index)\n
这会使用Markdown的链接格式来创建导航。请注意“Tomcat”、“Cloud”和“Java”等链接是缩进的；这意味着它们被渲染为父链接下的子链接。
像README.md和images这样的文件与存储库的结构有关，但所有其它Markdown文件都与你的Docsify网页有关。
根据你的需求，随意修改你下载的文件。下一步，你将把这些文件添加到你的GitHub存储库中，启用GitHubPages，并完成项目。
启用GitHub页面
创建一个示例的GitHub存储库，然后使用以下GitHub命令检出、提交和推送你的代码：
$gitclone你的GitHub存储库位置\n$cd你的GitHub存储库位置\n$gitadd.\n$gitcommit-m&34;\n$gitpush\n
设置你的GitHubPages页面。在你的新GitHub存储库中，点击“Settings”：
SettingslinkinGitHub
向下滚动直到看到“GitHubPages”：
GitHubPagessettings
查找“Source”部分：
GitHubPagessettings
点击“Source”下的下拉菜单。通常，你会将其设置为“masterbranch”，但如果你愿意，也可以使用其他分支：
SettingSourcetomasterbranch
就是这样！你现在应该有一个链接到你的GitHubPages的页面了。点击该链接将带你到那里，然后用Docsify渲染：
LinktoGitHubPagesdocssite
它应该像这样：
ExampleDocsifysiteonGitHubPages
结论
通过编辑一个HTML文件和一些Markdown文本，你可以用Docsify创建一个外观精美的文档网站。你觉得怎么样？请留言，也可以分享其他可以和GitHubPages一起使用的开源工具。
via:opensource.com
作者：BryantSon选题：lujun9972译者：wxy校对：wxy
本文由LCTT原创编译，Linux中国荣誉推出
点击“了解更多”可访问文内链接
好了，关于装修单页网站源码分享和装修网站单子能不能做的问题到这里结束啦，希望可以解决您的问题哈！