vuepress主题改造-主题的继承(1)

你们好，我叫JSShou，读作JS瘦或者技术瘦，灵感来至前辈技术胖(JSPang)，热爱前端技术而人比较瘦，原名许中鹏，已在前端行业多年，希望能认识更多朋友。欢迎大家留言交流。

前言

博客作为一个记录与分享工具是十分必要的，当前各大博客网站CSDN、简书、掘金等每天都有大量的分享文章出来，当然我们可以把文章分享到这些平台，不过我认为拥有一个可控的、定制的个人博客网站才是一个更酷的事情，而vuepress是当前非常火热的博客搭建框架。

vuepress1.0 到目前已经发布了 beta 版，其中最重要的修改是主题能够实现继承，再也不用 vuepress eject 把默认主题拉过来修改，更麻烦不说，也让 vuepress 项目不容易升级，所以以下分析都是建立在 vuepress1.0 下。

默认主题源码分析

安装

# 安装
yarn global add vuepress@next # 或者：npm install -g vuepress@next

# 新建项目文件夹
mkdir vuepress-test

# 进入项目
cd vuepress-test

# 创建docs文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress theme!' > docs/README.md

# 生成package.json文件
npm init

# 在package.json中添加脚本
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

# 运行
yarn docs:dev
复制代码

源码复制到项目

把默认主题复制到项目

vuepress eject
复制代码

发现项目中出现了.vuepress文件夹，此文件夹下就是存放的默认主题，不过当前修改主题也不会有任何效果，复制过来只是方便查看

主要源码分析

查看官方文档发现Layout.vue文件是vuepress的入口，打开 theme/Layout.vue

  
  
  

  

  ...
  
  

    
  
  
  
  
  
    
    
  
  
复制代码

这里主要是通过一些判断加载对应的组件，Navbar是头部显示组件，Sidebar是侧边栏组件,Home为默认的主页，Page为显示文档内容的组件

Navbar 组件分析

...


  
  
  


复制代码

继承主题

文件目录

先新建文件及文件夹，以下是最简单的继承目录

docs
  |_.vuepress
    |_theme
      |_components
        |_Navbar.vue
      |_loyouts
        |_Layout.vue
      |_index.js
复制代码

继承主题的配置

在 theme 新建 index.js 文件，输入以下内容

module.exports = {
  extend: '@vuepress/theme-default'
}
复制代码

这里有个坑，当时在官方文档中怎么也找不到上面的代码应该放到哪里，试了很久才发现应该放到theme目录下，如果这里没有配对，修改的样式不仅可能不会生效页面可能还会出现白屏

更改文件

在 theme 下新建 layouts 目录，在 layouts 下新建 Layout.vue,修改 Layout.vue 文件，比如在顶部DOM中添加一个test，如果页面出现这个test说明继承成功。

请看我下一篇文章 vuepress主题改造-标签云的改造(2)

转载于:https://juejin.im/post/5d00bf28e51d4555e372a5d8