由于平时使用Markdown做笔记，所以搭建了vuepress对笔记进行了管理，vuepress可以对文件内容进行搜索，非常方便；同时笔记放到网站上，可以随时随地访问。
1. 安装node.js
2. 安装vuepress
npm install -g vuepress我采用的主题为：vuepress_admin
git clone https://github.com/2662419405/vuepress_admin.git
cd vuepress_admin && npm i
vuepress dev docs
vuepress build docs设置package.json的脚本配置：
VuePress中有两个命令:
1.vuepress dev docs命令运行本地服务，通过访问(http://localhost:8080)即可预览网站
2.vuepress build docs命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中，当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。
在这里将两个命令封装成脚本的方式，直接使用npm run dev和npm run build即可。
3. 其它配置：
(1) 设置侧边栏可收起、展开(适配手机等小屏幕)
参考：10.3 设置侧边栏可收起、展开
- 在主题目录中 (
.vuepress/theme/) 找到SidebarButton.vue文件，修改如下对应内容：
<style lang="stylus">
// sidebar-button中，注释掉 display none
.sidebar-button
// display none
cursor pointer
</style>
<style lang="stylus">
.sidebar-button
cursor pointer
// sidebar-button中，注释掉 display none
//display none
width 1.25rem
height 1.25rem
position absolute
padding 0.6rem
top 0.6rem
// left改为0.2rem,调整格式，美观显示
left 0.2rem
.icon
display block
width 1.25rem
height 1.25rem
@media (max-width: $MQMobile)
.sidebar-button
display block
</style>- 在主题目录中 (
.vuepress/theme/) 找到Navbar.vue文件，修改如下对应内容：
<style lang="stylus">
$navbar-vertical-padding = 0.7rem
$navbar-horizontal-padding = 2.5rem
// 增加到2.5rem,方便在左上角点击侧边栏按钮- 在主题目录中 (
.vuepress/theme/) 找到Layout.vue文件，修改如下对应内容：
methods: {
toggleSidebar (to) {
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen;
// 这里添加一行代码
this.switchSidebar();
},
// 添加一个新的方法：显示隐藏侧边栏
switchSidebar() {
let sidebar = document.querySelector('#app .sidebar');
let page = document.querySelector('#app .page');
if (!sidebar || !page) {
return;
}
if (window.screen.width < 719) {
sidebar.style.width = '';
page.style.paddingLeft = '';
return;
}
if (sidebar.offsetWidth > 100) {
sidebar.style.width = '0';
page.style.paddingLeft = '0';
} else {
sidebar.style.width = '20rem';
page.style.paddingLeft = '20rem';
}
},- 在主题目录中 (
.vuepress/theme/components) 找到Page.vue文件，修改如下对应内容：
+ <!--
<div class="warning custom-block juzhong">
<p class="custom-block-title">
关于评论
</p>
<p>
评论前请填好“昵称”、“邮箱”这两栏内容，否则不会收到回复，谢谢！
</p>
</div>
<div id="valine-vuepress-comment">
<Comments v-bind:is="viewComments"></Comments>
</div>
+ -->- 在SidebarGroup.vue中修改如下对应内容：
<style lang="stylus">
.sidebar-group
.sidebar-group
padding-left 0.5em
&:not(.collapsable)
.sidebar-heading:not(.clickable)
cursor auto
color inherit
// refine styles of nested sidebar groups
&.is-sub-group
padding-left 0
& > .sidebar-heading
font-size 0.95em
line-height 1.4
+ font-weight normal
- font-weight bold
padding-left 2rem
&:not(.clickable)
+ opacity 1
- opacity 0.5
& > .sidebar-group-items
padding-left 1rem
& > li > .sidebar-link
font-size: 0.95em;
border-left none
&.depth-2
& > .sidebar-heading
border-left none
.sidebar-heading
color $textColor
transition color .15s ease
cursor pointer
font-size 1.1em
font-weight bold
// text-transform uppercase
padding 0.35rem 1.5rem 0.35rem 1.25rem
width 100%
box-sizing border-box
margin 0
border-left 0.25rem solid transparent
&.open, &:hover
+ color inherit
- color black
.arrow
position relative
top -0.12em
left 0.5em
&.clickable
&.active
font-weight 600
color $accentColor
border-left-color $accentColor
&:hover
color $accentColor
.sidebar-group-items
transition height .1s ease-out
font-size 0.95em
overflow hidden
</style>(2) VuePress 自动生成侧边栏和导航栏
(3) Vuepress 图片资源中文路径问题
npm install --save-dev markdown-it-disable-url-encode- 将其注入
vuepress配置文件中
.vuepress/config.js
module.exports = {
markdown: {
extendMarkdown: md => {
md.use(require("markdown-it-disable-url-encode"));
}
}
};(4) 添加代码拷贝
在代码区，添加一个拷贝按钮，用来拷贝代码。
安装：
npm install vuepress-plugin-code-copy配置：
module.exports = {
plugins: [['vuepress-plugin-code-copy', true]]
}(5) 配置nginx的端口来访问不同网站
因为服务器安装nginx，所以只需要配置nginx的端口，并配置相应的路径，就可以登录ip:port来访问vuepress
可以.在配置/usr/local/nginx/conf/nginx.conf里的http下配置两个server即可:
server {
listen 81;
root /root/vuepress/vuepress_admin/docs/.vuepress/dist;
index index.html index.htm index.php;
location ~ \.php$ {
try_files $uri =404;
include fastcgi_params;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
}
server {
listen 82;
root /root/nextcloud/data/root/files/Markdown;
index index.html index.htm index.php;
location ~ \.php$ {
try_files $uri =404;
include fastcgi_params;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
}注意：Server应放http里面
验证nginx是否有配置错误：
nginx -t如果出现ok，successful字样，说明没有错误。没有错误，重新加载nginx：
nginx -s reload腾讯云需要加权限：
chmod -R 755 /data(6) 使用nginx为vuepress网站添加用户名密码访问
因为很多笔记都是别人的博客，不能公开，所以就需要为网站添加密码。
因为是安装完成之后整理的博客，所以应该会有错误，欢迎指正。
本地笔记：
笔记网站页面：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
