docsify & gitee 搭建個人博客
文章目錄
- docsify & gitee 搭建個人博客
- 1.npm 安裝
- 1.1 在Windows上安裝npm：
- 1.2 在macOS上安裝npm：
- 1.3 linux 安裝npm
- 2. docsify
- 2.1 安裝docsify
- 2.2 自定義配置
- 2.2.1 通過修改index.html，定制化開發頁面
- 2.2.2 頂部導航欄和側邊欄
- 2.2.3 新建 _navbar.md 文件
- 2.2.4 側邊欄設置
- 2.2.5 全文檢索
- 2.2.6 一鍵仿制插件
- 2.2.7 代碼高亮
- 2.2.8 代碼高亮
- 2.2.9 自定義封面
- 3.gitee 搭建庫
- 4 設置Github Pages
1.npm 安裝
npm是Node.js的包管理器，用于安裝和管理JavaScript包。要安裝npm，需要先安裝Node.js。以下是在不同操作系統上安裝npm的步驟：
1.1 在Windows上安裝npm：
- 訪問Node.js官方網站（https://nodejs.org）。
- 在下載頁面上，選擇適用于Windows的LTS版本（長期支持版本）的Node.js安裝程序。
- 下載安裝程序并運行它。
- 在安裝過程中，確保選中"npm package manager"選項。
- 完成安裝后，打開命令提示符或PowerShell，并運行npm -v命令，確認npm已成功安裝。
1.2 在macOS上安裝npm：
- 打開終端應用程序。
- 使用Homebrew包管理器安裝Node.js。運行以下命令：
brew install node
- 完成安裝后，運行npm -v命令，確認npm已成功安裝。
1.3 linux 安裝npm
在Linux上安裝npm：
- 打開終端。
- 使用包管理器安裝Node.js。根據你使用的Linux發行版，運行以下命令之一：
- Debian/Ubuntu：
sudo apt-get install nodejs npm
- Fedora：
sudo dnf install nodejs npm
- CentOS/RHEL：
sudo yum install nodejs npm
安裝完成后，你可以使用npm install 命令來安裝JavaScript包。例如，要安裝名為"lodash"的包，可以運行npm install lodash命令。
2. docsify
2.1 安裝docsify
# 安裝 docsify-cli
npm i docsify-cli -g
# 初始化項目
docsify init ./docs
# 發動項目
docsify serve docs
http://localhost:3000/#/ 成功截圖：
2.2 自定義配置
2.2.1 通過修改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: ''}</script><!-- Docsify v4 --><script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>
2.2.2 頂部導航欄和側邊欄
window.$docsify = {name: '東小西', // 側邊欄頂部顯現的稱號repo: 'https://gitee.com/chen_1953981601', // 右上角Github圖標鏈接,這是例子，需要具體換為自己的loadNavbar: true, // 默許加載 _navbar.md，作為頂部導航欄loadSidebar: true // 默許加載 _sidebar.md，作為側邊欄}
2.2.3 新建 _navbar.md 文件
- [**目錄**](README.md)- [**環境安裝**](source/env/env.md)- [**編程相關學習**](source/books/books.md)- [**人工智能**](source/DL/DL.md)- [**工程部署相關問題**](source/project/project.md)- [**相關開源工具**](source/openTech/openTech.md)- **論文閱讀筆記**
* [**文章集合**](paper/README.md)
2.2.4 側邊欄設置
window.$docsify = {name: '東小西', // 側邊欄頂部顯現的稱號repo: 'https://gitee.com/renxiaoshi', // 右上角Github圖標鏈接loadNavbar: true, // 默許加載 _navbar.md，作為頂部導航欄loadSidebar: true, // 默許加載 _sidebar.md，作為側邊欄subMaxLevel: 3, // 目錄的最大層級}
2.2.5 全文檢索
window.$docsify = {name: '東小西', // 側邊欄頂部顯現的稱號repo: 'https://gitee.com/c_1953981601', // 右上角Github圖標鏈接loadNavbar: true, // 默許加載 _navbar.md，作為頂部導航欄loadSidebar: true, // 默許加載 _sidebar.md，作為側邊欄subMaxLevel: 3, // 目錄的最大層級search: {paths: 'auto',placeholder: '檢索',noData: '沒有找到喔！',depth: 3,},}<!-- 檢索插件 --><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
2.2.6 一鍵仿制插件
<!-- 一鍵仿制插件 --><script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
2.2.7 代碼高亮
<!-- 代碼高亮 --><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-shell-session.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-http.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
2.2.8 代碼高亮
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
2.2.9 自定義封面
window.$docsify 中添加 coverpage: true，默許會加載 _coverpage.md。
新建_coverpage.md文件，內容如下：
# Blogs for SWPUCWF> 如果不是為了讓她哭，那么卷人又有什么意義？[CSDN](https://blog.csdn.net/weixin_42917352?spm=1000.2115.3001.5343)email: swpucwf@126.com[滾動鼠標](#)
3.gitee 搭建庫
Gitee Pages服務，代碼托管網站將用戶的庫房文件以網頁方式發布。
4 設置Github Pages
在 Settings 中的 GitHub Pages 中選擇 docs 文件夾，點擊保存，即可發布剛剛的文檔網站。
源碼通俗解讀(施工中))
