手把手教你用vuepress搭建自己的网站(2)

itclanCoder

发布于 2020-10-28 16:59:57

2.5K0

发布于 2020-10-28 16:59:57

文章被收录于专栏：itclanCoderitclanCoder

页面具体内容配置

基本配置

要让你的网站显示内容, 就需要进行配置, 需要在.vuepress文件夹下新建一个总的配置文件config.js, 这个文件的名字是固定的,即.vuepress/config.js，它导出一个 JavaScript 对象,使用的是Commonjs文件导入导出的规范如有对 CommonJS 使用疑惑可参考文档:commonJs 使用规范

提示

vuepress 依赖于 NodeJS服务启动,因为 NodeJs 现不支持模块化,所以在 vuepress 中,是无法使用 import 与 export 语法的

进入.vuepress文件夹,创建config.js文件

cd .vuepress
touch config.js

config.js最基础的配置文件内容如下所示

module.exports = {
  title: 'itclanCoder网站',
  description: 'itclanCoder的网站,专注前端技术栈分享'
}

如果这时在itclan根目录下的终端下,运行npm run docs:dev或者yarn docs:dev,会出现页面404 页面,如下所示

这是因为vuepress默认打开的是docs 下的README.md文件, 由于你没有创建,所以找到的是vuepress 默认提供的404页面

文件的相对路径	页面路由地址
/README.md	/
/guide/README.	/guide/
/config.md	/config.html

在VuePress中README.md文件,你可以把它视为xxx.vue文件,md 文件中既可以写js,css,html,如果你发现页面 404,排除下路由下是不是没有添加README.md文件的

在docs目录下创建README.md文件, 再次npm run dev,就可以看到运行起来的效果, 如下图所示

当然,您现在看到的页面是一片空白,那是因为docs根目录下的README.md中没有任何内容,但现在至少不是 404 了,离曙光又近了一步

设置封面启动页

有时候,当别人进入您的网站时,设置一个启动页,这样显得挺友好,而不是一上来,就放一堆的内容,看得令人眼花缭乱

在vuepress默认的主题中提供了一个首页（Homepage）的布局 (用于您网站的主页)。如果您想要使用它，需要在您项目的根级中README.md的YAML front matter指定 home: true,如下所示

---
home: true
heroImage: /images/itclancoder.jpeg
heroText: itclanCoder
tagline: 书以启智,技于谋生,活出斜杠
actionText: 开始阅读 →
actionLink: /latestarticle/
features:
  - title: 读书
    details: 随笔川迹,文以载道,虚心学习,自省自知,多读一页书,就少一分无知,多一分智慧
  - title: 技术
    details: 用心记录技术,走心分享,始于前端,不止于前端,励志成为一名优秀的全栈工程师,真正的实现码中致富
  - title: 生活
    details: 无分享,不生活,一个具有情怀的技匠,路上正追逐斜杠青年的践行者
footer: MIT Licensed | Copyright © 2020-present 随笔川迹
---

效果如下所示:

当然,您现在看到,网站上有图片没有正常的显示,那是因为没有添加图片造成的,网站上一些图片,logo 等静态资源可以放到.vuepress目录下的一个public目录下的

这个public是自己创建的,vuepress并不会自动帮你生成,在/.vuepress/public/images中放入您想要的图片就可以了的

警告

这个 public 目录文件夹的名称是固定的,就像docs目录下的config.js一样,名称是固定的
在引入图片时,直接/所要引入的图片路径目录就行,不用带public,它会自动的去找public下的静态资源文件
vuepress中所有的图片文件名,以及目录名不要带有中文,应该使用英文状态下的格式,否则编译就报错,在您以后用 md 写文章时,同样引入图片时,图片的后缀名都不能带有中文字符

配置导航栏

导航栏中有页面标题、搜索框、导航栏链接、多语言切换、仓库链接，它们都是可以直接通过配置出来的,在 config.js 中添加如下配置

// .vuepress/config.js
module.exports = {
  title: 'itclanCoder网站',
  description: 'itclanCoder的网站,专注前端技术栈分享',
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '前端', link: '/fontend/' },
      { text: '小程序', link: '/wechat/' },
      { text: '面试', link: '/interview/' },
      { text: '关于', link: '/about/' },
    ]
    ]
  }

}

警告

路由后面的/fontend/后面的反斜杠不能少,否则依旧会是404 的配置完后,如下所示:

当然,你如果现在点击导航栏,会发现是 404 页面,那是因为导航路由下面没有README.md文件 目录树结构如下所示

├─package.json
├─docs
|  ├─README.md
|  ├─minprogram        // 与.vuepress同级的每一个文件夹都是一个nav,以后写文章都是在这里里面写
|  |     └README.md
|  ├─interview
|  |     └README.md
|  ├─fontend
|  |    └README.md
|  ├─about
|  |   └README.md
|  ├─.vuepress           // 所有与导航侧边栏vuepress相关配置都会在这个文件夹里面
|  |     ├─config.js
|  |     ├─public        // 公共静态资源,logo,自定义样式等
|  |     |   ├─images
|  |     |   |   ├─itclancoder.jpeg
|  |     |   |   └logo.png

与您的电脑上打开的是一一对应的,如下所示

其中导航栏的链接分为三种:一级 nav,链接,二级下拉菜单,带标题的多级分类菜单

一级 nav,直接带路由即可

themeConfig: {
   nav: [
     { text: '首页', link: '/' },
     { text: '前端', link: '/fontend/' },
   ]
   ]
 }

配置完如下所示:

如果想 nav 直接是链接,即路由直接是链接地止即可

themeConfig: {
   nav: [
     { text: '首页', link: '/' },
     { text: '前端', link: '/fontend/' },
     { text: '网站', link: 'http://doc.itclan.cn' }
   ]
   ]
 }

配置完,如下所示

如果想 nav 二级下拉菜单,如下配置,link的属性值带有链接,会直接是链接,若不是那就是路由,在vuepress中提供了一个items属性,配置二级导航如下所示

themeConfig:{
  nav: [{text: "主页", link: "/"      },
      { text: "前端",
        items: [
          { text: "html", link:"/fontend/html/"},
          { text: "css", link:"/font/css/"},
          ]
      }
    ],
}

配置完后,如下所示

如果你想要二级菜单带有标题,分类的菜单形式,如下配置

themeConfig:{
  nav: [{text: "主页", link: "/"      },
        { text: '网站', link: 'http://doc.itclan.cn' }, // 后面直接是链接
        { text: "前端",                                 // 二级菜单配置
        items: [
            { text: "html", link:"/fontend/html/"},
            { text: "css", link:"/font/css/"},
          ]
        },
        {
          text: "工具",
          items: [
            {
               text: "思维导图",
               items: [
                { text: "zhiMap", link: "https://zhimap.com/home" },
                { text: "processOn", link: "https://www.processon.com/" },
                { text: "gitmind", link: "https://gitmind.cn/" }
               ]
            },

            {
              text: "文档管理",
              items: [
                { text: "语雀", link: "https://www.yuque.com/dashboard" },
                { text: "腾讯文档", link: "https://docs.qq.com/desktop" }
              ]
            },

            {
              text: "实用工具",
              items: [
                { text: "声享-做ppt", link: "https://ppt.baomitu.com/" },
                { text: "马克鳗-量标注", link: "http://www.getmarkman.com/l" }
              ]
            }
          ]
        },
    ],
}

配置完后,结果如下所示

你可以按照这个类似的结构,无限制的配置下去

光有 nav 导航是不够的,下面来配置一下侧边栏,怎么配置侧边栏才是重中之重

配置侧边栏-slider

自动获取侧边栏内容

如果你希望自动生成当前页面标题的侧边栏, 可以在 config.js中配置来进行配置启动

// .vuepress/config.js
module.exports = {
  themeConfig:{
    sidebar: 'auto',
  }
}

侧边栏配置地止: 侧边栏配置地止https://www.vuepress.cn/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F

警告

默认情况下，侧边栏会自动地显示由当前页面的标题（headers）组成的链接，并按照页面本身的结构进行嵌套，您可以通过 themeConfig.sidebarDepth 来修改它的行为。

默认的深度是 1，它将提取到h2的标题，设置成 0 将会禁用标题（headers）链接，同时，最大的深度为 2，它将同时提取h2 和h3 标题,如果想要额外拓展,支持h1~h6,在 markdown 配置拓展中markdown.extractHeaders,如下所示

module.exports = {
  markdown: {
    extractHeaders: [ 'h2', 'h3', 'h4','h5','h6' ]
  }
}

展示每个页面的侧边栏

如果您希望为不同的页面组显示不同的侧边栏, 就和官网一样, 点击导航中的哪个 nav,对应就显示对应的的侧边栏,目前目录有 fontend \ interview \ minprogram 等, 这些目录下都存放着多个 md文件,就是我们写的具体的文章

module.exports = {
  themeConfig:{
    sidebar:{
      {
       title: "JavaScript",
       collapsable: true,
       children: [
         ["js/", "目录"],
         ["js/scope", "理解Js中的作用域-作用域链以及闭包"]
       ]
      },
      {
        title: "工具",
        collapsable: true,
        children: [
          ["tools/", "目录"],
          ["tools/vuepress-build-blog", "手把手教你用vuepress搭建博客"]
        ]
       }
    }
  }
}

配置完后,具体效果如下所示

目前的,项目目录结构如下所示

├─package.json
├─docs
|  ├─README.md
|  ├─minprogram
|  |     └README.md
|  ├─interview
|  |     └README.md
|  ├─fontend
|  |    ├─README.md
|  |    ├─tools
|  |    |   └vuepress-build-blog.md
|  |    ├─js
|  |    | └scope.md
|  ├─about
|  |   └README.md
|  ├─.vuepress
|  |     ├─config.js
|  |     ├─public
|  |     |   ├─images
|  |     |   |   ├─itclancoder.jpeg
|  |     |   |   └logo.png

上面的目录树结构中,fontend文件夹下的tools与js都是两个文件夹,下面对应的有md文件,默认会以README.md为默认的路由至此

你如果仔细看看config.js里面的一些配置的话,你会发现,代码配置越来越多,当你新增nav,或者侧边栏时,nav与slidebar,会越来越长,会很难受

拆分-config

在拆分之前,你可以了解下CommonjS中模块化导入导出的规则就可以了,这里你只需要知道,在一个文件中导入一个文件使用require方式,而导出一个对象,变量,使用的是module.exports就可以了的

├─config.js         // 主要入口配置文件
├─nav.js            // 导航栏配置
├─sidebar.js       // 侧边栏配置
├─themeconfig.js   // 默认主题相关配置
├─public
|   ├─images
|   |   ├─itclancoder.jpeg
|   |   └logo.png

具体如下示例:nav.js

const navs = [
  {
    text: "首页",
    link: "/"
  },

  {
    text: "前端",
    items: [
      { text: "CSS", link: "/fontend/css/" },
      { text: "JavaScript", link: "/fontend/js/" },
      { text: "开发工具", link: "/fontend/tools/" }
    ]
  },

  {
    text: "小程序",
    items: [
      { text: "微信小程序", link: "/wechat/minprogram/" },
      { text: "云开发", link: "/wechat/cloudev/" }
    ]
  },

  { text: "关于我", link: "/about/" }
];

module.exports = navs;

而在config.js中,通过require的方式引入即可,如下所示

const sidebar =  require("./nav");  // 引入sidebar,后缀名xx.js可以省略
module.exports = {
  themeConfig:{
    sidebar:sidebar // 也可以直接就写sidebar,Es6中的简写,当键与键值同名时,可以直接写一个
}

其他,head,plugin,配置也是如此,代码与之前是没有任何改变的,只不过是对config.js进行了分割,进行了模块化管理的,导航的管理导航,侧边栏的管理侧边栏

对于更多详细的默认主题的相关配置,可以查看官方文档:默认主题相关配置https://www.vuepress.cn/theme/default-theme-config.html

有首页,导航栏,侧边栏,搜索框,最后更新时间等配置,学会了一个配置,其他配置照着文档配置就好了的

配置提醒

每尝试配置一个 API,记得在命令行终端就重新启动npm run docs:dev一下,在浏览器查看一下配置效果,目前 vuepress的热更新存在一些问题(以后官方肯定会修复)

在对 vuepress不是特别熟练的情况下,不要配置了很多选项和插件,到最后才来启动,一旦遇到一些奇葩的问题,报错,你就搞不清楚是在哪一个环节出现问题的

为什么有必要将 config 进行拆分,分割?

随着你往后想要配置的 nav,slidebar,导航栏,侧边栏,以及插件的增多,如果没有对 config.js 进行分割

该文件的配置将会越来越长,越来越臃肿,到最后,连你自己都看不下去,无法忍受了的,对于后期的代码维护,以及拓展是极其不友好的,所以在一开始,就考虑一下代码的拆分,更多的是方便自己,一劳永逸

不要觉得这个很麻烦,不抽离,越往后,越是灾难,到最后,自己可能在也不会去看了的

如果以上的讲解依然不清楚:可以研究一下:itclanCoder 博客-项目源码https://github.com/itclanCode/blogcode,按照这个结构进行配置,就好了的

限于篇幅所致,更多配配置见后文...

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-09-11，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自 itclanCoder 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度