Preface:

During the weekend vacation, I read a lot of technology blogs, and I was enchanted. When the weather cleared up and the rain stopped, I thought I could do it again. At first, I planned to build with Hexo, but then I saw vuepress and Vuepress-theme-Reco, and I knew more about Vue, so I used these two frames. At first, I thought it was an easy thing. But it is not the same as ordinary project development, resulting in a lot of pits, it is really too difficult…

Mr. Mao ‘blog: tuimao233. Gitee. IO/Mao – blog /

The project build

Prerequisites (vuePress) : Vuepress

NPM install vuepress-theme-reco –save-dev

Once the project is built, you just need to add plug-ins and configurations to config.js

The basic configuration

module.exports = {
  / /...
  // Select reco as the body
  theme: 'reco'
  / /...
  themeConfig: {
    // The type is blog
    type: 'blog'.// Whether to expand the right subnavigation automatically
    subSidebar: 'auto'.// Blog info
    author: 'Mr.Mao'.authorAvatar: '/avatar.png'.logo: '/avatar.png'.startYear: '2020'.// Blog configuration
    blogConfig: {
      tag: {
        location: 6.// The position in the navigation bar menu, default 3
        text: 'tags'      // Default copy "tag"}},// Comment configuration (valine)
    valineConfig: {
      appId: '... '.// your appId
      appKey: '... '.// your appKey
    }
    // Share friendship
    friendLink: [{title: 'Afternoon South Miscellaneous'.desc: 'Enjoy when you can, and endure when you must.'.email: '[email protected]'.link: 'https://www.recoluan.com'},],}}Copy the code

Home page configuration

BgImageStyle is a custom background image style

---
home: true
bgImage: '/bg.jpg'
bgImageStyle: {
  height: '350px'
} -- -- --
Copy the code

Config.js plug-in configuration

Mouse click effects

Install: NPM I vuepress-plugin-cursors-effctions-d

Plugin address: vuepress-plugin-cursor-effects

module.exports = {
  plugins: {
    // Mouse click effects
    "cursor-effects": {
      size: 2.shape: 'circle'./ / click shape: 'star', 'star' | 'circle'
      zIndex: 999999999}}},Copy the code

Music player

Install: NPM I vuepress-plugin-meting -d

Plugin address: vuepress-plugin-meting

module.exports = {
  plugins: {
    // Mouse click effects
    "meting": {
      meting: {
        / / song single address - > if the input negligible server | type | mids
        // But I don't know why not write these three will give an error, so I write all of them
        auto: 'https://music.163.com/#/playlist?id=5312894314'.// Netease -> netease
        server: "netease".// The type is playlist
        type: "playlist"./ / song list id
        mid: "5312894314",},aplayer: {
        // The playlist is random
        order: 'random'.// 0 indicates that lyrics are not displayed
        lrcType: 0./ / volume
        volume: 0.15.// Enable mini mode
        mini: true.// Auto play
        autoplay: true}},}}Copy the code

2 d kanban musume

Install: NPM I vuepress-plugin-helper-live2D-d

Plugin address: vuepress-plugin-live2d

module.exports = {
  plugins: {
    'vuepress-plugin-helper-live2d': {
      // Whether to enable console log printing (default: false)
      log: true.live2d: {
        // Enable or disable (set to false if disabled)(default: true)
        enable: true.// Model name (default: hibiki)
        model: 'koharu'.display: {
          vOffset: -55.// Vertical offset (default: 0)
        },
        mobile: {
          show: false // Whether to display on mobile devices (default: false)
        },
        react: {
          opacity: 0.8 // Model transparency (default: 0.8)}}},}}Copy the code

Dynamic Page title

NPM I vuepress-plugin-dynamic-title -d

Plugin address: vuepress-plugin-dynamic-title

module.exports = {
  plugins: {
    // Dynamic title configuration
    "dynamic-title": {
      showIcon: "/favicon.ico".showText: "(/ ≧ del ≦ /) yi! Good again!".hideIcon: "/failure.ico".hideText: "(● -- ●) Oooh, crash!".recoverTime: 2000}}},Copy the code

Custom style

Change the theme color

Main body color configuration in. Vuepress/styles/palette. Styl defined

/ / the default value
$accentColor = #3eaf7c                      // Theme color
$textColor = #2c3e50                        // Text color
$borderColor = #eaecef                      // Border line color
$codeBgColor = #282c34                      // Code block background color
$backgroundColor = #ffffff                  // Hover block background color
Copy the code

Add or modify theme styles

Modify the theme in vuepress/styles/palette. Styl defined

.content {
  font-size 30px
}
Copy the code