Docisfy使用配置

Docisfy使用配置
Docisfy使用配置
发布日期:   2025-05-27
更新日期:   2025-05-27
文章字数:   2.3k
阅读次数:  

Docisfy使用配置

1.官网

官网参考docsify

配置好的模板链接：

模板
密码:4e2y

2.使用

快速开始

推荐全局安装 docsify-cli 工具，可以方便地创建及在本地预览生成的文档。

1
npm i docsify-cli -g

初始化项目

如果想在项目的 ./docs 目录里写文档，直接通过 init 初始化项目。

1
docsify init ./docs

开始写文档

初始化成功后，可以看到 ./docs 目录下创建的几个文件

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

直接编辑 docs/README.md 就能更新文档内容，当然也可以添加更多页面。

本地预览

通过运行 docsify serve 启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000 。

1
docsify serve docs

3.index.html配置

下面是配置好的模板：

包含：数学公式、图片显示、pdf在线阅读

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Docsify-Guide</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Description">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 设置浏览器图标 -->
    <!-- <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
    <link rel="icon" href="./img//favicon.ico"/>
    <link rel="shortcut icon" href="./img/favicon.ico" />
    <!-- 默认主题 -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
    <!-- 设置数学公式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js"></script>

    
    <style>
      nav.app-nav li ul {
        min-width: 100px;
      }

      #carbonads {
        box-shadow: none !important;
        width: auto !important;
      }
      
     main{
        width:100%;
      }
    </style>
</head>

<body>
    <!-- 定义加载时候的动作 -->
    <div id="app">加载中...</div>

    <script>
        window.$docsify = {
          router: 'history',
            // 项目名称
            name: 'Docsify-Guide',
            // 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
            repo: 'https://github.com/docsifyjs/docsify',
            // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
            loadSidebar: true,
            // 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
            loadNavbar: true,
            // 封面支持，默认加载的是项目根目录下的_coverpage.md文件
            coverpage: true,
            // 最大支持渲染的标题层级
            maxLevel: 5,
            // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
            subMaxLevel: 4,

            sidebarDisplayLevel: 1, // set sidebar display level
            // 小屏设备下合并导航栏到侧边栏
            mergeNavbar: true,

            markdown: {
        latexRender: katex.renderToString.bind(katex),

  
      //  给pdf命名为自己的名字
        renderer: {
        code: function (code, lang) {
          if (lang === 'pdf') {
            return `<div style="margin-top:20px; margin-bottom:20px;">
                      <a href="${code}" target="_blank">${code.split('/').pop()}</a>
                    </div>`;
          }
          return this.origin.code.apply(this, arguments);
        }
      }

      },


            /*搜索相关设置*/
            search: {
                maxAge: 86400000,// 过期时间，单位毫秒，默认一天
                paths: 'auto',// 注意：仅适用于 paths: 'auto' 模式
                placeholder: '搜索',              
                // 支持本地化
                placeholder: {
                    '/zh-cn/': '搜索',
                    '/': 'Type to search'
                },
                noData: '找不到结果',
                depth: 4,
                hideOtherSidebarContent: false,
                namespace: 'Docsify-Guide',
            },
    
        }
    </script>
    <!-- docsify的js依赖 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
    <!-- emoji表情支持 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
    <!-- 图片放大缩小支持 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
    <!-- 搜索功能支持 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
    <!--在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码-->
    <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>

    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.min.js"></script>

    <!-- 字数统计 -->
    <script src="//unpkg.com/docsify-count/dist/countable.js"></script>




<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>

<!-- 设置数学公式 -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true,
      skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"]
    },
    "HTML-CSS": { fonts: ["TeX"] }
  });
</script>
<script async="async" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>


<!-- PDFObject.js is a required dependency of this plugin -->
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js"></script> 
<!-- This is the source code of the pdf embed plugin -->
<script src="path-to-file/docsify-pdf-embed.js"></script>
<!-- or use this if you are not hosting the file yourself -->
<script src="//unpkg.com/docsify-pdf-embed-plugin/src/docsify-pdf-embed.js"></script>


<script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-tabs@1/dist/docsify-tabs.css">


</body>

</html>

数学公式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <!-- 设置数学公式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js"></script>



<!-- 设置数学公式 -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true,
      skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"]
    },
    "HTML-CSS": { fonts: ["TeX"] }
  });
</script>
<script async="async" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
1
2
3
4
5
window.$docsify = {   //在这个里面加入下面的代码
           //数学公式
           markdown: {
       latexRender: katex.renderToString.bind(katex),
       }

图片显示

1
2
  <!-- 图片放大缩小支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>

搜索功能

1
2
<!-- 搜索功能支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.$docsify = {
            /*搜索相关设置*/
            search: {
                maxAge: 86400000,// 过期时间，单位毫秒，默认一天
                paths: 'auto',// 注意：仅适用于 paths: 'auto' 模式
                placeholder: '搜索',              
                // 支持本地化
                placeholder: {
                    '/zh-cn/': '搜索',
                    '/': 'Type to search'
                },
                noData: '找不到结果',
                depth: 4,
                hideOtherSidebarContent: false,
                namespace: 'Docsify-Guide',
            },
}

pdf在线阅读

在html文件中加入以下代码

1
2
3
4
5
6
7
8
9
10
<!-- PDFObject.js is a required dependency of this plugin -->
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js"></script> 
<!-- This is the source code of the pdf embed plugin -->
<script src="path-to-file/docsify-pdf-embed.js"></script>
<!-- or use this if you are not hosting the file yourself -->
<script src="//unpkg.com/docsify-pdf-embed-plugin/src/docsify-pdf-embed.js"></script>


<script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-tabs@1/dist/docsify-tabs.css">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.$docsify = {
        
      //  给pdf命名为自己的名字
        renderer: {
        code: function (code, lang) {
          if (lang === 'pdf') {
            return `<div style="margin-top:20px; margin-bottom:20px;">
                      <a href="${code}" target="_blank">${code.split('/').pop()}</a>
                    </div>`;
          }
          return this.origin.code.apply(this, arguments);
        }
      }
      },
}

要导入pdf文档时需要进行下面的写法：

1
2
3
```pdf
    pdf文件路径
```

4.导栏配置 _navbar.md

_navbar.md文档配置如下：

下面的内容可以自定义增加

1
2
3
4
5
6
7
8
9
10
<!-- _navbar.md -->

* 链接到我
  * [博客园地址](https://www.cnblogs.com/xxb667/)


* 友情链接
  * [Docsify](https://docsify.js.org/#/)
  * [博客园](https://www.cnblogs.com/)
  * [Markdown 基本语法](https://markdown.com.cn/basic-syntax/)

5.侧边栏配置 _sidebar.md

_sidebar.md 文档配置如下：

下面的内容可以自定义增加

1
2
3
4
5
6
7
<!-- docs/_sidebar.md -->

* [深度学习](./Article/dl/README.md)
  - [第1周-深度学习概述](Article/dl/第1周-深度学习概述.md)
  - [第1周作业题-numpy构建基本函数](Article/dl/第1周作业题-numpy构建基本函数.md)
  - ```pdf
    Article/《深度学习入门：基于Python的理论与实现》高清中文版.pdf
1
2
3
4
5
6
7

# 6.主页配置 _coverpage.md

`_coverpage.md`文档配置如下：

下面的内容可以自定义增加

小西贝の个人博客

Github
开始使用
文章作者: 小西贝
文章链接: http://xxb667.github.io/2025/05/27/docisfy-shi-yong-pei-zhi/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 小西贝 !
Docisfy使用配置
  目录