使用vuepress搭建一个学习笔记类博客

sherlockkid7
326 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

前言

之前使用hexo和githup搭建过个人博客,但是在管理仓库的时候，不小心把仓库删除了，后面也没有重新建立仓库（因为太懒了，一直没怎么写文章）。但是一直想尝试使用vuepress搭建博客，因此为了记录学习笔记，准备重新建个笔记类博客

项目搭建

前提条件

需要先安装 Node.js，版本号要在 14.0 以上

1. 创建目录

a. 手动创建
b. 使用 mkdir命令 创建(在命令提示符cmd中执行)

mkdir notesBlog

2. 进入当前目录

cd notesBlog

3. 初始化项目（因为想尝试vuepress2.0.0系列，所以版本选择的2.0.0，其它选择可以直接默认，后面可以在package.json文件中修改）

image.png

4. 本地安装VuePress

npm install -D vuepress@next

5. 在 package.json 文件里添加启动命令

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
},

6. 创建一篇测试文章

image.png

7. 运行项目

npm run dev

注：VuePress 会在本地域名启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。

基本配置

在创建的文档目录（docs）下创建一个 .vuepress 目录（放置VuePress 相关的文件），在.vuepress 中创建VuePress 站点的基本配置文件config.js，再在该目录中新建一个public文件夹，用于存储图片

此时的目录结构：

├─ docs 
│ ├─ .vuepress
│    └─ public
│        └─ images
│          └─ logo.png  
│    └─ config.js 
│ └─ README.md 
└─ package.json

在config.js中配置网站的标题和描述，自定义的 favicon等

module.exports = {
  title: '你好， VuePress ！',
  description: '这是我的第一个 VuePress 站点',
  head: [['link', { rel: 'icon', href: '/images/logo.png' }]],
}

默认主题配置

在基本配置文件config.js，引人默认主题defaultTheme,再进行相关配置。可以配置logo、导航栏和侧边栏等

配置导航栏和侧边栏之前，需要先把文档大致归类一下，分别存储在相应的文件夹中，如此好定义目标页面路由路径link。在文档目录（docs）下创建一个放博客文章的文件夹（blogs）,再在该文件夹下创建文章分类文件夹，后面写文章就在对应的分类文件夹中创建就可以了。

├─ docs 
│ ├─ blogs
│    └─ js
│        └─ xxx.md
│    └─ css
│        └─ xxx.md    
│    └─ algorithm
│        └─ xxx.md   
│ └─ config.js 
│ └─ README.md 
└─ package.json

//  配置主题
theme: defaultTheme({
logo: "/images/logo.png",
// 文档源文件存放在仓库中的目录名
docsDir: "docs",
//是否启用 编辑此页 链接。
editLink: false,
navbar: [
  {
    text: '前端',
    children: [
      {
        text: 'JS',
        link: '/blogs/js/js 的数据类型有哪些？.md'
      },
      {
        text: 'CSS',
        link: '/blogs/css/常用的css代码片段.md'
      },
    ],
  },
  {
    text: '力扣刷题笔记',
    link: '/blogs/algorithm/两数之和.md'
  }
] ,
// 侧边栏
sidebar: {
  '/blogs/algorithm/': [
    {
      text: '力扣刷题笔记',
      children: [
        '两数之和',
        ...
      ],
    },
  ],  
  '/blogs/js/': [
    {
      text: 'JS基础',
      children: [
        'js 的数据类型有哪些？',
        ...
      ],
    },
    {
      text: 'JS简单功能',
      children: [
        'js实现简单功能合集',
        ...
      ],
    },
  ], 
  '/blogs/css/': [
    {
      text: 'CSS基础',
      children: [
        '常用的css代码片段',
        ...
      ],
    }
  ],
},
}),

首页配置

首页是一开始创建的测试文档，即文档目录（docs）下的README.md文件。根据VuePress官方文档进行首页相关配置，内容使用Markdown 语法进行书写

此博客的首页使用自定义页面，在README.md文件使用Vue实现

  1. 首页页面定义成一个组件。在.vuepress 目录下创建组件文件夹（components）,再在该文件夹下创建HomePage.vue文件
<template>
  <div class="home-container">
    <div class="hero">
      <p><span>{{descDom}}</span></p>
      <div class="person">
        <img src="/images/home-bg.png" alt="" class="pic1"/>
        <img src="/images/sitting-reading.svg" alt="" class="pic2"/>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, onMounted, ref } from "vue";
import { usePageFrontmatter } from '@vuepress/client'
export default defineComponent({
  name: "HomePage",
  props: {
    frontmatter: {
      require: true,
      type: Object,
    },
  },

  setup() {
    // usePageFrontmatter 返回当前页面 Frontmatter 的 Ref 对象。它的值是页面数据的 frontmatter 属性
    const data = usePageFrontmatter();
    // 获取在md页面定义的tagline属性
    const desc = data._value.tagline;
    const descDom = ref('')
    onMounted(() => {
      // 打字机效果
      const wordsArray = desc.split('');
      let index = 0;
      function typewriter(){
        if (index < wordsArray.length){
          descDom.value += wordsArray[index];
          index++;
          setTimeout(typewriter,300)
        }
      }
      typewriter()
    })
    
    return {
      data,
      descDom
    };
  },
});
</script>
  1. 在README.md文件中使用组件
---
heroText: '糖七的博客'
tagline: '记录学习笔记'
footer: Developed by 糖七
---

<HomePage class="my-home" :frontmatter="frontmatter"/>

<script>
import { defineComponent } from 'vue'
import HomePage from '@components/HomePage.vue'
import { usePageFrontmatter } from '@vuepress/client'
export default defineComponent({
  name: 'Home',
  components: {
    HomePage,
  },
  setup() {
    
    const frontmatter = usePageFrontmatter();

    return {
      frontmatter
    }
  }
})
</script>

默认主题使用 SASS 作为 CSS 预处理器。在.vuepress 目录下创建样式文件（具体路径：.vuepress/styles/index.scss），可以覆盖默认主题的预定义 CSS 变量或者添加额外的样式

ps：后续会把博客更新部署到github上

avatar
文章
阅读
粉丝