1980's Maker

一个出生于80年代的程序员 -- 喜爱创[客]、美[食]、动[画]、怀[旧]的新手艺人的博客

Maker主题配置--基本配置

涵盖基乎所有和主题相关配置项,帮助你快速开始搭建和配置Maker主题.

// .vuepress/config.js
module.exports = {
  // 网站标题
  title: '1980\'s Maker',
  // 网站描述
  description: '一个出生于80年代的程序员 -- 喜爱创[客]、美[食]、动[画]、怀[旧]的新手艺人',
  themeConfig: {
    // 网站logo
    logo: '/logo.jpg'
  }
}
1
2
3
4
5
6
7
8
9
10
11
// .vuepress/config.js
module.exports = {
  themeConfig: {
    // Search 提示
    searchPlaceholder: 'Search',
    // Search 建议列表条目数
    searchMaxSuggestions: 10,
  }
}
1
2
3
4
5
6
7
8
9
// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      // 内部链接
      { text: '🏠 Home', link: '/' },
      { text: '📖 Theme', link: '/categories/theme/' },
      { text: '🐉 Maker', link: '/_post/maker.md' },
      { text: '🔥 Animation', link: '/categories/animation/' },
      { text: '📽 Old Time', link: '/categories/oldtime/' },
      { text: '🔗 friend-links', link: '/friend-links/' },
      // 外部链接
      { text: 'External', link: 'https://google.com' },
    ],
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Social

设置 sidebar 底部社交媒体 URL。

  • type 对应Icon名称
  • type github会自动补全链接, 无须填写全路径
  • type email自动生成mailto链接
// .vuepress/config.js
module.exports = {
  themeConfig: {
    social: [
      {
        type: 'email',
        link: 'cmgddd@163.com'
      },
      {
        type: 'github',
        link: '80maker/vuepress-theme-maker'
      },
      {
        type: 'qq',
        link: '//qm.qq.com/cgi-bin/qm/qr?k=fknyQ434nkzVUWUmJ6rpIPctkS9eyQaZ&jump_from=webapi'
      },
      {
        type: 'feed',
        link: '/rss.xml'
      }
    ],
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Reward

设置文章底部的打赏功能。

// .vuepress/config.js
module.exports = {
  themeConfig: {
    reward: {
      text: 'Buy me a cup of coffee ☕.',
      // 是否启用
      enable: true,
      ways: [
        {
          name: 'wechat',
          icon: 'wechat',
          qrcode: '/images/wechat.png',
          text: 'This is a Wechat Pay qrcode',
          color: 'rgb(9, 187, 7)'
        },
        {
          name: 'alipay',
          symbol: 'alipay',
          qrcode: '/images/alipay.png',
          text: 'This is a Alipay Pay qrcode',
          color: '#1296db'
        }
      ]
    },
  }
}
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

支持自定义HTML

// .vuepress/config.js
module.exports = {
  themeConfig: {
    copyright: '© 2020 ❤️ <a target="_blank" href="https://17ria.com/">Neil Chen</a>',
  }
}
1
2
3
4
5
6

# Blog

对应 @vuepress/blog 插件的options

// .vuepress/config.js
module.exports = {
  themeConfig: {
    blog: {
      directories: [
        {
          id: 'post',
          dirname: '_post',
          path: '/post/',
          itemPermalink: '/post/:year/:month/:day/:slug.html',
          pagination: {
            perPagePosts: 10,
          },
        }
      ],
      frontmatters: [
        {
          id: "tag",
          keys: ['tag', 'tags'],
          path: '/tags/',
          frontmatter: { title: 'Tag' },
          pagination: {
            lengthPerPage: 10
          }
        },
        {
          id: "category",
          keys: ['category', 'categories'],
          path: '/categories/',
          frontmatter: { title: 'Category' },
          pagination: {
            lengthPerPage: 10
          }
        }
      ],
      sitemap: {
        hostname: 'hostname'
      },
      feed: {
        canonical_base: 'canonical_base',
      },
      comment: {
        service: 'vssue',
        owner: 'owner',
        repo: 'repo',
        clientId: 'your clientId',
        clientSecret: 'your clientSecret',
      }
    }
  }
}
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
48
49
50
51

# Seo

对应 vuepress-plugin-seo 插件的options

// .vuepress/config.js
module.exports = {
  themeConfig: {
    // 默认配置
    seo: {
      siteTitle: (_, $site) => $site.title,
      title: $page => $page.title,
      description: $page => $page.frontmatter.description,
      author: (_, $site) => $site.themeConfig.author,
      tags: $page => $page.frontmatter.tags,
      twitterCard: _ => 'summary_large_image',
      type: $page => ['articles', '_post', 'blog'].some(folder => $page.regularPath.startsWith('/' + folder)) ? 'article' : 'website',
      url: (_, $site, path) => ($site.themeConfig.hostname || '') + path,
      image: ($page, $site) => $page.frontmatter.cover && (($site.themeConfig.hostname && !$page.frontmatter.cover.startsWith('http') || '') + $page.frontmatter.cover),
      publishedAt: $page => $page.frontmatter.date && new Date($page.frontmatter.date),
      modifiedAt: $page => $page.lastUpdated && new Date($page.lastUpdated),
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Pwa

对应 @vuepress/plugin-pwa 插件的options

// .vuepress/config.js
module.exports = {
  head: [
    ['link', { rel: 'icon', href: '/logo.jpg' }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
    ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' }]
  ],
  themeConfig: {
    pwa: {
      serviceWorker: true,
      popupComponent: 'ThemeSWUpdatePopup',
      updatePopup: {
        '/': {
          message: "发现新内容可用",
          buttonText: "刷新"
        }
      }
    }
}
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

提示

为了让你的网站完全地兼容 PWA,你需要:

.vuepress/public 提供 Manifest 和 icons 在 .vuepress/config.js 添加正確的 head links. 更多细节,请参见 MDN docs about the Web App Manifest (opens new window).

# See also

Buy me a cup of coffee ☕.