docsify笔记

乔二参

已于 2024-06-04 11:04:09 修改

阅读量239

点赞数 5

分类专栏：笔记分享文章标签：笔记

于 2024-06-04 11:01:27 首次发布

本文链接：https://blog.csdn.net/2302_79483741/article/details/139436855

版权

笔记分享专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、安装docsify

将依赖文件下载到本地然后在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="./docsify/lib/themes/vue.css"/> -->
    <link rel="stylesheet" href="./docsify/docsify-themeable/dist/css/theme-simple.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster" />
    <link rel="stylesheet" href="./_cunstom.css" />
</head>

<body>
    <div id="app"></div>
    <script>
        window.$docsify = {
            name: '乔二参学习笔记',
            loadNavbar: true,
            loadSidebar: true,
            mergeNavbar: true,
            coverpage: true,
            auto2top: true,
            subMaxLevel: 2,
            onlyCover: true,
            externalLinkTarget: '_blank',
            relativePath: true,
            search: {
                placeholder: '搜索',
                noData: '找不到结果'
            }
        }
    </script>
    <script src="./docsify/lib/docsify.min.js"></script>
    <script src="./docsify/lib/plugins/search.min.js"></script>
    <script src="./docsify/lib/plugins/zoom-image.min.js"></script>
    <script src="./docsify/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
    <script src="./docsify/docsify-themeable/dist/js/docsify-themeable.min.js"></script>
    
</body>

</html>

二、基本设置

1、navbar配置

_narbar.md只在index.html同级目录下放一个就可以了。

- [营销](/marketing_notes/README.md)

- 技术
  - [技术笔记](/technique/notes/README.md)
  - [other](/technique/other/README.md)

2、sidebar配置

docsify默认先在本目录下查找sidebar.md。没有的话去上级目录查找，知道找到sidebar.md。

- [WordPress建站教程](./WordPress建站教程.md)
- [NGINX-HTTPS配置](./NGINX-HTTPS配置.md)
- [CentOS-7-Minimal安装文档](./CentOS-7-Minimal安装文档.md)

3、coverpage配置

使用默认的coverpage修改

4、主题配置

<link rel="stylesheet" href="./docsify/docsify-themeable/dist/css/theme-simple.css" />
<script src="./docsify/docsify-themeable/dist/js/docsify-themeable.min.js"></script>

5、字体配置

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster" />
<link rel="stylesheet" href="./_cunstom.css" />

_cunstom.css

section.cover .cover-main {
    z-index: 100;
}

section.cover.has-mask .mask {
    background-color: #fff;
    opacity: .1 !important;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

section.cover h1 .anchor span {
    font-family: 'Lobster', cursive;
    color: var(--theme-color);
}

section.cover h2 .anchor span {
    font-family: 'Lobster', cursive;
    font-size: 24px;
    color: var(--theme-color);
}

section.cover .cover-main>p:last-child a .iconfont {
    font-size: 1em;
}

.sidebar>h1 a {
    font-family: 'Lobster', cursive;
}