4 | 服务器安装vuepress，高效管理Markdown笔记

最新推荐文章于 2024-07-02 10:07:14 发布
最新推荐文章于 2024-07-02 10:07:14 发布
阅读量999 收藏 2
点赞数
分类专栏： 服务器配置 文章标签： 服务器 云服务器 markdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26239525/article/details/117539264
版权

由于平时使用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 设置侧边栏可收起、展开

  1. 在主题目录中 (.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>

  2. 在主题目录中 (.vuepress/theme/) 找到Navbar.vue文件，修改如下对应内容：

    <style lang="stylus">
$navbar-vertical-padding = 0.7rem
$navbar-horizontal-padding = 2.5rem
// 增加到2.5rem,方便在左上角点击侧边栏按钮

  3. 在主题目录中 (.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';
        }
    },

  4. 在主题目录中 (.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>
+ -->

  5. 在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 图片资源中文路径问题

  1. 安装 markdown-it-disable-url-encode

    npm install --save-dev markdown-it-disable-url-encode

  2. 将其注入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网站添加用户名密码访问

因为很多笔记都是别人的博客，不能公开，所以就需要为网站添加密码。

因为是安装完成之后整理的博客，所以应该会有错误，欢迎指正。

本地笔记：
在这里插入图片描述
在这里插入图片描述

笔记网站页面：
在这里插入图片描述

参考链接

https://github.com/2662419405/vuepress_admin

http://shtodream.cn/

使用vuepress搭建博客并发布到云服务器

StayAl
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-element-plus-admin整合后端实战——实现系统登录、缓存用户数据、实现动态路由
学海无涯，行者无疆
03-27 2万+
整合vue-element-plus-admin前端框架，作为开发平台的前端。介绍如何对vue-element-plus-admin改造，实现系统登录、缓存用户数据以及动态路由。
使用VuePress搭建个人博客笔记
weixin_44410302的博客
05-15 437
VuePress的介绍 VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。 搭建一个 VuePress 文档 前提：使用VuePress需要安装Node.js>=8.6 安装好之后点击电脑屏幕左下方的window窗口（或点击Win键），在最近添加中找到node.js command prompt，点击进入
vuepress_admin:vuepress的管理模板，笔记的源码网站-> http
03-23
成为管理我的整个笔记文档 说明： :hundred_points:成为分享一些笔记也是用来记录自己的学习旅程的一种方法，感谢每一个贡献的朋友，还在不断完善中 贡献者感谢每一个贡献的朋友！ 完成的功能 vuepress建设成功 缬氨酸评论系统 返回顶部插件 目录结构化，更具体 增加了反问面试官 增加了面试题大全 增加了2018年大厂面试题 使用styl管理变量 较少的 ass 夜间模式 Nginx的 网络基础 linux基础 思维导图 性能优化大全 前端安全 增加webhooks 增加自动化测试 高阶面试题（常见手写面试题） 正在加载中 D3 图表 SVG jQuery Mobile Zepto 时间轴 懒加载 瀑布流 Animate.js Swiper.js 芋头学习 :party_popper:希望可以一​​直坚持下去 安装 git clone https://github.com/2662419405/vu
使用 markdown-it 解析 markdown 代码（读 VuePress 三）
weixin_34007291的博客
10-09 1146
前言 在此系列文章的第一篇，我们介绍了 Vuepress 如何让 Markdown 支持 Vue 组件的，但没有提到非 Vue 组件的其他部分如何被解析。 今天，我们就来看看 Vuepress 是如何利用 markdown-it 来解析 markdown 代码的。 markdown-it 简介 markdown-it 是一个辅助解析 markdown 的库，可以完成从 # test 到 &lt;h...
关于 VuePress 的插件
最新发布
PeterJXL的博客
07-02 1027
插件就好比第三方功能，例如增加一个阅读进度条、增加光标效果等。
markdown-it 实时渲染vue组件
m0_74304054的博客
05-09 1185
为了实现更多的扩展性和可能，我可能会探索如果在md编写slot和prop，并正确解析的方法。请持续关注我！createAppvite的glob导入。
vuepress添加复制代码块功能
学而时习之，不亦说乎。
07-19 4389
vuepress添加复制代码块功能 安装 如果使用 npm： npm install vuepress-plugin-code-copy 如果使用 yarn: yarn add vuepress-plugin-code-copy 快速使用 将 vuepress-plugin-code-copy 添加到vuepress项目的插件配置中： module.exports = { plugins: [['vuepress-plugin-code-copy', true]] } ...
Python基于VuePress搭建的个人笔记静态站点源码.zip
10-27
总结一下，这个"Python基于VuePress搭建的个人笔记静态站点源码"项目结合了Python的灵活性和VuePress的易用性，提供了一个高效且可定制的个人知识管理平台。通过Python脚本，你可以自动化内容生成，提升工作效率；...
使用vuepress搭建静态博客的示例代码
10-17
一旦安装完成，就可以通过`vuepress dev`命令启动一个开发服务器，通过`vuepress build`命令来构建生成静态文件。 2. 创建项目结构：一个基本的VuePress项目结构包括`docs`目录，其中包含`README.md`文件作为项目的...
个人笔记(vue2,3个人笔记)
11-03
7. **VuePress**：基于Vue的静态站点生成器，适合创建文档和博客。它将Markdown文件转换为静态HTML，同时提供主题定制和SEO优化功能。 8. **Vue Server Renderer**：用于服务器端渲染，它可以将Vue组件渲染为实际的...
Vue进阶（九十六）：VuePress 详解(2)
2401_84447297的博客
04-29 296
搭建的静态网站实际上是由 , 和 驱动的单页面应用程序。如果你以前使用过 ，那么在编写或开发自定义主题时（甚至可以使用 来调试你的自定义主题！），你会融入到熟悉的开发体验中！在构建过程中，我们会创建应用程序的服务器渲染版本，并且实际上是通过访问每个路由，来渲染相应的 。这种方式受到 的 命令以及 等其他项目的启发。首先说明一下官方推荐的目录结构： 可以右键手动新建，也可以使用 命令新建： 全局安装 进入 vuepressBlogDemo 文件夹，初始化项目 使用 或 （默认yes） 4.3
Vuepress适配markdown相关问题
紫罗兰与海棠的博客
12-24 277
博主这里只安装markdown-it-image-lazy-loading（图片懒加载）和markdown-it-disable-url-encode（禁止url编码）两个插件，其它的可以按需自行安装不建议使用vuepress社区提供的图片懒加载插件（ vuepress-plugin-img-lazy），博主实测与markdown-it-disable-url-encode存在冲突，也许是版本兼容性问题，因此最后选择使用markdown-it社区的懒加载插件代替。
vuepress 开发文档要注意的点
Jackshijin的博客
12-04 851
vuepress 坑点 侧边栏的展开标题和md文件里的标题是一样的，而文件名称则是要跟config.js的sideBar配置的路径一致 在vuepress组件中使用window和document 在本地开发的时候不会报错，但是在build的时候会报错，这是因为vuepress所有的页面在生成静态HTML时都需要通过Node.js服务端渲染，Node环境中没有document和window对象，因此访问或者使用这两个对象中的方法或属性就会报错。 解决方法：确保在beforeMount或mounted
vuepress主题改造-标签云的改造(2)
weixin_34205076的博客
06-12 1891
前言 上一章已经讲了 vuepress 主题如何实现继承，这样我们可以任意修改默认主题的任何组件及样式了。我们知道 vuepress 是无法自动根据我们 markdown 文件中的 --- tags: - js - vue --- 复制代码生成标签云的页面的，而一个博客，标签在其中有知识分类及导航功能，是必不可少的一环，下面带领大家来改造一下默认主题让它能支持自动生成标签云页面 第一步配置的修改 ...
VuePress学习指南（下）
qq_34185872的博客
06-02 965
要自定义VuePress的主题，需要做以下几步：创建主题文件夹：在VuePress项目的根目录下创建一个themes文件夹，并在其中新建一个以主题名命名的文件夹，例如my-theme。创建主题配置文件：在my-theme文件夹中创建一个config.js文件，用于配置主题的一些选项，例如导航栏、侧边栏、颜色等。创建主题模板文件：在my-theme文件夹中创建一个layouts文件夹，并在其中创建.vue文件，用于定义不同页面类型的布局，如首页、文章页、404页等。
vuepress中使用数学公式
baidu_23377847的博客
05-10 1619
1. 安装组件 数学公式插件 markdown-it-katex npm install markdown-it-katex --save 2. 添加配置 修改 .vuepress/config.js 下的配置，如下 module.exports = { extendMarkdown(md) { md.set({ html: true }); md.use(require("markdown-it-katex")); }, } 插件安装到此就完成了， 然后
VuePress 开发技术文档网站，管理.md文件，生成静态网站
朝阳39的博客
01-27 1412
最终效果 开发流程 1. 新建文件夹 mydocs 2. 初始化项目 进入项目文件夹 mydocs，执行命令 yarn init 一直回车使用默认配置即可。 3. 安装VuePress yarn add -D vuepress 4. 添加项目脚本 在package.json中添加 "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build d...
Vuepress使用指南(reco)
qq_19978927的博客
08-16 4805
环境搭建 安装node node官网 安装官网提示下载安装包安装即可 安装完成后打开命令行工具，输入node -v，若返回版本信息则安装成功。 安装npm npm install 创建博客工程 # 安装脚手架工具 npm install @vuepress-reco/theme-cli -g # 创建项目 theme-cli init my-blog #my-blog可替换成自己需要的项目名称 上述命令执行后，在命令行窗口会进行一系列的信息配置 ? What's the title of you
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值