Theme Plugin Config

Mr.Hope ... October 17, 2020 16:18 Config
  • Config
  • Plugin
  • ThemeConfig
About 5 min

These are plugin config provided by theme.

Tips

All the config key name is the camelCase version of plugin name.

Example: @mr-hope/vuepress-copy-code ’s config keyname will be copyCode.

# mdEnhance

Markdown Enhance config, for details see vuepress-plugin-md-enhance documentation (opens new window)

# mdEnhance.enableAll

  • Type: boolean
  • Default: false

Whether to enable all features

Warning

Please use this option ONLY for playing or testing.

As time grows,vupress-plugin-md-enhance is becoming more powerful. It’s adding more syntax to Markdown parser and more code to output.

Enabling features you don’t need will increase dev and build time. (markdown-it has to check for extra syntaxs)

Also, presentation feature will add a 700KB size chunk (mostly is reveal.js) to your output.

Please use the options below and enable ONLY the feature you want to use.

# mdEnhance.lineNumbers Default value changed

  • Type: boolean
  • Default: true

Whether to show line numbers to the left of each code block

# mdEnhance.align

  • Type: boolean
  • Default: false

Whether to enable align support

# mdEnhance.sup

  • Type: boolean
  • Default: false

Whether to enable superscript format support

# mdEnhance.sub

  • Type: boolean
  • Default: false

Whether to enable subscript format support

# mdEnhance.footnote

  • Type: boolean
  • Default: false

Whether to enable footnote format support

# mdEnhance.mark

  • Type: boolean
  • Default: false

Whether to enable mark format support

# mdEnhance.tex

  • Type: boolean
  • Default: false

Whether to enable TeX syntax support

# mdEnhance.flowchart

  • Type: boolean
  • Default: false

Whether to enable flowchart syntax support

# mdEnhance.demo

  • Type: CodeDemoGlobalOptions | boolean
  • Default: false

Whether to enable code demo support.

# mdEnhance.demo.jsLib

  • Type: string[]
  • Required: No

CodePen, JsFiddle requires an external JS library for dating.

# mdEnhance.demo.cssLib

  • Type: string[]
  • Required: No

CodePen, JsFiddle need an external CSS library for dating.

Note

The above two options are only used by third-party code demo service, you need to import these libraries in head.

# mdEnhance.demo.jsfiddle

  • Type: boolean
  • Default value: true

Whether to display the JSFiddle button,

# mdEnhance.demo.codepen

  • Type: boolean
  • Default value: true

Whether to display the CodePen button,

# mdEnhance.demo.codepenLayout

  • Type: "top" | "left" | "correct"
  • Default value: "left"

CodePen editor layout

# mdEnhance.demo.editors

  • Type: string
  • Default value: "101"

# mdEnhance.others

The following are the library links used by the third-party code demo service. Unless your environment cannot visit jsdelivr or the speed is slow, don’t override the default values.

Note

Please note that if you use them, you still need to manually include them in your site using head.

React depends on Babel.

# mdEnhance.demo.vue

Default value: "https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"

# mdEnhance.demo.react

Default value: "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"

# mdEnhance.demo.reactDOM

Default value: "https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"

# mdEnhance.presentation

  • Type: PresentationOptions | boolean
  • Default: false

Whether to enable presentation syntax support.

You can set it with an object, the object will be used to config reveal.js.

# mdEnhance.presentation.plugins

  • Type: string[]
  • Required: No

Plugins you want to use on reveal.js.

Acceptable values are:

  • "highlight"
  • "math"
  • "search"
  • "notes"
  • "zoom"

# mdEnhance.presentation.revealConfig

  • Type: Partial<RevealOptions>
  • Required: No

Config which you want to pass to reveal.js.

# Comment settings

Comment options are omitted here because of the complexity.

For details, see @mr-hope/vuepress-plugin-comment documentation (opens new window)

You can omit this option if you don’t want the comment feature

For details see vuepress-plugin-copyright documentation (opens new window)

It’s a vuepress community plugin, not a built-in plugin.

If you met bugs, please ahead to it’s repo (opens new window) for help.

Note

This plugin is not enabled by default!

You can set themeConfig.copyright: true or set themeConfig.copyright.status to enable it.

  • Type: "global" | "local"
  • Default: "global"

Whether to enable this feature globally.

  • Type: number
  • Default value: 100

The minimum number of characters that trigger copyright information or prohibit copying.

  • Type: boolean
  • Default value: false

Whether to prohibit copying

  • Type: boolean
  • Default value: false

Whether to prohibit selected text

# git

# git.contributor

  • Type: boolean
  • Default: true

Whether generate contributor info

# git.timezone

  • Type: string
  • Required: No

Current timezone, useful when you are deploying through CI

For timezone list, please see Timezone list (opens new window)

# git.transformer

  • Type: (timestamp: number, lang: string) => string
  • Default value: `${dayjs(timestamp).format('LL')} ${dayjs(timestamp).format('HH:mm')}`

Time conversion function for @mr-hope/plugin-git.

Will use dayjs to automatically localize according to the current page language by default.

Such as: 2020年5月8日 16:05 May 8, 2020 16:05

# pwa Enabled by default

Progressive Web App support

If you don’t need this feature, please set to false.

For more detail, see pwa plugin documatation (opens new window)

# pwa.manifest

  • Type: ManifestOption
  • Required: No

You can fill with an object which will be parsed to manifest.webmanifest.

Tips

Some options have their fallback if you donot set them.

  • name: siteConfig.title || themeConfig.title || 'Site'

  • short_name: siteConfig.title || themeConfig.title || 'Site'

  • description: siteConfig.description || themeConfig.description || 'A site built with vuepress-theme-hope'

  • lang: siteConfig.locales['/'].lang || themeConfig.locales['/'].lang || "en-US"

  • start_url: context.base

  • scope: context.base

  • display: "standalone"

  • theme_color: "#46bd87"

  • background_color: '#ffffff'

  • orientation: 'portrait-primary'

  • prefer_related_applications: false

# pwa.showInstall

  • Type: boolean
  • Default: true

Whether display install button

# pwa.favicon

  • Type: string
  • Required: No

Path of favico.ico with absolute path.(We recommand you to set it for your site)

# pwa.themeColor

  • 类型: string
  • 默认值: "#46bd87"

Theme Color

# pwa.maxSize

  • Type: number
  • Default: 2048

Max size which allows to cache, with KB unit

# pwa.cacheHTML

  • Type: boolean
  • Default: true

Whether cache HTML files besides home page and 404 page.

Tips

This option is useful if your site is too large when containing HTML files.

# pwa.cachePic

  • Type: boolean
  • Default: false

Whether cache pictures

Any file ends with .png, .jpg, .jpeg , .gif, .bmp, .webp will be seen as picture files.

# pwa.maxPicSize

  • Type: number
  • Default: 1024

Max picture size which allows to cache, with KB unit

# pwa.apple

Special settings for Apple

If you don’t want to make detailed settings, you can safely ignore it; if you don’t want your site compatable with apple, please set it to false.

# pwa.apple.icon

  • Type: string
  • Required: No

Fill in the icon address used by Apple, the recommended size is 152×152

# pwa.apple.statusBarColor

  • Type: "black" | "white"
  • Default: "black"

Apple’s status bar color

# pwa.apple.maskIcon

  • Type: string
  • Required: No

Safari mask icon

# pwa.msTile

Special settings for Microsoft tiles

If you don’t want to make detailed settings, you can safely ignore it; if you don’t want your site compatable with windows, please set it to false.

# pwa.msTile.image

  • Type: string
  • Required: No

Tile icon

# pwa.msTile.color

  • Type: string
  • Default value: themeColor

The tile color will automatically fall back to themeColor if you don’t set it.

# pwa.popupComponent

  • Type: string
  • Default: 'SWUpdatePopup'

You can fill in the custom pop-up component path.

# pwa.generateSwConfig

Options passed to workbox-build, for details, see Workbox documentation (opens new window)

Tips

We will precache all site related files **/*.{js,css,svg} and font files **/*.{woff,woff2,eot,ttf,otf} for you.

If you set cachePic to true, we will also precache **/*.{png,jpg,jpeg,gif,bmp,webp} files for you.

All the files larger than maxSize or any pictures larger than maxPicSize will be dropped.

# feed Enabled by default

Feed generation settings, no configuration is needed by default.

For details, see Feed plugin config (opens new window)

If you don’t need this feature, please set to false.

# seo Enabled by default

SEO Enhance settings, no configuration is needed by default.

For details, see SEO plugin config (opens new window)

If you don’t need this feature, please set to false.

# sitemap Enabled by default

Sitemap Generator settings, no configuration is needed by default.

For details, see Sitemap plugin config (opens new window)

If you don’t need this feature, please set to false.

# addThis

  • Type: string
  • Required: No

Pubid for AddThis

For details see AddThis Plugin (opens new window)

# copyCode

Options for copy code plugin, set to false to disable this plugin.

By default no more configuration is needed, and for details see Copy Code Plugin Config (opens new window)

# photoSwipe

Options for photo preview plugin, set to false to disable this plugin.

By default no more configuration is needed, and for details see PhotoSwipe Plugin Config (opens new window)

# namedChunks

Options for vuepress-named-chunks, set to false to disable this plugin.

By default, all page chunks will be named with page title, and all the layout chunks will be named by their component name.