Young Kbt blog
Young Kbt
2021-10-31
目录

本站 - 搭建原创

笔记

本站使用了 VuePress 进行搭建，属于 Vue 全家桶的一员，旨在搭建个人的静态博客。

我第一次接触 Vue，就喜欢 Vue 的简洁。虽然没有 CSDN 等平台的流量，但我喜欢一个人享受。

2021-10-31 @Young Kbt

# 博客选择

  • 平台博客有：CSDN、博客园、简书、掘金、知乎、微博、豆瓣等

  • 个人博客有：Wordpress、Typecho、Hexo、VuePress 等

平台博客具有高流量，更新便捷、社区活跃、多主题模板、UI 成熟、社交完善等功能。不喜欢折腾可以选择该类。

个人博客具有可定制性高、有独立域名、自由等功能、缺点是维护繁琐、上限极高，下限极低，博客设计的好坏与否很大程度上依赖搭建者自身的审美水平。

建议使用个人博客的伙伴，多去看其他优秀个人博客的 UI、功能等设计，汲取营养。

# 文档说明

本文档仅仅是 VuePress 的快速搭建，并未涉及到本站的主题搭建，根据本文搭建的博客风格与本站略有所区别。

VuePress 本身并未提供作者信息、面包屑、主题模式、右侧目录等功能，而本站所用的主题已经实现了这一些优秀的功能以及其他功能。

主题的搭建具体看 本站 - 主题

注意

主题的搭建是基于 VuePress，所以前提是至少会 VuePress 的基本使用和默认主题的基本配置。

2021-11-01 @Young Kbt

# 版本要求

要求

VuePress 要求你的 Noed.js 版本 >= 8.6

2021-10-31 @Young Kbt

# node和npm更新

  • 更新 npm

    npm undate -g
    1

  • 更新node

    1. 安装 node 版本管理工具 n

      npm install n -g
      1

    2. 使用 n 进行更新

      # 安装node最新版本
n stable  

# 安装node指定版本10.14.1
n v10.14.1
      1
      2
      3
      4
      5

# vuepress安装

  • 全局安装 VuePress

      yarn global add vuepress
      1
      npm install -g vuepress
      1
      // Make sure to add code blocks to your code group

    • 创建一个文件夹当作博客的根目录

      mkdir vuepress-doc
# 该目录作为博客的项目目录
# 名字自定义，我的是 myNotes
      1
      2
      3

    • 进入该目录进行初始化

      cd vuepress-doc
yarn init -y # 或者 npm init -y
      1
      2

      初始化后在根目录下生成一个 package.json 文件

    接下来要知道官方推荐的目录结构，下面的内容都是基于目录结构创建的

    根目录 (vuepress-doc)
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    目录介绍
    • docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
    • docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
    • docs/.vuepress/theme: 用于存放本地主题。
    • docs/.vuepress/styles: 用于存放样式相关的文件。
    • docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
    • docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
    • docs/.vuepress/public: 静态资源目录。
    • docs/.vuepress/templates: 存储 HTML 模板文件。
    • docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
    • docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
    • docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
    • docs/.vuepress/enhanceApp.js: 客户端应用的增强。

    • 在根目录下创建 dosc 目录

      mkdir docs
# 主要存放博客的配置或者文档
      1
      2

    • 进入 docs 目录，创建 README.md 文档。内容如下：

      ---
home: true
heroImage: /logo.jpg
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14

      你会发现，内容对应着 VuePress 官网的入口页面

    # 核心配置

    注意

    熟记上方官方推荐的目录结构，下面的内容都是基于目录结构创建的。

    2021-10-31 @Young Kbt

    • 在 docs 目录下创建 .vuepress 目录

      cd docs
mkdir .vuepress
      1
      2

    • 新建总配置文件config.js

      cd .vuepress
touch config.js
      1
      2

      config 是整个项目的核心配置文件，所有菜单、栏目相关的配置均配置在该模块中。

    • config.js 添加内容：（记得看注释）

      module.exports = {
    title: 'Young Kbt Blog',  // 首页居中标题
    description: '这个舞台将会被你的才华踩在脚下，同时你也会把它带到一个新的高度！', // 首页居中文字
    base: '/', // 格式：'/<仓库名>/'， 默认'/'
    dest: './dist',  // 打包够的位置。这里是 .vuepress 目录下
    port: '6486',	 // 端口
    markdown: {
        lineNumbers: true, // 显示代码块的行号
    },
    head:[
        ['link', { rel: 'icon', href: '/img/favicon.ico' }], // public目录下的img目录内的图标
        ['meta',{
            name: 'keywords',
            content: 'Young Kbt个人博客，VuePress搭建，学习Java、web、框架、微服务、工具、前端等相关知识',
        },
        ],
    ],
    themeConfig: {
        nav: [
            { text: '关于', link: '/abuot/' } // 右上角导航栏，link 是跳转路径，相当于 a 标签
        ],
        sidebar: {'/java/':[	// 跳转到该路径后，左边的侧边显示内容如下
            {
                title:'关于 - 自我',  // 参考左边的侧边栏
                collapsable: true,
                children:[
                    '/about/me/one', // 会去这个路径里找到 one.md 文档，并显示内容。.md 可以省略
                ]
            },
            {
                title:'关于 - 本站',
                collapsable: true,
                children:[
                    '/about/build/one', //  会去这个路径里找到 one.md 文档，并显示内容。路径处于dosc目录下
                ]
            }
        ]
                 },
        sidebarDepth: 2,  // 侧边栏显示深度，默认1，最大2（显示到h3标题）
        lastUpdated: 'Last Updated',  // 开启更新时间，并配置前缀文字  (取值为git提交时间)
        searchMaxSuggestoins: 10,	// 搜索结果显示最大数
        editLinks: true,	// 启用编辑
        editLinkText: '编辑此页 '
    },
    plugins: [  // 插件相关配置
    ]
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47

    • 在命令行运行项目

        vuepress dev docs
        1
        yarn run dev
        1
        // Make sure to add code blocks to your code group

        如果 VSCode命令行 无法执行，打开 package.json 文件，手动在 scripts 里填入

        "dev": "vuepress dev docs"
        1

        image-20211031212255367

        再次执行命令即可

      # 导航栏

      笔记

      内容分为两部分：

      第一部分：如何在网页上显示导航，以及导航的内容；

      第二部分：如何实现跳转。

      2021-10-31 @Young Kbt

      # 导航显示

      上方的 config.js 有一个例子，但是由于导航栏随着后期会逐渐增多，所以需要创建一个 nav.js 文件，专门处理导航栏的内容。（PS：同理包括 themeConfig、head、plugins）

      • 首先在 .vuepress 目录创建 nav.js ，然后在 config.js 里引入

        const nav = require('./nav.js'); // 在 .vuepress 目录下

module.exports = {
    // ...
    nav, //  等价于 nav: nav，第二个 nav 是上方引入的的名字，因为 ES6 语法，可以实现简写。项目常用
    // ...
}
        1
        2
        3
        4
        5
        6
        7

      • 在 nav.js 里加入内容

        // Java导航栏
module.exports = {
    text: '索引', link: '/archives/',  // 跳转链接
    items: [
        {
            text: '本站',
            items: [
                { text: '分类', link: '/categories/' },
                { text: '标签', link: '/tags/' },
                { text: '归档', link: '/archives/' },
            ]
        },
        {
            text: '我的',
            items: [
                { text: '收藏', link: '/whell/web/' },
                { text: '关于', link: '/about/me/' },
            ]
        },
    ]
}
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        • text：栏目名（导航名）
        • link：链接，可以指向本地目录或 http 地址，必须由 / 结尾，如 /about/me 跳转的是为 /about/me.html，而不是 /about/me/
        • items：可以包含多个 text 和 link ，可以继续反复套用组成复杂的菜单

        上方代码和图片进行对比，理解更加清晰

        image-20211101103802945

      # 永久连接

      link 的实现有两种方式：

      1. 本地文件目录(基于 docs 下)
      2. http地址(基于项目地址后)

      我推荐第 2 种方式，因为使用第 1 种方式时，如果随着文档的增多，分类必不可少。一旦分类，目录会发生改变，导致都要修改link。所以给一个 markdown 文档指定唯一的http地址，这样无论怎么改变目录位置，都不会影响文件的访问。

      • 永久链接用到 Front Matter，即在每个 markdown 文件最上方指定一些内容。具体内容看官网 (opens new window)

        ---
title: 本站搭建
permalink: /about/build/
---
        1
        2
        3
        4

        提示

        这里的 permalink 指的是项目后的地址，如请看此时的网页地址，应该为 项目地址/about/build/#永久连接

      这时，只要在 nav.js 文件让一个 text 加上 link: /about/build/，这样在导航栏点击该 text 标签，即可获取到该 markdown 文档的内容

      module.exports = {
    // ...
    text: '本站搭建', link: '/about/build/',  // 跳转链接
	// ...
}
      1
      2
      3
      4
      5

      笔记

      你点击 关于 的时候，就是触发此链接，跳转并显示我写的这篇 markdown 文档。

      😺已更改，点击后链接跳转到 本站 - 介绍 的 markdown 文档，能理解就好。

      2021-10-31 @Young Kbt

      # 侧边栏

      笔记

      侧边栏我并没有自己配置，是自动读取的，因为配置侧边栏，把需要的 markdown 文档的一级 ~ 三级标题再复制一份到另一个文档。

      相当于再创建一个 markdown 文档，专门存放侧边栏标题。所以说配置侧边栏至少需要两份 markdown 文档。

      2021-10-31 @Young Kbt

      sidebar 侧边栏设置处于 themeConfig 里。上方的 config.js 有一个例子

      侧边栏例子：（看注释）

      module.exports = {
  themeConfig: {
    sidebar: {
      '/java/': [
        'init',  // 查找 /docs/java/init.md 文档，.md可以省略
      ],

      '/about/build/': [
        '',      // 代表 README.md 文档
      ],
    }
  }
}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

      如果要配置侧边栏，建议把侧边栏文档和写的文档放在同一个目录下

      # 自动生成侧边栏

      如果不想手动配置侧边栏，也可以让系统自动读取文档的标题。缺陷是自动生成一个仅仅包含了当前页面标题（headers）链接的侧边栏。

      • 配置文件统一配置，全局文档生效
      // .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: 'auto'
  }
}
      1
      2
      3
      4
      5
      6
      • 某个文档单独配置，在该文档 Front Matter 处配置
      ---
sidebar: auto
---
      1
      2
      3

      # 禁用侧边栏

      你可以通过 Front Matter 来禁用指定页面的侧边栏：

      ---
sidebar: false
---
      1
      2
      3

      # 静态资源配置

      前言

      静态资源如图片、css 等内容请存放在 /docs/.vuepress/public 目录下。

      2021-11-01 @Young Kbt

      • 图片

        /docs/README.md 文档里指定首页的图片

        heroImage: /logo.jpg  # public 下的logo.jpg
        1

        图片配置的 / 代表 public 目录，文档配置的 / 代表 docs 目录。项目会自动识别属于哪一类配置

      • css 同理，在 .vuepress 目录下创建 css 目录

        cd public
mkdir css
touch style.css
        1
        2
        3

        给 style.css 加样式，然后修改config.js的 head

        head: [
    ['link', {rel: 'icon', href: '/logo.jpg'}],
    ["link", { rel: "stylesheet", href: "/css/style.css" }]
],
        1
        2
        3
        4
        5

      尾语

      加油，你已经成功了一半！

      2021-11-01 @Young Kbt

      编辑此页 (opens new window)
      #本站
      更新时间: 2023/10/23, 10:58:52
      本站 - 规划
      本站 - 主题

      ← 本站 - 主题→

      最近更新
      01
      技术随笔 - Element Plus 修改包名 原创
      11-02
      02
      Reactor - 扩展性
      11-02
      03
      Reactor - 最佳实践
      11-02
      更多文章>
      Theme by Vdoing | Copyright © 2021-2024 Young Kbt | blog
      桂ICP备2021009994号