使用Docsify做文档网站的详细配置教程

最新推荐文章于 2024-05-23 07:00:00 发布
最新推荐文章于 2024-05-23 07:00:00 发布
阅读量3.4k 收藏 7
点赞数 1
分类专栏： 笔记 文章标签： markdown html
未经原作者同意，请勿转载。
本文链接：https://blog.csdn.net/qq_41026919/article/details/105812751
版权
这是一篇详细的教程，教你如何使用 Docsify 创建和配置文档网站。涵盖从本地搭建到托管，CDN 选择，Markdown 和 HTML 写作，以及各种个性化设置，包括自定义加载文字、侧边栏、导航栏、主题颜色等。此外，还介绍了多种插件的使用，如表情、搜索、Google Analytics、评论和分享功能。
摘要由CSDN通过智能技术生成

使用Docsify做文档网站的详细配置教程

作者：xhemj

没错，它叫Docsify。
logo
xhemj的文档中心就是用这个写的

开源地址：https://github.com/docsifyjs/docsify/
官方Demo：https://docsify.js.org/

目录

官方说明

Docsify
A magical documentation site generator.
Simple and lightweight (~21kB gzipped)
No statically built html files
Multiple themes

Docsify
一个神奇的文档站点生成器。
简单轻巧（~21kB）
没有生成静态的html文件
主题丰富

安装

本地搭建

如果你想在本地搭建：
npm安装：

npm i docsify-cli -g

初始化：

docsify init ./docs

本地预览：

docsify serve docs

进入http://localhost:3000就能看到效果咯！

托管在网上

如果你想在托管在网上：
新建一个index.html内容为：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
    
      //...
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>

CDN的选择

CDN可以选择：

<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/docsify/4.11.2/docsify.min.js">
最低0.47元/天 解锁文章
xhemj
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用docsify编写文档
TriAlley的博客
02-02 501
https://www.jianshu.com/p/88e70f32b049
使用docsify 写开源文档
悟空聊架构的专栏
04-05 1118
使用docsify 写开源文档 官网：https://docsify.js.org/#/ docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。 这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记录，只需要创建一个...
不花一分钱30分钟使用Docsify+Github Pages搭建个人免费博客
最新发布
技术杂谈，聚焦优质文章、开源项目、实用工具和学习、工作、面试心得分享。博客园推荐博客、阿里云专家博主，擅长于C#、.NET、.NET Core、Golang、TypeScript、Vue、Uni App、Angular开发。
05-23 643
现如今网上有许多完善的博客平台，如博客园、掘金、思否、知乎等。有人会说为什么现在网上有这么多成熟的博客平台，你还要浪费时间搭建一个自己的博客平台呢？首先我相信每一个程序员都会想要拥有一个属于自己的博客系统，其次使用Docsify能够快速构建一个自己的博客文档系统，最后我们可以通过Github Pages免费托管我们的博客系统文档（连域名和服务器都省了）这样的一次难得的实战机会我们又怎么能够错过呢。废话不多说，接下来步入正题。
Docsify侧边栏多级子目录生成
csding11的博客
08-13 1077
自动生成 docsify 的 sidebar 和 每个子目录中的 sidebar。
Docsify各种插件的应用
Hubz131的博客
02-04 2537
转载自：https://www.ngui.cc/51cto/show-1375.html 文章目录 支持 DOT 语言作图 支持 PDF 页面展示 定制评论功能 复制文章弹窗提示 添加网站运行时间 右下角添加 live2d 访问量统计
md文件自动生成目录[docsify]
Hou_Qiang的专栏
04-26 1257
1.下载该工具，配置文件路径，双击程序运行即可 2.运行结果 3.生成文件 4.docsify 运行网站效果
mydocsify：我的docsify配置
02-26
**mydocsify：我的docsify配置** `mydocsify` 是一个个人化的 `docsify` 配置示例，它展示了如何自定义和优化 `docsify` 以满足个人或项目的需求。`docsify` 是一个轻量级的文档站点生成器，它不需要构建过程，可以...
docsify插件使用预配置或自己的样式和警报类型将.zip
04-05
在本文中，我们将深入探讨如何使用这个插件以及它能为你的Docsify文档添加哪些丰富的视觉元素。 首先，我们了解下什么是Docsify。Docsify是一个快速、易用的静态站点生成器，适用于生成和托管API文档、项目手册或...
Docsify : 自动生成sidebar与子目录sidebar
04-26
Docsify通过在Markdown文件中添加特定的注释或配置来实现自动导航菜单的生成，极大地提高了文档的可读性和易用性。 在 Docsify 中，侧边栏是页面左侧显示的导航菜单，通常包含文档的各个章节和子章节。这种布局有助...
docsify-website-sample:docsify-website-sample
04-28
在【描述】中提到，“这是一个 docsify 网站模版”，这意味着这个压缩包包含了使用 Docsify 创建的一个示例网站的所有必要文件和配置，供用户参考和定制。这通常包括 Markdown 文档、样式文件、配置文件等，帮助用户...
docsify-github-pages:从 bryantson OpensourceDotComDemos 分叉
05-30
这个项目主要关注的是使用docsify工具在GitHub Pages上搭建和管理文档站点。 【docsify】是一个轻量级的文档站点生成器，它允许开发者无需编译即可生成动态网页。docsify的工作方式不同于Jekyll、Hugo等静态站点...
docs-zh:docsify 中文文档
05-10
docsify 一个神奇的文档网站生成器。 概述 docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接。 查看了解详情。 特性 无需构建，写完文档直接发布 容易使用并且轻量 (压缩后 ~21kB) 智能的全文搜索 提供多套主题 丰富的 API 支持 Emoji 兼容 IE11 支持服务端渲染 SSR () 示例 可以查看 来了解更多在使用 docsify 的文档项目。 捐赠 如果你觉得 docsify 对你有帮助，或者想对我微小的工作一点资瓷，欢迎给我。 社区 在的社区里可以找到docsify的用户和开发者团队。
java怎样生成文档_java中如何创建文档中心的目录
weixin_31433053的博客
02-24 107
public static void createDocDir() throws UnsupportedEncodingException, DocumentException, Exception{Docs docs = new Docs();docs.addDirs("defaultDocNameSpace", "归档中心/180808/文件");//创建目录Table table = doc...
【教你搭建服务器系列】（10）利用Docsify搭建个人笔记网站
HaC 的博客
06-12 2403
写文档的工具非常多，但是作为程序员，大部人还是偏爱Markdown的，有时需要写一份开发文档，以供自己或者他人查看，那如何把 Markdown 文件转换成文档呢？ docsify 就可以做到了，docsify 可以直接加载 Markdown 文件并动态渲染，同时还可以生成封面页，还可以部署在github pages ，效果图像以下这种： docsify官方文档：https://docsify.js.org/#/zh-cn/ 1、安装docsify 安装docsify需要node环境，所以必须先安装No
docsify搭建个人极简知识仓库
Augenstern_QXL的博客
02-15 2581
✍、利用docsify搭建个人极简知识仓库
使用开源文档工具docsify，用写博客的姿势写文档
weixin_50666791的博客
09-15 520
前提 下面的简介摘抄自docsify的官网 docsify.js.org 中的简介 docsify是一个神奇的文档网站生成器。他可以快速帮你生成文档网站。不同于GitBook、Hexo的地方是它不会生成静态的.html文件，所有转换工作都是在运行时。如果你想要开始使用他，只需要创建一个index.html就可以开始编写文档并直接部署在GitHub Pages（码云Pages、阿某云OSS或者鹅云COS等等）。它的主要特性如下： 无需构建，写完文档直接发布（运行时markdown文档转换） 容易使
docsify（五）：为PDF文档注入css脚本
u598975767的专栏
03-31 894
相关工程部署文档可参考 docsify（一）https://blog.csdn.net/u598975767/article/details/122576505docsify（二）https://blog.csdn.net/u598975767/article/details/122746132docsify（三）https://blog.csdn.net/u598975767/article/details/122827496docsify（四）https://blog.csdn.net/u598975
Docsify保姆级教程
ybb_ymm的专栏
12-29 824
动态生成文档网站的一款热门工具！网上很多关于动态生成文档的工具！今天我们的主角是Docsify！
docsify操作和Docker部署流程文档
gallonyin的博客
04-27 5020
一个神奇的文档网站生成器。 docsify 会动态生成您的文档网站。与 GitBook 不同，它不会生成静态 html 文件。相反，它会智能地加载和解析您的Markdown文件，并将其显示为网站。要开始使用它，您需要做的就是创建一个索引 .html 并将其部署在 GitHub Pages 上。 当然我们也可以使用 Docker 非常方便的容器化部署。 内部 API 管理工具我们使用 yapi，但对于公开 API 获取和使用就不是很方便，所以对于有公开 API 文档需求的小伙伴来说，这正是一个非常优秀的查看
如何使用docsify
05-17
使用 Docsify 可以快速地创建一个静态网站，并且可以方便地编辑文档和博客。以下是使用 Docsify 的步骤： 1. 安装 Node.js 环境，可以在官网下载并安装：https://nodejs.org。 2. 在终端或命令行工具中输入以下命令安装 Docsify： ``` npm i docsify-cli -g ``` 3. 在本地新建一个文件夹作为项目的根目录，进入该目录后输入以下命令来初始化 Docsify： ``` docsify init ./docs ``` 这里的 `docs` 是你要创建的文档文件夹的名称，可以根据需要自行修改。 4. 进入 `docs` 文件夹，编辑 `index.html` 文件来自定义网站的主题、导航栏等信息。 5. 在 `docs` 文件夹中创建 Markdown 文件，这些文件将会被渲染为网站上的文档页面。 6. 在终端或命令行工具中输入以下命令来启动 Docsify 服务器： ``` docsify serve docs ``` 7. 在浏览器中打开 http://localhost:3000 ，就可以看到 Docsify 生成的网站了。 以上就是使用 Docsify 创建静态网站的基本步骤。在 Docsify 的官网 https://docsify.js.org/zh-cn/ 可以找到更详细的文档和教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值