记录个人Wiki搭建配置过程

博主： bananaYH
发布时间：2021 年 07 月 10 日
1598次浏览
暂无评论
4654字数
分类：博客搭建

搭建docsify个人Wiki过程

本文介绍以docsify为基础搭建wiki，文件数据存放到github，本文详细说明了配置过程

打开cmd，检查本地node是否安装，没有安装需前往Node官网安装

打开cmd，安装docsify-cli工具，可以方便地创建及在本地预览生成的文档

npm i docsify-cli -g

在本地创建好项目的目录，到目录下通过docsify init命令初始化项目

github创建好项目

学习git的使用及如何上传文件

配置本地git 和远程github连接所需要的SSH

ssh-keygen -t rsa生成与github联系的秘钥key

在github上settings里面配置SSH
    打开github的settings —> New SSH —> Add SSH key

cat ~/.ssh/id_rsa.pub 查看公钥

测试连接
    命令行输入

ssh -T git@github.com，在第一次测试时会弹出警告，需要填写yes

将这个目录变成git可以管理的仓库
```
git init
```

创建用户名

git config --global user.name"用户名"

创建邮箱

git config --global user.email"邮箱地址"

将本地仓库与github关联

将本地分支修改为main

git branch -m master main

验证：git branch查看本地分支，git branch -a 查看远程分支

把远程仓库更新与本地分支合并（github的文件更新到本地）
```
git pull origin main
```

将本地的分支版本上传到远程并合并（本地文件更新到github）

git push -u origin main

-u 选项会指定一个默认主机，这样后面就可以不加任何参数使用git push

注意事项！！！

每次更新了本地文件后，需要使用 git add 命令将文件写入暂存区，再使用git commit 命令将暂存区内容添加到本地仓库中，最后再使用git push上传

有新文件，先使用git add 文件名将文件写入暂存区

也可以使用git add . 代表把所有文件全部提交

git commit -m "描述信息"将文件添加到本地仓库

添加到本地仓库后即可使用git push命令上传更新文件

配置Wiki

测试

打开github项目中的域名

初始内容如下

index.html文件配置

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">莫急，Loading......</div>
  <script>
    window.$docsify = {
            // 项目名称
            name: '不拿呐のBlog',
            // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
            loadSidebar: true,
            // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级，建议配置为1或者2
            subMaxLevel: 2,
            // 导航栏支持，默认加载的是项目根目录下的_navbar.md文件,使用html方式配置也需开启
            loadNavbar: true,
            // 封面支持，默认加载的是项目根目录下的_coverpage.md文件
            coverpage: true,
            // 最大支持渲染的标题层级
            maxLevel: 4,
            // 搜索配置
            search: {
                maxAge: 86400000,
                paths: 'auto',
                placeholder: '搜索',
                noData: '找不到结果',
                depth: 4,
                hideOtherSidebarContent: false
            }
        }
  </script>
  <!-- docsify的js依赖 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  <!-- 搜索功能支持 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <!-- 图片放大缩小支持 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
  <!-- emoji表情支持 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
</body>
</html>

自定义侧边栏

在index.html中配置 loadSidebar 选项，创建 _sidebar.md文件

_sidebar.md文件内容如下：

* [首页](/)
* [Linux](Linux/)

嵌套目录格式为

* 第一个章节的标题
 * [第一章节第1篇文章的标题](第一个章节第1篇文章的md地址 "可选配置(此处可指定页面标题)")
* 第二个章节的标题
 * [第二章节第1篇文章的标题](第二个章节第1篇文章的md地址)

自定义导航栏

①在index.html中配置 loadNavbar选项，默认加载的文件为 _navbar.md

_navbar.md文件内容如下：

* [**HOME**](/)
* [**博客**](https://luoyunhao.com)

**代表加粗的意思，参考Markdown的使用

②也可以修改index.html文件达到同样的效果

<body>
  <nav>
    <a href="#/">HOME</a>
    <a href="https://luoyunhao.com">博客</a>
  </nav>
</body>

注意：文档的链接都要以 #/ 开头

嵌套导航栏格式与嵌套目录同理

emoji插件配置：

在index.html中引入相应css，即可在_navbar.md文件中使用表情(直接将表情复制进也可)

* [:us:, :uk:](https://bananayh.github.io/blog-wiki)
* [:cn:](https://luoyunhao.com)

封面配置

在index.html中配置 coverpage 参数，可以开启渲染封面的功能，并创建一个_coverpage.md

_coverpage.md文件内容如下：

![logo](https://luoyunhao.com/usr/themes/handsome/assets/img/皮卡丘.png)
 
# docsify <small>3.5</small>
 
> 一个神奇的文档网站生成器。

 
[GitHub](https://github.com/bananaYH/blog-wiki)
[Get Started](#headline)

页面效果

至此，就已经完成了Wiki的初步配置，更多插件的安装及优化请参考官方文档AND插件整合

最后修改：2021 年 07 月 10 日 11 : 16 PM

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

FTP漏洞利用
浏览次数: 4351
Burp+sqlmap测试SQL注入
浏览次数: 3625
Burpsuite测试sql时间盲注
浏览次数: 3329
setoolkit报错解决
浏览次数: 2378
linux网络操作系统-实训项目的实现
浏览次数: 2012

潜心学习的打工人
...
看透一切的人士
反手一个举报( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
Rin
学费了!(☆ω☆)
挺胸的匿名人士
测试

Kali Linux信息收集
浏览次数: 1638
Burp+sqlmap测试SQL注入
浏览次数: 3625
从零部署halo博客
浏览次数: 1794
Kali Linux漏洞利用
浏览次数: 1351
记录搭建Typecho博客过程中遇到的问题
浏览次数: 1784

记录个人Wiki搭建配置过程

bananaYH • 2021 年 07 月 10 日

搭建docsify个人Wiki过程

本文介绍以docsify为基础搭建wiki，文件数据存放到github，本文详细说明了配置过程

打开cmd，检查本地node是否安装，没有安装需前往Node官网安装

打开cmd，安装docsify-cli工具，可以方便地创建及在本地预览生成的文档

npm i docsify-cli -g

在本地创建好项目的目录，到目录下通过docsify init命令初始化项目

github创建好项目

学习git的使用及如何上传文件

配置本地git 和远程github连接所需要的SSH

ssh-keygen -t rsa生成与github联系的秘钥key

在github上settings里面配置SSH
    打开github的settings —> New SSH —> Add SSH key

cat ~/.ssh/id_rsa.pub 查看公钥

测试连接
    命令行输入

ssh -T git@github.com，在第一次测试时会弹出警告，需要填写yes

将这个目录变成git可以管理的仓库
```
git init
```

创建用户名

git config --global user.name"用户名"

创建邮箱

git config --global user.email"邮箱地址"

将本地仓库与github关联

将本地分支修改为main

git branch -m master main

验证：git branch查看本地分支，git branch -a 查看远程分支

把远程仓库更新与本地分支合并（github的文件更新到本地）
```
git pull origin main
```

将本地的分支版本上传到远程并合并（本地文件更新到github）

git push -u origin main

-u 选项会指定一个默认主机，这样后面就可以不加任何参数使用git push

注意事项！！！

每次更新了本地文件后，需要使用 git add 命令将文件写入暂存区，再使用git commit 命令将暂存区内容添加到本地仓库中，最后再使用git push上传

有新文件，先使用git add 文件名将文件写入暂存区

也可以使用git add . 代表把所有文件全部提交

git commit -m "描述信息"将文件添加到本地仓库

添加到本地仓库后即可使用git push命令上传更新文件

配置Wiki

测试

打开github项目中的域名

初始内容如下

index.html文件配置

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">莫急，Loading......</div>
  <script>
    window.$docsify = {
            // 项目名称
            name: '不拿呐のBlog',
            // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
            loadSidebar: true,
            // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级，建议配置为1或者2
            subMaxLevel: 2,
            // 导航栏支持，默认加载的是项目根目录下的_navbar.md文件,使用html方式配置也需开启
            loadNavbar: true,
            // 封面支持，默认加载的是项目根目录下的_coverpage.md文件
            coverpage: true,
            // 最大支持渲染的标题层级
            maxLevel: 4,
            // 搜索配置
            search: {
                maxAge: 86400000,
                paths: 'auto',
                placeholder: '搜索',
                noData: '找不到结果',
                depth: 4,
                hideOtherSidebarContent: false
            }
        }
  </script>
  <!-- docsify的js依赖 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
  <!-- 搜索功能支持 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <!-- 图片放大缩小支持 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
  <!-- emoji表情支持 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
</body>
</html>

自定义侧边栏

在index.html中配置 loadSidebar 选项，创建 _sidebar.md文件

_sidebar.md文件内容如下：

* [首页](/)
* [Linux](Linux/)

嵌套目录格式为

* 第一个章节的标题
 * [第一章节第1篇文章的标题](第一个章节第1篇文章的md地址 "可选配置(此处可指定页面标题)")
* 第二个章节的标题
 * [第二章节第1篇文章的标题](第二个章节第1篇文章的md地址)

自定义导航栏

①在index.html中配置 loadNavbar选项，默认加载的文件为 _navbar.md

_navbar.md文件内容如下：

* [**HOME**](/)
* [**博客**](https://luoyunhao.com)

**代表加粗的意思，参考Markdown的使用

②也可以修改index.html文件达到同样的效果

<body>
  <nav>
    <a href="#/">HOME</a>
    <a href="https://luoyunhao.com">博客</a>
  </nav>
</body>

注意：文档的链接都要以 #/ 开头

嵌套导航栏格式与嵌套目录同理

emoji插件配置：

在index.html中引入相应css，即可在_navbar.md文件中使用表情(直接将表情复制进也可)

* [:us:, :uk:](https://bananayh.github.io/blog-wiki)
* [:cn:](https://luoyunhao.com)

封面配置

在index.html中配置 coverpage 参数，可以开启渲染封面的功能，并创建一个_coverpage.md

_coverpage.md文件内容如下：

![logo](https://luoyunhao.com/usr/themes/handsome/assets/img/皮卡丘.png)
 
# docsify <small>3.5</small>
 
> 一个神奇的文档网站生成器。

 
[GitHub](https://github.com/bananaYH/blog-wiki)
[Get Started](#headline)

页面效果

至此，就已经完成了Wiki的初步配置，更多插件的安装及优化请参考官方文档AND插件整合

搭建docsify个人Wiki过程

学习git的使用及如何上传文件

配置Wiki

测试

index.html文件配置

自定义侧边栏

自定义导航栏

封面配置

页面效果

发表评论 取消回复

记录个人Wiki搭建配置过程

搭建docsify个人Wiki过程

学习git的使用及如何上传文件

配置Wiki

测试

index.html文件配置

自定义侧边栏

自定义导航栏

封面配置

页面效果

发表评论取消回复