时间:2023-04-30 15:24:02 | 来源:网站运营
时间:2023-04-30 15:24:02 来源:网站运营
基于 Gitee 搭建个人网站-入门教程:npm i docsify-cli -g
mkdir rodert
https://rodert.github.io/JavaPub-Interview/
,运行看效果。1. index.html:入口文件,docsify 的各项配置都在此页面设置。2. README.md:默认展示的首页就是 README.md 里的内容。3. .nojekyll:用于阻止 GitHub Pages 会忽略掉下划线开头的文件。<!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 src="//unpkg.com/docsify-edit-on-github/index.js"></script> <script> window.$docsify = { name: 'rodert', repo: 'https://gitee.com/rodert/rodert', maxLevel: 5,//最大支持渲染的标题层级 subMaxLevel: 3, homepage: 'README.md', coverpage: true,//封面 loadSidebar: true,//开启侧边栏 auto2top: true,//切换页面后是否自动跳转到页面顶部 } </script> <!-- Docsify v4 --> <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> <!--Java代码高亮--> <script src="//unpkg.com/prismjs/components/prism-java.js"></script> <!--Json代码高亮--> <script src="//unpkg.com/prismjs/components/prism-json.min.js"></script></body></html>
<!--全文搜索--> <script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js">
配置方式: <script> window.$docsify = { ...... //全文搜索 search: { maxAge: 86400000, // 过期时间,单位毫秒,默认一天 paths: 'auto', placeholder: '请输入要搜索的关键字', noData: '没有结果', // 搜索标题的最大程级, 1 - 6 depth: 6, }, } </script>
OK,有了搜索功能。<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
效果:pagination: { previousText: '上一章节', nextText: '下一章节',}
需要引入两个 js 文件:<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
loadSidebar: true,增加 _sidebar.md 文件,编写文件格式如下:(也就是md语法)
- [CentOS](centos.md)- [Docker](docker.md)- [Mac](mac.md)- [NPM](npm.md)- [推荐](recommend.md)
关键词:入门,教程