vuepress打造自己专属博客的技巧

如何增加更多的主题色

只需下面这样

在文件config.js中的themeConfig下加入"themePicker"：

 themePicker: {
      colorName1: '#0033FF', // 极浓海蓝
      colorName2: '#8B00FF', // 紫罗兰色
      colorName3: '#00BFFF', // 深天蓝
      colorName4: '#FF8C00' // 暗橙
    },

如何在主页添加时钟

1.去github上把组件的vue下载下来,注意不能全局安装vue时钟插件引入进去，不然打包的话会出现插件异步引入错误报错,组件的地址为 github.com/bestvist/vu… 如下图点击dist进去

2.接着选择下面这个vue文件下载下来

3.将文件复制到这个组件的目录下

4.因为当前文件的css用的是scss,所以要去在项目上安装scss,本人嫌的麻烦，就选择安装scss的

npm install sass-loader node-sass --save-dev

# 然后要初始化一下项目

yarn install

5.在HOmeBlog文件中引入该组件就可以了

注意:一定要初始化项目一遍，不然打包后，之前的组件会丢失

组价的详细配置如下

| Property | Description | Type | Accepted Values | Default | |------ ---|------------|------------|-------------|------| | time | time to display | String | - | - | | color | color to display | String | - | - | | borer | clock border style | String | - | '2px solid' | | bg | clock background style | String | - | - | | size | size to display | String | - | '150px' |