当前位置: 首页 > news >正文

docsify

macos

~ node -v
v16.20.2
~ npm --version
8.19.4

全局安装 docsify-cli 工具

npm i docsify-cli -g
~ docsify -vdocsify-cli version:4.4.4

初始化项目

docsify init ./docs
ls -ah docs
.  ..  .nojekyll  README.md  index.html
  • index.html 入口文件
  • README.md 会做为主页内容渲染
  • .nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件

多页文档

本地预览

docsify serve docs

只允许本地访问

cd docs
python3 -m http.server 3000 --bind 127.0.0.1

插件列表

全文搜索 - Search

  • 编辑 index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="description" content="Description"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body><div id="app"></div><script>window.$docsify = {name: '',repo: '',search: {maxAge: 86400000,           // 过期时间,单位毫秒,默认一天paths: 'auto',              // 自动索引所有文档placeholder: {'/zh-cn/': '搜索','/': 'Type to search'},noData: {'/zh-cn/': '找不到结果','/': 'No Results'},depth: 6,                   // 搜索标题的最大层级, 1 - 6hideOtherSidebarContent: false, // 是否隐藏其他侧边栏内容namespace: 'docs-search',    // 避免搜索索引冲突pathNamespaces: ['/zh-cn']  // 使用不同的索引作为路径前缀}}</script><!-- Docsify v4 --><script src="//cdn.jsdelivr.net/npm/docsify@4"></script><!-- 搜索插件 --><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>
</html>

导航栏

  • 修改 index.html 添加导航栏配置和 emoji 插件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="description" content="Description"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body><nav><a href="#/">EN</a><a href="#/zh-cn/">中文</a></nav><div id="app"></div><script>window.$docsify = {name: '',repo: '',loadNavbar: true,  // 启用导航栏search: {maxAge: 86400000,           // 过期时间,单位毫秒,默认一天paths: 'auto',              // 自动索引所有文档placeholder: {'/zh-cn/': '搜索','/': 'Type to search'},noData: {'/zh-cn/': '找不到结果','/': 'No Results'},depth: 6,                   // 搜索标题的最大层级, 1 - 6hideOtherSidebarContent: false, // 是否隐藏其他侧边栏内容namespace: 'docs-search',    // 避免搜索索引冲突pathNamespaces: ['/zh-cn']  // 使用不同的索引作为路径前缀}}</script><!-- Docsify v4 --><script src="//cdn.jsdelivr.net/npm/docsify@4"></script><!-- 搜索插件 --><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script><!-- emoji 插件 --><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
</body>
</html>

创建一个 _navbar.md 文件,包含多级导航和 emoji

* [:us: English](/)
* [:cn: 中文](/)* :book: 文档* [项目介绍](/)* [快速开始](start-docs.md)

参考

  1. docsify
http://www.lryc.cn/news/506331.html

相关文章:

  • GEE教程——使用 CHIRPS 和 GSMaP 数据集计算并可视化了特定区域的降水量
  • 前端实现页面自动播放音频方法
  • 【Nginx-5】Nginx 限流配置指南:保护你的服务器免受流量洪峰冲击
  • 【芯片设计- RTL 数字逻辑设计入门 番外篇 7.1 -- 基于ATE的IC测试原理】
  • SurfaceFlinger 学习
  • Flink SQL 从一个SOURCE 写入多个Sink端实例
  • python飞机大战游戏.py
  • 【C++】14___String容器
  • 数据特性库 前言
  • jdk和cglib动态代理区别
  • 部署Mysql、镜像和容器、常见命令
  • 【数学】P2671 [NOIP2015 普及组] 求和
  • 【AI图像生成网站Golang】项目测试与优化
  • vue常用自定义指令
  • 以太网帧、IP数据报图解
  • 01.大模型起源与发展
  • leetcode刷题日记03——javascript
  • vue横向滚动日期选择器组件
  • 【大模型】大模型项目选择 RAGvs微调?
  • 2024年12月CCF-GESP编程能力等级认证Python编程一级真题解析
  • 【机器学习】元学习(Meta-learning)
  • 详解Redis的String类型及相关命令
  • android RadioButton + ViewPager+fragment
  • 给机器装上“脑子”—— 一文带你玩转机器学习
  • 论文笔记:是什么让多模态学习变得困难?
  • ChatGPT Search开放:实时多模态搜索新体验
  • Centos7.9 离线安装docker
  • C语言函数在调用过程中具体是怎么和栈互动的?
  • 【Java中常见的异常及其处理方式】
  • 如何更新项目中的 npm 或 Yarn 依赖包至最新版本